/* ==========================================================================
   Elvi Caperonis
   Layout, gradients, radii and type scale repurposed from lattice.com (sampled
   from the live site). Colours are Elvi's own: see the token block below.
   Portrait / image treatment inspired by amyporterfield.com.
   ========================================================================== */

/* ---------- tokens (sampled from lattice.com) ---------- */
:root{
  /* ---- Elvi's brand hues ----------------------------------------------
     Sampled from her own assets, not invented:
       coaching design  -> #0247B7 royal blue, #040828 navy, #E5F2FD pale blue
       reinvent-yourself.org -> #1D3E6F navy, #FAF9F5 cream, #FEC77F gold
       Reinvent Yourself newsletter -> #98CCC6 mint, #CEAF9D sand
     The mechanics around them (32% white wash on tints, 13/22/44/29 radii,
     the page gradient, the rainbow-ring CTA, .9 line-height) are lattice.com's.
     ------------------------------------------------------------------- */

  /* ink */
  --ink:         #040828;
  --ink-soft:    #44506E;
  --ink-faint:   #616D85;   /* 5.2:1 on white, 4.8:1 on bone: clears AA */

  /* brand */
  --brand:       #0247B7;   /* primary button / accent   */
  --brand-deep:  #073B9A;   /* hover                     */
  --brand-light: #DCEBFB;   /* soft button, primary text */
  --brand-mid:   #B6D4FA;   /* circular arrow button     */
  --brand-arrow: #073B9A;
  --bar:         #FEC77F;   /* announcement bar (her gold)  */
  --panel-ink:   #0247B7;   /* full-width feature panel     */
  --amber:       #FEC77F;

  /* legacy aliases */
  --navy:       #0247B7;
  --blue:       #0247B7;
  --blue-deep:  #073B9A;
  --blue-tint:  #DCEBFB;
  --gold:       #FEC77F;

  /* surfaces */
  --paper:      #FFFFFF;
  --bone:       #F7F5F0;
  --bone-soft:  #FAF9F5;
  --bone-deep:  #EBE6DE;
  --line:       rgba(4,8,40,.13);
  --line-soft:  rgba(4,8,40,.07);

  /* card tints + their ink: her blue / mint / sand family,
     used exactly like lattice's product-card variants */
  --t-mist:  #D9EDFC;  --i-mist:  #0B4D80;  /* sky   */
  --t-sky:   #C9E8E3;  --i-sky:   #1D5F59;  /* mint  */
  --t-cream: #F6E7D8;  --i-cream: #8A5320;  /* sand  */
  --t-sage:  #DCE9FD;  --i-sage:  #0A3B8F;  /* blue  */
  --t-blush: #F5E2DB;  --i-blush: #7A4230;  /* clay  */
  --t-lilac: #E3E7F8;  --i-lilac: #33408F;  /* peri  */
  --t-lime:  #E2EDE4;  --i-lime:  #37603C;  /* sage  */

  /* the 32% white wash lattice lays over every tint */
  --wash: linear-gradient(rgba(255,255,255,.32), rgba(255,255,255,.32));

  /* geometry (lattice: btn 13.2, card 21.9, panel 43.9, inner card 29.3) */
  --r-btn:   13px;
  --r-card:  22px;
  --r-panel: 44px;
  --r-inner: 29px;
  --shell:   1240px;
  --gutter:  clamp(20px, 5vw, 56px);

  --shadow-sm: 0 1px 2px rgba(4,8,40,.05), 0 6px 20px -12px rgba(4,8,40,.18);
  --shadow-md: 0 2px 4px rgba(4,8,40,.05), 0 18px 44px -22px rgba(4,8,40,.28);
  --shadow-lg: 0 30px 70px -32px rgba(4,8,40,.34);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; background:var(--paper)}
body{
  margin:0; color:var(--ink);
  font-family:"Switzer","Switzer Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:18px; line-height:1.3; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* lattice runs a soft warm vertical gradient down the whole page */
main{
  display:block;
  background:linear-gradient(#FFFFFF, var(--bone-soft) 33%, var(--bone-soft) 66%, #FFFFFF);
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,h4{margin:0; font-weight:500; letter-spacing:-.024em; line-height:.92}
p{margin:0}
::selection{background:var(--brand-light); color:var(--brand-deep)}
:focus-visible{outline:2.5px solid var(--brand); outline-offset:3px; border-radius:6px}

/* ---------- layout ---------- */
.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter)}
.shell-wide{max-width:1400px}
.section{padding-block:clamp(64px,8vw,116px)}
.section-sm{padding-block:clamp(48px,6vw,80px)}
.bone{background:var(--bone)}
.stack-8{display:flex; flex-direction:column; gap:8px}
.stack-16{display:flex; flex-direction:column; gap:16px}
.stack-24{display:flex; flex-direction:column; gap:24px}

/* ---------- type scale (lattice: h1 73px / lh .9 / ls -.024em / w500) ---------- */
.d1{font-size:clamp(44px,6.1vw,73px); line-height:.9; letter-spacing:-.024em}
.d1-sm{font-size:clamp(36px,4.5vw,56px); line-height:.96; letter-spacing:-.022em}
.d2{font-size:clamp(33px,4.3vw,54px); line-height:.94; letter-spacing:-.024em}
.d3{font-size:clamp(26px,2.9vw,37px); line-height:1.02; letter-spacing:-.022em}
.d4{font-size:clamp(20px,2vw,25px); line-height:1.14; letter-spacing:-.018em; font-weight:500}
.lede{font-size:clamp(17px,1.5vw,22px); line-height:1.3; color:var(--ink)}
.body-lg{font-size:18px; line-height:1.45; color:var(--ink-soft)}
.small{font-size:15px; line-height:1.5; color:var(--ink-soft)}
.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--brand); margin:0 0 18px
}
.eyebrow-dark{color:rgba(255,255,255,.78)}
.script{
  font-family:"Caveat",ui-rounded,cursive; font-weight:600;
  font-size:clamp(26px,3.2vw,40px); line-height:1.05; letter-spacing:0; color:var(--brand);
}
.measure{max-width:56ch}
.measure-sm{max-width:44ch}
.center{text-align:center}
.center .measure,.center .measure-sm{margin-inline:auto}
.accent{color:var(--brand)}
strong{font-weight:600; color:var(--ink)}

/* ---------- buttons (lattice: r 13.2, pad 13.2/26.3, fs 16.5, w500) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:13px 26px; border-radius:var(--r-btn);
  font-size:16px; font-weight:500; letter-spacing:-.004em; white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), background .18s, box-shadow .18s, color .18s;
}
.btn svg{width:15px; height:15px; transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand); color:var(--brand-light)}
.btn-primary:hover{background:var(--brand-deep)}
.btn-soft{background:var(--brand-light); color:var(--brand-deep)}
.btn-soft:hover{background:#C6DEFA}
.btn-white{background:#fff; color:var(--brand); box-shadow:var(--shadow-sm)}
.btn-white:hover{box-shadow:var(--shadow-md)}
.btn-ghost{border:1px solid var(--line); background:#fff; color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-lg{padding:16px 30px; font-size:17px}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.center .btn-row{justify-content:center}

/* lattice's signature CTA: pastel oklch rainbow ring around the green button */
.btn-rainbow{
  color:var(--brand-light);
  border:3px solid transparent;
  border-radius:calc(var(--r-btn) + 3px);
  padding:10px 23px;
  background:
    linear-gradient(var(--brand), var(--brand)) padding-box,
    linear-gradient(to right in oklch, #9FD8FF, #C9E8E3, #FEC77F, #C9E8E3, #9FD8FF) border-box;
}
.btn-rainbow.btn-lg{padding:13px 27px}
.btn-rainbow:hover{
  background:
    linear-gradient(var(--brand-deep), var(--brand-deep)) padding-box,
    linear-gradient(to right in oklch, #9FD8FF, #C9E8E3, #FEC77F, #C9E8E3, #9FD8FF) border-box;
}

.link-arrow{
  display:inline-flex; align-items:center; gap:7px; font-weight:500; font-size:16px;
  color:var(--ink); border-bottom:1.5px solid var(--brand); padding-bottom:2px;
  transition:color .18s, border-color .18s;
}
.link-arrow svg{width:14px; height:14px; transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.link-arrow:hover{color:var(--brand)}
.link-arrow:hover svg{transform:translateX(3px)}

/* pill eyebrow badge (lattice) */
.pill{
  display:inline-flex; align-items:center; gap:10px; padding:5px 5px 5px 16px;
  border-radius:999px; background:var(--brand-light); color:var(--brand-deep);
  font-size:14px; font-weight:500; letter-spacing:-.004em;
}
.pill .dot{
  width:23px; height:23px; border-radius:999px; background:var(--brand-mid); color:var(--brand-arrow);
  display:grid; place-items:center; flex:none;
}
.pill .dot svg{width:11px; height:11px}
.pill-plain{padding:7px 16px; background:var(--brand-light)}
.pill-gold{background:var(--t-cream); color:var(--i-cream)}
.pill-outline{background:transparent; border:1px solid var(--line); color:var(--ink-soft); padding:7px 15px}

/* social pills: these are real links to her profiles, so they should read as
   buttons, not as the static label pills elsewhere on the page */
.social-pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 20px 10px 16px; border-radius:999px;
  background:var(--brand-light); color:var(--brand-deep);
  font-size:15.5px; font-weight:600; letter-spacing:-.005em;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), background .18s, color .18s, box-shadow .18s;
}
.social-pill svg{width:17px; height:17px; flex:none}
.social-pill:hover{
  background:var(--brand); color:#fff;
  transform:translateY(-2px); box-shadow:var(--shadow-md);
}
.social-pill:active{transform:translateY(0)}

/* circular arrow button: lattice mechanic, Elvi's blues */
.arrow-btn{
  width:34px; height:34px; border-radius:999px; flex:none;
  display:grid; place-items:center; background:var(--brand-mid); color:var(--brand-arrow);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), background .2s;
}
.arrow-btn svg{width:13px; height:13px}
.case:hover .arrow-btn,.tint-card:hover .arrow-btn{transform:translateX(3px)}

/* ---------- top announcement (lattice pattern, Elvi gold #FEC77F) ---------- */
.topbar{
  background:var(--bar); color:var(--ink); font-size:15px; text-align:center;
  padding:10px var(--gutter); display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap;
}
.topbar .tag{
  background:var(--ink); color:var(--bar); font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:999px;
}
.topbar a{font-weight:600; border-bottom:1px solid rgba(4,8,40,.42); padding-bottom:1px}
.topbar a:hover{border-color:var(--ink)}
.topbar .tb-short{display:none}
/* on a phone the bar was 121px tall, three stacked rows before any content.
   The pill already says TOP VOICE, so the long copy repeats it. Swap in the
   short line and let the pill sit beside it: two rows, about 52px.
   The swap runs to 980 because the long copy needs ~872px of inline room:
   below that it wrapped to three rows, which is 107px on an iPad portrait. */
@media (max-width:980px){
  .topbar{gap:5px 9px; padding-block:8px}
  .topbar .tag{font-size:10px; padding:3px 8px}
  .topbar .tb-long{display:none}
  .topbar .tb-short{display:inline}
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s;
}
.nav.is-stuck{border-color:var(--line-soft); box-shadow:0 1px 20px -10px rgba(4,8,40,.24)}
.nav-in{display:flex; align-items:center; gap:18px; height:72px}
.brand{display:flex; flex-direction:column; line-height:1; flex:none}
.brand b{font-size:20px; font-weight:600; letter-spacing:-.03em}
.brand span{font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-top:5px}
.nav-links{display:flex; gap:4px; margin-inline:auto}
.nav-links a{
  padding:9px 10px; border-radius:9px; font-size:15px; font-weight:500; color:var(--ink); white-space:nowrap;
  transition:background .16s, color .16s;
}
.nav-links a:hover{background:var(--bone)}
.nav-links a.active{color:var(--brand)}
.nav-cta{display:flex; align-items:center; gap:12px; flex:none}
.nav-cta .ghost{font-size:15px; font-weight:500; white-space:nowrap}
.nav-cta .ghost:hover{color:var(--brand)}
.nav-cta .btn{padding:10px 18px; font-size:15px; border-radius:12px}
.burger{display:none; width:40px; height:40px; border-radius:10px; place-items:center; flex:none}
.burger span{display:block; width:19px; height:1.8px; background:var(--ink); border-radius:2px; position:relative; transition:background .22s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:19px; height:1.8px; background:var(--ink); border-radius:2px; transition:transform .22s}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{transform:translateY(6px) rotate(45deg)}
.nav.open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{display:none; border-top:1px solid var(--line-soft); padding:10px var(--gutter) 22px; background:#fff}
.mobile-menu a{display:block; padding:13px 2px; font-size:17px; font-weight:500; border-bottom:1px solid var(--line-soft)}
.mobile-menu .btn{width:100%; margin-top:18px}
.nav.open .mobile-menu{display:block}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(48px,6vw,86px) 0}
/* ambient grid canvas: behind the hero content. Strongest at the top, gone by
   the lower third, and revealed on load rather than just appearing. */
.ambient{
  /* soft + desaturated on purpose: the field should be felt, not read.
     Roughly a 4% lightness step off white, the same restraint the
     reference uses (its tint is hsl(26.67,36%,95.1%) on a 99% ground). */
  --ambient-tint:#F2F6FD;
  position:absolute; inset:0; z-index:-1; display:block;
  width:100%; height:100%; pointer-events:none;
  opacity:0;
  animation:ambientReveal 2s ease-out .2s forwards;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 40%, rgba(0,0,0,.34) 70%, transparent 92%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 40%, rgba(0,0,0,.34) 70%, transparent 92%);
}
@keyframes ambientReveal{from{opacity:0} to{opacity:.75}}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,5vw,72px); align-items:center}
.hero-copy{padding-bottom:clamp(48px,6vw,86px)}
.hero-copy .d1,.hero-copy .d1-sm{margin-bottom:22px}
.hero-copy .lede{margin-bottom:30px; max-width:32ch}

/* ---------- image treatments (amy porterfield) ---------- */
.arch{
  border-radius:50% 50% 28px 28px / 42% 42% 4% 4%;
  overflow:hidden; background:var(--bone-deep);
}
.arch img{width:100%; height:100%; object-fit:cover; object-position:center 10%}

.portrait{position:relative; isolation:isolate}
.portrait .blob{
  position:absolute; inset:auto 0 0 0; z-index:-1;
  aspect-ratio:1/1; border-radius:999px;
  background:linear-gradient(150deg,var(--t-sage),var(--t-lime) 48%,var(--t-sky));
  transform:translate(6%,14%) scale(1.06);
}
.portrait .frame{
  position:relative; aspect-ratio:41/47; max-width:470px; margin-inline:auto;
  box-shadow:var(--shadow-lg);
}
.portrait.bleed .frame{margin-bottom:-56px}

.chip{
  position:absolute; z-index:3; background:#fff; border-radius:16px; padding:12px 16px;
  box-shadow:var(--shadow-md); display:flex; align-items:center; gap:11px;
  animation:float 7s ease-in-out infinite; white-space:nowrap;
}
.chip > span:last-child{display:block}
.chip .num{display:block; font-size:19px; font-weight:600; letter-spacing:-.03em; line-height:1.05}
.chip .lbl{display:block; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:5px}
.chip .ico{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none}
.chip .ico svg{width:17px; height:17px}
.chip-tl{top:3%; left:-11%}
.chip-br{bottom:8%; right:-10%; animation-delay:-3.5s}
.chip-bl{bottom:30%; left:-13%; animation-delay:-1.8s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.medallion{position:relative; width:100%; max-width:380px; aspect-ratio:1/1; margin-inline:auto}
.medallion::before{
  content:""; position:absolute; inset:0; border-radius:999px;
  background:linear-gradient(150deg,var(--t-sky),var(--t-lime));
}
.medallion img{
  position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px);
  border-radius:999px; object-fit:cover; object-position:center 14%;
}
.medallion-ring::after{
  content:""; position:absolute; inset:-14px; border-radius:999px;
  border:1px dashed rgba(2,71,183,.3);
}

.photo-card{border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-md); background:var(--bone-deep)}
.photo-card img{width:100%; height:100%; object-fit:cover}
/* cinematic stage band: squares up as the screen narrows so the crop stays kind */
.band{aspect-ratio:2/1}
@media (max-width:900px){ .band{aspect-ratio:3/2} }
@media (max-width:660px){ .band{aspect-ratio:1/1} }

/* ---------- two-column split (ratio passed in as --cols) ---------- */
.split{display:grid; grid-template-columns:var(--cols,1fr 1fr); gap:clamp(28px,4.5vw,64px); align-items:center}
.split.top{align-items:start}
/* stop a long unbreakable child (e.g. the email button) blowing out a 1fr track */
.split > *{min-width:0}
@media (max-width:900px){ .split{grid-template-columns:minmax(0,1fr)} }

/* ---------- stat band ---------- */
.stat-band{display:grid; grid-template-columns:var(--cols,repeat(4,1fr)); gap:1px; background:var(--line-soft); border-radius:var(--r-card); overflow:hidden}
.stat-band .cell{background:var(--bone-soft); padding:22px 26px}
.bone .stat-band .cell{background:var(--bone)}
.stat-band .n{font-size:clamp(30px,3.2vw,42px); font-weight:500; letter-spacing:-.035em; line-height:1}
.stat-band .l{font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:7px}

/* ---------- section head ---------- */
.head{margin-bottom:clamp(34px,4vw,56px)}
.head-split{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,64px); align-items:end}
.head-split .right{padding-bottom:6px}

/* ---------- bento tint cards (lattice product-card: tint + 32% white wash) ---------- */
.bento{display:grid; gap:18px}
.bento-3{grid-template-columns:repeat(3,1fr)}
.bento-2{grid-template-columns:repeat(2,1fr)}
.tint-card{
  border-radius:var(--r-card); padding:28px; display:flex; flex-direction:column; gap:12px;
  position:relative; min-height:100%; background-image:var(--wash);
  transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s;
}
.tint-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.tint-card .top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.tint-card .ico{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.62); flex:none}
.tint-card .ico svg{width:19px; height:19px}
.tint-card h3{font-size:22px; letter-spacing:-.022em; line-height:1.1}
.tint-card p{font-size:16px; line-height:1.45; color:var(--ink-soft)}
.tint-card .meta{margin-top:auto; padding-top:8px; font-size:14px; font-weight:600}
.c-mist{background-color:var(--t-mist)}
.c-mist h3,.c-mist .ico{color:var(--i-mist)}
.c-sky{background-color:var(--t-sky)}
.c-sky h3,.c-sky .ico{color:var(--i-sky)}
.c-cream{background-color:var(--t-cream)}
.c-cream h3,.c-cream .ico{color:var(--i-cream)}
.c-sage{background-color:var(--t-sage)}
.c-sage h3,.c-sage .ico{color:var(--i-sage)}
.c-blush{background-color:var(--t-blush)}
.c-blush h3,.c-blush .ico{color:var(--i-blush)}
.c-lilac{background-color:var(--t-lilac)}
.c-lilac h3,.c-lilac .ico{color:var(--i-lilac)}
.c-lime{background-color:var(--t-lime)}
.c-lime h3,.c-lime .ico{color:var(--i-lime)}

/* credential chips inside a tint card: replaces dot-separated runs that
   wrapped badly (a line could start with a stray "·") */
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:2px}
.chips li{
  background:rgba(255,255,255,.7); border-radius:999px;
  padding:5px 12px; font-size:13.5px; font-weight:500; line-height:1.35;
  color:var(--ink-soft); white-space:nowrap;
}
.tint-card .figure{
  font-size:clamp(28px,3vw,38px); font-weight:500;
  letter-spacing:-.035em; line-height:1; margin-top:2px;
}

/* ---------- audience cards ----------
   Five tint cards, each carrying the one visual its facts support. Marks
   take the card's own ink (--ac) over a lighter step of it for the track;
   values and labels stay in the text inks. */
.aud-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:18px}
.aud-follow,.aud-map{grid-column:span 3}
.aud-who,.aud-nl{grid-column:span 3}
.aud.c-sky{--ac:var(--i-sky); --tint:var(--t-sky)}
.aud.c-lilac{--ac:var(--i-lilac); --tint:var(--t-lilac)}
.aud.c-blush{--ac:var(--i-blush); --tint:var(--t-blush)}
.aud{
  --track:color-mix(in srgb, var(--ac) 15%, transparent);
  --surface:color-mix(in srgb, var(--tint) 68%, #fff);   /* the tint under its 32% wash */
  gap:20px; padding:28px 28px 26px;
}
.aud-head{display:flex; align-items:center; gap:12px}
.aud-head h3{font-size:20px}
.aud .cap{font-size:15px; line-height:1.4; color:var(--ink-soft)}
.aud .aud-note{margin-top:auto; font-size:13.5px; line-height:1.45; color:var(--ink-faint)}

/* headline number */
.aud-hero{display:flex; flex-direction:column; gap:8px}
.aud-hero .n{font-size:clamp(52px,5.6vw,76px); font-weight:500; letter-spacing:-.045em; line-height:.9; color:var(--ink)}
.aud-hero .u{font-size:15.5px; line-height:1.4; color:var(--ink-soft); max-width:32ch}
.aud-li .aud-hero .n{font-size:clamp(36px,3.3vw,46px); letter-spacing:-.04em}

/* channel bars: out of the 290K total, a 10px mark with a 4px data end */
.aud-bars{display:flex; flex-direction:column; gap:16px}
.aud-bars li{display:grid; grid-template-columns:1fr auto; row-gap:8px; align-items:baseline}
.aud-bars .k{font-size:14.5px; color:var(--ink-soft)}
.aud-bars .v{font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--ink)}
.aud-bars .bar{grid-column:1 / -1; height:10px; border-radius:4px; background:var(--track); overflow:hidden}
.aud-bars .bar i{
  display:block; height:100%; width:calc(var(--v) * 100%); border-radius:0 4px 4px 0; background:var(--ac);
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s cubic-bezier(.2,.7,.3,1) .25s;
}
.aud-bars li + li .bar i{transition-delay:.4s}
.aud.in .aud-bars .bar i{transform:none}

/* dot map: the dots are one path of zero-length round-capped segments; the
   pins are HTML so their labels stay one size at any width */
.map{position:relative; margin:4px 2px 0}
.map svg{display:block; width:100%; height:auto; overflow:visible}
.map path{fill:none; stroke:color-mix(in srgb, var(--ac) 24%, transparent); stroke-width:5; stroke-linecap:round}
.pin{position:absolute; left:var(--x); top:var(--y); width:0; height:0}
.pin::before,.pin::after{
  content:""; position:absolute; left:-6px; top:-6px; width:12px; height:12px; border-radius:50%;
}
.pin::before{
  background:var(--ac); box-shadow:0 0 0 2.5px var(--surface); z-index:1;
  transform:scale(0); transition:transform .5s cubic-bezier(.3,1.6,.5,1) calc(.35s + var(--i) * .09s);
}
.pin::after{border:2px solid var(--ac); opacity:0}
.aud.in .pin::before{transform:none}
.aud.in .pin::after{animation:pin-pulse 3.2s ease-out calc(1.2s + var(--i) * .45s) infinite}
@keyframes pin-pulse{0%{transform:scale(1); opacity:.55} 70%,100%{transform:scale(2.6); opacity:0}}
.pin b{
  position:absolute; z-index:2; white-space:nowrap;
  font-size:12.5px; font-weight:600; line-height:1; color:var(--ink);
  background:var(--surface); padding:3px 6px; border-radius:6px;
  opacity:0; transition:opacity .4s calc(.6s + var(--i) * .09s);
}
.aud.in .pin b{opacity:1}
.pin[data-side="r"] b{left:10px; top:0; transform:translateY(-50%)}
.pin[data-side="l"] b{right:10px; top:0; transform:translateY(-50%)}
.pin[data-side="t"] b{bottom:10px; left:0; transform:translateX(-50%)}
/* right and a touch low: NYC sits just under MA, and a centred label
   would cover MA's pin on a phone */
.pin[data-side="rb"] b{left:9px; top:2px}

/* range on a scale: ages, or impressions per post */
.aud-range{display:flex; flex-direction:column; gap:10px}
.aud-range .track{position:relative; height:10px; border-radius:4px; background:var(--track)}
.aud-range .track i{
  position:absolute; top:0; bottom:0; border-radius:4px; background:var(--ac);
  left:calc(var(--lo) * 100%); width:calc((var(--hi) - var(--lo)) * 100%);
  transform:scaleX(0); transform-origin:left; transition:transform 1s cubic-bezier(.2,.7,.3,1) .3s;
}
.aud.in .aud-range .track i{transform:none}
/* "200K+": the band keeps going past its last tick and fades out */
.aud-range-open .track i{
  width:calc((1 - var(--lo)) * 100%); border-radius:4px 0 0 4px;
  background:linear-gradient(90deg, var(--ac) calc((var(--hi) - var(--lo)) / (1 - var(--lo)) * 100%), transparent);
}
.aud-range .ticks{position:relative; height:14px}
.aud-range .ticks span{
  position:absolute; left:calc(var(--at) * 100%); transform:translateX(-50%);
  font-size:12.5px; font-weight:500; line-height:1; color:var(--ink-faint);
}
.aud-range .ticks .s{transform:none}                 /* a tick at the track's start */
.aud-range .ticks .e{transform:translateX(-100%)}    /* and at its end */
/* the reach card is shorter than its row: centre the figure and its scale
   as one group rather than leaving a hole between them */
.aud-li .aud-hero{margin-top:auto}
.aud-li .aud-range{margin:6px 0 auto}

.aud-tags{display:flex; flex-direction:column; gap:9px}
.aud-tags .cap{font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint)}
.aud .chips li{background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ac) 14%, transparent)}
.aud .chips-co li{font-weight:600}

/* open-rate ring: the same 10px mark, bent round */
.aud-nl-body{display:flex; align-items:center; gap:26px; margin-top:auto; margin-bottom:auto}
.ring{position:relative; width:128px; flex:none}
.ring svg{display:block; width:100%; height:auto; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:10}
.ring .t{stroke:var(--track)}
.ring .f{
  stroke:var(--ac); stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.3,1) .35s;
}
.aud.in .ring .f{stroke-dashoffset:calc(100 - var(--v))}
.ring .in{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px}
.ring .in b{font-size:30px; font-weight:500; letter-spacing:-.04em; line-height:1; color:var(--ink)}
.ring .in small{font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint)}
.aud-stats{margin:0; display:flex; flex-direction:column; gap:16px}
.aud-stats dt{font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint)}
.aud-stats dd{margin:5px 0 0; font-size:28px; font-weight:500; letter-spacing:-.035em; line-height:1; color:var(--ink)}

@media (max-width:1024px){
  .aud-grid{grid-template-columns:repeat(2,1fr)}
  .aud-grid > .aud{grid-column:auto}
  .aud-grid > .aud-who,
  .aud-grid > .aud-nl{grid-column:1 / -1}
  .aud-nl .aud-stats{flex-direction:row; gap:clamp(24px,5vw,56px)}
}
@media (max-width:660px){
  .aud-grid{grid-template-columns:minmax(0,1fr)}
  .aud{padding:24px}
  .aud-nl .aud-stats{flex-direction:column; gap:16px}
}
/* on the narrowest phones the east-coast pins sit ~14px apart */
@media (max-width:400px){
  .pin::before,.pin::after{left:-5px; top:-5px; width:10px; height:10px}
  .pin::before{box-shadow:0 0 0 2px var(--surface)}
  .pin b{font-size:11.5px; padding:2px 5px}
}

/* press strip: bare marks, optically sized, no boxes (lattice logo-bar idiom) */
.press{
  display:flex; align-items:center; gap:clamp(20px,3.5vw,48px); flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  padding:20px clamp(22px,3vw,34px);
}
.press .label{
  font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--brand); flex:none;
}
.marks{display:flex; align-items:center; flex-wrap:wrap; gap:clamp(22px,3.5vw,44px)}
.marks img{width:auto; object-fit:contain}
.press .marks{flex:1; justify-content:space-around}
/* the marks and the media chips link out to the actual pieces */
.press .marks a{display:inline-flex; align-items:center; border-radius:8px; transition:opacity .18s, transform .18s}
.press .marks a:hover{opacity:.6; transform:translateY(-2px)}
.press .marks a:focus-visible{outline:2px solid var(--brand); outline-offset:6px}
.chips-link li{padding:0}
.chips-link li a{
  display:block; padding:5px 12px; border-radius:999px; color:var(--ink-soft);
  transition:background .18s, color .18s;
}
.chips-link li a:hover{background:#fff; color:var(--brand-deep)}
.chips-link li a:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* mosaic: the three credential cards stack in a narrow left column while the
   stage photo fills the whole right side as one tall block */
.bento-mosaic{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.85fr);
  gap:18px;
  align-items:stretch;
}
.bento-mosaic > .tint-card{grid-column:1}
.bento-mosaic > .mosaic-photo{grid-column:2; grid-row:1 / span 3}
.bento-mosaic > .mosaic-photo img{object-position:center 12%}

/* white card with hairline border */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  padding:26px; display:flex; flex-direction:column; gap:12px;
  transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s, border-color .26s;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent}
.card h3{font-size:20px; letter-spacing:-.02em}
.card p{font-size:16px; color:var(--ink-soft); line-height:1.45}

/* ---------- logo wall ---------- */
/* Three rows of marks on white, one cell swapping at a time (site.js).
   Every cell is the same optical box, so a 6:1 wordmark and a square tile
   read at one size. The spares sit in the markup for the no-JS case; once
   the script has read them they leave the DOM and rotate in from there. */
.logo-wall{
  list-style:none; display:grid; grid-template-columns:repeat(4,1fr);
  column-gap:clamp(18px,3vw,40px); row-gap:clamp(12px,1.8vw,24px);
}
/* The cell carries the hover and the mark carries the optical correction:
   a var() inside a transitioned transform goes stale in Chromium, so the two
   never share one transform. */
.lw-cell{
  display:grid; place-items:center; height:104px; padding-inline:6px;
  transition:transform .34s cubic-bezier(.2,.7,.3,1);
}
.lw-cell:hover{transform:scale(1.07)}
.lw-spare{display:none}
/* full colour: the band sits on white so white-backed marks blend.
   --s is a per-logo optical correction for art that carries its own padding
   (Gamma) or fills its file edge to edge (Jobscan); it scales the ink without
   moving the layout box.

   A swap stacks the incoming mark on the outgoing one in the same grid cell
   and dissolves between them: the cell is never empty and nothing shifts, so
   the change registers as a fade rather than a jump. */
.lw-cell img{
  grid-area:1/1;
  height:69px; width:auto; max-width:192px; object-fit:contain;
  transform:scale(var(--s,1));
  transition:opacity .62s ease;
}
.lw-cell img.is-out{opacity:0}
/* Three rows at every width: drop a column and drop the cells that would have
   started a fourth row. The marks left off the wall are not lost, they simply
   rotate on through the swap. */
@media (max-width:1024px){
  .logo-wall{grid-template-columns:repeat(3,1fr)}
  .lw-cell:nth-child(n+10){display:none}
}
@media (max-width:660px){
  .logo-wall{grid-template-columns:repeat(2,1fr)}
  .lw-cell:nth-child(n+7){display:none}
}
.logo-grid{display:flex; flex-wrap:wrap; gap:16px; justify-content:center; align-items:center}
.logo-grid .cell{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  height:74px; padding:14px 22px; display:grid; place-items:center; min-width:136px;
}
.logo-grid img{max-height:40px; width:auto; object-fit:contain}

/* ---------- campaign cards ---------- */
.case-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.case{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s;
}
.case:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
/* one height for every card. A short thumb made .foot (margin-top:auto) drop
   to the bottom of a stretched body and opened a dead gap mid-card */
.case .thumb{height:208px; display:grid; place-items:center; padding:20px; position:relative; background-image:var(--wash)}
.case .thumb img{max-height:100%; max-width:74%; width:auto; object-fit:contain}
/* full-bleed variant for the real post creatives */
.case .thumb.shot{height:208px; padding:0; display:block; background:var(--bone-deep)}
.case .thumb.shot img{width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; object-position:center top}
.case .body{padding:22px 24px 24px; display:flex; flex-direction:column; gap:14px; flex:1}
.case h3{font-size:20px; letter-spacing:-.02em}
.case .kpis{display:flex; gap:22px}
.case .kpis .n{font-size:21px; font-weight:600; letter-spacing:-.03em; line-height:1}
.case .kpis .l{font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-top:6px}
.case .foot{margin-top:auto; padding-top:4px; display:flex; align-items:center; justify-content:space-between; gap:12px}

/* ---------- live post embeds ---------- */
/* Base state (no JS, or reduced motion): a sideways-scrolling row whose
   first and last posts line up with the shell's content. */
.post-marquee{
  --pm-pad:max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
  --pm-gap:18px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-behavior:auto;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--pm-pad);
  padding:4px var(--pm-pad) 22px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.post-marquee:focus-visible{outline-offset:-3px}
.pm-track{display:flex; align-items:flex-start; width:max-content}
.embed{
  flex:none; width:min(504px, calc(100vw - var(--gutter) * 2));
  margin-right:var(--pm-gap); scroll-snap-align:start;
  border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--shadow-sm);
}
.embed:last-child{margin-right:0}
.embed iframe{display:block; width:100%; border:0}
/* LinkedIn issues each frame's height for a 504px-wide post and the frame
   never resizes to its content, so a narrower frame keeps that height and
   ends in a band of empty white (its image shrinks, the frame does not).
   site.js sets --pm-scale instead: the frame is laid out at 504 and scaled
   down whole, so the post keeps LinkedIn's own proportions at any width. */
.post-marquee.is-fit .embed{height:calc(var(--h) * var(--pm-scale) * 1px)}
.post-marquee.is-fit .embed iframe{
  width:504px; height:calc(var(--h) * 1px);
  transform:scale(var(--pm-scale)); transform-origin:0 0;
}

/* Drifting state, switched on by site.js once it has doubled the set. It
   is still a native scroller, so a swipe or a trackpad moves it; the drift
   is site.js stepping scrollLeft down, and the copy lets it wrap unseen. */
.post-marquee.is-live{
  scroll-snap-type:none; padding-inline:0; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.post-marquee.is-live::-webkit-scrollbar{display:none}
.post-marquee.is-live .embed{scroll-snap-align:none}
.post-marquee.is-live .embed:last-child{margin-right:var(--pm-gap)}
/* the doubled set only exists for the loop; if reduced motion is switched
   on mid-visit the row drops back to the original six */
.post-marquee:not(.is-live) [data-pm-clone]{display:none}

/* site.js drags the row with the mouse. The page never sees a pointer
   over a cross-origin frame, so the frames stand aside and the row takes
   the drag; a plain click on a post opens it on LinkedIn instead */
.post-marquee.is-drag{cursor:grab; user-select:none; -webkit-user-select:none}
.post-marquee.is-drag .embed iframe{pointer-events:none}
.post-marquee.is-dragging{cursor:grabbing; scroll-snap-type:none}

/* ---------- quotes ---------- */
.quote{border-radius:var(--r-card); padding:34px; display:flex; flex-direction:column; gap:20px; background-image:var(--wash)}
.quote blockquote{margin:0; font-size:19px; line-height:1.42; letter-spacing:-.012em}
.quote .who{display:flex; align-items:center; gap:14px; margin-top:auto}
.quote .who img{width:50px; height:50px; border-radius:999px; object-fit:cover; flex:none}
.quote .who b{display:block; font-size:16px; font-weight:600; letter-spacing:-.015em}
.quote .who span{display:block; font-size:14px; color:var(--ink-soft); margin-top:2px}
.qmark{font-size:44px; line-height:.5; font-weight:500; opacity:.4; height:22px}

/* The lead review: portrait and attribution in a narrow left rail, the quote
   beside it. A quote this long was unreadable centred, where every line
   started at a different place. */
.quote-feature{
  border-radius:var(--r-card); padding:clamp(28px,3.4vw,48px);
  background-image:var(--wash);
  display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:clamp(22px,3vw,46px); align-items:center;
  max-width:1000px; margin:0 auto;
}
.qf-who{display:flex; flex-direction:column; align-items:flex-start}
.qf-who img{width:104px; height:104px; border-radius:999px; object-fit:cover; margin-bottom:18px}
.qf-who b{font-size:17px; font-weight:600; letter-spacing:-.015em}
.qf-who .role{font-size:14px; line-height:1.4; color:var(--ink-soft); margin-top:5px}
.qf-who .source{
  font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:14px; line-height:1.5;
}
.qf-body{display:flex; flex-direction:column; gap:16px}
.quote-feature blockquote{
  margin:0; font-size:clamp(18px,1.55vw,20.5px); line-height:1.52; letter-spacing:-.012em;
}
@media (max-width:760px){
  .quote-feature{grid-template-columns:minmax(0,1fr); gap:22px}
  .qf-who img{width:88px; height:88px; margin-bottom:14px}
}

/* The remaining reviews: a masonry wall, so a short review keeps its own
   height instead of being stretched to match the one beside it. */
/* Every review leads with a line lifted word for word from that client's own
   text, so the block can be read in a glance and the full quote still sits
   underneath it. The oversized glyph is a decorative watermark: the children
   are lifted above it so the text stays legible over the top. */
.quote-wall .quote,
.quote-feature{position:relative; overflow:hidden}
.quote-wall .quote::before,
.quote-feature::before{
  content:"\201C"; position:absolute; top:0; right:.12em;
  font-size:150px; line-height:1; font-weight:500; color:var(--ink);
  opacity:.09; pointer-events:none;
}
.quote-wall .quote > *,
.quote-feature > *{position:relative}
.quote-lead,.qf-lead{
  margin:0; font-weight:600; letter-spacing:-.028em; line-height:1.18;
  text-wrap:balance;
}
.quote-lead{font-size:clamp(19px,1.5vw,22px); padding-right:60px}
.qf-lead{font-size:clamp(23px,2.1vw,30px); padding-right:72px}
.quote-wall .quote{gap:13px; padding:30px}
.quote-wall blockquote{font-size:16px; line-height:1.5; color:var(--ink-soft); letter-spacing:-.005em}
.quote-wall .who{padding-top:5px}
.quote-feature blockquote{font-size:clamp(16.5px,1.3vw,17.5px); line-height:1.58; color:var(--ink-soft)}
@media (max-width:660px){
  .quote-wall .quote::before,.quote-feature::before{font-size:120px}
}

.quote-wall{columns:2; column-gap:18px}
.quote-wall > .quote{break-inside:avoid; margin:0 0 18px}
@media (max-width:860px){ .quote-wall{columns:1} }

/* ---------- plans (structure repurposed from calendly.com/pricing) ----------
   Their anatomy, sampled from the live page: a white card at 40px radius with
   no border or shadow, the feature list sitting OUTSIDE it on the panel
   background, an "Everything in X, and:" intro line, outline buttons at 20px
   radius, and the popular column wrapped in a 48px frame whose top strip
   carries an uppercase label. Colours and copy are Elvi's.
   -------------------------------------------------------------------------- */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start}

.plan{display:flex; flex-direction:column; border-radius:48px}

/* The highlighted column's "border" is not a border. A field of soft colour
   blobs, much larger than the column, is clipped by the rounded overflow:hidden
   box; the opaque card sits on top, so only a 9px rim of colour shows and the
   label sits in the 16px gap above the card. The field turns slowly, so the rim
   shifts colour. Same construction as the reference, in Elvi's palette. */
.plan.featured{
  position:relative; isolation:isolate; overflow:hidden;
  padding:16px 9px 9px;
}
.plan.featured::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; height:210%; aspect-ratio:1/1;
  translate:-50% -50%;
  background:
    radial-gradient(closest-side, #0247B7, rgba(2,71,183,0)   72%)  50%  8% / 72% 46% no-repeat,
    radial-gradient(closest-side, #1E5EA7, rgba(30,94,167,0)  72%)   8% 34% / 62% 56% no-repeat,
    radial-gradient(closest-side, #C9E8E3, rgba(201,232,227,0)72%)  94% 44% / 56% 60% no-repeat,
    radial-gradient(closest-side, #FEC77F, rgba(254,199,127,0)72%)  86% 90% / 60% 50% no-repeat,
    radial-gradient(closest-side, #9FD8FF, rgba(159,216,255,0)72%)  12% 92% / 62% 50% no-repeat,
    #0B3C86;
  animation:planDrift 24s linear infinite;
}
@keyframes planDrift{from{rotate:0deg} to{rotate:360deg}}

.plan-flag{
  display:block; text-align:center; color:#fff;
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  line-height:1; padding-bottom:16px;
}

.plan-card{
  background:#fff; border-radius:40px; padding:34px 30px;
  display:flex; flex-direction:column; gap:14px;
}
.plan-name{font-size:clamp(28px,2.7vw,34px); font-weight:500; letter-spacing:-.03em; line-height:1.05; min-height:2.1em}
.plan-tag{font-size:16px; line-height:1.45; color:var(--ink-soft); min-height:2.9em}
.plan-figure{
  margin-top:auto; padding-top:14px;
  font-size:clamp(34px,3.4vw,44px); font-weight:500; letter-spacing:-.04em; line-height:1;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.plan-figure span{font-size:14px; font-weight:500; letter-spacing:0; color:var(--ink-faint)}
.plan-btn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:8px; padding:13px 20px; border-radius:20px;
  border:1px solid rgba(4,8,40,.22); color:var(--ink);
  font-size:16px; font-weight:500;
  transition:background .18s, border-color .18s, color .18s;
}
.plan-btn svg{width:16px; height:16px; flex:none; transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.plan-btn:hover{background:var(--ink); border-color:var(--ink); color:#fff}
.plan-btn:hover svg{transform:translateX(3px)}
.plan-btn.solid{background:var(--brand); border-color:var(--brand); color:#fff}
.plan-btn.solid:hover{background:var(--brand-deep); border-color:var(--brand-deep)}

/* feature list lives outside the white card, on the panel */
.plan-feat{padding:26px 30px 30px}
/* inside the highlighted column the card and list form one continuous light
   surface, so only the rim of the blob field shows around them */
.plan.featured .plan-card{border-radius:40px 40px 0 0}
.plan.featured .plan-feat{background:var(--bone-soft); border-radius:0 0 40px 40px}
.plan-feat-intro{font-size:14px; color:var(--ink-faint); margin-bottom:16px}

/* the 01/02/03 marker, so the three tiers read as a sequence rather than
   three unrelated cards */
.plan-index{
  align-self:flex-start; padding:5px 11px; border-radius:999px;
  background:var(--bone-deep); color:var(--ink-faint);
  font-size:12px; font-weight:600; letter-spacing:.1em; line-height:1;
}
/* the catch-all row under the tiers: anything not covered by a package */
.custom-band{
  margin-top:18px; border-radius:var(--r-card); padding:26px 30px;
  background:var(--t-sky); display:flex; align-items:center;
  justify-content:space-between; gap:26px; flex-wrap:wrap;
}
.custom-band > div{max-width:62ch; min-width:0}
.custom-band h3{color:var(--i-sky)}
.custom-band .btn{flex:none}
/* the address in plain sight, so it can be read and copied without clicking */
.custom-band .band-mail{
  display:inline-block; margin-top:10px; font-size:15px; font-weight:600;
  color:var(--i-sky); text-decoration:none; border-bottom:1px solid currentColor;
  padding-bottom:1px;
}
.custom-band .band-mail:hover{opacity:.72}
@media (max-width:660px){
  .custom-band{padding:24px; gap:18px}
  .custom-band .btn{width:100%; justify-content:center}
}
.plan-feat ul{display:flex; flex-direction:column; gap:12px}
.plan-feat li{display:flex; gap:11px; font-size:15.5px; line-height:1.45; align-items:flex-start}
.plan-feat svg{width:17px; height:17px; flex:none; margin-top:2px; color:var(--brand)}
.plan-feat .rule{height:1px; background:var(--line); border:0; margin:20px 0}

/* ---------- pricing / packages ---------- */
.pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
.pkg{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:30px;
  display:flex; flex-direction:column; gap:18px; position:relative;
}
.pkg.featured{border-color:transparent; background:var(--brand); color:#fff; box-shadow:var(--shadow-lg)}
.pkg.featured .small,.pkg.featured p{color:rgba(255,255,255,.8)}
.pkg.featured .feat li{color:var(--brand-light)}
.pkg .tier{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand)}
.pkg.featured .tier{color:var(--brand-mid)}
.pkg h3{font-size:25px; letter-spacing:-.024em}
.feat{display:flex; flex-direction:column; gap:12px; margin-top:4px}
.feat li{display:flex; gap:11px; font-size:16px; line-height:1.4; align-items:flex-start}
.feat svg{width:18px; height:18px; flex:none; margin-top:2px; color:var(--brand)}
.pkg.featured .feat svg{color:var(--brand-mid)}
.pkg .btn{margin-top:auto}
.badge-top{
  position:absolute; top:-11px; left:30px; background:var(--amber); color:#4A2D00;
  font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
}

/* ---------- full-width panels (lattice .box, radius 43.9) ---------- */
.panel{
  border-radius:var(--r-panel); padding:clamp(40px,5.5vw,76px); position:relative; overflow:hidden;
  background:var(--panel-ink); color:#fff;
}
.panel h2,.panel h3{color:#fff}
.panel p{color:rgba(255,255,255,.82)}
.panel-in{position:relative; z-index:1}
/* lattice's outro box: pastel gradient panel holding a white inner card */
.panel-soft{
  background:linear-gradient(118deg,var(--t-sage) 0%,var(--t-lime) 42%,var(--t-sky) 100%);
  color:var(--ink);
}
.panel-soft h2,.panel-soft h3{color:var(--ink)}
.panel-soft p{color:var(--ink-soft)}
.panel-card{background:#fff; border-radius:var(--r-inner); padding:clamp(28px,3.4vw,48px)}

/* ---------- sponsored newsletter editions (inside the soft panel) ----------
   LinkedIn won't frame its articles, so each edition is a card whose cover
   borrows the newsletter's own banner: a mint / peach / gold wash, the
   script masthead and a line drawing of the edition's topic. */
.nl-editions{
  position:relative; z-index:1;
  margin-top:clamp(36px,4.4vw,60px); padding-top:clamp(28px,3.4vw,44px);
  border-top:1px solid rgba(4,8,40,.1);
}
.nl-editions-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.nl-editions-head .eyebrow{margin:0}
.nl-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.nl-ed{
  display:flex; flex-direction:column; background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow-sm); color:var(--ink);
  transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s;
}
.nl-ed:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.nl-cover{position:relative; display:block; height:120px; padding:16px 20px; overflow:hidden; color:#1D3E6F}
.nl-a .nl-cover{background:linear-gradient(128deg,#98CCC6 0%,#C9D9C8 45%,#F4B09A 100%)}
.nl-b .nl-cover{background:linear-gradient(128deg,#F4B09A 0%,#F8C39A 50%,#FEC77F 100%)}
.nl-c .nl-cover{background:linear-gradient(128deg,#B6D4FA 0%,#A9D3DD 50%,#98CCC6 100%)}
.nl-mast{display:block; font-family:"Caveat",ui-rounded,cursive; font-weight:600; font-size:30px; line-height:1; letter-spacing:0}
.nl-sub{display:block; margin-top:5px; font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; opacity:.72}
.nl-art{
  position:absolute; right:-10px; bottom:-18px; width:112px; height:112px; opacity:.24;
  transform:rotate(-8deg); transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .3s;
}
.nl-ed:hover .nl-art{transform:rotate(-2deg) scale(1.06); opacity:.34}
.nl-body{display:flex; flex-direction:column; gap:10px; flex:1; padding:20px 22px 22px}
.nl-tag{font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--brand)}
.nl-title{font-size:18.5px; font-weight:500; line-height:1.24; letter-spacing:-.016em; color:var(--ink)}
.nl-by{font-size:14px; color:var(--ink-faint)}
.nl-body .link-arrow{align-self:flex-start; margin-top:auto; padding-top:6px}
.nl-ed:hover .link-arrow{color:var(--brand)}
.nl-ed:hover .link-arrow svg{transform:translateX(3px)}

/* one per row once three won't fit: the cover moves to the left */
@media (max-width:900px){
  .nl-grid{grid-template-columns:minmax(0,1fr); gap:14px}
  .nl-ed{flex-direction:row}
  .nl-cover{width:clamp(130px,26vw,190px); height:auto; flex:none}
  .nl-mast{font-size:26px}
}
@media (max-width:560px){
  .nl-ed{flex-direction:column}
  .nl-cover{width:auto; height:96px}
  .nl-body{padding:18px 20px 20px}
}

/* ---------- orbit (coaching hub) ---------- */
.orbit{display:grid; grid-template-columns:1fr minmax(280px,352px) 1fr; gap:clamp(20px,3vw,44px); align-items:center}
.orbit-col{display:flex; flex-direction:column; gap:clamp(22px,3vw,42px)}
.topic{display:flex; gap:16px; align-items:flex-start}
.topic .ico{width:50px; height:50px; border-radius:15px; display:grid; place-items:center; flex:none; background-image:var(--wash)}
.topic .ico svg{width:23px; height:23px}
.topic h3{font-size:20px; letter-spacing:-.022em; margin-bottom:7px}
.topic p{font-size:16px; line-height:1.42; color:var(--ink-soft)}
.price-card{
  background:#fff; border-radius:999px; aspect-ratio:1/1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:12%;
  box-shadow:0 0 0 1px var(--line-soft), var(--shadow-lg);
  background-image:radial-gradient(circle at 50% 6%, var(--t-sage), #fff 62%);
}
.price-card .tier{font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--brand); line-height:1.5}
.price-card .amount{font-size:clamp(52px,6.4vw,78px); font-weight:500; letter-spacing:-.045em; line-height:1; margin:12px 0 14px; color:var(--ink)}
.price-card .amount sup{font-size:.44em; vertical-align:super; margin-right:2px; letter-spacing:-.02em}
.price-card .facts{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.price-card .facts div{display:flex; align-items:center; gap:8px; justify-content:center; font-size:16px; color:var(--ink-soft)}
.price-card .facts svg{width:16px; height:16px; color:var(--brand); flex:none}
.price-card .fine{font-size:13px; line-height:1.4; color:var(--ink-faint); margin-top:16px; max-width:26ch}

/* ---------- timeline (career) ---------- */
.timeline{display:flex; flex-direction:column}
.tl-item{display:grid; grid-template-columns:230px 1fr; gap:clamp(20px,4vw,60px); padding:34px 0; border-top:1px solid var(--line)}
.tl-item:last-child{border-bottom:1px solid var(--line)}
.tl-item .org b{display:block; font-size:23px; font-weight:500; letter-spacing:-.024em; line-height:1.08}
.tl-item .org span{display:block; font-size:15px; color:var(--ink-soft); margin-top:8px}
.tl-item ul{display:flex; flex-direction:column; gap:13px}
.tl-item li{display:flex; gap:12px; font-size:16.5px; line-height:1.45; color:var(--ink-soft)}
.tl-item li::before{content:""; width:6px; height:6px; border-radius:999px; background:var(--brand); flex:none; margin-top:9px}

/* ---------- misc ---------- */
.chk{display:flex; flex-direction:column; gap:15px}
.chk li{display:flex; gap:13px; align-items:center; font-size:18px; font-weight:500; letter-spacing:-.012em}
.chk svg{width:23px; height:23px; flex:none; color:var(--brand)}
.panel .chk svg{color:var(--brand-mid)}
.panel-soft .chk svg{color:var(--brand)}
.tagline-row{display:flex; flex-wrap:wrap; gap:10px}
.divider{height:1px; background:var(--line); border:0; margin:0}
.cert-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.cert{display:flex; gap:13px; align-items:flex-start; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:16px}
.cert svg{width:19px; height:19px; flex:none; color:var(--brand); margin-top:2px}
.cert b{font-size:16px; font-weight:600; letter-spacing:-.012em; line-height:1.35}

/* ---------- footer (lattice keeps it light) ---------- */
.footer{background:var(--paper); color:var(--ink); padding-block:clamp(52px,6vw,73px) 36px; border-top:1px solid var(--line-soft)}
.footer a{color:var(--ink-soft); transition:color .16s}
.footer a:hover{color:var(--brand)}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:clamp(24px,4vw,54px)}
.footer h4{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px}
.footer ul{display:flex; flex-direction:column; gap:11px; font-size:16px}
.footer .fine{color:var(--ink-soft); font-size:16px; max-width:34ch; line-height:1.45}
.footer-bottom{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:clamp(38px,5vw,60px); padding-top:26px; border-top:1px solid var(--line-soft);
  font-size:15px; color:var(--ink-faint);
}
.social{display:flex; gap:10px}
.social a{width:38px; height:38px; border-radius:999px; background:var(--bone); color:var(--ink); display:grid; place-items:center; transition:background .18s, color .18s}
.social a:hover{background:var(--brand-light); color:var(--brand-deep)}
.social svg{width:17px; height:17px}

/* ---------- scroll feature ------------------------------------------------
   Repurposed from calendly.com "A better way to book your meetings", measured
   on the live page at 1528x686:
     content 1200 = left column 532 + gap 88 + stage 580 (space-between)
     heading   position:sticky at header(108) + 96 = 204, and it paints an
               opaque block ABOVE itself so rows vanish behind it, not under
               the floating nav
     rows      56px padding-block, 16px gap, title 20/28 w500 #071A31,
               copy 16/22.4 #5F6D77, 32px arrow button r8 on rgba(7,26,49,.05)
     inactive  opacity .2 plus a muted title, cursor:pointer
     motion    opacity and colour 150ms cubic-bezier(.4,0,.2,1)
     stage     580 square, radius 80, overflow hidden, scenes crossfade 300ms
     active    the LAST row whose top has crossed 75% of the viewport height.
               Measured: that line falls in [510,534) at vh 686, so the
               observer runs a -25% bottom root margin.
   Panel gradient read off their Rive canvas pixel by pixel:
     top #7BB9FF, middle #DAF6F5, bottom #1B4D86 to #0F3A6D.
   Rebuilt below from her blues and mint. Geometry scaled to her 1128 shell.
   ------------------------------------------------------------------------ */
.scroll-feature{
  --sf-top:108px;          /* her nav is 72 tall, the lattice rhythm adds 36 */
  --sf-gap:clamp(32px,5vw,88px);
  /* 540 at full width is 47.9% of the shell, calendly runs 48.3%. It has to
     shrink with the viewport or the text column collapses near the breakpoint */
  --sf-stage:clamp(380px,40vw,540px);
  --sf-pad:clamp(34px,4vw,56px);
  position:relative;
}
.sf-col{display:flex; flex-direction:column}

.sf-head{position:sticky; top:var(--sf-top); z-index:2; background:var(--bone)}
/* 64 covers the gap between the nav and the heading and still fits inside the
   sections own top padding, which bottoms out at 64px. Using --sf-top here
   would paint a bone strip up over the white section above at ~981px wide. */
.sf-head::before{
  content:""; position:absolute; left:0; right:0; bottom:100%;
  height:64px; background:var(--bone);
}
.sf-head-in{padding-bottom:clamp(26px,3.2vw,44px); border-bottom:1px solid var(--line)}
.sf-head .eyebrow{margin-bottom:14px}
.sf-head h2{margin:0}
.sf-lede{margin:18px 0 0; max-width:44ch}

/* calendly runs 1724px of list for 1300px of rows: the 424px tail keeps the
   panel pinned while the last row is still lit, instead of releasing on top of it */
.sf-list{display:flex; flex-direction:column; padding-bottom:clamp(150px,45vh,320px)}
.sf-item{position:relative; opacity:.2; transition:opacity .15s cubic-bezier(.4,0,.2,1)}
.sf-item.is-on{opacity:1}
.sf-btn{
  display:flex; flex-direction:column; gap:16px; width:100%;
  padding:var(--sf-pad) 0; border:0; background:none; font:inherit; color:inherit;
  text-align:left; cursor:pointer;
}
.sf-item.is-on .sf-btn{cursor:default}
.sf-btn:focus-visible{outline:2px solid var(--brand); outline-offset:4px; border-radius:10px}
.sf-btn .top{display:flex; align-items:center; gap:12px}
.sf-btn .top svg{width:24px; height:24px; flex:none; color:var(--brand)}
.sf-title{
  font-size:20px; line-height:1.4; font-weight:500; letter-spacing:-.012em;
  color:var(--ink-faint); transition:color .15s cubic-bezier(.4,0,.2,1);
}
.sf-item.is-on .sf-title{color:var(--ink)}
.sf-desc{font-size:16px; line-height:1.4; color:var(--ink-soft); padding-right:56px; margin:0}
/* the arrow is a link, so it sits outside the button rather than nested in it.
   top = button padding + the 28px title row + the 16px gap, which is where
   the items-start row on calendly puts theirs */
.sf-go{
  position:absolute; right:0; top:calc(var(--sf-pad) + 44px);
  width:32px; height:32px; border-radius:8px; display:grid; place-items:center;
  background:rgba(4,8,40,.05); border:1px solid rgba(4,8,40,.05); color:var(--ink);
  transition:background .18s, color .18s, transform .18s;
}
.sf-go:hover{background:var(--brand-light); color:var(--brand-deep); transform:translate(1px,-1px)}
.sf-go svg{width:15px; height:15px}

/* ---- stage ---- */
.sf-stage{margin-top:clamp(26px,3.5vw,42px)}
.sf-panel{
  position:relative; width:100%; aspect-ratio:1; overflow:hidden;
  border-radius:clamp(38px,6.5vw,72px);       /* calendly: 80 on 580 = 13.8% */
  box-shadow:var(--shadow-md);
  background:
    radial-gradient(112% 74% at 50% 44%, rgba(255,255,255,.62), rgba(255,255,255,0) 64%),
    linear-gradient(179deg,
      #8FC2F8   0%,
      #B4DCF3  26%,
      #D6F0EB  48%,
      #6BA3DD  67%,
      #1E5AAE  86%,
      #0B3C86 100%);
}
/* the soft vertical columns calendly floats behind the card */
.sf-panel::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.17) 0 30px, rgba(255,255,255,0) 30px 52px);
  -webkit-mask-image:linear-gradient(180deg, transparent 4%, #000 24%, #000 60%, transparent 84%);
  mask-image:linear-gradient(180deg, transparent 4%, #000 24%, #000 60%, transparent 84%);
}
/* calendly crossfades at 300ms, but their scenes are full-bleed vector art so
   the overlap reads as a dissolve. These are opaque cards, so the outgoing one
   clears first and the incoming lifts in behind it */
.sf-scene{
  position:absolute; inset:0; display:grid; place-items:center; padding:9%;
  opacity:0; pointer-events:none;
  transform:translateY(10px) scale(.985);
  transition:opacity .16s ease, transform .16s ease;
}
.sf-scene.is-on{
  opacity:1; pointer-events:auto; transform:none;
  transition:opacity .26s ease .1s, transform .34s cubic-bezier(.2,.7,.3,1) .1s;
}

/* ---- the little product moments inside the panel ---- */
.sc{
  width:100%; background:#fff; border-radius:24px; padding:24px 22px;
  box-shadow:0 20px 46px -26px rgba(4,8,40,.55);
  display:flex; flex-direction:column; gap:14px;
}
.sc-h{font-size:21px; font-weight:500; letter-spacing:-.022em; color:var(--ink); line-height:1.1}
.sc-tabs{display:flex; gap:20px; border-bottom:1px solid var(--line-soft)}
.sc-tab{font-size:13px; color:var(--ink-faint); padding-bottom:8px; border-bottom:2px solid transparent; margin-bottom:-1px}
.sc-tab.on{color:var(--ink); border-bottom-color:var(--brand)}
.sc-row{display:flex; align-items:center; gap:11px}
.sc-av{
  width:34px; height:34px; border-radius:999px; flex:none; overflow:hidden;
  background:var(--bone-deep);
}
.sc-av img{width:100%; height:100%; object-fit:cover; display:block}
.sc-nm{font-size:15px; font-weight:500; color:var(--ink); flex:1; min-width:0}
.sc-chip{font-size:11px; font-weight:600; padding:5px 10px; border-radius:999px; white-space:nowrap}
.sc-tog{width:38px; height:22px; border-radius:999px; background:var(--brand); position:relative; flex:none}
.sc-tog::after{content:""; position:absolute; top:3px; right:3px; width:16px; height:16px; border-radius:999px; background:#fff}
.sc-tog.off{background:#DCE1EA}
.sc-tog.off::after{right:auto; left:3px}
.sc-bar{height:8px; border-radius:999px; background:var(--bone-deep); overflow:hidden}
.sc-bar i{display:block; height:100%; border-radius:999px; background:var(--brand); width:0; transition:width .9s cubic-bezier(.2,.7,.3,1) .12s}
.sf-scene.is-on .sc-bar i{width:var(--v,70%)}
.sc-meta{font-size:12px; color:var(--ink-faint)}
.sc-task{display:flex; align-items:center; gap:11px; font-size:15px; color:var(--ink)}
.sc-box{
  width:20px; height:20px; border-radius:6px; flex:none; border:1.6px solid #C9D2E0;
  display:grid; place-items:center; color:#fff;
}
.sc-box svg{width:12px; height:12px; opacity:0}
.sc-task.on .sc-box{background:var(--brand); border-color:var(--brand)}
.sc-task.on .sc-box svg{opacity:1}
.sc-task.on b{color:var(--ink-faint); text-decoration:line-through; font-weight:400}
.sc-task b{font-weight:400}
.sc-step{display:flex; align-items:center; gap:12px}
.sc-num{
  width:26px; height:26px; border-radius:999px; flex:none; display:grid; place-items:center;
  font-size:12px; font-weight:700; background:var(--bone-deep); color:var(--ink-faint);
}
.sc-step .sc-nm{color:var(--ink-faint); font-weight:400}
.sc-step.on .sc-num{background:var(--brand); color:#fff}
.sc-step.on .sc-nm{color:var(--ink); font-weight:500}
.sc-dots{display:flex; gap:7px}
.sc-dots i{height:34px; border-radius:9px; background:var(--bone-deep); flex:1}
.sc-dots i.on{background:var(--brand)}
.sc-dots i.half{background:var(--brand-mid)}
.sc-big{font-size:38px; font-weight:500; letter-spacing:-.03em; line-height:1; color:var(--ink)}
.sc-field{
  border:1px solid #D7DDE7; border-radius:11px; padding:11px 13px; font-size:14px;
  color:var(--ink-faint); display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.sc-field.filled{color:var(--ink)}
.sc-field svg{width:14px; height:14px; flex:none}
.sc-menu{border:1px solid #D7DDE7; border-radius:11px; overflow:hidden; box-shadow:var(--shadow-sm)}
.sc-menu span{display:block; padding:9px 13px; font-size:14px; color:var(--ink)}
.sc-menu span.on{background:var(--brand-light)}
.sc-spark{width:100%; height:78px; display:block; overflow:visible}
.sc-spark path{
  stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300);
  transition:stroke-dashoffset 1.1s cubic-bezier(.3,.7,.3,1) .1s;
}
.sf-scene.is-on .sc-spark path{stroke-dashoffset:0}

/* ---- desktop: float the stage into the right column ---------------------
   absolute, so .sf-head keeps a tall containing block and can stay stuck
   through the whole list, the same way calendly nests theirs ------------- */
@media (min-width:981px){
  .scroll-feature{padding-right:calc(var(--sf-stage) + var(--sf-gap))}
  .sf-stage{position:absolute; top:0; right:0; width:var(--sf-stage); height:100%; margin:0}
  .sf-panel{position:sticky; top:var(--sf-top)}
}
/* under 981 the stage drops into the flow between the heading and the list,
   pins itself there, and the rows scroll beneath it.

   The panel is a rounded square, so on its own it pins as a transparent
   frame: rows slid through the gaps at its sides and the row title under it
   disappeared while its description stayed visible. The stage itself has to
   be the opaque surface, edge to edge. Negative gutters reach the viewport
   sides without 100vw, which would add a scrollbar. */
@media (max-width:980px){
  .scroll-feature{--sf-top:84px; padding-right:0}
  .sf-head{position:static; background:none}
  .sf-head::before{display:none}
  .sf-stage{
    position:sticky; top:var(--sf-top); z-index:3;
    margin:clamp(20px,3.5vw,30px) calc(var(--gutter) * -1) 0;
    padding:0 var(--gutter) clamp(14px,2.5vw,20px);
    background:var(--bone);
  }
  /* and the strip above it, so rows vanish rather than float under the nav */
  .sf-stage::before{
    content:""; position:absolute; left:0; right:0; bottom:100%;
    height:var(--sf-top); background:var(--bone);
  }
  /* a full square ate half the screen. Shorter, so the list keeps ~2.4 rows */
  .sf-panel{
    width:min(400px,100%); margin-inline:auto;
    aspect-ratio:auto; height:min(37vh,290px);
  }
  .sf-scene{padding:16px}
  /* a long tail only keeps the panel pinned over the last row for longer */
  .sf-list{padding-bottom:24px}
  .sf-desc{padding-right:48px}
}
@media (max-width:620px){
  .scroll-feature{--sf-top:84px; --sf-pad:30px}
  .sf-list{padding-bottom:20px}
  .sf-item{opacity:1}                     /* no room for a dimmed list */
  .sf-title{font-size:18px}
  .sc{padding:14px; gap:9px; border-radius:16px}
  .sc-h{font-size:18px}
  /* the session brief is the tallest scene: two fields and a three row menu */
  .sc-field{padding:9px 11px; font-size:13px; border-radius:9px}
  .sc-menu span{padding:7px 11px; font-size:13px}
  .sc-av{width:30px; height:30px}
  .sc-nm{font-size:14px}
}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr; gap:0}
  .hero-copy{padding-bottom:40px}
  .portrait .frame{max-width:400px}
  .portrait.bleed .frame{margin-bottom:-40px}
  .chip-tl{left:0}
  .chip-br{right:0}
  .chip-bl{left:0}
  .bento-3{grid-template-columns:repeat(2,1fr)}
  /* mosaic unstacks: cards in a row, photo below as a band */
  .bento-mosaic{grid-template-columns:repeat(3,1fr)}
  .bento-mosaic > .tint-card{grid-column:auto}
  .bento-mosaic > .mosaic-photo{grid-column:1 / -1; grid-row:auto; aspect-ratio:2/1}
  .case-grid{grid-template-columns:repeat(2,1fr)}
  .pkg-grid{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr; gap:16px; max-width:560px; margin-inline:auto}
  /* stacked, so the name and tag no longer need to reserve a matching height */
  .plan-name,.plan-tag{min-height:0}
  .plan-card{padding:30px 26px}
  .plan-feat{padding:22px 26px 26px}
  .head-split{grid-template-columns:1fr; align-items:start; gap:20px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .orbit{grid-template-columns:1fr}
  .orbit-col{display:grid; grid-template-columns:1fr 1fr; gap:26px}
  .price-card{aspect-ratio:auto; border-radius:var(--r-panel); padding:44px 34px; max-width:560px; margin-inline:auto}
  .tl-item{grid-template-columns:1fr; gap:18px}
  :root{--r-panel:32px}
}
/* brand + up to 6 links + two CTAs needs about 1105px (the content box is
   viewport minus 2 x 56px gutter), so collapse to the burger at 1224px and
   below instead of letting the labels wrap or the row overflow */
@media (max-width:1224px){
  .nav-links,.nav-cta .ghost,.nav-cta .btn{display:none}
  .burger{display:grid}
  .nav-in{justify-content:space-between}
}
@media (max-width:860px){
  .stat-band{grid-template-columns:repeat(2,1fr)}
  /* the band draws its hairlines as a 1px gap over --line-soft, so an odd cell
     count leaves the empty slot painted grey. A lone third cell spans. */
  .stat-band > .cell:last-child:nth-child(3){grid-column:1 / -1}
}
@media (max-width:660px){
  body{font-size:17px}
  .bento-3,.bento-2,.case-grid,.cert-grid{grid-template-columns:1fr}
  .bento-mosaic{grid-template-columns:1fr}
  .bento-mosaic > .mosaic-photo{aspect-ratio:1/1}
  .orbit-col{grid-template-columns:1fr}
  /* the two link columns are short: pair them rather than stacking all four,
     which ran the footer to 826px on a 780px screen */
  .footer-grid{grid-template-columns:1fr 1fr; gap:30px 18px}
  .footer-grid > div:first-child,
  .footer-grid > div:last-child{grid-column:1 / -1}
  .footer{padding-block:46px 28px}
  .footer h4{margin-bottom:12px}
  .footer ul{gap:9px; font-size:15px}
  .footer .fine{font-size:15px}
  .footer-bottom{margin-top:30px; padding-top:20px; gap:7px; font-size:13.5px}
  .chip{padding:10px 13px}
  .chip .num{font-size:18px}
  .chip-tl{top:4%; left:-4px}
  .chip-br{bottom:8%; right:-4px}
  .chip-bl{display:none}
  .quote{padding:26px}
  .tint-card,.pkg{padding:24px}
  .lw-cell{height:74px}
  .lw-cell img{height:48px; max-width:128px}
  .topbar{font-size:13px; line-height:1.35}
  /* keep all three social buttons on one row instead of orphaning TikTok */
  .social-pill{font-size:14px; padding:8px 14px 8px 11px; gap:7px}
  .social-pill svg{width:15px; height:15px}
  .tagline-row{gap:7px}
  /* the phone hero is tall: pull the field back so it clears the headline */
  .ambient{
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 22%, transparent 52%);
    mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 22%, transparent 52%);
  }
  .press{flex-direction:column; align-items:flex-start; gap:16px; padding:22px}
  .press .marks{justify-content:flex-start; gap:28px; width:100%}
  /* long labels (the email address CTA) need to wrap on a phone */
  .btn{white-space:normal; text-align:center; overflow-wrap:anywhere}
  .btn-row .btn{width:100%}
}
/* phone hero: the views chip sat on her face at the top of the portrait,
   so it drops to the shoulder, clear of the face */
@media (max-width:520px){
  .chip-views{top:36%}
}
/* below 380 the short line still wrapped off the pill row. Trimming the
   gutter and a half point of type puts it back to two rows. */
@media (max-width:380px){
  .topbar{padding-inline:14px; font-size:12.5px; gap:4px 8px}
  .topbar .tag{font-size:9.5px; padding:3px 7px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none}
}