/* AA contrast: small uppercase labels use --red-deep on light */
  .btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,[contenteditable]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  h2.sec{font-size:clamp(1.65rem,3vw,2.35rem);font-weight:700;line-height:1.22;letter-spacing:-.01em;margin-bottom:10px;max-width:46rem}
  p.sec-sub{color:var(--gray);max-width:42rem;margin-bottom:44px;font-size:1rem}
  p.sec-sub b{color:var(--ink)}

  /* ---- avatars / photo fallback layers (same approach as the approved pages) ---- */
  .pf{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Poppins',sans-serif;font-weight:700;background-color:var(--photo);background-size:cover;background-position:center;flex-shrink:0;position:relative;overflow:hidden}
  .pf .ini{position:absolute;z-index:0;font-size:inherit;letter-spacing:.02em;color:#8C8880}
  .pf img,.mphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
  .g4{background:linear-gradient(135deg,#12A87B,#6C4CF1)}
  .g6{background:linear-gradient(135deg,#F5A623,#EF2D56)}

  /* ---- rail + nav (identical brand furniture) ---- */
  .navlinks a.here{color:var(--red-deep);font-weight:700}

  /* ================================ HERO ================================ */
  .hero{position:relative;padding:44px 0 64px;isolation:isolate;overflow-x:clip}
  .hero::before{content:"";position:absolute;top:-8%;right:-12%;width:56%;height:80%;
    background:radial-gradient(closest-side,rgba(239,45,86,.14),rgba(245,166,35,.10) 55%,transparent 72%);
    filter:blur(16px);z-index:0;pointer-events:none;animation:heroGlow 11s ease-in-out infinite alternate}
  .hero .wrap{position:relative;z-index:1}
  /* minmax(0,…) lets the columns shrink rather than overflow the grid */
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center}
  .hero h1{font-size:clamp(2.35rem,4.3vw,3.5rem);line-height:1.06;font-weight:800;letter-spacing:-.022em}
  .hero h1 .script{font-size:1.12em;line-height:1;
    /* Caveat swashes paint outside the em box; pad the paint area (and pull it
       back with negative margins) so nothing ever crops */
    display:inline-block;padding:.22em .18em .14em .08em;margin:-.22em -.18em -.14em -.08em}
  /* the editor's red pen: hand-drawn strike through "courses" */
  .cross svg{position:absolute;left:-3%;right:-3%;top:52%;width:106%;height:.42em;transform:translateY(-50%) rotate(-1.6deg);overflow:visible;pointer-events:none}
  .hero p.sub{margin:22px 0 28px;font-size:1.12rem;color:var(--gray);max-width:30rem}
  .hero p.sub b{color:var(--ink)}
  .hero-ctas{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
  .hero-ctas .btn-red{box-shadow:0 10px 26px rgba(239,45,86,.28)}
  .hero-ctas .btn-red:hover{box-shadow:0 14px 32px rgba(239,45,86,.38)}
  .hero-alt{font-size:.92rem;color:var(--gray);max-width:15rem;line-height:1.45}
  .hero-alt b{color:var(--ink)}
  .trust-row{display:flex;align-items:center;gap:14px;margin-top:32px;padding-top:22px;border-top:1px solid var(--line)}
  .pf-stack{display:flex}
  .pf-stack .pf{width:40px;height:40px;font-size:.72rem;margin-left:-10px;box-shadow:0 0 0 3px #fff}
  .pf-stack .pf:first-child{margin-left:0}
  .trust-row p{font-size:.88rem;color:var(--gray);max-width:22rem;line-height:1.5}
  .trust-row b{color:var(--ink)}
  /* hero stage: the shelf of done — the four outcomes as clean cards pinned on
     the Studio's board paper (the 18px dot grid sits behind the cards, same as
     the SVG vignettes). Deliberately NOT an
     app window (that's studio.html's hero) and NOT a portrait (the Masters get
     their own roster below). The right column sits 26px lower — a pinboard,
     not a feature grid. Margins (not transforms) carry the stagger so the .rv
     reveal's transform:none doesn't cancel it. */
  .outcomes{max-width:560px;width:100%;margin-left:auto;
    display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;
    padding:20px 18px 16px;border-radius:16px;
    background-image:radial-gradient(var(--line) 1.05px,transparent 1.05px);background-size:18px 18px}
  .oc{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:22px 18px 18px;overflow:hidden;box-shadow:0 18px 34px rgba(21,21,28,.07)}
  /* amber = the Builder's color across the site; every artifact card wears it */
  .oc::before{content:"";position:absolute;left:0;right:0;top:0;height:3.5px;background:var(--amber)}
  .oc:nth-of-type(even){margin-top:26px}
  .oc h3{font-size:1.04rem;line-height:1.3;letter-spacing:-.01em;margin:0 0 8px}
  .oc h3 .script{font-size:1.22em}
  .oc p{font-size:.8rem;line-height:1.55;color:var(--gray)}
  .oc p i{font-style:italic;color:var(--ink)}
  /* category chips in the sticky-note palette — same taxonomy colors as the
     live demo's prompts further down the page */
  .oc-chip{display:inline-block;font-family:'Poppins',sans-serif;font-size:.6rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:5px 11px;margin-bottom:12px}
  .oc-biz .oc-chip{background:var(--red-tint);color:#B0173A}
  .oc-brand .oc-chip{background:var(--amber-tint);color:var(--amber-deep)}
  .oc-book .oc-chip{background:#EDEAF6;color:#4A3A9E}
  .oc-talk .oc-chip{background:#E9F2EC;color:#1E6B4F}
  /* wraps rather than nowrap: in a narrow column the pill used to overflow the
     card and get clipped by its overflow:hidden */
  .oc-proof{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:.66rem;font-weight:600;
    color:#1E6B4F;background:#E9F2EC;border-radius:999px;padding:4px 10px;max-width:100%;line-height:1.35}
  .oc-proof i{font-style:normal;width:7px;height:7px;border-radius:50%;background:#12A87B;flex:none}
  /* the closer, under the shelf */
  /* negative margins reclaim the board's padding so the line doesn't wrap */
  .oc-note{grid-column:1/-1;text-align:center;margin:10px -14px 0;
    font-family:'Poppins',sans-serif;font-weight:600;font-size:.88rem;color:var(--gray)}
  .oc-note b{color:var(--ink);font-weight:700}
  .oc-note .script{font-size:1.3rem;margin-left:2px}
  @keyframes heroGlow{0%{transform:translateY(0) scale(1);opacity:.85}100%{transform:translateY(14px) scale(1.06);opacity:1}}
  @keyframes penDraw{to{stroke-dashoffset:0}}

  /* ====================== PROOF LEDGER (ink band) ======================= */
  .ledger{background:var(--ink);color:#fff;padding:64px 0 58px}
  .ledger-eyebrow{color:#F7A8B8;font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:10px}
  .ledger-eyebrow::before{content:"";width:26px;height:2px;background:var(--red);flex:none}
  .ledger h2{font-size:clamp(1.35rem,2.3vw,1.8rem);font-weight:700;letter-spacing:-.01em;margin-bottom:36px;max-width:42rem}
  .ledger h2 .script{color:var(--amber)}
  .ledger-grid{display:grid;grid-template-columns:1.05fr 1.2fr 1fr;border-top:1px solid rgba(255,255,255,.16)}
  .lg-item{padding:30px 34px 6px 0}
  .lg-item + .lg-item{border-left:1px solid rgba(255,255,255,.16);padding-left:34px}
  .lg-item > b{display:block;font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(2.1rem,3.6vw,3.1rem);line-height:1.05;letter-spacing:-.02em;color:#fff;margin-bottom:10px;white-space:nowrap}
  .lg-item > b .arw{color:var(--amber);font-weight:700}
  .lg-mid > b{font-size:clamp(1.85rem,3vw,2.6rem);padding-top:.18em}
  .lg-item > span{display:block;font-size:.88rem;color:#C9C9D2;line-height:1.55;max-width:18rem;padding-bottom:22px}
  .lg-item > span i{font-style:normal;color:#fff;font-weight:700}
  .ledger-foot{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);font-size:.92rem;color:#C9C9D2}
  .ledger-foot b{color:#fff}
  .ledger-foot .script{color:var(--amber);font-size:1.25rem;margin-left:6px}

  /* ========================= MASTERS ROSTER ============================= */
  .masters{padding:92px 0 84px}
  .mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .mcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
    transition:transform .25s ease,box-shadow .25s ease}
  .mcard:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(21,21,28,.10)}
  .mphoto{position:relative;height:210px;background-color:var(--photo);background-size:cover;background-position:center top;
    border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;
    color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:1.5rem;overflow:hidden}
  .mphoto img{filter:saturate(.85);transition:filter .35s ease,transform .45s ease}
  .mcard:hover .mphoto img{filter:saturate(1.05);transform:scale(1.035)}
  .mcard .body{padding:15px 16px 17px}
  /* AA: role labels on --red-deep, never --red at this size */
  .mcard .role{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red-deep)}
  .mcard h4{font-size:.95rem;margin:4px 0 5px}
  .mcard p{font-size:.75rem;color:var(--gray);line-height:1.5}
  .masters-foot{display:flex;justify-content:space-between;align-items:center;margin-top:26px;flex-wrap:wrap;gap:14px}
  .masters-foot p{font-size:.92rem;color:var(--gray)}
  .masters-foot b{color:var(--ink)}

  /* ==================== TRY IT (interactive demo) ======================= */
  .try{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:88px 0}
  .try-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center}
  .try-copy h2{font-size:clamp(1.55rem,2.8vw,2.15rem);font-weight:700;line-height:1.24;letter-spacing:-.01em;margin-bottom:14px}
  .try-copy h2 .script{font-size:1.15em;display:inline-block;padding:.22em .18em .14em .08em;margin:-.22em -.18em -.14em -.08em}
  .try-copy > p{color:var(--gray);font-size:1rem;max-width:28rem}
  .try-list{list-style:none;margin-top:20px;border-top:1px solid var(--line);max-width:28rem}
  .try-list li{padding:11px 0 11px 30px;font-size:.94rem;color:#3C3C46;border-bottom:1px solid var(--line);position:relative}
  .try-list li::before{content:"";position:absolute;left:2px;top:19px;width:14px;height:8px;border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(-48deg)}
  .try-list b{color:var(--ink)}
  .try-hint{margin-top:20px;font-size:.9rem;color:var(--gray)}
  .try-hint b{color:var(--red-deep)}
  .try-hint .script{font-size:1.3rem;margin-left:4px}
  /* the demo, in Studio window chrome */
  .demo{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 24px 48px rgba(21,21,28,.10);overflow:hidden}
  .stage-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--soft);border-bottom:1px solid var(--line);color:var(--gray);padding:11px 18px;font-size:.76rem}
  .stage-bar .url{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .badge{font-size:.62rem;font-weight:700;padding:4px 10px;border-radius:4px;letter-spacing:.06em;white-space:nowrap;font-family:'Poppins',sans-serif}
  .badge.pub{background:var(--amber);color:var(--ink)}
  .demo-body{padding:20px 20px 16px}
  .demo-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
  .demo-head .pf{width:40px;height:40px;font-size:.72rem}
  .demo-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:.93rem;line-height:1.3}
  .demo-by{font-size:.7rem;color:var(--gray)}
  .demo-by b{color:var(--red-deep);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.64rem}
  .sticky-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .sticky{border-radius:7px;padding:10px 11px;font-size:.74rem;line-height:1.45;min-height:88px;color:#3C3C46}
  .sticky .prompt{font-family:'Poppins',sans-serif;font-weight:700;display:block;margin-bottom:4px;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase}
  .sticky .fill{outline:none;cursor:text;min-height:38px;display:block}
  .sticky .fill:empty::before{content:attr(data-ph);opacity:.5;font-style:italic}
  .sticky .fill:focus{box-shadow:0 0 0 2px var(--red);border-radius:3px}
  .s1{background:#FDE7EC}.s1 .prompt{color:#B0173A}
  .s2{background:#FDF0DC}.s2 .prompt{color:#9A5E06}
  .s3{background:#E9F2EC}.s3 .prompt{color:#1E6B4F}
  .s4{background:#EDEAF6}.s4 .prompt{color:#4A3A9E}
  .s5{background:#E6EFF5}.s5 .prompt{color:#1F5D80}
  .s6{background:#FBEBE1}.s6 .prompt{color:#A0431F}
  .demo-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:13px;border-top:1px solid var(--line);font-size:.74rem;color:var(--gray)}
  .demo-foot .saved{display:inline-flex;align-items:center;gap:7px}
  .demo-foot .saved i{font-style:normal;width:7px;height:7px;border-radius:50%;background:#12A87B;flex:none}
  .demo-foot .script{font-size:1.2rem}

  /* ============ FEATURE: THE LIBRARY (insert-from-library) ============== */
  .feat{padding:96px 0}
  .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .feat-copy h2{font-size:clamp(1.55rem,2.8vw,2.15rem);font-weight:700;line-height:1.24;letter-spacing:-.01em;margin-bottom:14px}
  .feat-copy h2 .script{font-size:1.15em;display:inline-block;padding:.22em .18em .14em .08em;margin:-.22em -.18em -.14em -.08em}
  .feat-copy p{color:var(--gray);font-size:1rem;max-width:28rem}
  .feat-copy p b{color:var(--ink)}
  .feat-list{list-style:none;margin-top:20px;border-top:1px solid var(--line);max-width:28rem}
  .feat-list li{padding:11px 0 11px 30px;font-size:.94rem;color:#3C3C46;border-bottom:1px solid var(--line);position:relative}
  .feat-list li::before{content:"";position:absolute;left:2px;top:19px;width:14px;height:8px;border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(-48deg)}
  .feat-list b{color:var(--ink)}
  .feat-art{position:relative}
  .feat-art .ill{filter:drop-shadow(0 22px 38px rgba(21,21,28,.13))}

  /* ==================== DIFFERENCE + BRAND CARD ========================= */
  .versus{padding:0 0 96px}
  .vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
  .vs-card{border-radius:var(--radius);padding:26px 28px;background:#fff;border:1px solid var(--line)}
  .vs-new{border-top:4px solid var(--red)}
  .vs-old{border-top:4px solid var(--line)}
  .vs-card h3{font-size:.98rem;margin-bottom:12px}
  .vs-old h3{color:var(--gray)}
  .vs-new h3{color:var(--red-deep)}
  .vs-card ul{list-style:none;border-top:1px solid var(--line)}
  .vs-card li{padding:10px 0 10px 26px;font-size:.91rem;border-bottom:1px solid var(--line);position:relative}
  .vs-card li:last-child{border-bottom:none}
  .vs-old li{color:var(--gray)}
  .vs-old li::before{content:"\2715";position:absolute;left:2px;top:9px;font-weight:700;color:#8A8A94;font-size:.8rem}
  .vs-new li{color:#3C3C46}
  .vs-new li::before{content:"";position:absolute;left:2px;top:17px;width:13px;height:7px;border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(-48deg)}
  .vs-new b{color:var(--ink)}
  /* the dark card: brand voice + hard stats (no invented testimonial) */
  .qcard{position:relative;background:var(--ink);color:#fff;border-radius:var(--radius);padding:48px 52px 42px;max-width:900px;margin:64px auto 0}
  .qcard::before{content:"\201C";position:absolute;top:-34px;left:34px;font-family:'Caveat',cursive;font-size:7rem;line-height:1;color:var(--red)}
  .qcard blockquote{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.55;font-weight:500;max-width:44rem}
  .qcard blockquote b{color:var(--amber);font-weight:700}
  .q-meta{display:flex;align-items:center;gap:16px;margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);flex-wrap:wrap}
  .q-meta .who{font-size:.88rem;color:#C9C9D2;line-height:1.4}
  .q-meta .who .script{color:var(--amber);font-size:1.35rem}
  .q-stats{margin-left:auto;display:flex;gap:26px;flex-wrap:wrap}
  .q-stat b{display:block;font-family:'Poppins',sans-serif;font-weight:800;font-size:1.35rem;color:var(--amber);line-height:1.15}
  .q-stat span{font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#C9C9D2}

  /* ========================= JOURNEY ==================================== */
  .journey{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:88px 0}
  .j-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  /* flex column so the .price footer can push to the bottom (margin-top:auto),
     aligning all three price rows even when body lengths differ */
  .jstep{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:transform .25s ease,box-shadow .25s ease;display:flex;flex-direction:column}
  .jstep:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(21,21,28,.08)}
  .jnum{width:37px;height:37px;border:2px solid var(--red);color:var(--red-deep);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:700;font-size:.88rem;margin-bottom:16px;background:#fff}
  .jstep h3{font-size:1.02rem;margin-bottom:6px}
  /* min gap below the body so the divider never sits flush against the last
     line on the tallest card (where margin-top:auto collapses to zero) */
  .jstep p{color:var(--gray);font-size:.9rem;margin-bottom:14px}
  .jstep .price{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-family:'Poppins',sans-serif;font-weight:700;color:var(--red-deep);font-size:.85rem}
  .journey-note{display:flex;gap:12px;align-items:center;margin-top:24px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--red);border-radius:0 10px 10px 0;padding:14px 18px;font-size:.92rem;font-weight:500;max-width:52rem}
  .journey-note .script{font-size:1.3rem;flex:none}
  /* one quiet beat, not a second funnel: the Builder's own horizon */
  .journey-onward{margin-top:18px;font-size:.92rem;color:var(--gray);max-width:52rem}
  .journey-onward b{color:var(--ink)}
  .journey-onward .script{font-size:1.25rem;margin-left:6px}

  /* ========================= TRUST ====================================== */
  .trust{padding:92px 0 84px}
  .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  .tcard{background:#fff;padding:26px 24px;transition:background .2s ease}
  .tcard:hover{background:var(--soft)}
  .tcard .glyph{width:44px;height:44px;margin-bottom:14px}
  .tcard .glyph svg{display:block;width:100%;height:100%}
  .tcard h3{font-size:1rem;margin-bottom:6px}
  .tcard h3::after{content:"";display:block;width:26px;height:2px;background:var(--red);margin-top:9px}
  .tcard p{font-size:.88rem;color:var(--gray);margin-top:10px;line-height:1.6}

  /* ====== FAQ (card pattern, matches pricing page; full page measure) ==== */
  .faq{padding:0 0 96px}
  details{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;transition:box-shadow .2s ease}
  details[open]{box-shadow:0 14px 30px rgba(21,21,28,.06)}
  summary{font-family:'Poppins',sans-serif;font-weight:600;cursor:pointer;font-size:.95rem;padding:17px 52px 17px 22px;position:relative;list-style:none;line-height:1.45}
  summary::-webkit-details-marker{display:none}
  summary::before,summary::after{content:"";position:absolute;right:24px;top:29px;width:14px;height:2px;background:var(--red-deep);border-radius:1px;transition:transform .25s ease}
  summary::after{transform:rotate(90deg)}
  details[open] summary::after{transform:rotate(0)}
  details[open] summary{border-bottom:1px solid var(--line)}
  summary:hover{color:var(--red-deep)}
  details p{margin:0;padding:14px 22px 0;color:var(--gray);font-size:.93rem;line-height:1.65;max-width:46rem}
  details p:last-of-type{padding-bottom:18px}
  details p b{color:var(--ink)}

  /* =========================== CLOSE ==================================== */
  .close{padding:96px 0 100px;text-align:center}
  .close .pf-stack{justify-content:center;margin-bottom:24px}
  .close .pf-stack .pf{width:52px;height:52px;font-size:.9rem;margin-left:-12px}
  .close h2{font-size:clamp(2rem,3.8vw,2.9rem);font-weight:800;line-height:1.12;letter-spacing:-.018em}
  .close h2 .script{font-size:1.18em;display:inline-block;padding:.22em .18em .14em .08em;margin:-.22em -.18em -.14em -.08em}
  .close p{margin:16px auto 30px;max-width:33rem;color:var(--gray);font-size:1.04rem}
  .close .btn-red{box-shadow:0 10px 26px rgba(239,45,86,.28)}
  .close .btn-red:hover{box-shadow:0 14px 32px rgba(239,45,86,.38)}
  /* the one, demoted Master path */
  .close-alt{margin-top:22px;font-size:.92rem;color:var(--gray)}
  .close-alt a{color:var(--red-deep);font-weight:700;border-bottom:1.5px solid transparent;transition:border-color .15s ease}
  .close-alt a:hover{border-bottom-color:var(--red-deep)}

  /* ==================== illustration system (Studio family) ============= */
  .ill{display:block;width:100%;height:auto}
  .ill text{font-family:'DM Sans',sans-serif;fill:#3C3C46}
  .ill .tt{font-family:'Poppins',sans-serif;font-weight:700;fill:#15151C}
  .ill .lbl{font-family:'Poppins',sans-serif;font-weight:700;fill:#6E6E78;letter-spacing:.08em}
  .ill .scr{font-family:'Caveat',cursive;font-weight:700;fill:#EF2D56}
  .bob{animation:bobY 6s ease-in-out infinite}
  @keyframes bobY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

  /* ==================== scroll reveal ==================== */

  /* ==================== responsive ==================== */
  @media (max-width:900px){
    .hero-grid,.try-grid,.feat-grid{grid-template-columns:1fr}
    /* full width here, so the headline wraps on its own — the desktop break
       before the script line would strand it */
    .hero h1 .brk{display:none}
    .outcomes{margin:34px auto 0}
    .ledger-grid{grid-template-columns:1fr}
    .lg-item{padding:22px 0 0}
    .lg-item + .lg-item{border-left:none;border-top:1px solid rgba(255,255,255,.16);padding-left:0;padding-top:22px}
    .lg-item span{padding-bottom:16px}
    .mgrid{grid-template-columns:repeat(2,1fr)}       /* defect fix: was stuck at 4 */
    .vs-grid,.j-grid{grid-template-columns:1fr}
    .trust-grid{grid-template-columns:1fr}
    .qcard{padding:40px 28px 34px}
    .q-stats{margin-left:0;width:100%;padding-top:6px} /* defect fix: no min-width overflow */
  }
  @media (max-width:760px){
    .sticky-grid{grid-template-columns:repeat(2,1fr)}  /* defect fix: was stuck at 3 */
  }
  @media (max-width:600px){
    /* the URL + badge don't fit on one line on phones (both are nowrap) and
       clip the demo card; stack them so each gets its own row */
    .stage-bar{flex-direction:column;align-items:flex-start;gap:6px}
    /* sticky cards go full-width (1 col) on phones — the .6rem uppercase
       prompt label and .74rem body were too small to read; enlarge both */
    .sticky{font-size:.86rem}
    .sticky .prompt{font-size:.72rem}
    .sticky-grid{grid-template-columns:1fr}            /* defect fix: 1 col on phones */
    .mgrid{grid-template-columns:1fr}                  /* defect fix: 1 col on phones */
    .mphoto{height:250px}
    .hero{padding-top:28px}
    .hero p.sub{font-size:1.05rem}
    /* phones: the shelf compresses to a scannable 2×2 — chip + headline only.
       The support lines and proof pill are desktop detail; stacked here they
       become a wall of copy before the page content. No pinboard stagger. */
    .outcomes{gap:10px;padding:14px 12px 12px}
    .oc{padding:14px 12px 13px}
    .oc:nth-of-type(even){margin-top:0}
    .oc p,.oc-proof{display:none}
    .oc h3{font-size:.9rem;margin:0}
    .oc-chip{font-size:.56rem;padding:4px 9px;margin-bottom:8px}
    .oc-note{margin:8px 0 0;font-size:.84rem;text-wrap:balance}
    .demo-body{padding:16px 14px 12px}
    .try,.journey{padding:72px 0}
    .feat,.masters{padding:76px 0}
    .versus,.faq{padding:0 0 76px}
  }

  /* ==================== reduced motion: everything still, instantly ===== */
  @media (prefers-reduced-motion: reduce){
    .hero::before{animation:none}
    .cross svg path{animation:none;stroke-dashoffset:0}
    .btn,.btn:hover,.mcard,.mcard:hover,.jstep,.jstep:hover,.tcard{transition:none;transform:none}
    .mphoto img{transition:none}
    .bob{animation:none}
    summary::before,summary::after{transition:none}
  }
  /* base64 Master photos spliced from homepage.html — must stay last:
     they override .pf / .mphoto gradient fills wherever a p-* class is set */
    
  .p-nausheen{background-image:url(/assets/img/nausheen-chen.webp);background-size:cover;background-position:center 25%}

  .p-clary{background-image:url(/assets/img/scott-clary.webp);background-size:cover;background-position:center 25%}