/* OTRG design tokens.
   Paper ground, ink text, one accent. The previous scheme was violet plus gold
   on near-black: two accents, both above 80% saturation, joined by a gradient
   and lit by blurred glows. That is the single most common AI-product look of
   the era, and the taste skill names it directly (THE LILA RULE, section 4.2).
   One accent, under 80% saturation, no glow, no two-hue gradient. */
:root{
  /* Ground and ink. Neither is pure: #fff and #000 are their own AI tell. */
  --paper: 38 33% 97%;
  --bg: var(--paper);
  --surface: 0 0% 100%;
  --surface-2: 38 24% 94%;
  --fg: 228 16% 12%;
  --muted-fg: 228 9% 40%;
  --border: 36 16% 87%;
  --border-strong: 33 14% 78%;

  /* The one accent. Persimmon, 76% saturation, dark enough that white label
     text on it clears WCAG AA. Nothing else on the page introduces a hue. */
  --primary: 12 76% 42%;
  /* Lighter than --primary, so it is for borders and hover strokes only. On a
     paper ground a lighter tint loses contrast, so accent TEXT uses --primary
     and never this. */
  --primary-light: 12 72% 52%;
  --primary-ink: 12 68% 28%;
  --secondary: var(--primary);
  --secondary-light: var(--primary-light);
  --grad: linear-gradient(135deg,hsl(12 76% 44%),hsl(6 72% 38%));

  /* Type scale. Seven steps, not twenty-seven. Everything on the page picks
     from this list, so the page has a rhythm instead of an accident. */
  --t-xs: 12.5px;
  --t-sm: 14px;
  --t-base: 16.5px;
  --t-lg: 19px;
  --t-h3: clamp(1.1rem, 1.6vw, 1.35rem);
  --t-h2: clamp(1.75rem, 3.4vw, 2.6rem);
  --t-h1: clamp(2.1rem, 3.9vw, 3.2rem);

  /* Radius scale. Three steps with a rule: pills for anything pressable,
     16px for cards and panels, 8px for small inline chips. */
  --r-pill: 999px;
  --r-card: 16px;
  --r-chip: 8px;
  --radius: var(--r-card);

  /* Motion. Built-in CSS easings are too weak to read as intentional, so the
     curves are explicit. UI stays under 300ms; only the scroll reveal is
     allowed to run longer because it is read, not operated. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --d-press: 140ms;
  --d-ui: 220ms;
  --d-reveal: 620ms;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:80px;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:hsl(var(--fg));
  background:hsl(var(--bg));
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.brand,.stat-num,.price-num,.step-num{font-family:"Manrope",-apple-system,sans-serif;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
a{color:inherit;}
/* height:auto matters. The <img> carries width and height attributes, and
   without this the attribute height is a definite value, so every aspect-ratio
   declared on an image is silently ignored. The hero portrait was rendering at
   its full 1050px instead of the box it was given, which is why the hero was
   so tall on desktop and why the phone showed the top of a head. */
img,svg{display:block;max-width:100%;height:auto;}
::selection{background:hsl(var(--primary)/.45);}
:focus-visible{outline:2px solid hsl(var(--secondary));outline-offset:3px;border-radius:6px;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:hsl(var(--surface-2));color:hsl(var(--fg));
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:700;font-size:14px;text-decoration:none;
}
.skip-link:focus{left:0;}

/* ---- Nav ---- */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:hsl(var(--bg)/.78);backdrop-filter:blur(14px);
  border-bottom:1px solid hsl(var(--border)/.7);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;text-decoration:none;letter-spacing:-0.01em;color:hsl(var(--fg));}
.brand .mark{
  width:32px;height:32px;border-radius:9px;background:var(--grad);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:var(--t-base);flex:0 0 auto;
  box-shadow:0 4px 18px hsl(var(--primary)/.5);
}
nav.links{display:flex;align-items:center;gap:26px;}
nav.links a{font-size:14px;font-weight:600;color:hsl(var(--muted-fg));text-decoration:none;transition:color .2s;}
nav.links a:hover{color:hsl(var(--fg));}

/* ---- Buttons ----
   One filled accent button, one ink button, one outline. Press feedback is a
   0.97 scale over 140ms, per the motion standards: nothing in the real world
   moves without being pushed. The old glow shadows are gone; a shadow here is
   tinted to the accent and tight enough to read as paper lift, not neon. */
.cta-btn,.btn-outline,.btn-light,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:700;font-size:var(--t-sm);line-height:1.2;
  padding:13px 24px;border-radius:var(--r-pill);text-decoration:none;text-align:center;
  cursor:pointer;border:1px solid transparent;
  transition:transform var(--d-press) var(--ease-out),
             box-shadow var(--d-ui) var(--ease-out),
             background var(--d-ui) var(--ease-out),
             border-color var(--d-ui) var(--ease-out),
             color var(--d-ui) var(--ease-out);
}
.cta-btn:active,.btn-outline:active,.btn-light:active,.btn-ghost:active{transform:scale(.97);}

.cta-btn{background:hsl(var(--primary));color:#fff;box-shadow:0 1px 2px hsl(var(--primary-ink)/.28);}
.cta-btn:hover{background:hsl(var(--primary-ink));box-shadow:0 4px 14px hsl(var(--primary-ink)/.22);}

.btn-light{background:hsl(var(--fg));color:hsl(var(--paper));box-shadow:0 1px 2px hsl(var(--fg)/.2);}
.btn-light:hover{background:hsl(228 16% 20%);box-shadow:0 4px 14px hsl(var(--fg)/.18);}

.btn-outline,.btn-ghost{background:transparent;color:hsl(var(--fg));border-color:hsl(var(--border-strong));}
.btn-outline:hover,.btn-ghost:hover{border-color:hsl(var(--fg));background:hsl(var(--fg)/.04);}

.cta-lg{padding:16px 30px;font-size:var(--t-base);}
.nav-cta{padding:12px 22px;font-size:var(--t-sm);min-height:44px;}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;
  padding:11px;min-width:44px;min-height:44px;align-items:center;justify-content:center;
  color:hsl(var(--fg));border-radius:var(--r-chip);}
.menu-toggle svg{width:22px;height:22px;}

/* ---- Hero ----
   Left-aligned and asymmetric, not centered. The stat row that used to sit
   inside the hero has moved to its own band below: the hero is one moment,
   and a pricing teaser inside it is a feature list. */
.hero{position:relative;padding:118px 0 64px;}
.hero-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:56px;align-items:center;}
/* The column is the measure. Constraining the copy block itself squeezed the
   headline into a ransom note, so only the body text carries a max-width. */
.hero-copy{min-width:0;}
.eyebrow{
  display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:hsl(var(--primary));margin:0 0 18px;
}
.hero h1{
  font-size:var(--t-h1);font-weight:800;line-height:1.02;letter-spacing:-0.035em;
  margin:0 0 22px;text-wrap:balance;
}
/* Emphasis inside the headline is the same family in the accent colour, not a
   gradient fill. Gradient text on a large header is on the forbidden list. */
.grad{color:hsl(var(--primary));background:none;-webkit-text-fill-color:currentColor;}
.lede-sub{display:none;}
.lede-small{font-size:var(--t-lg);font-weight:600;color:hsl(var(--fg));margin:0 0 28px;line-height:1.45;max-width:34ch;}
/* The hero's line is a full sentence now, not a one-line kicker. At 34ch it
   broke into five cramped lines beside an empty half of the row. */
.hero-copy .lede-small{max-width:52ch;font-weight:500;color:hsl(var(--muted-fg));}
.lede-body{font-size:var(--t-base);line-height:1.7;color:hsl(var(--muted-fg));margin:0 0 32px;max-width:52ch;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* The portrait. A service business is bought from a person, and this is the
   only real photograph the site owns. */
.hero-figure{position:relative;}
.hero-figure img{
  width:100%;aspect-ratio:4/4.15;object-fit:cover;object-position:50% 26%;
  border-radius:var(--r-card);border:1px solid hsl(var(--border));
  box-shadow:0 18px 50px hsl(228 16% 12%/.10);
  /* The portrait is shot on a saturated yellow ground. Left in colour it is a
     second accent fighting the first, which breaks the one-accent lock. The
     subject is already monochrome, so desaturating drops only the backdrop and
     leaves the page as paper, ink and one red. */
  filter:grayscale(1) contrast(1.04);
}
.hero-figcap{
  position:absolute;left:18px;bottom:18px;right:18px;
  background:hsl(var(--surface)/.94);backdrop-filter:blur(8px);
  border:1px solid hsl(var(--border));border-radius:var(--r-chip);
  padding:11px 14px;font-size:var(--t-xs);line-height:1.45;
}
.hero-figcap b{display:block;font-size:var(--t-sm);}
.hero-figcap span{color:hsl(var(--muted-fg));}

/* ---- Stat band: its own section, directly under the hero ---- */
.stat-band{border-block:1px solid hsl(var(--border));background:hsl(var(--surface-2)/.55);}
/* One column per figure, whatever the count. auto-fit was wrong here: it made
   as many 200px tracks as the container could hold and filled the first two,
   so the band sat squashed against the left with half the row empty. */
.stat-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;padding:34px 0;}
.stat{display:flex;flex-direction:column;gap:4px;}
.stat-num{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-0.03em;color:hsl(var(--fg));}
.stat-label{font-size:var(--t-sm);color:hsl(var(--muted-fg));font-weight:600;}

/* ---- Section shell ---- */
.section{padding:96px 0;position:relative;}
.section-alt{background:hsl(var(--surface)/.55);border-top:1px solid hsl(var(--border)/.55);border-bottom:1px solid hsl(var(--border)/.55);}
.sec-head{max-width:760px;margin:0 0 52px;}
.sec-head h2{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800;line-height:1.12;letter-spacing:-0.025em;margin:0;text-wrap:balance;}
.sec-small{font-size:clamp(16px,2vw,19px);font-weight:700;color:hsl(var(--secondary-light));margin:14px 0 0;}
.sec-intro{font-size:16px;line-height:1.7;color:hsl(var(--muted-fg));margin:16px 0 0;}
.sec-actions{margin-top:40px;}

/* ---- Motion ----
   Four moves, and each one has a job. Nothing here animates because it looks
   good: the built-in CSS easings are too weak to read as deliberate, so every
   curve is the explicit strong ease-out, and everything a visitor operates
   settles under 300ms. Only the scroll reveal runs longer, because it is read
   rather than operated. All of it is switched off under prefers-reduced-motion.

   1. Scroll reveal. Explains structure as the page arrives. */
.js-reveal .reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity var(--d-reveal) var(--ease-out),
             transform var(--d-reveal) var(--ease-out);
}
.js-reveal .reveal.in{opacity:1;transform:none;}

/* 2. Stagger. Items in a group arrive in sequence rather than as one slab, so
      the eye is led along the row. --i is set by the script; 55ms apart is
      enough to read as a sequence and short enough that the last card is not
      still arriving after the reader has got there. */
.js-reveal .reveal[style*="--i"]{transition-delay:calc(var(--i) * 55ms);}

/* 3. Hover feedback on anything that lifts off the page. Tinted to the ink,
      never a coloured glow. */
.card,.slide,.plan,.post-card,.tool{
  transition:transform var(--d-ui) var(--ease-out),
             border-color var(--d-ui) var(--ease-out),
             box-shadow var(--d-ui) var(--ease-out);
}
.card:hover,.post-card:hover,.tool:hover{
  transform:translateY(-3px);
  border-color:hsl(var(--border-strong));
  box-shadow:0 10px 26px hsl(228 16% 12%/.07);
}

/* 4. The hero arrives once, on load. First-time moments are the one place the
      standards allow a little delight; everything else here is restraint. */
@keyframes rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.js-reveal .hero-copy > *,.js-reveal .hero-figure{
  animation:rise 700ms var(--ease-out) both;
}
.js-reveal .hero-copy > *:nth-child(1){animation-delay:60ms;}
.js-reveal .hero-copy > *:nth-child(2){animation-delay:140ms;}
.js-reveal .hero-copy > *:nth-child(3){animation-delay:220ms;}
.js-reveal .hero-figure{animation-delay:180ms;}

/* ---- Testimonial carousel ---- */
.carousel{position:relative;outline:none;}
.carousel.is-live .slide{display:none;}
.carousel.is-live .slide.is-active{display:grid;animation:slidein .45s ease;}
@keyframes slidein{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.slide{
  display:grid;grid-template-columns:210px 1fr;gap:36px;align-items:center;
  background:hsl(var(--surface-2)/.85);border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) + 6px);padding:44px 44px;
  margin-bottom:16px;
}
.carousel.is-live .slide{margin-bottom:0;}
.slide-stat{
  font-family:"Manrope",sans-serif;font-size:clamp(2rem,4.4vw,3.1rem);font-weight:800;line-height:1;
  letter-spacing:-0.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.slide-main h3{font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:800;margin:0 0 14px;letter-spacing:-0.02em;}
.slide blockquote{margin:0 0 20px;font-size:16.5px;line-height:1.75;color:hsl(var(--muted-fg));}
.slide blockquote::before{content:"“";}
.slide blockquote::after{content:"”";}
.slide-who{display:flex;flex-direction:column;gap:2px;}
.who-name{font-weight:700;font-size:15px;}
.who-role{font-size:13.5px;color:hsl(var(--muted-fg));}
.carousel-controls{display:none;align-items:center;justify-content:center;gap:18px;margin-top:26px;}
.carousel.is-live .carousel-controls{display:flex;}
.c-arrow{
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:hsl(var(--surface-2));border:1px solid hsl(var(--border));color:hsl(var(--fg));
  display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s;
}
.c-arrow svg{width:19px;height:19px;}
.c-arrow:hover{border-color:hsl(var(--primary-light));color:hsl(var(--primary));}
.dots{display:flex;gap:9px;}
.dot{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:hsl(var(--border));border:none;transition:background .2s,width .2s;
}
.dot.is-on{background:var(--grad);width:26px;border-radius:999px;}

/* ---- Use-case cards ---- */
.grid-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.card{
  background:hsl(var(--surface)/.9);border:1px solid hsl(var(--border));
  border-radius:var(--radius);padding:30px 28px;transition:border-color .25s, transform .25s, background .25s;
}
.card:hover{border-color:hsl(var(--primary)/.55);transform:translateY(-3px);background:hsl(var(--surface-2)/.9);}
.card-wide{grid-column:1 / -1;}
.icon-wrap{
  width:46px;height:46px;border-radius:12px;margin:0 0 18px;
  background:hsl(var(--primary)/.14);border:1px solid hsl(var(--primary)/.3);
  display:flex;align-items:center;justify-content:center;color:hsl(var(--primary));
}
.icon-wrap svg{width:22px;height:22px;}
.card h3{font-size:19px;font-weight:800;margin:0 0 10px;letter-spacing:-0.01em;}
.card p{font-size:15px;line-height:1.7;color:hsl(var(--muted-fg));margin:0;}

/* ---- Steps ---- */
/* Four across, so the steps read as one sequence rather than four items. The
   gap is sized to hold the chevron that sits in it. */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:38px;}
.steps li{
  position:relative;
  background:hsl(var(--surface-2)/.6);border:1px solid hsl(var(--border));
  border-radius:var(--radius);padding:28px 24px;
}
/* The arrow between steps. Drawn on ::after rather than as markup: it carries no
   information the ordered list doesn't already give a screen reader, so it stays
   out of the accessibility tree. No overflow:hidden on the card, or it clips. */
.steps li::after{
  content:"";position:absolute;top:50%;left:calc(100% + 19px);
  width:11px;height:11px;
  border-top:2.5px solid hsl(var(--secondary)/.9);
  border-right:2.5px solid hsl(var(--secondary)/.9);
  transform:translate(-50%,-50%) rotate(45deg);
  pointer-events:none;
}
.steps li:last-child::after{content:none;}
.step-num{
  position:absolute;top:8px;right:16px;font-size:64px;font-weight:800;line-height:1;
  color:hsl(var(--primary)/.18);pointer-events:none;
}
.steps h3{font-size:19px;font-weight:800;margin:0 0 10px;position:relative;letter-spacing:-0.01em;padding-right:46px;}
.steps p{font-size:15px;line-height:1.7;color:hsl(var(--muted-fg));margin:0;position:relative;}

/* ---- Integrations ---- */
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.tool{
  background:hsl(var(--surface)/.9);border:1px solid hsl(var(--border));
  border-radius:var(--radius);padding:26px 24px;transition:border-color .25s,transform .25s;
}
.tool:hover{border-color:hsl(var(--secondary)/.5);transform:translateY(-3px);}
.tool-glyph{
  width:42px;height:42px;border-radius:11px;margin:0 0 16px;
  background:hsl(var(--secondary)/.12);border:1px solid hsl(var(--secondary)/.28);
  display:flex;align-items:center;justify-content:center;color:hsl(var(--secondary-light));
}
.tool-glyph svg{width:21px;height:21px;}
.tool h3{font-size:17px;font-weight:800;margin:0 0 8px;}
.tool p{font-size:14.5px;line-height:1.65;color:hsl(var(--muted-fg));margin:0;}
/* Flat, not a gradient: both stops were accent tints anyway, and a flat fill
   is one the contrast sweep can actually measure. */
.tool-more{background:hsl(12 60% 96%);border-color:hsl(var(--primary)/.3);}
.tool-more h3{font-size:18px;}

/* ---- About ---- */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;}
.about-copy h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;line-height:1.15;letter-spacing:-0.025em;margin:0;text-wrap:balance;}
.about-copy .btn-outline{margin-top:8px;}
.photo-frame{
  position:relative;aspect-ratio:1;width:100%;max-width:420px;margin-left:auto;
  border-radius:var(--r-card);overflow:hidden;
  border:1px solid hsl(var(--border));
  background:hsl(var(--surface-2));
  box-shadow:0 18px 50px hsl(228 16% 12%/.10);
}
/* Same treatment as the hero portrait, and for the same reason: the shot is on
   a saturated yellow ground, and left in colour it is a second accent. */
.photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:grayscale(1) contrast(1.04);}
.photo-fallback{
  display:none;position:absolute;inset:0;align-items:center;justify-content:center;
  font-family:"Manrope",sans-serif;font-size:96px;font-weight:800;color:#fff;letter-spacing:.02em;
}
.photo-frame.no-photo{background:var(--grad);}
.photo-frame.no-photo .photo-fallback{display:flex;}

/* ---- Prose blocks ---- */
.prose{font-size:15.5px;line-height:1.75;color:hsl(var(--muted-fg));}
.prose p{margin:0 0 14px;}
.prose p:last-child{margin-bottom:0;}
.prose ul{margin:0 0 14px;padding-left:20px;}
.prose li{margin-bottom:7px;}
.prose strong{color:hsl(var(--fg));}

/* ---- Pricing ---- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;}
.price-box{
  display:flex;flex-direction:column;position:relative;height:100%;
  /* A solid colour, not a translucent one. The panel has to read as a raised
     card on paper, and it is also what the contrast check measures against. */
  background:hsl(var(--surface));border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) + 4px);padding:34px 30px;
  box-shadow:0 14px 40px hsl(228 16% 12%/.07);
}
.price-featured{
  /* Unused while there is one plan, kept in case a second returns. On paper the
     emphasis is a stronger edge, not a coloured wash and a coloured shadow. */
  border-color:hsl(var(--primary)/.55);
  background:hsl(var(--surface));
  box-shadow:0 18px 46px hsl(228 16% 12%/.10);
}
.price-badge{
  position:absolute;top:-13px;left:30px;
  background:var(--grad);color:#fff;font-size:var(--t-xs);font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:6px 14px;border-radius:999px;
}
.price-box h3{font-size:18px;font-weight:800;margin:0 0 14px;letter-spacing:-0.01em;}
.price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 16px;}
.price-num{font-size:clamp(2.1rem,4vw,2.9rem);font-weight:800;letter-spacing:-0.03em;line-height:1;}
.price-word{font-size:clamp(1.7rem,3vw,2.2rem);}
.price-unit{font-size:13.5px;font-weight:600;color:hsl(var(--muted-fg));}
.price-body{font-size:15px;line-height:1.7;color:hsl(var(--muted-fg));margin:0 0 22px;}
.price-list-head{
  font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:hsl(var(--fg)/.75);margin:0 0 12px;padding-top:18px;border-top:1px solid hsl(var(--border));
}
.price-list{margin:0 0 26px;}
.price-list ul{list-style:none;margin:0;padding:0;}
.price-list li{
  position:relative;padding-left:26px;margin-bottom:10px;
  font-size:14.5px;line-height:1.6;color:hsl(var(--muted-fg));
}
.price-list li::before{
  content:"";position:absolute;left:0;top:6px;width:15px;height:9px;
  border-left:2px solid hsl(var(--secondary));border-bottom:2px solid hsl(var(--secondary));
  transform:rotate(-45deg);border-radius:1px;
}
.price-cta{width:100%;margin-top:auto;}
/* Two real choices, so they share the row rather than being squeezed into thirds. */
.price-grid-2{grid-template-columns:repeat(2,1fr);max-width:840px;margin:0 auto;}
/* One plan, so one column, held to a readable width and centred. A single card
   stretched across the full grid reads as a form, not a price. */
.price-grid-1{grid-template-columns:1fr;max-width:520px;margin:0 auto;}


/* ---- Cost transparency strip ---- */
.costs{
  margin-top:26px;padding:38px 36px;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) + 4px);
  background:hsl(var(--surface-2)/.55);
}
.costs-head{max-width:640px;margin:0 0 30px;}
.costs-head h3{font-size:clamp(1.2rem,2.4vw,1.55rem);font-weight:800;margin:0 0 8px;letter-spacing:-0.02em;}
.costs-head p{font-size:15px;color:hsl(var(--muted-fg));margin:0;}
/* Fits however many cards the copy has, rather than assuming three. */
.costs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;}
.cost-glyph{
  width:38px;height:38px;border-radius:10px;margin:0 0 14px;
  background:hsl(var(--primary)/.14);border:1px solid hsl(var(--primary)/.3);
  display:flex;align-items:center;justify-content:center;color:hsl(var(--primary));
}
.cost-glyph svg{width:19px;height:19px;}
.cost h4{font-size:15.5px;font-weight:800;margin:0 0 8px;}
.cost p{font-size:14.5px;line-height:1.7;color:hsl(var(--muted-fg));margin:0;}

/* ---- FAQ ---- */
.faq{max-width:840px;}
.faq details{
  border:1px solid hsl(var(--border));border-radius:var(--radius);
  background:hsl(var(--surface)/.7);margin-bottom:12px;transition:border-color .2s;
}
.faq details[open]{border-color:hsl(var(--primary)/.5);background:hsl(var(--surface-2)/.8);}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 56px 20px 24px;position:relative;
  font-family:"Manrope",sans-serif;font-size:16.5px;font-weight:700;letter-spacing:-0.01em;
}
.faq summary::-webkit-details-marker{display:none;}
/* The question is an <h3> so crawlers see the heading, but it must look and sit
   exactly as it did when it was bare text in the summary. */
.faq summary h3{font:inherit;margin:0;letter-spacing:inherit;color:inherit;display:inline;}
.faq summary::after{
  content:"";position:absolute;right:26px;top:26px;width:9px;height:9px;
  border-right:2px solid hsl(var(--muted-fg));border-bottom:2px solid hsl(var(--muted-fg));
  transform:rotate(45deg);transition:transform .25s;
}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:hsl(var(--primary-light));}
.faq summary:hover{color:hsl(var(--primary));}
.faq .prose{padding:0 26px 24px;}

/* ---- Closing CTA band ---- */
.cta-band{
  position:relative;overflow:hidden;text-align:center;
  /* This kept a hardcoded violet-black gradient from the dark design. On a
     paper page it rendered as a near-black box with near-black text inside it:
     unreadable, and a theme inversion mid-scroll. Same fault as the demo strip,
     missed because a gradient reports no background colour and the contrast
     sweep was skipping painted elements entirely. */
  border:1px solid hsl(var(--primary)/.28);border-radius:calc(var(--radius) + 10px);
  background:hsl(12 60% 96%);
  padding:76px 32px;
}
.cta-band > *{position:relative;z-index:1;}
.cta-band h2{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:800;line-height:1.12;letter-spacing:-0.025em;margin:0 0 14px;text-wrap:balance;}
.band-small{font-size:clamp(16px,2vw,19px);font-weight:700;color:hsl(var(--secondary-light));margin:0 0 20px;}
.band-body{font-size:16px;line-height:1.7;color:hsl(var(--muted-fg));max-width:640px;margin:0 auto 30px;}
.band-alt{font-size:14px;color:hsl(var(--muted-fg));margin:28px 0 12px;}

/* ---- Footer ---- */
footer{border-top:1px solid hsl(var(--border));padding:64px 0 34px;background:hsl(var(--surface)/.5);}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;}
.footer-grid .desc{font-size:14px;line-height:1.7;color:hsl(var(--muted-fg));margin:16px 0 0;max-width:320px;}
.footer-grid .desc a{color:hsl(var(--primary));text-decoration:none;}
.footer-grid .desc a:hover{text-decoration:underline;}
.footer-grid h4{font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:hsl(var(--fg)/.7);margin:0 0 16px;}
.footer-grid ul{list-style:none;margin:0;padding:0;}
.footer-grid li{margin-bottom:11px;}
.footer-grid li a{font-size:14.5px;color:hsl(var(--muted-fg));text-decoration:none;transition:color .2s;}
.footer-grid li a:hover{color:hsl(var(--fg));}
.partner-strip{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:48px;padding-top:24px;border-top:1px solid hsl(var(--border));
}
.partner-strip p{font-size:13.5px;color:hsl(var(--muted-fg));margin:0;}
.partner-link{
  display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;
  color:hsl(var(--muted-fg));text-decoration:none;
  border:1px solid hsl(var(--border));border-radius:999px;padding:7px 15px;
  transition:border-color .2s,color .2s;
}
.partner-link:hover{border-color:hsl(var(--primary-light));color:hsl(var(--primary));}
.partner-link .mark{
  width:22px;height:22px;border-radius:var(--r-chip);font-size:var(--t-xs);background:var(--grad);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;
}

/* ---- Legal pages (privacy / terms / cookies share this stylesheet) ---- */
.legal-hero{padding:150px 0 50px;}
.legal-hero h1{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;letter-spacing:-0.02em;margin:0 0 12px;}
.legal-hero p{font-size:15px;color:hsl(var(--muted-fg));margin:0;}
.legal-body{padding:10px 0 90px;}
.legal-prose{max-width:760px;margin:0 auto;font-size:16px;line-height:1.75;color:hsl(var(--muted-fg));}
.legal-prose h2{font-size:22px;font-weight:800;color:hsl(var(--primary));margin:42px 0 14px;letter-spacing:-0.01em;}
.legal-prose h2:first-child{margin-top:0;}
.legal-prose h3{font-size:17px;font-weight:700;margin:26px 0 10px;color:hsl(var(--fg));}
.legal-prose p{margin:0 0 16px;}
.legal-prose ul,.legal-prose ol{margin:0 0 16px;padding-left:22px;}
.legal-prose li{margin-bottom:8px;}
.legal-prose a{color:hsl(var(--primary));text-decoration:underline;}
.legal-prose strong{color:hsl(var(--fg));}
.legal-note{
  background:hsl(var(--primary)/.12);border:1px solid hsl(var(--primary)/.3);
  border-radius:12px;padding:16px 20px;font-size:14px;color:hsl(var(--muted-fg));margin:0 0 32px;
}
.legal-toc{
  border:1px solid hsl(var(--border));border-radius:12px;padding:20px 24px;margin:0 0 40px;
  font-size:14.5px;background:hsl(var(--surface)/.6);
}
.legal-toc p{font-weight:700;margin:0 0 10px;color:hsl(var(--fg));}
.legal-toc ol{margin:0;padding-left:20px;}
.legal-toc a{text-decoration:none;color:hsl(var(--muted-fg));}
.legal-toc a:hover{color:hsl(var(--primary));}

/* ---- Responsive ---- */
@media (max-width:960px){
  .about-grid{grid-template-columns:1fr;gap:40px;}
  /* The hero split has to be declared here too. Without it the two columns just
     got narrower instead of stacking: no overflow, so the automated check was
     happy, and a 190px headline next to a 108px portrait on a phone. */
  .hero-grid{grid-template-columns:1fr;gap:36px;}
  .hero{padding:104px 0 52px;}
  .hero-figure{max-width:340px;}
  /* A portrait source in a landscape box crops from the top, so the phone was
     showing the top of his head. Pushed down to land on the face. */
  .hero-figure img{aspect-ratio:4/3.6;object-position:50% 34%;}
  .photo-frame{margin:0 auto;max-width:340px;}
  .tool-grid{grid-template-columns:repeat(2,1fr);}
  .price-grid{grid-template-columns:1fr;}
  .price-featured{order:-1;}
  .costs-grid{grid-template-columns:1fr;gap:24px;}
}
@media (max-width:860px){
  nav.links{
    display:none;position:absolute;top:68px;left:0;right:0;
    background:hsl(var(--bg));border-bottom:1px solid hsl(var(--border));
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 20px;
  }
  nav.links.open{display:flex;}
  nav.links a{padding:13px 0;width:100%;border-bottom:1px solid hsl(var(--border)/.6);}
  .nav-cta{display:none;}
  .menu-toggle{display:flex;}
  .hero{padding:130px 0 72px;}
  .section{padding:72px 0;}
  .grid-cards{grid-template-columns:1fr;}
  .slide{grid-template-columns:1fr;gap:18px;padding:32px 26px;text-align:left;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .cta-band{padding:56px 24px;}
}
/* The longest CTA label on the page is eight words. At 320px it wraps even at
   full width, so the label steps down one size there rather than breaking. The
   real fix is a shorter label, which is a copy decision, not a CSS one. */
@media (max-width:360px){
  .cta-lg{font-size:var(--t-sm);padding:15px 18px;}
}

@media (max-width:560px){
  .stat-row{grid-auto-flow:row;gap:18px;padding:26px 0;}
  /* Every large CTA goes full width here. The long labels wrap to two lines in
     a pill otherwise, and a wrapped button reads as broken. */
  .cta-lg,.use-cta,.cta-band .btn-light,.cta-band .btn-ghost{width:100%;}
}

@media (max-width:640px){
  .container{padding:0 18px;}
  .stat-row{grid-template-columns:1fr;gap:22px;padding:24px 16px;}
  .tool-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:30px;}
  .costs{padding:28px 22px;}
  .hero-actions .cta-lg,.cta-band .btn-light,.cta-band .btn-ghost{width:100%;}
  .partner-strip{justify-content:flex-start;}
}

/* ---- Motion preferences ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .js-reveal .reveal{opacity:1;transform:none;}
}

/* ---- Unfinished editorial marker (a [BRACKETED NOTE] left in the copy) ---- */
.editor-note{
  display:block;font-family:"Manrope",sans-serif;font-size:13.5px;font-weight:700;
  letter-spacing:.03em;color:hsl(var(--secondary-light));
  background:hsl(var(--secondary)/.1);border:1px dashed hsl(var(--secondary)/.5);
  border-radius:10px;padding:12px 16px;margin:0 0 14px;
}

/* ---- Process steps: three tiers ----
   Four across while there is room for it. In the 2x2 middle tier the arrow after
   step 2 is dropped rather than bent: a wrapped row has no honest arrow between
   its end and the start of the next one, which is why the arrows went missing in
   the first place. Stacked, they simply turn to point down. */
@media (max-width:1080px){
  .steps{grid-template-columns:repeat(2,1fr);}
  .steps li:nth-child(2)::after{content:none;}
}
@media (max-width:700px){
  .steps{grid-template-columns:1fr;gap:34px;}
  .steps li:nth-child(2)::after{content:"";}
  .steps li::after{top:calc(100% + 17px);left:50%;transform:translate(-50%,-50%) rotate(135deg);}
  .steps li:last-child::after{content:none;}
}

/* A results claim needs its qualifier visible, but not competing with the story
   it qualifies. Smaller and dimmer, still above the WCAG AA floor. */
.micro-note{font-size:13px;line-height:1.6;color:hsl(var(--muted-fg)/.85);margin:16px 0 0;max-width:58ch;}

/* ---- The demo strip ----
   One agent, one job, one place on the page. It sits between the use cases and the
   process, so it is deliberately shorter than a section: no eyebrow, no heading
   stack, just the claim and the way to check it. Tighter padding than .section keeps
   it reading as a break in the page rather than another thing to scroll through. */
.section-demo{padding:0;}
.demo-strip{
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  /* This block kept a hardcoded violet-black gradient from the dark design, so
     on a paper page it inverted mid-scroll and its dark heading text landed on
     a dark panel: unreadable, and a theme-lock break. It is now a tinted panel
     in the page's own accent, which is how a break in the page should read. */
  border:1px solid hsl(var(--primary)/.28);border-radius:calc(var(--radius) + 6px);
  background:hsl(12 60% 96%);
  padding:40px 44px;
}
.demo-copy{max-width:62ch;}
.demo-copy h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;line-height:1.15;letter-spacing:-0.02em;margin:0;}
.demo-copy p{font-size:16px;line-height:1.7;color:hsl(var(--muted-fg));margin:12px 0 0;}
/* The button must not shrink into two words on one line while the copy takes the room. */
.demo-cta{flex:0 0 auto;}

@media (max-width:860px){
  .demo-strip{flex-direction:column;align-items:flex-start;gap:26px;padding:32px 26px;}
  .demo-cta{width:100%;text-align:center;}
}

/* ---- Legal pages: the fact lists in the Terms and the DPA ----
   Label and value pairs (company details, processing details). A definition list
   rather than a table: there is no second column of data, only a value per label,
   and a table would force a screen reader to announce row and column positions
   that carry no meaning. */
.legal-prose .legal-facts{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:20px 0;}
.legal-prose .legal-facts dt{font-weight:700;color:hsl(var(--fg));}
.legal-prose .legal-facts dd{margin:0;color:hsl(var(--muted-fg));}
/* A value the source document left blank. Deliberately loud: a legal page must not
   ship with a silent gap where a URL or a retention period belongs. */
.legal-prose mark.todo{
  background:hsl(0 70% 45% / .22);color:hsl(var(--fg));
  padding:1px 7px;border-radius:5px;border:1px solid hsl(0 70% 55% / .55);font-weight:700;
}
@media (max-width:620px){
  .legal-prose .legal-facts{grid-template-columns:1fr;gap:2px;}
  .legal-prose .legal-facts dd{margin:0 0 12px;}
}

/* ---- Blog ----
   A reading column, not a marketing section: one measure, generous leading, and
   nothing competing with the text. 68ch is where a line stops being comfortable. */
.post-head{padding-top:70px;}
/* --secondary-light aliases --primary-light, which is a borders-and-hover
   colour: it reads well on the near-black the site used to have and only
   3.77 on paper. Accent TEXT is --primary. */
.back-link{display:inline-block;font-size:14px;font-weight:700;color:hsl(var(--primary));text-decoration:none;margin:0 0 22px;}
.back-link::before{content:"\2190";margin-right:8px;}
.back-link:hover{text-decoration:underline;}
.post-head h1{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:800;line-height:1.1;letter-spacing:-0.028em;margin:0;max-width:20ch;text-wrap:balance;}
.post-dek{font-size:clamp(17px,2.1vw,20px);line-height:1.6;color:hsl(var(--muted-fg));margin:20px 0 0;max-width:62ch;}

.byline{display:flex;align-items:center;gap:14px;margin:30px 0 34px;}
.byline img{width:48px;height:48px;border-radius:50%;border:2px solid hsl(var(--secondary)/.75);object-fit:cover;}
.byline-name{display:block;font-weight:700;font-size:15px;}
.byline-meta{display:block;font-size:13.5px;color:hsl(var(--muted-fg));margin-top:2px;}

.post-hero{display:block;width:100%;height:auto;border-radius:calc(var(--radius) + 6px);border:1px solid hsl(var(--border));margin:0 0 12px;}

.post-body{max-width:68ch;margin:44px 0 96px;font-size:17px;line-height:1.75;}
.post-body p{margin:0 0 22px;color:hsl(var(--fg)/.9);}
.post-body h2{font-size:clamp(1.4rem,2.8vw,1.9rem);font-weight:800;line-height:1.2;letter-spacing:-0.02em;margin:46px 0 16px;scroll-margin-top:96px;}
.post-body h3{font-size:clamp(1.1rem,2vw,1.3rem);font-weight:700;margin:32px 0 12px;color:hsl(var(--secondary-light));}
.post-body ul{margin:0 0 22px;padding-left:22px;}
.post-body li{margin:0 0 10px;color:hsl(var(--fg)/.9);}
.post-body strong{color:hsl(var(--fg));}
/* The one line the whole piece turns on, given room to be read on its own. */
.post-body .pull{
  margin:34px 0;padding:24px 28px;border-left:3px solid hsl(var(--secondary));
  background:hsl(var(--surface-2)/.7);border-radius:0 var(--radius) var(--radius) 0;
  font-size:clamp(18px,2.2vw,21px);line-height:1.5;font-weight:700;color:hsl(var(--fg));
}
.post-cta{
  margin:48px 0 0;padding:34px 32px;text-align:center;
  /* The same leftover gradient, at the foot of the blog post. */
  border:1px solid hsl(var(--primary)/.28);border-radius:calc(var(--radius) + 6px);
  background:hsl(12 60% 96%);
}
.post-cta p{font-size:18px;font-weight:700;margin:0 0 20px;color:hsl(var(--fg));}

/* ---- Blog index ---- */
.post-list{display:grid;gap:26px;max-width:860px;}
.post-card{
  display:block;text-decoration:none;color:inherit;overflow:hidden;
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) + 4px);
  background:hsl(var(--surface)/.9);transition:border-color .25s, transform .25s;
}
.post-card:hover{border-color:hsl(var(--primary)/.6);transform:translateY(-3px);}
.post-card img{display:block;width:100%;height:auto;}
.post-card-body{padding:28px 30px 32px;}
.post-card-meta{display:block;font-size:13px;color:hsl(var(--muted-fg));margin:0 0 10px;}
.post-card h2{font-size:clamp(1.3rem,2.6vw,1.75rem);font-weight:800;line-height:1.2;letter-spacing:-0.02em;margin:0 0 12px;}
.post-card p{font-size:15.5px;line-height:1.65;color:hsl(var(--muted-fg));margin:0 0 18px;}
.post-card-more{font-size:var(--t-sm);font-weight:700;color:hsl(var(--primary));}
.post-card-more::after{content:"\2192";margin-left:7px;}

@media (max-width:620px){
  .post-head{padding-top:48px;}
  .post-body{font-size:16.5px;margin:32px 0 72px;}
  .post-cta{padding:26px 20px;}
  .post-card-body{padding:22px 20px 26px;}
}

/* ---------------------------------------------------------- booking page
   book.html: the hero, the Calendly embed and the two ways out for anyone
   who would rather not surrender a calendar slot. */
.book-hero{padding:150px 0 44px;}
/* Same measure as the calendar card below, so the copy and the embed share
   one left edge instead of the text stopping halfway across an empty row. */
.book-hero .container{max-width:900px;}
.book-hero h1{font-size:clamp(2rem,4.2vw,3rem);font-weight:800;letter-spacing:-0.02em;
  margin:10px 0 18px;max-width:18ch;}
.book-lede{font-size:var(--t-lg);line-height:1.6;color:hsl(var(--muted-fg));
  margin:0 0 26px;max-width:62ch;}
.book-points{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px;}
.book-points li{position:relative;padding-left:26px;font-size:var(--t-sm);
  color:hsl(var(--muted-fg));}
.book-points li::before{content:"";position:absolute;left:0;top:50%;
  width:15px;height:8px;margin-top:-6px;border-left:2.5px solid hsl(var(--primary));
  border-bottom:2.5px solid hsl(var(--primary));transform:rotate(-45deg);border-radius:1px;}

/* The embed arrives as a bare iframe. Seating it on a card keeps it from
   reading as a hole punched in the page. */
.book-cal{padding-top:8px;}
.book-cal .container{max-width:900px;}
/* Calendly's own snippet ships min-width:320px inline, which overflows a
   padded container on a 320px screen. The widget is fluid, so width:100% with
   no floor gives the same result without pushing the page sideways. */
.calendly-inline-widget{width:100%;min-width:0;height:760px;
  background:hsl(var(--surface));border:1px solid hsl(var(--border));
  border-radius:var(--r-card);overflow:hidden;}
.book-fallback{text-align:center;color:hsl(var(--muted-fg));font-size:var(--t-sm);
  padding:40px 20px;margin:0;}
.book-fallback a{color:hsl(var(--primary));text-decoration:underline;}

.book-alt{max-width:640px;margin:0 auto;text-align:center;}
.book-alt h2{font-size:var(--t-h3);font-weight:800;margin:0 0 12px;letter-spacing:-0.01em;}
.book-alt p{color:hsl(var(--muted-fg));line-height:1.65;margin:0 0 24px;}
.book-alt-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}

@media (max-width:640px){
  .book-hero{padding:120px 0 32px;}
  .book-points{flex-direction:column;gap:10px;}
  .book-alt-actions{flex-direction:column;}
  .book-alt-actions>*{width:100%;}
  .calendly-inline-widget{height:1000px !important;}
}

/* The heading that separates the Terms' own contents list from Schedule 1.
   It carried an inline style attribute, which the CSP refuses, so on the live
   site the gap was silently never applied. */
.legal-toc .toc-break{margin-top:18px;}