@charset "UTF-8";
/* ============================================================
   Carebric — light clinical theme, Carebric design-system tokens
   ============================================================ */

:root{
  /* palette - mapped from the Carebric app theme (light only) */
  --ink:#1f4230;          /* foreground        hsl(150 36% 19%) */
  --ink-2:#3c5a50;        /* foreground / muted midpoint        */
  --muted:#5c7070;        /* muted-foreground  hsl(180 10% 40%) */
  --line:#e3e8e8;         /* border / input    hsl(180 10% 90%) */
  --line-soft:#f1f4f4;    /* muted / accent    hsl(180 10% 95%) */
  --bg:#ffffff;           /* card / popover                     */
  --bg-tint:#f7f8f8;      /* background        hsl(180 10% 97%) */
  --brand:#305050;        /* primary           hsl(180 25% 25%) */
  --brand-deep:#264040;   /* primary-hover     hsl(180 25% 20%) */
  --brand-2:#577575;      /* secondary         hsl(180 15% 40%) */
  --brand-soft:#eaeeee;   /* primary at 10% on white            */
  --accent:#0967b3;       /* status-scheduled  hsl(207 90% 37%) */
  --accent-soft:#e6f0f7;  /* accent at 10% on white             */
  --amber:#f59f0a;        /* warning           hsl(38 92% 50%)  */
  --amber-ink:#895906;    /* warning-ink       hsl(38 92% 28%)  */
  --green:#19703e;        /* success           hsl(145 63% 27%) */
  --red:#c70a00;          /* destructive       hsl(3 100% 39%)  */

  /* type */
  --sans:"Jost",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --heading:"Instrument Serif",Georgia,"Times New Roman",serif;

  /* the green wash shared by the hero, the pricing section and login */
  --green-wash:
    radial-gradient(46rem 32rem at 84% 6%, rgba(25,112,62,.22), transparent 62%),
    radial-gradient(38rem 28rem at 6% 96%, rgba(48,80,80,.16), transparent 60%),
    linear-gradient(158deg,#ecf6f0 0%,#d8ecdf 52%,#e7f4ec 100%);

  /* shape - 8px small controls, 12px controls, 16px surfaces */
  --r-sm:8px;
  --r:12px;
  --r-lg:16px;
  --r-xl:16px;

  /* frosted glass - kept for the pricing panes and the sticky nav */
  --glass:rgba(255,255,255,.5);
  --glass-2:rgba(255,255,255,.68);
  --glass-line:rgba(255,255,255,.65);
  --blur:saturate(160%) blur(20px);

  /* teal-tinted elevation: soft / medium / strong */
  --shadow-s:0 2px 8px -2px hsl(180 25% 25% / .08);
  --shadow-m:0 4px 16px -4px hsl(180 25% 25% / .12);
  --shadow-l:0 8px 24px -6px hsl(180 25% 25% / .16);

  --ease:cubic-bezier(.22,1,.36,1);
  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:0;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(58rem 40rem at 10% -8%, rgba(48,80,80,.20), transparent 60%) fixed,
    var(--bg-tint);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-family:var(--heading);line-height:1.14;letter-spacing:-.015em;font-weight:400}
h1,h2{font-weight:400}
p{margin:0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm)}

.wrap{width:min(1160px,100% - 48px);margin-inline:auto}
.wrap--narrow{width:min(780px,100% - 48px)}

/* ---------------- nav ---------------- */
/* bare at the top of the page; once scrolling starts a frosted capsule
   fades in behind the nav's contents rather than a full-width bar */
.nav{position:fixed;top:0;left:0;right:0;z-index:50}
.nav__inner{position:relative;height:var(--nav-h);display:flex;align-items:center;gap:28px}
.nav__inner::before{
  content:"";position:absolute;inset:6px -16px;z-index:-1;pointer-events:none;
  border-radius:999px;border:1px solid var(--glass-line);
  background:var(--glass-2);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow-m);
  opacity:0;transition:opacity .35s var(--ease);
}
.nav.is-stuck .nav__inner::before{opacity:1}

.logo{display:inline-flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.02em;font-size:1.06rem}
/* the mark is green artwork on transparency, so it sits bare - a filled
   tile behind it would be green on green */
.logo__mark{
  width:32px;height:32px;flex:none;display:grid;place-items:center;
}
.logo__mark img{width:100%;height:100%;object-fit:contain}
/* the header mark runs larger - the artwork carries its own padding, so it
   reads smaller than its box - and the wordmark scales up to match it */
.nav .logo__mark{width:44px;height:44px}
.nav .logo{font-size:1.35rem}

.nav__links{display:flex;align-items:center;gap:4px;margin-left:8px;flex:1 1 auto}
.nav__links > a{
  position:relative;padding:8px 13px;border-radius:var(--r-sm);font-size:.94rem;color:var(--muted);
  transition:color .2s var(--ease),background .2s var(--ease);
}
.nav__links > a:hover{color:var(--ink);background:var(--line-soft)}
.nav__links > a.is-current{color:var(--ink)}

.nav__actions{margin-left:auto;display:flex;align-items:center;gap:8px}

/* ---------------- buttons ---------------- */
.btn{
  --btn-bg:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:9px 20px;border-radius:999px;font-size:.94rem;font-weight:500;letter-spacing:-.01em;
  /* every variant carries the same 1px edge so bordered and unbordered
     buttons measure identically - the outlined ones just colour theirs */
  border:1px solid transparent;
  background:var(--btn-bg);white-space:nowrap;
  transition:background .2s var(--ease),box-shadow .3s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.btn--lg{min-height:44px;padding:12px 32px;font-size:1rem}
.btn--full{width:100%}

.btn--primary{--btn-bg:var(--brand);color:#fff;box-shadow:var(--shadow-s)}
/* hover lightens the fill. It used to lay an opaque panel over the button,
   which painted on top of the label - these buttons hold bare text, so
   nothing lifted it clear and the wording went dark. */
.btn--primary:hover{--btn-bg:var(--brand-2);box-shadow:var(--shadow-m)}


.btn--outline{
  border:1px solid var(--line);color:var(--ink);
}
.btn--outline:hover{border-color:var(--brand);background:var(--line-soft)}

.btn--quiet{
  color:var(--ink);border:1px solid var(--line);background:#fff;
}
.btn--quiet:hover{border-color:var(--brand);color:var(--brand-deep)}

/* hover a demo CTA and the fill holds steady - a green runs left to right
   through the label instead. Rising background-position shifts an oversized
   background leftwards, so the sweep counts down to travel rightwards. */
.btn--primary[data-demo]:hover{--btn-bg:var(--brand)}
.btn--primary[data-demo]:hover .btn__t,
.btn--primary[data-demo]:focus-visible .btn__t{
  /* the band carries two colours now - green leads, yellow follows */
  background-image:linear-gradient(90deg,
    #fff 0%,#fff 39%,#ffd97a 47%,#8fe3b8 56%,#fff 64%,#fff 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:ctaTextSweep 1.5s ease-in-out infinite;
}
@keyframes ctaTextSweep{
  from{background-position:100% 0}
  to{background-position:0% 0}
}
@media (prefers-reduced-motion:reduce){
  .btn--primary[data-demo]:hover .btn__t,
  .btn--primary[data-demo]:focus-visible .btn__t{
    animation:none;background-image:none;
    -webkit-text-fill-color:currentColor;color:inherit;
  }
}
/* burger */
.burger{display:none;width:40px;height:40px;border-radius:999px;position:relative}
.burger span{
  position:absolute;left:11px;width:18px;height:1.7px;background:var(--ink);border-radius:2px;
  transition:transform .35s var(--ease),opacity .2s var(--ease);
}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
.burger.is-open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.is-open span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ---------------- hero ---------------- */
.hero{position:relative;padding:clamp(48px,7vw,88px) 0 0}
/* the green sits on its own layer so it can fade out on the same scroll
   signal the hero copy uses - by the time the Features edge arrives the two
   sections share a colour, so there is no hard seam to scroll across */
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* opacity changes every scroll frame - keep it on its own layer so the
     three-layer gradient is not repainted each time */
  will-change:opacity;
  background:var(--green-wash);
  opacity:calc(1 - var(--f,0));
}
.hero__inner{
  position:relative;z-index:1;text-align:center;
  /* nudge the hero block below the floating header */
  margin-top:clamp(28px,10vh,96px);
  padding-bottom:clamp(40px,6vw,72px);
}
.hero__text{
  opacity:calc(1 - var(--f,0));
  transform:translateY(calc(var(--f,0) * -20px));
  will-change:opacity,transform;
}
.hero.is-cleared .hero__text{pointer-events:none}


h1{
  margin:0 auto;
  /* sized so the headline holds one line: ~21.7px of width per 1px of type */
  font-size:clamp(1.35rem,calc(4.5vw - 2.5px),3.25rem);
  letter-spacing:-.02em;line-height:1.1;font-weight:400;
  white-space:nowrap;
}

.lede{margin:0 auto;font-size:clamp(1.02rem,1.4vw,1.14rem);color:var(--ink-2);max-width:46ch}
/* equal columns so both hero CTAs share the width of the wider label,
   rather than each shrinking to its own text */
.hero__cta{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;margin-top:28px}

/* ---------------- hero card deck ---------------- */
.deck{
  /* --c is driven by scroll: 0 = fanned out, 1 = collapsed into one stack */
  --c:0;
  --card-w:clamp(118px,17.5vw,186px);
  --card-m:clamp(-30px,-2.2vw,-14px);
  --step:calc(var(--card-w) + 2 * var(--card-m));
  position:relative;z-index:20;display:flex;justify-content:center;align-items:flex-end;
  width:fit-content;max-width:100%;
  margin:clamp(30px,4.5vw,52px) auto clamp(28px,4vw,44px);
  padding:26px 0 38px;
}
.deck__card{
  position:relative;margin:0 var(--card-m);
  width:var(--card-w);aspect-ratio:10/13;
  border:4px solid #fff;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-l);
  /* slide back to the middle, then unwind the fan, as --c goes 0 -> 1 */
  transform:
    translateX(calc(var(--i) * var(--step) * -1 * var(--c)))
    rotate(calc(var(--rot) * (1 - var(--c))))
    translateY(calc(var(--y) * (1 - var(--c)) - var(--lift, 0px)))
    scale(var(--s, 1));
  transition:transform .3s var(--ease),box-shadow .5s var(--ease);
  /* no will-change here on purpose: pinning each card to its own composited
     layer makes the browser stretch a texture rasterised at the card's small
     hero size when the deck scales up, which is what blurred the SVG text
     in the Features card. Without it the artwork re-rasterises at the
     scale it is actually drawn at. */
}
.deck.is-measuring .deck__card{transform:none !important;transition:none !important}
/* object-fit must not touch the inline SVGs: with no intrinsic size they
   get treated as 300x150 and cover crops them badly */
.deck__card svg{display:block;width:100%;height:100%}
.deck__card img{display:block;width:100%;height:100%;object-fit:cover}
/* the centre card carries two faces: the mark it wears in the hero, and
   the workflow panel it becomes once it lands in Features. --q is the
   journey progress, so the swap happens over its last stretch. */
.deck__card .face{position:absolute;inset:0}
.face--logo{opacity:calc(1 - (var(--q,0) - .62) * 2.7)}
.face--flow{opacity:calc((var(--q,0) - .62) * 2.7)}
/* the rest of the fan clears away on the same curve, so what lands in
   Features is a single card rather than the top of a stack */
.deck__card--o1,.deck__card--m1,.deck__card--m2,.deck__card--o2{
  opacity:calc(1 - (var(--q,0) - .62) * 2.7);
}
/* and once it is on its way there is nothing to hover */
.deck.is-landed{pointer-events:none}
/* the workflow steps arrive one after another once the card has parked */
.face--flow .flowrow{
  opacity:0;transform:translateY(7px);
  transition:opacity .45s var(--ease),transform .55s var(--ease);
  transition-delay:calc(var(--d,0) * .16s);
}
.deck.is-parked .face--flow .flowrow{opacity:1;transform:none}
/* land on exact 1 / 0 so neither face keeps a fractional-opacity layer,
   which would rasterise the artwork separately and soften it */
.deck.is-parked .face--flow{opacity:1}
.deck.is-parked .face--logo{opacity:0}
/* a band of light crosses the mark on the centre card and repeats. It is
   masked to the logo's own alpha, so it glints inside the letterform and
   never streaks the card. Like the pricing tag's flare, it rests off the
   mark for most of the cycle rather than shimmering continuously. */
.logoflare{
  transform-box:fill-box;transform-origin:50% 50%;
  animation:logoFlare 6s var(--ease) 1.2s infinite;
}
@keyframes logoFlare{
  0%{transform:translateX(-80px) skewX(-14deg)}
  42%,100%{transform:translateX(190px) skewX(-14deg)}
}
/* the global reduced-motion rule stops the sweep, which would otherwise
   park the band across the mark - take it off the card entirely instead */
@media (prefers-reduced-motion:reduce){
  .logoflare{display:none}
}

.deck__card--o1,.deck__card--o2{z-index:1}
.deck__card--m1,.deck__card--m2{z-index:2}
/* the Carebric card wears the Platform panel surface - light gradient
   face (in its SVG) behind a hairline border, not the deck white frame */
.deck__card--c{z-index:3;border:1px solid var(--line)}
.deck__card:hover{
  z-index:5;--lift:22px;--s:1.05;
  box-shadow:0 18px 44px -10px hsl(180 25% 25% / .32);
}
.deck__card--m2 .deck__role{left:auto;right:9px}
/* the outer cards rotate their bottom corners into the overlap, so those
   two labels ride the top edge where nothing covers them */
.deck__card--o1 .deck__role{top:9px;bottom:auto}
.deck__card--o2 .deck__role{top:9px;bottom:auto;left:auto;right:9px}
.deck__role{
  position:absolute;left:9px;bottom:9px;
  padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.92);
  color:var(--ink);font-size:.68rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  box-shadow:var(--shadow-s);
}

/* ---------------- sections ---------------- */
.section{padding:clamp(64px,8vw,116px) 0}
.section--tint{
  background:var(--bg-tint);
  border-block:1px solid var(--line-soft);
}

.shead{max-width:640px;margin-bottom:clamp(32px,4vw,54px)}
.eyebrow{
  display:inline-block;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-deep);font-weight:600;margin-bottom:14px;
}
.shead h2{font-size:clamp(1.85rem,3.4vw,2.7rem);letter-spacing:-.02em}
.shead h2 em{font-family:var(--heading);font-style:italic;font-weight:400;font-size:1em;color:var(--brand)}
.shead p{margin-top:14px;color:var(--muted);font-size:1.02rem}

/* ---------------- features header + deck landing slot ---------------- */
.features__top{
  display:flex;align-items:center;gap:clamp(24px,4vw,56px);
}
.features__top .shead{margin-bottom:0;flex:1 1 auto}
.deck-slot{flex:none;margin-left:auto;width:clamp(200px,26vw,380px);aspect-ratio:10/13}
/* where the deck does not travel, the slot holds its own card, showing the
   workflow face the flying one settles on */
.deck-slot__card{
  position:relative;width:100%;height:100%;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  /* the same soft elevation the Platform panel carries - the deck's heavy
     shadow spread past the gutter and made the right margin read as tighter
     than the rest of the section */
  box-shadow:var(--shadow-s);
}
.deck-slot__card .face{position:absolute;inset:0}
.deck-slot__card .face--logo{opacity:0}
.deck-slot__card .face--flow{opacity:1}
.deck-slot__card .flowrow{opacity:1;transform:none}

/* from tablet up the Features and FAQ headings each hold one line */
@media (min-width:768px){
  #faq .shead{max-width:none}
  #faq h2{white-space:nowrap}
  #features .shead{max-width:none}
  #features .shead p{max-width:58ch}
  #features h2{white-space:nowrap}
  /* the pane has overflow:hidden, so its baseline is its bottom edge -
     drop it by that gap so the flipping words share the title's baseline */
  #features h2 .rot{display:inline-block;vertical-align:-.25em}
}

.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.tags span{font-size:.78rem;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink-2)}

/* ---------------- tabs ---------------- */
.tabs__bar{
  position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:var(--r);
  background:var(--line-soft);border:1px solid var(--line);margin-bottom:22px;max-width:100%;overflow-x:auto;
  scrollbar-width:none;
}
.tabs__bar::-webkit-scrollbar{display:none}
.tabs__glider{
  position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:var(--r-sm);background:#fff;
  box-shadow:var(--shadow-s);transition:transform .45s var(--ease),width .45s var(--ease);
  z-index:0;
}
.tab{
  position:relative;z-index:1;padding:8px 18px;border-radius:var(--r-sm);font-size:.92rem;
  color:var(--muted);white-space:nowrap;transition:color .3s var(--ease);
}
.tab:hover{color:var(--ink-2)}
.tab.is-active{color:var(--ink);font-weight:500}

/* same panel treatment as the "See your clinic running" card */
.tabs__panels{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(150deg,#f1f6f6,#f7f8f8 55%,#eff4f9);
  padding:clamp(18px,3vw,28px);box-shadow:var(--shadow-s);
}
.tabs__panels::before{
  content:"";position:absolute;width:420px;height:420px;right:-130px;top:-190px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(48,80,80,.14),transparent 62%);
}
.panel{position:relative;z-index:1;display:none}
.panel.is-active{display:block;animation:fadeUp .5s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel__grid{display:grid;grid-template-columns:1.4fr .9fr;gap:18px}
.panel__list{display:flex;flex-direction:column;gap:6px}
.row{
  display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:var(--r);
  border:1px solid var(--line);transition:background .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease);
  font-size:.92rem;
}
.row:hover{background:var(--line-soft);transform:translateX(3px);border-color:var(--line)}
.row span:not(.dot){color:var(--muted);font-size:.86rem}
.row em{margin-left:auto;font-style:normal;color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot--green{background:var(--green)}
.dot--amber{background:var(--amber)}
.dot--red{background:var(--red)}
.panel__side{background:var(--bg-tint);border-radius:var(--r);padding:18px;border:1px solid var(--line-soft)}
.panel__side h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.panel__side p{margin-top:11px;font-size:.9rem;color:var(--ink-2)}
.panel__note{margin-top:16px;color:var(--muted);font-size:.84rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------------- pricing ---------------- */
/* the whole section carries a green wash; the glass panes sit on top of it
   and pick the colour up through their translucency */
/* pricing leads with a centred heading over the two plan cards */
#pricing .shead{margin-inline:auto;text-align:center}

/* the green arrives slightly inset and grows out to fill the section as it
   comes into view. It lives on its own layer so it can be transformed; the
   section's content is lifted above it. */
#pricing{position:relative}
#pricing::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--green-wash);
  transform:scale(.86);
  border-radius:clamp(28px,3.5vw,56px);
  transition:transform 1.1s var(--ease),border-radius 1.1s var(--ease);
}
/* squares off as it reaches the edges - a full-bleed panel with rounded
   corners would leave the page showing through at each corner */
#pricing.is-lit::before{transform:scale(1);border-radius:0}
#pricing > .wrap{position:relative;z-index:1}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;max-width:1180px;margin-inline:auto}
.plan{
  position:relative;display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-lg);padding:30px 26px;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.plan--best{border-color:transparent;box-shadow:var(--shadow-l);background:linear-gradient(#fff,#fff) padding-box,linear-gradient(150deg,var(--brand),var(--accent)) border-box;border:1.5px solid transparent}
.plan__tag{
  position:absolute;top:-12px;left:26px;font-size:.74rem;font-weight:600;letter-spacing:.02em;
  white-space:nowrap;max-width:calc(100% - 52px);overflow:hidden;text-overflow:ellipsis;
  padding:5px 12px;border-radius:999px;color:#fff;background:var(--brand);
  box-shadow:var(--shadow-m);
}
.plan__tag::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-180%) skewX(-18deg);
  animation:flare 7s ease-in-out infinite;
}
@keyframes flare{
  0%{transform:translateX(-180%) skewX(-18deg)}
  40%,100%{transform:translateX(380%) skewX(-18deg)}
}
.plan h3{font-size:1.18rem;margin-top:10px}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px;margin:20px 0 22px;color:var(--ink)}
.price__was{color:var(--muted);font-size:1.05rem;font-weight:500;margin-right:10px;text-decoration-thickness:1.5px}
.price span{font-size:1.3rem;font-weight:500;align-self:flex-start;margin-top:6px}
.price b{font-size:3rem;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.price small{color:var(--muted);font-size:.92rem;margin-left:5px}
.plan ul{margin:0 0 26px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px}
.plan .btn--full{margin-top:auto}
.plan li{position:relative;padding-left:26px;font-size:.93rem;color:var(--ink-2)}
.plan li::before{
  content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:50%;
  background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.4 2.9 2.9L12.5 5' fill='none' stroke='%23305050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ---------------- CTA ---------------- */
.cta{padding:clamp(64px,8vw,110px) 0}
.cta__inner{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:center;
  padding:clamp(34px,5vw,58px);border-radius:var(--r-xl);
  background:linear-gradient(150deg,#f1f6f6,#f7f8f8 55%,#eff4f9);
  border:1px solid var(--line);
}
.cta__inner::before{
  content:"";position:absolute;width:520px;height:520px;right:-140px;top:-220px;border-radius:50%;
  background:radial-gradient(circle,rgba(48,80,80,.14),transparent 62%);
  animation:bob 9s ease-in-out infinite;
}
.cta__copy{position:relative;z-index:1}
.cta h2{font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.02em}
.cta h2 em{font-family:var(--heading);font-style:italic;font-weight:400;font-size:1em;color:var(--brand)}
.cta p{margin-top:14px;color:var(--ink-2);max-width:38ch}
.cta__form{position:relative;z-index:1}
.cta__field{
  display:flex;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:6px;box-shadow:var(--shadow-s);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.cta__field:focus-within{border-color:var(--brand);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--brand)}
.cta__field.is-bad{border-color:var(--red);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--red);animation:shake .4s var(--ease)}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.cta__field input{
  flex:1;min-width:0;border:0;background:transparent;padding:11px 16px;font-size:.96rem;color:var(--ink);
}
.cta__field input:focus{outline:none}
.cta__field input::placeholder{color:var(--muted)}
.cta__note{margin-top:12px;font-size:.82rem;color:var(--muted);padding-left:6px;transition:color .3s var(--ease)}
.cta__note.is-ok{color:var(--brand-deep);font-weight:500}

/* ---------------- footer ---------------- */
/* the footer wears a larger version of the mark */
.foot .logo{gap:16px;font-size:3rem}
.foot .logo__mark{width:92px;height:92px}

.foot{
  border-top:1px solid var(--line);padding:clamp(46px,6vw,68px) 0 26px;
  background:var(--bg-tint);
}
.foot__inner{display:grid;grid-template-columns:1.2fr 2fr;gap:40px}
.foot__brand p{margin-top:14px;color:var(--muted);font-size:.9rem;max-width:26ch}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.foot__cols h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;font-weight:600}
.foot__cols a{display:block;color:var(--muted);font-size:.9rem;padding:5px 0;transition:color .2s var(--ease),transform .2s var(--ease)}
.foot__cols a:hover{color:var(--brand-deep);transform:translateX(3px)}
.foot__bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem;
}

/* ---------------- reveal ---------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
/* ---------------- hero intro ----------------
   Title lands word by word, the deck arrives stacked and fans open,
   then the copy and buttons follow. .js-intro is set in the document
   head, so nothing hides for reduced motion or with JS off. */
.w{display:inline-block;transition:opacity .55s var(--ease),transform .65s var(--ease)}
.hero__enter{transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* flipping phrase - sits on its own line so the heading never changes
   height as the words cycle */
.rot{display:block;height:1.22em;overflow:hidden;position:relative}
.rot__track{display:flex;flex-direction:column;transition:transform .75s var(--ease)}
.rot__track > span{
  height:1.22em;line-height:1.22em;
  font-family:var(--heading);font-style:italic;font-weight:400;color:var(--brand);
}
/* the deck's transform is scroll-driven every frame, so only its fade
   may be transitioned */
.deck{transition:opacity .6s var(--ease)}

.js-intro .hero__title{opacity:0}
.js-intro .w{opacity:0;transform:translateY(.55em)}
.js-intro .hero__title.is-in .w{opacity:1;transform:none}
/* section headings ride the reveal of the block they sit in */
.js-intro .shead.is-in h2 .w,
.js-intro .cta__inner.is-in h2 .w{opacity:1;transform:none}
/* the words carry the motion, so the heading block only fades */
.reveal.shead,.reveal.cta__inner{transform:none}
.js-intro .deck{opacity:0}
.js-intro .deck.is-in{opacity:1}
.js-intro .hero__enter{opacity:0;transform:translateY(22px)}
.js-intro .hero__enter.is-in{opacity:1;transform:none}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.10s}
.reveal[data-delay="2"]{transition-delay:.20s}
.reveal[data-delay="3"]{transition-delay:.30s}
.reveal[data-delay="4"]{transition-delay:.40s}

/* ---------------- responsive ---------------- */
@media (max-width:1000px){
  .plans{grid-template-columns:repeat(2,1fr);max-width:760px}
  .panel__grid{grid-template-columns:1fr}
  .cta__inner{grid-template-columns:1fr}
  .foot__inner{grid-template-columns:1fr}
}

@media (max-width:900px){
  .features__top{display:block}
  .deck-slot{display:none}
}

@media (max-width:820px){
  .plans{grid-template-columns:1fr;max-width:520px}
  .nav__links{
    position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;gap:0;margin:0;
    background:rgba(255,255,255,.96);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);padding:14px 24px 22px;
    clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;
    transition:clip-path .5s var(--ease),opacity .3s var(--ease);
  }
  .nav__links.is-open{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
  .nav__links > a{padding:13px 4px;font-size:1.02rem;border-radius:0;border-bottom:1px solid var(--line-soft)}
  /* the CTA rides down with the menu rather than sitting in the header */
  .nav__actions{order:0;width:100%;margin:16px 0 0}
  .nav__actions .btn{width:100%}
  .burger{display:block;margin-left:auto}
  .deck__role{font-size:.58rem;padding:3px 7px}
  .foot__cols{grid-template-columns:1fr 1fr}
}

@media (max-width:560px){
  .nav__inner::before{inset:6px -10px}
  .wrap,.wrap--narrow{width:calc(100% - 32px)}
  body{font-size:16px}
  h1{white-space:normal;font-size:clamp(1.8rem,7.6vw,2.3rem);line-height:1.14}
  .hero__cta{display:grid;grid-auto-flow:row;width:100%}
  .deck{--card-w:clamp(76px,20.5vw,112px);--card-m:clamp(-20px,-3.4vw,-12px)}
  .deck__role{display:none}
  .cta__field{flex-direction:column;border-radius:26px;padding:8px}
  .cta__field input{text-align:center}
  .foot__bottom{flex-direction:column;gap:6px}
}

/* ---------------- accordion ---------------- */
.acc{display:flex;flex-direction:column;gap:10px}
.acc__item{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.acc__item.is-open{border-color:#cfd8d8;box-shadow:var(--shadow-s)}
.acc__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 22px;text-align:left;font-size:1rem;font-weight:500;letter-spacing:-.012em;
  transition:color .25s var(--ease);
}
.acc__q:hover{color:var(--brand-deep)}
.acc__i{position:relative;width:16px;height:16px;flex:none}
.acc__i::before,.acc__i::after{
  content:"";position:absolute;background:var(--ink-2);border-radius:2px;
  transition:transform .4s var(--ease),background .3s var(--ease);
}
.acc__i::before{left:0;top:7px;width:16px;height:1.8px}
.acc__i::after{left:7px;top:0;width:1.8px;height:16px}
.acc__item.is-open .acc__i::after{transform:rotate(90deg) scaleX(0)}
.acc__item.is-open .acc__i::before{background:var(--brand)}
.acc__a{height:0;overflow:hidden;transition:height .45s var(--ease)}
/* the first question ships open - the JS only ever sets an inline height, so
   this is what holds it open on load and with JS off */
.acc__item.is-open .acc__a{height:auto}
.acc__a p{padding:0 22px 21px;color:var(--muted);font-size:.95rem;max-width:62ch}

/* ---------------- full-screen scroll snapping ----------------
   One section per screen, locking as you scroll. Only where there is
   room for it: below 901px wide the sections stack normally, and below
   780px tall the hero and the pricing cards do not fit one screen. */
@media (min-width:901px) and (min-height:780px) and (hover:hover) and (pointer:fine){
  html:not([data-scroll="free"]){scroll-snap-type:y mandatory;scroll-padding-top:0}

  html:not([data-scroll="free"]) :is(.hero,.section,.cta){
    scroll-snap-align:start;scroll-snap-stop:always;
    min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(24px,3.5vh,56px);
  }
  html:not([data-scroll="free"]) .foot{scroll-snap-align:end;scroll-snap-stop:always}

  /* the pricing cards are the one block that will not fit a screen
     at its natural size, so it tightens up while snapping is on */
  #pricing .shead{margin-bottom:clamp(34px,5.5vh,64px)}
  #pricing .plan{padding:22px 20px}
  #pricing .plan__tag{top:-11px}
  #pricing .price{margin:12px 0 14px}
  #pricing .price b{font-size:2.2rem}
  #pricing .price span{font-size:1.1rem}
  #pricing .price__was{font-size:.9rem}
  #pricing .plan ul{padding-top:14px;margin-bottom:18px;gap:7px}
  #pricing .plan li{font-size:.86rem;padding-left:23px}
  #pricing .plan .btn{min-height:38px}
}

/* on shorter screens the hero fan and the plan lists need to give up a
   little more room for their section to still fit one screen */
@media (min-width:901px) and (min-height:780px) and (max-height:880px) and (hover:hover) and (pointer:fine){
  .deck{
    --card-w:clamp(118px,min(17.5vw,20vh),186px);
    margin-block:clamp(12px,2vh,28px);
    padding:clamp(12px,1.6vh,22px) 0 clamp(24px,3.6vh,42px);
  }
  #pricing .plan{padding:20px 20px}
  #pricing .plan ul{gap:6px;margin-bottom:14px}
  #pricing .plan li{font-size:.83rem}
}


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

/* ---------------- "compare all features" link under the plans ---------------- */
.plans__more{margin:clamp(22px,3.2vw,34px) 0 0;text-align:center}
.plans__more a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:1rem;font-weight:500;color:var(--brand-deep);
  padding-bottom:2px;border-bottom:1px solid rgba(38,64,64,.32);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.plans__more a svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.plans__more a:hover{color:var(--ink);border-color:var(--ink)}
.plans__more a:hover svg{transform:translateX(4px)}

/* ---------------- plan comparison page ---------------- */
.cmp-hero{
  --cmp-band:#cfe6d9;          /* group header bar, mint on the page wash    */
  --cmp-band-ink:#1f4230;
  padding:calc(var(--nav-h) + clamp(28px,5vw,64px)) 0 clamp(64px,8vw,110px);
  background:
    radial-gradient(46rem 32rem at 84% 4%, rgba(25,112,62,.20), transparent 62%),
    radial-gradient(38rem 28rem at 4% 92%, rgba(48,80,80,.14), transparent 60%),
    linear-gradient(158deg,#ecf6f0 0%,#d8ecdf 52%,#e7f4ec 100%);
  min-height:100vh;
}
.cmp-back{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.9rem;color:var(--muted);
  transition:color .2s var(--ease);
}
.cmp-back svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.cmp-back:hover{color:var(--ink)}
.cmp-back:hover svg{transform:translateX(-3px)}

.cmp-title{
  white-space:normal;text-align:center;
  margin:clamp(14px,2vw,22px) auto clamp(26px,3.6vw,42px);
  font-size:clamp(2.1rem,4.6vw,3.1rem);
}

/* the table sits on a frosted card, matching the pricing panes */
.cmp-card{
  background:var(--glass-2);border:1px solid var(--glass-line);border-radius:var(--r-lg);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow-l);
  overflow:hidden;
}
/* narrow screens scroll the table sideways rather than crushing the columns */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.cmp{width:100%;min-width:760px;border-collapse:collapse;text-align:left}
.cmp th,.cmp td{padding:13px 20px;vertical-align:middle}

/* .cmp-scroll is a scroll container (overflow-x:auto forces overflow-y:auto),
   so a sticky thead would pin inside it rather than to the page - kept static */
.cmp thead th{
  vertical-align:bottom;
  background:rgba(255,255,255,.94);
  font-family:var(--sans);font-size:.95rem;font-weight:500;color:var(--ink);
  letter-spacing:-.01em;
  padding-top:19px;padding-bottom:19px;
  border-bottom:1px solid var(--line);
}

/* the plan name sits over its price in the column head */
.cmp__plan{display:block}
.cmp__price{
  display:block;margin-top:5px;
  font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums;
}
.cmp__price s{color:var(--muted);font-size:.82rem;margin-right:7px;text-decoration-thickness:1.5px}
.cmp__price b{font-size:1.06rem;font-weight:600;letter-spacing:-.025em}
.cmp__price small{color:var(--muted);font-size:.76rem;margin-left:5px}

.cmp__group th{
  font-family:var(--sans);font-size:.86rem;font-weight:600;letter-spacing:-.005em;
  color:var(--cmp-band-ink);background:var(--cmp-band);
  padding-top:9px;padding-bottom:9px;
}

.cmp tbody th[scope="row"]{
  font-family:var(--sans);font-weight:400;font-size:.92rem;color:var(--ink-2);
}
.cmp tbody td{font-size:.92rem;color:var(--ink-2)}
.cmp td.num{font-variant-numeric:tabular-nums}

/* hairline between feature rows, but not against a group bar */
.cmp tbody tr + tr:not(.cmp__group) > *{border-top:1px solid var(--line-soft)}
.cmp tbody tr:hover:not(.cmp__group) > *{background:rgba(255,255,255,.5)}

/* yes / no marks - the tick matches the one on the plan cards */
.cmp td.y,.cmp td.n{position:relative}
.cmp td.y::before{
  content:"";display:block;width:17px;height:17px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.4 3.1 3.1L13 4.6' fill='none' stroke='%23305050' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px no-repeat;
}
.cmp td.n::before{
  content:"—";color:var(--muted);opacity:.7;
}

.cmp-foot{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin-top:clamp(28px,4vw,44px);
}

@media (max-width:560px){
  .cmp th,.cmp td{padding:12px 15px}
  .cmp{min-width:660px}
  /* keep the feature name in view while the plan columns scroll past */
  .cmp tbody th[scope="row"],.cmp thead th:first-child{
    position:sticky;left:0;z-index:1;background:rgba(255,255,255,.96);
  }
  .cmp thead th:first-child{z-index:3}
  .cmp-foot .btn{width:100%}
}

/* ---------------- legal pages (privacy, terms) ----------------
   These borrow the compare page's wash, back link, title and frosted
   card, and add only what long-form prose needs. */
.legal-hero{min-height:0}
.legal__meta{
  margin:-14px 0 clamp(24px,3.4vw,36px);text-align:center;
  font-size:.86rem;color:var(--muted);
}

/* a short index, so eighteen sections are navigable without scrolling
   the whole page to find one */
.legal__toc{
  background:var(--glass-2);border:1px solid var(--glass-line);border-radius:var(--r-lg);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow-s);
  padding:clamp(20px,3vw,26px) clamp(20px,3vw,30px);
  margin-bottom:clamp(18px,2.6vw,24px);
}
.legal__toc h2{
  margin:0 0 12px;font-family:var(--sans);font-size:.78rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.legal__toc ol{
  margin:0;padding:0;list-style:none;counter-reset:toc;
  columns:2;column-gap:clamp(20px,4vw,44px);
}
.legal__toc li{counter-increment:toc;break-inside:avoid;margin:0 0 7px}
.legal__toc li::before{
  content:counter(toc) ".";margin-right:7px;color:var(--muted);
  font-variant-numeric:tabular-nums;font-size:.84rem;
}
.legal__toc a{font-size:.92rem;color:var(--ink-2);transition:color .2s var(--ease)}
.legal__toc a:hover{color:var(--brand-deep)}

.legal__card{padding:clamp(26px,4vw,44px) clamp(22px,4vw,48px)}
/* the nav is fixed, so an anchored section would land under it */
.legal__sec{scroll-margin-top:calc(var(--nav-h) + 16px)}
.legal__sec + .legal__sec{
  margin-top:clamp(30px,4vw,44px);
  padding-top:clamp(28px,3.6vw,40px);border-top:1px solid var(--line);
}
.legal__sec h2{
  margin:0;font-size:clamp(1.32rem,2.4vw,1.68rem);font-weight:400;
  letter-spacing:-.015em;color:var(--ink);
}
.legal__dl{margin:0}
.legal__dl dt{
  margin-top:clamp(16px,2.2vw,22px);
  font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--ink);
}
.legal__dl dd{
  margin:5px 0 0;font-size:.95rem;line-height:1.65;color:var(--ink-2);
  max-width:68ch;
}
/* terms runs as prose rather than labelled terms: one paragraph a section,
   with the opening statement standing above the index */
.legal__lede{
  margin:0 0 clamp(20px,3vw,28px);
  font-size:1rem;line-height:1.7;color:var(--ink-2);
}
.legal__p{margin:14px 0 0;font-size:.95rem;line-height:1.7;color:var(--ink-2);max-width:68ch}
.legal__contact{
  margin-top:16px;font-style:normal;font-size:.95rem;line-height:1.9;color:var(--ink-2);
}
.legal__contact a{color:var(--brand-deep);border-bottom:1px solid rgba(38,64,64,.32)}
.legal__contact a:hover{color:var(--ink);border-color:var(--ink)}

@media (max-width:560px){
  .legal__toc ol{columns:1}
}

/* ---------------- contact page ----------------
   Borrows the legal pages' wash and card, and the login form's fields. */
.contact__lede{text-align:center;margin-bottom:clamp(20px,3vw,28px)}
.contact__card{padding:clamp(24px,4vw,40px)}
/* name and email share a row once there is room for both */
.contact__pair{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.field span i{font-style:normal;font-weight:400;color:var(--muted)}
.field textarea{
  width:100%;padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font:inherit;font-size:.95rem;line-height:1.55;resize:vertical;min-height:120px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea::placeholder{color:var(--muted)}
.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(48,80,80,.16)}
.field.is-bad textarea{border-color:var(--red);box-shadow:0 0 0 3px rgba(199,10,0,.14)}
.contact__form .btn{margin-top:6px}

.contact__done{text-align:center;padding:clamp(8px,2vw,20px) 0}
.contact__done:focus{outline:none}
.contact__done-title{
  margin:0;font-family:var(--heading);font-weight:400;
  font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.02em;color:var(--ink);
  /* the same green-and-gold sweep the dialog's thank-you wears, on the same
     ctaTextSweep loop, so both confirmations read as one gesture */
  background-image:linear-gradient(90deg,
    var(--ink) 0%,var(--ink) 39%,#c9971f 47%,#2f8f5b 56%,var(--ink) 64%,var(--ink) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:ctaTextSweep 4s ease-in-out infinite;
}
/* clipping the paint to the text is what makes the words visible at all;
   without it they would render transparent, so the colour goes back on */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .contact__done-title{background-image:none;color:var(--ink);-webkit-text-fill-color:currentColor;animation:none}
}
@media (prefers-reduced-motion:reduce){
  .contact__done-title{
    animation:none;background-image:none;
    -webkit-text-fill-color:currentColor;color:var(--ink);
  }
}
.contact__done-sub{margin:12px auto 22px;max-width:46ch;color:var(--ink-2);font-size:.95rem;line-height:1.65}
.contact__done-sub a{color:var(--brand-deep);border-bottom:1px solid rgba(38,64,64,.32)}
.contact__done-sub a:hover{color:var(--ink);border-color:var(--ink)}

/* the other ways to reach us, under the card */
.contact__ways{
  list-style:none;margin:clamp(20px,3vw,28px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.contact__ways li{
  background:var(--glass-2);border:1px solid var(--glass-line);border-radius:var(--r-lg);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow-s);padding:18px 20px;
}
.contact__ways h2{
  margin:0 0 6px;font-family:var(--sans);font-size:.78rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.contact__ways a{font-size:.98rem;color:var(--brand-deep);border-bottom:1px solid rgba(38,64,64,.32)}
.contact__ways a:hover{color:var(--ink);border-color:var(--ink)}

@media (max-width:560px){
  .contact__pair{grid-template-columns:1fr}
  .contact__ways{grid-template-columns:1fr}
}

/* ---------------- book-a-demo modal ---------------- */
body.has-modal{overflow:hidden}

.modal{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:24px}
.modal[hidden]{display:none}

.modal__veil{
  position:absolute;inset:0;
  background:rgba(22,42,36,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .5s var(--ease);
}
.modal.is-in .modal__veil{opacity:1}
.modal.is-out .modal__veil{animation:veilFade 1.15s linear forwards}
@keyframes veilFade{0%{opacity:1}30%{opacity:1}78%{opacity:0}100%{opacity:0}}

/* the card condenses out of the mist rather than simply fading in */
.modal__card{
  position:relative;z-index:5;
  /* no scrolling: .cta__inner's own overflow:hidden clips the decorative
     circle it parks outside its box, which is what was making the card
     scrollable both ways */
  width:min(980px,100%);min-width:0;
  box-shadow:0 30px 80px -24px rgba(12,32,26,.55);
  opacity:0;transform:translateY(16px) scale(.965);filter:blur(7px);
}
.modal.is-in .modal__card{animation:cardEmerge .8s var(--ease) .98s forwards}

/* the two cloud fronts meet and burn the screen out to white, and the white
   stays as the dialog's backdrop - the card resolves on top of it */
.modal__white{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:#fff;opacity:0;
}
.modal.is-in .modal__white{animation:whiteout 2.1s linear forwards}
.modal.is-out .modal__white{animation:whiteFade 1.15s linear forwards}
@keyframes whiteout{
  0%  {opacity:0}
  20% {opacity:.6}
  33% {opacity:1}
  100%{opacity:1}
}
@keyframes whiteFade{0%{opacity:1}18%{opacity:1}62%{opacity:0}100%{opacity:0}}
.modal.is-out .modal__card{animation:cardVanish .28s var(--ease) forwards}
@keyframes cardEmerge{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes cardVanish{to{opacity:0;transform:translateY(8px) scale(.985);filter:blur(5px)}}

/* the modal card sits outside the .cta section, so the section's own
   heading rules never reached it - size the title and space the copy here */
.modal__card h2{font-size:clamp(1.9rem,3.4vw,2.75rem);letter-spacing:-.02em}
.modal__card .cta__copy p{margin-top:20px}
/* the card and the thank-you share one grid cell, so the second can take
   the screen as the first steps aside */
.modal__card,.modal__done{grid-area:1/1}

.modal__done{display:none;position:relative;z-index:6;text-align:center;max-width:min(92vw,820px)}
.modal.is-done .modal__card{animation:cardVanish .34s var(--ease) forwards;pointer-events:none}
.modal.is-done .modal__done{
  display:block;
  opacity:0;transform:translateY(16px) scale(.97);filter:blur(7px);
  animation:loadCard .8s var(--ease) .28s forwards;
}
/* on the way out it leaves with the card. Both class names are named so this
   outranks the .is-done rule above, whatever the source order. */
.modal.is-done.is-out .modal__done{animation:cardVanish .28s var(--ease) forwards}
.modal__done-title{
  margin:0;font-family:var(--heading);font-weight:400;line-height:1.14;
  letter-spacing:-.02em;color:var(--ink);
  font-size:clamp(2rem,5vw,3.4rem);
  /* the CTA's sweep, restated for dark type on white - deeper green and gold
     so the band still reads against the ink either side of it */
  background-image:linear-gradient(90deg,
    var(--ink) 0%,var(--ink) 39%,#c9971f 47%,#2f8f5b 56%,var(--ink) 64%,var(--ink) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:ctaTextSweep 4s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .modal__done-title{
    animation:none;background-image:none;
    -webkit-text-fill-color:currentColor;color:var(--ink);
  }
}
.modal__done-sub{
  margin:18px auto 0;max-width:46ch;color:var(--muted);
  font-size:clamp(1rem,1.5vw,1.12rem);
}
.modal__done-close{margin-top:28px}

/* two pills stacked, with the submit beneath them */
.modal__card .cta__field + .cta__field{margin-top:10px}
.modal__card .cta__form > .btn{margin-top:14px}
/* the note carries no standing text now, so it takes no room until a
   validation error or the confirmation is written into it */
.modal__card .cta__note:empty{margin:0}

.modal__x{
  position:absolute;top:14px;right:14px;z-index:2;
  width:36px;height:36px;display:grid;place-items:center;border-radius:999px;
  color:var(--muted);background:rgba(255,255,255,.7);border:1px solid var(--line);
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.modal__x svg{width:15px;height:15px}
.modal__x:hover{color:var(--ink);border-color:var(--brand);background:#fff}

/* ---- the mist ----
   Four soft blobs a side, pushed through fractal noise (#mistWarp) so the
   edges tear into wisps instead of staying as clean ellipses. Only the
   wrapper is animated - the filter itself stays static, so the browser
   filters once and then just moves the finished layer. */
.fog-defs{position:absolute;width:0;height:0;overflow:hidden}

.fog{
  position:absolute;inset:-25% -15%;z-index:3;pointer-events:none;
  opacity:0;will-change:transform,opacity;
}
.fog b{
  position:absolute;display:block;border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(255,255,255,.88),rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 76%);
  filter:url(#mistWarp);
  mix-blend-mode:screen;
}
.fog b:nth-child(1){width:44vmax;height:32vmax;top:2%;left:20%}
.fog b:nth-child(2){width:34vmax;height:26vmax;top:34%;left:44%}
.fog b:nth-child(3){width:39vmax;height:24vmax;top:54%;left:28%}
.fog b:nth-child(4){width:28vmax;height:22vmax;top:18%;left:58%}
.fog--r b:nth-child(1){top:6%; left:auto;right:20%}
.fog--r b:nth-child(2){top:38%;left:auto;right:44%}
.fog--r b:nth-child(3){top:58%;left:auto;right:28%}
.fog--r b:nth-child(4){top:22%;left:auto;right:58%}

/* roll in past the middle, then thin out and leave the card behind */
@keyframes mistL{
  0%  {opacity:0;  transform:translate3d(-118%,0,0) scale(1.20)}
  12% {opacity:.92}
  33% {opacity:1;  transform:translate3d(-16%,2%,0) scale(1.05)}
  62% {opacity:.7; transform:translate3d(6%,-1%,0)  scale(1.10)}
  100%{opacity:0;  transform:translate3d(32%,-4%,0) scale(1.18)}
}
@keyframes mistR{
  0%  {opacity:0;  transform:translate3d(118%,0,0)  scale(1.20)}
  12% {opacity:.92}
  33% {opacity:1;  transform:translate3d(16%,-2%,0) scale(1.05)}
  62% {opacity:.7; transform:translate3d(-6%,1%,0)  scale(1.10)}
  100%{opacity:0;  transform:translate3d(-32%,4%,0) scale(1.18)}
}
.modal.is-in .fog--l{animation:mistL 2.4s cubic-bezier(.25,.6,.35,1) forwards}
.modal.is-in .fog--r{animation:mistR 2.4s cubic-bezier(.25,.6,.35,1) .06s forwards}
.modal.is-out .fog--l{animation:mistOutL 1.15s cubic-bezier(.4,0,.5,1) forwards}
.modal.is-out .fog--r{animation:mistOutR 1.15s cubic-bezier(.4,0,.5,1) .05s forwards}
@keyframes mistOutL{
  0%  {opacity:0; transform:translate3d(-10%,0,0)    scale(1.06)}
  22% {opacity:1; transform:translate3d(-16%,1%,0)   scale(1.05)}
  100%{opacity:0; transform:translate3d(-118%,-3%,0) scale(1.20)}
}
@keyframes mistOutR{
  0%  {opacity:0; transform:translate3d(10%,0,0)    scale(1.06)}
  22% {opacity:1; transform:translate3d(16%,-1%,0)  scale(1.05)}
  100%{opacity:0; transform:translate3d(118%,3%,0)  scale(1.20)}
}
/* the overlay is on its way out - let clicks through to the page behind */
.modal.is-out{pointer-events:none}

/* the page CTA keeps its two-column grid; the modal drops to one early
   so the card never outgrows a phone screen */
@media (max-width:760px){
  .modal{padding:16px}
  .modal__card{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .fog,.modal__white{display:none}
  .modal.is-in .modal__card,.modal.is-out .modal__card{animation:none}
  .modal.is-in .modal__card{opacity:1;transform:none;filter:none}
  .modal__veil{transition:none}
}

/* ---------------- login page ---------------- */
/* same green wash the pricing section carries */
.login{
  min-height:100dvh;
  display:grid;place-items:center;
  padding:calc(var(--nav-h) + 24px) 24px 48px;
  background:var(--green-wash);
}

.login__card{
  width:min(430px,100%);
  padding:clamp(28px,4vw,40px);
  border-radius:var(--r-lg);
  background:var(--glass-2);border:1px solid var(--glass-line);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow-l);
  /* resolves out of the mist as the entrance clears */
  opacity:0;transform:translateY(14px) scale(.97);filter:blur(6px);
  animation:loadCard .8s var(--ease) .62s forwards;
}
@keyframes loadCard{to{opacity:1;transform:none;filter:blur(0)}}

.login__title{white-space:normal;margin:0;font-size:clamp(1.9rem,3.4vw,2.5rem);letter-spacing:-.02em}
.login__sub{margin-top:8px;color:var(--muted);font-size:.96rem}
.login__form{margin-top:26px}

.field{display:block;margin-bottom:16px}
.field span{display:block;margin-bottom:7px;font-size:.84rem;font-weight:500;color:var(--ink-2)}
.field input{
  width:100%;padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font:inherit;font-size:.95rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field input::placeholder{color:var(--muted)}
.field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(48,80,80,.16)}
.field.is-bad input{border-color:var(--red);box-shadow:0 0 0 3px rgba(199,10,0,.14)}

.login__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 20px}
.check{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;color:var(--ink-2);cursor:pointer}
.check input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
.login__link{font-size:.86rem;color:var(--brand-deep);border-bottom:1px solid rgba(38,64,64,.3);transition:color .2s var(--ease)}
.login__link:hover{color:var(--ink)}

.login__note{margin-top:12px;min-height:1.2em;font-size:.84rem;color:var(--muted);text-align:center}
/* with no message to show it takes no room, so the space under the button is
   the card's own padding - the same gap that sits above the title */
.login__note:empty{margin-top:0;min-height:0}
.login__note.is-bad{color:var(--red)}
.login__note.is-ok{color:var(--brand-deep);font-weight:500}

/* login carries the logo alone, centred, with no nav actions beside it -
   standing on its own it takes a larger wordmark */
.nav--center .nav__inner{justify-content:center}
.nav--center .logo{font-size:1.7rem}

.dash__stub{margin:18px 0 24px;font-size:.9rem;color:var(--muted)}

/* ---- entrance: the modal's mist, played as a reveal ----
   Starts as an opaque white field so the page never flashes in, then the
   white breaks into cloud and the cloud draws off to left and right.
   Decorative only - pointer-events stay off so the form is live throughout. */
.load{position:fixed;inset:0;z-index:300;pointer-events:none}
.load .fog b{filter:url(#loginMist)}
.load__white{
  position:absolute;inset:0;background:#fff;
  animation:loadWhite 1.9s linear forwards;
}
@keyframes loadWhite{0%{opacity:1}26%{opacity:1}66%{opacity:0}100%{opacity:0}}
.load .fog--l{animation:mistOutL 1.9s cubic-bezier(.4,0,.5,1) forwards}
.load .fog--r{animation:mistOutR 1.9s cubic-bezier(.4,0,.5,1) .06s forwards}

@media (max-width:560px){
  .login{padding:calc(var(--nav-h) + 16px) 16px 32px}
  .login__row{flex-direction:column;align-items:flex-start;gap:10px}
}

@media (prefers-reduced-motion:reduce){
  .load{display:none}
  .login__card{animation:none;opacity:1;transform:none;filter:none}
}