/* ============================================================
   mdspamentor.com
   Plain CSS. No framework, no build step.
   Rules that govern this file live in ../CLAUDE.md.
   ============================================================ */

:root{
  /* ---- ink and structure (shared with the CRM) ---- */
  --ink:#12161A; --ink-2:#3F464D; --muted:#767E87; --faint:#9AA1A9;
  --line:#E4E7EB; --line-soft:#EFF1F4; --surface:#fff; --bg:#F6F7F8;

  /* ---- the brand anchor: the CRM's teal, unchanged, so the site and the
         product are visibly one company ---- */
  --acc:#0E7C74; --acc-dark:#0A5F59; --acc-soft:#E6F3F1; --acc-line:#BFDEDA;

  /* ---- the warm family. A single accent read as clinical and flat; a med
         spa is a warm place. These are used for section tints, tab accents
         and the hero wash, never for two competing call-to-action colors. ---- */
  --lilac:#6F5F9E;  --lilac-soft:#F2EFF9;  --lilac-line:#DFD8EF;
  --blush:#B65E70;  --blush-soft:#FBEDF0;  --blush-line:#F2D8DE;
  --sand:#A9762F;   --sand-soft:#FCF3E5;   --sand-line:#EEDDC1;

  --r:10px; --r-lg:14px; --r-xl:20px;
  --sh:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --sh-md:0 6px 20px rgba(16,24,40,.07), 0 2px 6px rgba(16,24,40,.05);
  --sh-lg:0 28px 70px rgba(16,24,40,.14), 0 8px 22px rgba(16,24,40,.07);

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Built-in easings are too weak. Movement wants a strong ease-out.
     Never ease-in on UI: it delays the first movement, which is the moment
     the eye is actually watching. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);
  --t-press:160ms var(--ease-out);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* clip, not hidden: it stops sideways scrolling without turning the page into
   a scroll container, which would break position:sticky later. The hero wash
   and the product rail both reach past the viewport on purpose. */
html,body{overflow-x:clip}
body{font-family:var(--font);font-size:16px;line-height:1.5;color:var(--ink);
  background:var(--surface);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:8px}

.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px;top:0;background:var(--acc);color:#fff;padding:12px 18px;
  border-radius:0 0 10px 0;z-index:100;font-weight:600}
.skip:focus{left:0}

/* ============================================================
   navigation
   ============================================================ */
.site-nav{height:70px;display:flex;align-items:center;gap:32px;position:relative;z-index:10}
.brand{display:flex;align-items:center;gap:10px;font-size:16.5px;font-weight:700;letter-spacing:-.02em}
.brand .mark{width:26px;height:26px;border-radius:8px;color:#fff;display:grid;place-items:center;
  font-size:11px;font-weight:700;letter-spacing:-.02em;
  background:linear-gradient(140deg,#14958B,var(--acc-dark));
  box-shadow:0 2px 6px rgba(10,95,89,.28)}
.nav-links{display:flex;gap:28px;font-size:14.5px;color:var(--ink-2)}
.nav-links a{position:relative;padding:4px 0;transition:color 180ms ease}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--acc);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform 240ms var(--ease-out)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:22px}
.signin{font-size:14.5px;color:var(--ink-2);transition:color 180ms ease}
@media(hover:hover) and (pointer:fine){
  .nav-links a:hover{color:var(--ink)}
  .nav-links a:hover::after{transform:scaleX(1)}
  .signin:hover{color:var(--ink)}
}

/* ============================================================
   buttons
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;
  letter-spacing:-.005em;padding:11px 20px;border-radius:10px;background:var(--acc);color:#fff;
  border:1px solid transparent;white-space:nowrap;
  transition:background 180ms ease,transform var(--t-press),box-shadow 200ms ease;
  box-shadow:0 1px 2px rgba(10,95,89,.18)}
.btn:active{transform:scale(.97)}
.btn.lg{font-size:16px;padding:14px 24px}
.btn.quiet{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--sh)}
@media(hover:hover) and (pointer:fine){
  .btn:hover{background:var(--acc-dark);box-shadow:0 4px 14px rgba(10,95,89,.22)}
  .btn.quiet:hover{background:var(--bg);border-color:#D6DBE2}
}
/* The arrow lives in its own circle, flush with the inner padding. */
.btn .pip{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.2);
  display:grid;place-items:center;margin-right:-8px;
  transition:transform 220ms var(--ease-out),background 180ms ease}
.btn .pip svg{width:13px;height:13px;stroke:#fff;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover) and (pointer:fine){
  .btn:hover .pip{transform:translateX(3px);background:rgba(255,255,255,.3)}
}

/* ============================================================
   type
   ============================================================ */
h1{font-size:clamp(34px,4.5vw,57px);font-weight:750;letter-spacing:-.034em;line-height:1.07}
h2{font-size:clamp(27px,3.1vw,38px);font-weight:750;letter-spacing:-.03em;line-height:1.16}
h3{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.lede{font-size:18.5px;line-height:1.55;color:var(--ink-2)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  letter-spacing:-.004em;padding:6px 13px 6px 10px;border-radius:999px;
  background:rgba(255,255,255,.72);color:var(--acc-dark);border:1px solid var(--acc-line);
  backdrop-filter:saturate(160%) blur(6px);-webkit-backdrop-filter:saturate(160%) blur(6px)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 3px rgba(14,124,116,.16)}

/* ============================================================
   hero
   ============================================================ */
/* clip, so the wash and the product rail stay inside the viewport. Without it
   the document measured 2061px wide at a 1440px viewport. */
.hero{position:relative;padding:58px 0 20px;isolation:isolate;overflow:clip}
/* The wash. Four wide, low-opacity fields rather than one flat tint or a
   rainbow of hard orbs. Fixed size and blurred so no edge is ever visible. */
.wash{position:absolute;inset:-260px -20% auto -20%;height:1080px;z-index:-1;pointer-events:none;
  filter:blur(70px);opacity:.92}
.wash span{position:absolute;border-radius:50%;display:block}
.wash .w1{width:780px;height:640px;left:2%;top:40px;background:rgba(14,124,116,.16)}
.wash .w2{width:820px;height:660px;left:26%;top:0;background:rgba(111,95,158,.15)}
.wash .w3{width:760px;height:620px;left:52%;top:90px;background:rgba(182,94,112,.14)}
.wash .w4{width:900px;height:700px;left:72%;top:10px;background:rgba(169,118,47,.13)}
/* One slow drift, transform only, so it stays on the GPU. Decoration, so it
   is the first thing reduced-motion removes. */
@media(prefers-reduced-motion:no-preference){
  .wash span{animation:drift 26s var(--ease-soft) infinite alternate}
  .wash .w2{animation-delay:-7s}
  .wash .w3{animation-delay:-13s}
  .wash .w4{animation-delay:-19s}
}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}
                 to{transform:translate3d(-34px,22px,0) scale(1.07)}}

.hero .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:52px;align-items:center}
/* A grid item defaults to min-width:auto, so it refuses to shrink below its
   content. The product rail carries a negative right margin to bleed off the
   screen, which made it wider than its own column, which then grew the column
   past the page. On a phone that dragged the headline and both buttons off the
   right edge. min-width:0 lets the column stay the size of the screen and lets
   the rail do its own scrolling. */
.hero .wrap > *{min-width:0}
.hero h1{margin:22px 0 18px}
.hero .lede{max-width:44ch}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:22px;font-size:13.5px;color:var(--muted)}

/* ============================================================
   the product gallery
   ============================================================ */
.gallery{position:relative}
.tabs{display:flex;gap:8px;margin-bottom:20px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding-bottom:2px}
.tabs::-webkit-scrollbar{display:none}
.tab{font-size:13.5px;font-weight:600;letter-spacing:-.004em;padding:8px 15px;border-radius:999px;
  color:var(--ink-2);background:rgba(255,255,255,.66);border:1px solid var(--line);
  white-space:nowrap;transition:color 180ms ease,background 200ms ease,
    border-color 200ms ease,transform var(--t-press)}
.tab:active{transform:scale(.97)}
.tab[aria-selected=true]{color:#fff;background:var(--acc);border-color:var(--acc)}
.tab[data-hue=lilac][aria-selected=true]{background:var(--lilac);border-color:var(--lilac)}
.tab[data-hue=blush][aria-selected=true]{background:var(--blush);border-color:var(--blush)}
.tab[data-hue=sand][aria-selected=true]{background:var(--sand);border-color:var(--sand)}
@media(hover:hover) and (pointer:fine){
  .tab:hover{color:var(--ink);background:#fff;border-color:#D6DBE2}
  /* The SELECTED tab must answer the pointer without losing its fill. Setting
     only `color` here left the white text sitting on the white background that
     .tab:hover had already applied, so the label vanished under the pointer.
     A selected control gets DARKER on hover, never lighter. */
  .tab[aria-selected=true]:hover{color:#fff;background:var(--acc-dark);border-color:var(--acc-dark)}
  .tab[data-hue=lilac][aria-selected=true]:hover{background:#5B4E84;border-color:#5B4E84}
  .tab[data-hue=blush][aria-selected=true]:hover{background:#9A4D5E;border-color:#9A4D5E}
  .tab[data-hue=sand][aria-selected=true]:hover{background:#8D6226;border-color:#8D6226}
}

/* Native horizontal scroll with snapping. Drag on a trackpad, swipe on an
   iPad, arrow keys on a keyboard, all for free and all interruptible. */
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-bottom:4px;margin-right:-140px}
.rail::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(16,24,40,.09);
  box-shadow:var(--sh-lg);background:#fff;
  transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out)}
/* Off-screen slides sit back slightly, so the active one is obviously the one
   being looked at. Scoped to html.js: "which slide is current" is worked out
   by script, so with no script every slide and every caption stays visible and
   the rail is still scrollable on its own. */
.js .slide:not(.is-current) .frame{opacity:.55;transform:scale(.985)}
.slide-cap{margin-top:14px;font-size:14px;color:var(--muted);max-width:58ch;
  transition:opacity 300ms ease}
.js .slide:not(.is-current) .slide-cap{opacity:0}
.rail-hint{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:13.5px;color:var(--faint)}
.dots{display:flex;gap:6px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background 240ms ease,width 240ms var(--ease-out)}
.dot.on{width:18px;border-radius:999px;background:var(--acc)}

/* ============================================================
   sections
   ============================================================ */
section{position:relative}
.band{padding:92px 0}
.band.tint{background:var(--bg);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.band-head{max-width:60ch;margin-bottom:44px}
.band-head .lede{margin-top:14px}

/* A bento with real rhythm. Deliberately NOT three equal cards: that pattern
   is the single most recognizable shape of an AI-built marketing page. */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.cell{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px;position:relative;overflow:hidden;
  transition:transform 320ms var(--ease-out),box-shadow 320ms ease,border-color 320ms ease}
.cell h3{margin-bottom:8px}
.cell p{font-size:14.5px;color:var(--ink-2);line-height:1.6}
.cell.full{grid-column:span 6}
.cell.wide{grid-column:span 4}
.cell.half{grid-column:span 3}
.cell.third{grid-column:span 2}
.cell .tint-wash{position:absolute;inset:auto -30% -70% auto;width:340px;height:260px;
  border-radius:50%;filter:blur(46px);opacity:.5;pointer-events:none}
.cell[data-hue=teal]  .tint-wash{background:rgba(14,124,116,.24)}
.cell[data-hue=lilac] .tint-wash{background:rgba(111,95,158,.22)}
.cell[data-hue=blush] .tint-wash{background:rgba(182,94,112,.20)}
.cell[data-hue=sand]  .tint-wash{background:rgba(169,118,47,.20)}
@media(hover:hover) and (pointer:fine){
  .cell:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:#D8DDE4}
}
.cell .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--acc-soft);color:var(--acc-dark)}
.cell[data-hue=lilac] .ic{background:var(--lilac-soft);color:var(--lilac)}
.cell[data-hue=blush] .ic{background:var(--blush-soft);color:var(--blush)}
.cell[data-hue=sand]  .ic{background:var(--sand-soft);color:var(--sand)}
.cell .ic svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* the differentiator, deliberately a different shape from everything else */
.claim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:56px;align-items:center}
.claim blockquote{font-size:clamp(23px,2.5vw,31px);font-weight:700;letter-spacing:-.028em;
  line-height:1.28}
.claim .who{margin-top:20px;font-size:14px;color:var(--muted)}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--surface);padding:24px 22px}
.stat b{display:block;font-size:30px;font-weight:750;letter-spacing:-.03em;line-height:1.2}
.stat span{font-size:13.5px;color:var(--muted)}

/* the two other products */
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.prod{border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 30px;
  background:var(--surface);display:flex;flex-direction:column;position:relative;overflow:hidden}
.prod .tint-wash{position:absolute;inset:-60% -40% auto auto;width:360px;height:300px;
  border-radius:50%;filter:blur(50px);opacity:.42;pointer-events:none}
.prod[data-hue=lilac] .tint-wash{background:rgba(111,95,158,.3)}
.prod[data-hue=sand]  .tint-wash{background:rgba(169,118,47,.28)}
.prod h3{font-size:22px;margin-bottom:10px}
.prod p{font-size:15px;color:var(--ink-2);line-height:1.6}
.prod .btn{margin-top:24px;align-self:flex-start}
.kicker{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);margin-bottom:14px}

/* call to action */
.cta-band{padding:88px 0;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(165deg,#0C6F68,#0A5F59 55%,#0E7C74)}
.cta-band::after{content:'';position:absolute;inset:0;
  background:radial-gradient(60% 90% at 26% 18%,rgba(255,255,255,.16),transparent 62%);
  pointer-events:none}
.cta-band h2{color:#fff;position:relative}
.cta-band p{color:rgba(255,255,255,.82);margin:16px auto 30px;max-width:48ch;
  font-size:17.5px;position:relative}
.cta-band .btn{background:#fff;color:var(--acc-dark);position:relative;box-shadow:0 6px 22px rgba(0,0,0,.18)}
.cta-band .btn .pip{background:rgba(14,124,116,.13)}
.cta-band .btn .pip svg{stroke:var(--acc-dark)}
@media(hover:hover) and (pointer:fine){
  .cta-band .btn:hover{background:#F4FAF9}
  .cta-band .btn:hover .pip{background:rgba(14,124,116,.2)}
}

/* footer */
.site-foot{padding:52px 0 60px;border-top:1px solid var(--line);background:var(--surface)}
.foot-top{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;margin-bottom:34px}
.foot-links{display:flex;gap:26px;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}
.foot-links a{transition:color 180ms ease}
@media(hover:hover) and (pointer:fine){.foot-links a:hover{color:var(--ink)}}
.foot-legal{font-size:13.5px;color:var(--muted);line-height:1.7}

/* ============================================================
   motion
   ============================================================ */
@media(prefers-reduced-motion:no-preference){
  /* Hero arrives in sequence. Never from scale(0): nothing in the real world
     appears out of nothing. */
  .js .rise{opacity:0;transform:translateY(14px);animation:rise 620ms var(--ease-out) forwards}
  .js .rise:nth-child(1){animation-delay:40ms}
  .js .rise:nth-child(2){animation-delay:100ms}
  .js .rise:nth-child(3){animation-delay:160ms}
  .js .rise:nth-child(4){animation-delay:220ms}
  .js .hero .gallery{opacity:0;transform:translateY(20px) scale(.988);
    animation:rise 760ms var(--ease-out) 260ms forwards}
  @keyframes rise{to{opacity:1;transform:none}}

  /* Everything below the fold arrives as it is reached, once.
     Scoped to html.js, which a one-line script in the <head> adds. If that
     script never runs, or fails, or is blocked, the starting state is never
     applied and every section is simply visible. Content is never allowed to
     depend on JavaScript to exist. */
  .js .reveal{opacity:0;transform:translateY(18px);
    transition:opacity 680ms var(--ease-out),transform 680ms var(--ease-out)}
  .js .reveal.seen{opacity:1;transform:none}
}

/* ============================================================
   narrow screens
   ============================================================ */
@media(max-width:980px){
  .wrap{padding:0 20px}
  .nav-links{display:none}
  .hero{padding:26px 0 8px}
  .hero .wrap{grid-template-columns:1fr;gap:38px}
  .hero .lede{max-width:none}
  .rail{margin-right:-20px}
  .band{padding:60px 0}
  .bento{grid-template-columns:1fr;gap:14px}
  .cell.full,.cell.wide,.cell.half,.cell.third{grid-column:auto}
  .claim{grid-template-columns:1fr;gap:34px}
  .two{grid-template-columns:1fr}
  .cta-band{padding:64px 0}
}
@media(max-width:520px){
  .stat-row{grid-template-columns:1fr}
  .hero-cta .btn{width:100%;justify-content:center}
}

/* Goes LAST. A media block adds no specificity, so an earlier copy loses. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rise,.reveal,.js .reveal,.hero .gallery{opacity:1!important;transform:none!important}
  .rail{scroll-behavior:auto}
}


/* ============================================================
   pricing
   ============================================================ */
.price-hero{position:relative;padding:60px 0 0;isolation:isolate;overflow:clip;text-align:center}
.price-hero h1{margin:20px auto 16px;max-width:15ch}
.price-hero .lede{max-width:54ch;margin:0 auto}

/* ---- the price card: the one thing on the page that must look expensive ---- */
.plan{max-width:960px;margin:48px auto 0;text-align:left;position:relative;
  border-radius:var(--r-xl);padding:1px;
  background:linear-gradient(150deg,var(--acc-line),var(--lilac-line) 42%,var(--blush-line) 72%,var(--sand-line));
  box-shadow:0 30px 70px rgba(16,24,40,.13),0 8px 22px rgba(16,24,40,.06)}
.plan-in{background:var(--surface);border-radius:calc(var(--r-xl) - 1px);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr)}
.plan-left{padding:40px 38px}
.plan-right{padding:40px 38px;border-left:1px solid var(--line-soft);background:
  linear-gradient(180deg,rgba(14,124,116,.045),rgba(111,95,158,.035) 60%,rgba(182,94,112,.03))}
.plan-name{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.07em;
  color:var(--acc-dark);margin-bottom:16px}
.amount{display:flex;align-items:flex-start;gap:4px}
.amount .sym{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:9px}
.amount .num{font-size:clamp(54px,7vw,76px);font-weight:750;letter-spacing:-.045em;line-height:.94;
  font-variant-numeric:tabular-nums}
.amount .per{align-self:flex-end;font-size:15px;color:var(--muted);padding-bottom:9px;margin-left:8px;
  line-height:1.35;max-width:11ch}
.plan-note{margin-top:18px;font-size:15px;color:var(--ink-2);line-height:1.55;max-width:34ch}

/* how many locations, which keeps the number honest for a two-site owner */
.locs{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft)}
.locs-label{font-size:14px;color:var(--muted);margin-bottom:10px}
.stepper{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);
  border-radius:11px;padding:4px;background:var(--surface)}
.stepper button{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  color:var(--ink-2);transition:background 180ms ease,color 180ms ease,transform var(--t-press)}
.stepper button:active{transform:scale(.94)}
.stepper button[disabled]{color:var(--faint);cursor:not-allowed}
.stepper svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
.stepper .count{min-width:44px;text-align:center;font-size:16px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
@media(hover:hover) and (pointer:fine){
  .stepper button:not([disabled]):hover{background:var(--bg);color:var(--ink)}
}
.total{margin-top:18px;font-size:15px;color:var(--ink-2)}
.total b{font-size:19px;font-weight:750;letter-spacing:-.025em;color:var(--ink);
  font-variant-numeric:tabular-nums}

.plan-right h3{font-size:15px;margin-bottom:16px}
.assure{list-style:none;display:grid;gap:13px}
.assure li{display:flex;gap:11px;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.assure li svg{width:17px;height:17px;flex:0 0 17px;margin-top:2px;stroke:var(--acc);
  stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.plan .btn{margin-top:26px;width:100%;justify-content:center}
.plan-fine{margin-top:14px;font-size:13px;color:var(--muted);line-height:1.5}

/* ---- everything included, grouped rather than one long list ---- */
.incl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 40px}
.incl-col h3{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);padding-bottom:11px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.incl-col ul{list-style:none;display:grid;gap:10px}
.incl-col li{display:flex;gap:9px;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.incl-col li svg{width:15px;height:15px;flex:0 0 15px;margin-top:3px;stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.incl-col[data-hue=teal]  li svg{stroke:var(--acc)}
.incl-col[data-hue=lilac] li svg{stroke:var(--lilac)}
.incl-col[data-hue=blush] li svg{stroke:var(--blush)}
.incl-col[data-hue=sand]  li svg{stroke:var(--sand)}

/* ---- the comparison. Two columns, because there are two answers ---- */
.vs{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.vs-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);
  border-top:1px solid var(--line-soft)}
.vs-row:first-child{border-top:none}
.vs-head{background:var(--bg);border-top:none}
.vs-cell{padding:15px 20px;font-size:14.5px;color:var(--ink-2);display:flex;align-items:center;gap:9px}
.vs-cell.what{font-weight:600;color:var(--ink)}
.vs-head .vs-cell{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding-top:14px;padding-bottom:14px}
.vs-head .vs-cell.ours{color:var(--acc-dark)}
.vs-cell.ours{background:rgba(14,124,116,.04);font-weight:600;color:var(--acc-dark)}
.vs-cell svg{width:15px;height:15px;flex:0 0 15px;stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.vs-cell.ours svg{stroke:var(--acc)}
.vs-cell.theirs svg{stroke:var(--blush)}
.vs-foot{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.6;max-width:76ch}

/* ---- reassurance ---- */
.assure-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.assure-row > div{background:var(--surface);padding:28px 26px}
.assure-row .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:14px}
.assure-row .ic svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.assure-row h3{margin-bottom:7px}
.assure-row p{font-size:14.5px;color:var(--ink-2);line-height:1.6}

/* ---- questions. <details>, so it works with no script at all ---- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:17px;font-weight:650;letter-spacing:-.02em;transition:color 180ms ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,
.faq summary::after{content:'';position:absolute;right:8px;top:50%;width:13px;height:2px;
  margin-top:-1px;background:currentColor;border-radius:2px;color:var(--muted);
  transition:transform 260ms var(--ease-out),opacity 200ms ease,color 180ms ease}
.faq summary::after{transform:rotate(90deg)}          /* the upright of the plus */
.faq details[open] summary::after{transform:rotate(0deg);opacity:0}
.faq details p{padding:0 56px 24px 0;font-size:15.5px;color:var(--ink-2);line-height:1.65;max-width:72ch}
@media(hover:hover) and (pointer:fine){
  .faq summary:hover{color:var(--acc-dark)}
  .faq summary:hover::after{color:var(--acc)}
}

@media(max-width:980px){
  .plan{margin-top:34px}
  .plan-in{grid-template-columns:1fr}
  .plan-left,.plan-right{padding:30px 24px}
  .plan-right{border-left:none;border-top:1px solid var(--line-soft)}
  .incl-grid{grid-template-columns:1fr;gap:28px}
  .vs-row{grid-template-columns:1fr}
  .vs-cell{padding:11px 18px}
  .vs-cell.what{padding-top:16px;border-top:1px solid var(--line-soft)}
  .vs-row:first-child .vs-cell.what{border-top:none}
  .vs-head{display:none}
  .vs-cell.theirs::before{content:'Most spa software: ';color:var(--muted);font-weight:400}
  .vs-cell.ours::before{content:'Here: ';color:var(--muted);font-weight:400}
  .assure-row{grid-template-columns:1fr}
  .faq summary{font-size:16px}
}

/* ============================================================
   the menu on a phone and an iPad held upright
   ============================================================
   Built on <details>, so it opens and closes with no script at all. Below
   980px the inline links are hidden, and until this existed there was no way
   to reach Product, Pricing, Course or Contact from a phone. */
.menu{display:none;position:relative;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;border-radius:11px;
  display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);
  transition:background 180ms ease,border-color 180ms ease,transform var(--t-press)}
.menu summary::-webkit-details-marker{display:none}
.menu summary:active{transform:scale(.95)}
.menu summary span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;
  position:relative;transition:transform 260ms var(--ease-out),background 160ms ease}
.menu summary span::before,
.menu summary span::after{content:'';position:absolute;left:0;width:17px;height:2px;
  background:var(--ink);border-radius:2px;transition:transform 260ms var(--ease-out)}
.menu summary span::before{top:-6px}
.menu summary span::after{top:6px}
/* the two outer bars meet in the middle and the middle one disappears */
.menu[open] summary span{background:transparent}
.menu[open] summary span::before{transform:translateY(6px) rotate(45deg)}
.menu[open] summary span::after{transform:translateY(-6px) rotate(-45deg)}

.menu-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:232px;z-index:40;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:8px;display:grid;gap:2px}
.menu-panel a{display:flex;align-items:center;min-height:46px;padding:0 14px;border-radius:9px;
  font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  transition:background 160ms ease}
.menu-panel a:active{background:var(--bg)}
.menu-panel .sep{height:1px;background:var(--line-soft);margin:7px 8px}
.menu-panel .go{background:var(--acc);color:#fff;justify-content:center;margin-top:2px}
@media(hover:hover) and (pointer:fine){
  .menu summary:hover{background:var(--bg);border-color:#D6DBE2}
  .menu-panel a:hover{background:var(--bg)}
  .menu-panel .go:hover{background:var(--acc-dark)}
}
@media(prefers-reduced-motion:no-preference){
  .menu[open] .menu-panel{animation:menuIn 220ms var(--ease-out)}
  @keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
}

@media(max-width:980px){
  .menu{display:block}
  .site-nav .nav-right{margin-left:0;gap:12px}
  .site-nav .nav-right .btn{display:none}   /* it lives in the panel instead */
}

/* ============================================================
   fingers, not pointers
   ============================================================
   Anything a finger has to hit is at least 44px, which is Apple's own number
   and the one the front desk's iPad will judge this by. */
@media(pointer:coarse){
  .tab{padding:12px 17px;min-height:44px}
  .stepper button{width:44px;height:44px}
  .signin{min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
  .brand{min-height:44px}
  .nav-links a{min-height:44px;display:inline-flex;align-items:center}
  .foot-links a{min-height:44px;display:inline-flex;align-items:center}
  .faq summary{padding-top:20px;padding-bottom:20px}
  .toc a{min-height:44px}
  .menu-panel a{min-height:46px}
  /* A link that is the whole paragraph is a target in its own right, not a
     word inside a sentence, so it gets a finger-sized area. */
  .legal p > a:only-child{min-height:44px;display:inline-flex;align-items:center}
  /* The email address IS the call to action on a contact card, not a word in a
     sentence, so it gets a finger-sized area. */
  .mail{min-height:44px}
}

/* Fine print stays fine, but never becomes a squint on a phone. */
@media(max-width:980px){
  .rail-hint,.plan-fine,.vs-foot,.foot-legal{font-size:13.5px}
}

/* ============================================================
   the problem, before the product
   ============================================================ */
.pain{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.pain-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px;position:relative;overflow:hidden;grid-column:span 2}
.pain-item.wide{grid-column:span 3}
.pain-item .tint-wash{position:absolute;inset:auto -35% -80% auto;width:300px;height:240px;
  border-radius:50%;filter:blur(46px);opacity:.34;pointer-events:none}
.pain-item[data-hue=blush] .tint-wash{background:rgba(182,94,112,.34)}
.pain-item[data-hue=sand]  .tint-wash{background:rgba(169,118,47,.32)}
.pain-item[data-hue=lilac] .tint-wash{background:rgba(111,95,158,.3)}
.pain-item h3{margin-bottom:8px;position:relative}
.pain-item p{font-size:14.5px;color:var(--ink-2);line-height:1.6;position:relative}
.pain-was{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:650;
  letter-spacing:.05em;text-transform:uppercase;color:var(--acc);margin-bottom:12px;position:relative}
.pain-was::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}

/* ---- the swap: three systems become one ---- */
.swap{display:grid;grid-template-columns:1fr auto 1fr;gap:34px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);
  padding:34px 36px;position:relative;overflow:hidden}
.swap-side{display:grid;gap:10px}
.swap-chip{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:11px;
  padding:13px 15px;background:var(--bg);font-size:15px;color:var(--ink-2)}
.swap-chip b{font-weight:650;color:var(--ink)}
.swap-chip .role{margin-left:auto;font-size:12.5px;color:var(--muted)}
.swap-arrow{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--acc-soft);color:var(--acc-dark);flex:0 0 42px}
.swap-arrow svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.swap-one{border:1px solid var(--acc-line);border-radius:13px;padding:22px 20px;
  background:linear-gradient(150deg,rgba(14,124,116,.07),rgba(111,95,158,.05));position:relative}
.swap-one b{display:block;font-size:19px;font-weight:750;letter-spacing:-.025em;margin-bottom:5px}
.swap-one span{font-size:14px;color:var(--ink-2);line-height:1.55}

/* ============================================================
   alternating deep dives
   ============================================================ */
.split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:56px;align-items:center}
.split.flip > .split-copy{order:2}
.split + .split{margin-top:84px}
.split-copy h3{font-size:clamp(23px,2.4vw,30px);font-weight:750;letter-spacing:-.03em;
  line-height:1.2;margin:14px 0 14px}
.split-copy p{font-size:16.5px;color:var(--ink-2);line-height:1.6;max-width:44ch}
.split-list{list-style:none;display:grid;gap:10px;margin-top:22px}
.split-list li{display:flex;gap:10px;font-size:15px;color:var(--ink-2);line-height:1.5}
.split-list li svg{width:16px;height:16px;flex:0 0 16px;margin-top:3px;stroke-width:2.3;fill:none;
  stroke-linecap:round;stroke-linejoin:round;stroke:var(--acc)}
.split-shot{border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(16,24,40,.09);
  box-shadow:var(--sh-lg)}
.tag-sm{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:650;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.tag-sm[data-hue=teal]{background:var(--acc-soft);color:var(--acc-dark)}
.tag-sm[data-hue=lilac]{background:var(--lilac-soft);color:var(--lilac)}
.tag-sm[data-hue=sand]{background:var(--sand-soft);color:var(--sand)}

/* ============================================================
   moving in: the four steps
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.step{background:var(--surface);padding:28px 24px;position:relative}
.step-n{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;margin-bottom:15px;
  font-size:13.5px;font-weight:700;letter-spacing:-.02em;background:var(--acc-soft);color:var(--acc-dark)}
.step h3{margin-bottom:7px}
.step p{font-size:14.5px;color:var(--ink-2);line-height:1.6}

/* ============================================================
   the price, teased
   ============================================================ */
.price-tease{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-xl);padding:40px 42px;background:var(--surface);
  position:relative;overflow:hidden}
.price-tease .tint-wash{position:absolute;inset:-70% -25% auto auto;width:460px;height:360px;
  border-radius:50%;filter:blur(60px);opacity:.36;background:rgba(14,124,116,.3);pointer-events:none}
.price-tease h2{position:relative}
.price-tease p{font-size:16.5px;color:var(--ink-2);line-height:1.6;margin-top:14px;
  max-width:48ch;position:relative}
.tease-num{text-align:right;position:relative}
.tease-num b{display:block;font-size:clamp(44px,5.5vw,64px);font-weight:750;letter-spacing:-.045em;
  line-height:1}
.tease-num span{display:block;font-size:14.5px;color:var(--muted);margin-top:8px}
.tease-num .btn{margin-top:22px}

@media(max-width:980px){
  .pain{grid-template-columns:1fr}
  .pain-item,.pain-item.wide{grid-column:auto}
  .swap{grid-template-columns:1fr;gap:22px;padding:26px 22px}
  .swap-arrow{transform:rotate(90deg);margin:0 auto}
  .split{grid-template-columns:1fr;gap:28px}
  .split.flip > .split-copy{order:0}
  .split + .split{margin-top:52px}
  .split-copy p{max-width:none}
  .steps{grid-template-columns:1fr}
  .price-tease{grid-template-columns:1fr;gap:26px;padding:28px 24px}
  .tease-num{text-align:left}
}

/* ============================================================
   the emails page
   ============================================================ */
.msg{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.msg + .msg{margin-top:20px}
.msg-why{padding:24px 26px;border-bottom:1px solid var(--line-soft);background:var(--bg)}
.msg-why h3{font-size:19px;margin-bottom:8px}
.msg-why p{font-size:15px;color:var(--ink-2);line-height:1.6;max-width:70ch}
.msg-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;padding:20px 26px;
  border-bottom:1px solid var(--line-soft);font-size:14px}
.msg-meta dt{color:var(--muted)}
.msg-meta dd{color:var(--ink);word-break:break-word}
.msg-body{padding:24px 26px;font-size:15px;line-height:1.7;color:var(--ink);
  white-space:pre-wrap;background:var(--surface)}
.msg-note{padding:16px 26px;border-top:1px solid var(--line-soft);font-size:14px;
  color:var(--ink-2);background:rgba(14,124,116,.04);line-height:1.6}
.msg-note b{color:var(--acc-dark)}

.flags{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.flag{background:var(--surface);padding:22px 24px;display:flex;gap:13px}
.flag svg{width:18px;height:18px;flex:0 0 18px;margin-top:2px;stroke-width:2.3;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.flag.no svg{stroke:var(--blush)}
.flag.yes svg{stroke:var(--acc)}
.flag b{display:block;font-size:15.5px;font-weight:650;letter-spacing:-.015em;margin-bottom:4px}
.flag span{font-size:14.5px;color:var(--ink-2);line-height:1.6}

.plain{max-width:74ch}
.plain h3{font-size:19px;margin:34px 0 10px}
.plain p{font-size:16px;color:var(--ink-2);line-height:1.7;margin-bottom:14px}
.plain ul{list-style:none;display:grid;gap:9px;margin:0 0 18px}
.plain li{position:relative;padding-left:17px;font-size:15.5px;color:var(--ink-2);line-height:1.6}
.plain li::before{content:'';position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--acc)}
.plain a{color:var(--acc-dark);border-bottom:1px solid var(--acc-line)}

@media(max-width:980px){
  .flags{grid-template-columns:1fr}
  .msg-meta{grid-template-columns:1fr;gap:2px 0}
  .msg-meta dt{margin-top:8px}
  .msg-body,.msg-why,.msg-note{padding-left:20px;padding-right:20px}
}

/* ============================================================
   the legal pages
   ============================================================ */
.legal-hero{padding:56px 0 54px;position:relative;isolation:isolate;overflow:clip}
/* These heroes are short, so overflow:clip cuts the 1080px wash through its
   middle and leaves a hard horizontal line under the last line of text.
   Size the wash to the section instead and fade it out before the edge. */
.legal-hero .wash{inset:-260px -20% -40px -20%;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 56%,rgba(0,0,0,0) 97%);
          mask-image:linear-gradient(to bottom,#000 56%,rgba(0,0,0,0) 97%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
.legal-hero h1{max-width:18ch}
.legal-hero .lede{max-width:56ch;margin-top:16px}
.updated{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:13.5px;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:7px 15px}
.updated b{font-weight:650;color:var(--ink)}

.legal-body{display:grid;grid-template-columns:238px minmax(0,1fr);gap:56px;align-items:start}
.toc{position:sticky;top:26px}
.toc h2{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.toc ol{list-style:none;counter-reset:s;display:grid;gap:3px}
.toc a{display:flex;gap:10px;padding:7px 9px;border-radius:8px;font-size:14px;color:var(--ink-2);
  line-height:1.45;transition:background 160ms ease,color 160ms ease}
.toc a::before{counter-increment:s;content:counter(s);color:var(--faint);
  font-variant-numeric:tabular-nums;flex:0 0 auto}
@media(hover:hover) and (pointer:fine){.toc a:hover{background:var(--bg);color:var(--ink)}}

.legal{max-width:72ch;counter-reset:sec}
.legal section{scroll-margin-top:26px}
.legal section + section{margin-top:44px;padding-top:40px;border-top:1px solid var(--line-soft)}
.legal h2{font-size:22px;font-weight:750;letter-spacing:-.025em;line-height:1.28;margin-bottom:14px;
  display:flex;gap:12px;align-items:baseline}
.legal h2::before{counter-increment:sec;content:counter(sec);font-size:13px;font-weight:650;
  color:var(--acc);background:var(--acc-soft);border-radius:7px;padding:3px 9px;flex:0 0 auto;
  letter-spacing:0;position:relative;top:-2px}
.legal h3{font-size:16.5px;font-weight:700;letter-spacing:-.015em;margin:24px 0 8px}
.legal p{font-size:16px;color:var(--ink-2);line-height:1.72;margin-bottom:14px}
.legal ul{list-style:none;display:grid;gap:10px;margin:0 0 18px}
.legal li{position:relative;padding-left:17px;font-size:15.5px;color:var(--ink-2);line-height:1.65}
.legal li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--acc)}
.legal a{color:var(--acc-dark);border-bottom:1px solid var(--acc-line)}
.legal strong{color:var(--ink);font-weight:650}
.legal table{width:100%;border-collapse:collapse;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-bottom:18px}
.legal th{text-align:left;font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);background:var(--bg);padding:12px 16px;border-bottom:1px solid var(--line)}
.legal td{font-size:15px;color:var(--ink-2);padding:13px 16px;border-bottom:1px solid var(--line-soft);
  vertical-align:top;line-height:1.6}
.legal tr:last-child td{border-bottom:none}
.note-box{background:var(--gold-soft);border-radius:var(--r-lg);padding:20px 24px;margin-bottom:18px}
.note-box p{color:#6B4E17;margin-bottom:0;font-size:15.5px}
.note-box p + p{margin-top:12px}

@media(max-width:980px){
  .legal-body{grid-template-columns:1fr;gap:30px}
  .toc{position:static}
  .toc ol{grid-template-columns:1fr 1fr;display:grid;gap:2px}
  .legal h2{font-size:20px}
}
@media(max-width:560px){.toc ol{grid-template-columns:1fr}}

/* ============================================================
   contact
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:start}
.reach{display:grid;gap:16px}
.reach-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px;
  background:var(--surface);position:relative;overflow:hidden;
  transition:transform 300ms var(--ease-out),box-shadow 300ms ease,border-color 300ms ease}
.reach-card .tint-wash{position:absolute;inset:-70% -35% auto auto;width:320px;height:260px;
  border-radius:50%;filter:blur(48px);opacity:.36;pointer-events:none}
.reach-card[data-hue=teal]  .tint-wash{background:rgba(14,124,116,.3)}
.reach-card[data-hue=lilac] .tint-wash{background:rgba(111,95,158,.28)}
.reach-card[data-hue=sand]  .tint-wash{background:rgba(169,118,47,.26)}
@media(hover:hover) and (pointer:fine){
  .reach-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:#D8DDE4}
}
.reach-card h3{margin-bottom:7px;position:relative}
.reach-card p{font-size:14.5px;color:var(--ink-2);line-height:1.6;position:relative;margin-bottom:14px}
.mail{display:inline-flex;align-items:center;gap:9px;font-size:17px;font-weight:650;
  letter-spacing:-.02em;color:var(--acc-dark);position:relative;
  border-bottom:1px solid var(--acc-line);padding-bottom:2px}
.mail svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover) and (pointer:fine){.mail:hover{color:var(--acc)}}
.who-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:var(--bg)}
.who-card h3{margin-bottom:14px}
.who-card address{font-style:normal;font-size:15.5px;color:var(--ink-2);line-height:1.75}
.who-card .sep{height:1px;background:var(--line);margin:20px 0}
.who-card p{font-size:14.5px;color:var(--ink-2);line-height:1.65}
.ask{margin-top:18px}
.ask li{font-size:15px}
@media(max-width:980px){.contact-grid{grid-template-columns:1fr;gap:32px}}

/* Pages that borrow the legal SHELL but are not legal documents: contact,
   product, course, 404. They get the typography and none of the chrome.
   The numbered badge belongs to a document with a table of contents beside it;
   on a contact page it just looks like a bug, which is how it was spotted. */
.contact-wide{max-width:none}
.contact-wide section + section{margin-top:0;padding-top:0;border-top:none}
.legal.contact-wide h2{display:block}
.legal.contact-wide h2::before{content:none;counter-increment:none}

/* ============================================================
   404
   ============================================================ */
.lost{min-height:62vh;display:grid;place-items:center;padding:72px 0;position:relative;
  isolation:isolate;overflow:clip;text-align:center}
.lost h1{max-width:16ch;margin:22px auto 16px}
.lost .lede{max-width:52ch;margin:0 auto}
.lost-cta{display:flex;gap:12px;margin-top:32px;justify-content:center;flex-wrap:wrap}
.lost-links{margin-top:52px;padding-top:34px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-align:left}
.lost-links a{background:var(--surface);padding:22px 24px;display:block;
  transition:background 180ms ease}
.lost-links b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px}
.lost-links span{font-size:14px;color:var(--muted);line-height:1.55}
@media(hover:hover) and (pointer:fine){.lost-links a:hover{background:var(--bg)}}
@media(max-width:980px){.lost{min-height:auto;padding:44px 0}.lost-links{grid-template-columns:1fr}}

/* ============================================================
   the course
   ============================================================ */
.modules{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg)}
.modules > :first-child{border-radius:var(--r-lg) 0 0 0}
.modules > :nth-child(2){border-radius:0 var(--r-lg) 0 0}
.modules > :nth-last-child(2){border-radius:0 0 0 var(--r-lg)}
.modules > :last-child{border-radius:0 0 var(--r-lg) 0}
.mod{background:var(--surface);padding:24px 26px;display:flex;gap:18px}
.mod-n{flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-size:14px;font-weight:700;letter-spacing:-.02em;background:var(--lilac-soft);color:var(--lilac)}
.mod h3{font-size:16.5px;margin-bottom:5px}
.mod p{font-size:14.5px;color:var(--ink-2);line-height:1.55}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:44px}
.fact{background:var(--surface);padding:24px}
.fact b{display:block;font-size:26px;font-weight:750;letter-spacing:-.03em;line-height:1.2}
.fact span{font-size:13.5px;color:var(--muted);line-height:1.5;display:block;margin-top:5px}
@media(max-width:980px){
  .modules{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
}

/* Headings promoted from h3 to h2 for a correct outline, styled as before. */
.split-copy h2.split-h{font-size:clamp(23px,2.4vw,30px);font-weight:750;letter-spacing:-.03em;
  line-height:1.2;margin:14px 0 14px}
.plan-right h2.plan-h{font-size:15px;font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
.reach-card h2.reach-h,.who-card h2.reach-h,.plain h2.reach-h{font-size:18px;font-weight:700;
  letter-spacing:-.02em;line-height:1.3;margin-bottom:7px;position:relative}
.who-card h2.reach-h{margin-bottom:14px}
.plain h2.reach-h{font-size:19px;margin:34px 0 10px}

/* ============================================================
   spacing and tint helpers
   ============================================================
   These exist because the Content Security Policy forbids inline style
   attributes, and it should: an inline style is the same hole an injected
   script uses. Anything that was a style="" is a class here instead. */
.gap-lg{margin-top:84px;margin-bottom:26px}
.gap-md{margin-top:56px}
.gap-sm{margin-top:22px}
.mb-md{margin-bottom:26px}
.incl-grid.two{grid-template-columns:repeat(2,1fr)}
.ic.teal{background:var(--acc-soft);color:var(--acc-dark)}
.ic.lilac{background:var(--lilac-soft);color:var(--lilac)}
.ic.sand{background:var(--sand-soft);color:var(--sand)}
@media(max-width:980px){
  .gap-lg{margin-top:52px}
  .gap-md{margin-top:36px}
  .incl-grid.two{grid-template-columns:1fr}
}