/* ============================================================
   LIP DOCTOR CASE STUDY — styles
   ld-  = desktop   ·   ldm- = mobile
   Tokens from colors_and_type.css · matches d-/m- vocabulary
   ============================================================ */

.ld-root{background:var(--paper)}

/* ---- shared metric block ---- */
.ld-metric-n{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:.84;letter-spacing:-.02em;color:var(--fg-on-light);font-variant-numeric:tabular-nums}
.ld-metric-n.is-pink{color:var(--pink-500)}
.ld-metric-l{font-family:var(--font-sans);font-size:.96rem;font-weight:600;color:var(--fg-on-light);margin:14px 0 2px;line-height:1.3}
.ld-metric-s{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-on-light-3);margin:0}
.ld-metric--ondark .ld-metric-n{color:#fff}
.ld-metric--ondark .ld-metric-n.is-pink{color:var(--pink-500)}
.ld-metric--ondark .ld-metric-l{color:#fff}
.ld-metric--ondark .ld-metric-s{color:var(--fg-on-dark-3)}

/* =================================================================
   HERO
   ================================================================= */
.ld-hero{position:relative;background:var(--ink-900);overflow:hidden;min-height:calc(100vh - 100px);margin-top:-100px;padding:160px 0 90px;display:flex;align-items:center}
.ld-hero-glow{position:absolute;top:-10%;right:-6%;width:60%;height:90%;background:radial-gradient(circle at 60% 40%,rgba(255,0,94,.34),rgba(255,102,0,.14) 40%,transparent 68%);filter:blur(20px);pointer-events:none}
.ld-hero-img{position:absolute;right:-2%;top:50%;transform:translateY(-50%);height:118%;width:auto;max-width:60%;object-fit:contain;object-position:right center;pointer-events:none;filter:drop-shadow(0 30px 80px rgba(255,0,94,.25))}
.ld-hero-in{position:relative;z-index:3}
.ld-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-on-dark-2);background:none;border:0;padding:0;margin:0 0 30px;transition:color .2s}
.ld-back:hover{color:#fff}
.ld-back i{transition:transform .2s var(--ease)}
.ld-back:hover i{transform:translateX(-3px)}
.ld-hero-eb{color:var(--fg-on-dark-2);margin:0 0 26px}
.ld-hero-eb .eb-dot{width:7px;height:7px;border-radius:50%;background:var(--pink-500);display:inline-block;margin-right:2px;box-shadow:0 0 10px 1px rgba(255,0,94,.7)}
.ld-hero-h{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(4rem,8.6vw,8.4rem);line-height:.82;letter-spacing:-.02em;color:#fff;margin:0 0 26px}
.ld-hero-lead{font-family:var(--font-sans);font-size:1.32rem;line-height:1.5;color:var(--fg-on-dark);max-width:30ch;margin:0 0 36px}
.ld-hero-meta{display:flex;gap:46px;margin:0 0 38px}
.ld-meta-item{display:flex;flex-direction:column;gap:6px;border-left:1px solid var(--ink-500);padding-left:16px}
.ld-meta-k{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-on-dark-3)}
.ld-meta-v{font-family:var(--font-sans);font-size:.94rem;font-weight:600;color:#fff}
.ld-hero-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

/* =================================================================
   IMPACT STRIP
   ================================================================= */
.ld-impact{background:var(--ink-900);padding:0 0 90px}
.ld-impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-top:54px;border-top:1px solid var(--ink-600)}
.ld-impact .ld-metric-n{color:#fff}
.ld-impact .ld-metric-n.is-pink{color:var(--pink-500)}
.ld-impact .ld-metric-l{color:#fff}
.ld-impact .ld-metric-s{color:var(--fg-on-dark-3)}

/* =================================================================
   CHALLENGE
   ================================================================= */
.ld-challenge{background:var(--paper)}
.ld-challenge-in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ld-lede{font-family:var(--font-sans);font-size:1.18rem;line-height:1.6;color:var(--fg-on-light-2);margin:0}
.ld-lede--ondark{color:var(--fg-on-dark-2)}
.ld-fromto{display:inline-flex;align-items:center;gap:18px;margin-top:30px;padding:16px 22px;background:var(--paper-2);border:1px solid var(--line-200);border-radius:var(--r-pill)}
.ld-fromto-a{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-on-light-3)}
.ld-fromto-b{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink-500);font-weight:600}

/* =================================================================
   GROWTH SYSTEM (centerpiece)
   ================================================================= */
.ld-system{background:var(--ink-900)}
.ld-system-head{margin-bottom:64px}
.ld-system-h{line-height:1.02}
.ld-system-sub{font-family:var(--font-sans);font-size:1.1rem;color:var(--fg-on-dark-2);margin:24px 0 0;max-width:46ch}

.ld-flow--h .ld-flow-stages{display:flex;align-items:stretch;gap:0}
.ld-flow-node{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:26px 22px;background:rgba(20,23,28,.6);border:1px solid var(--ink-600);border-radius:var(--r-md);position:relative;
  opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .3s var(--ease)}
.ld-flow.is-in .ld-flow-node{opacity:1;transform:none}
.ld-flow-node:hover{border-color:var(--acc)}
.ld-flow-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acc) 14%,transparent);border:1px solid color-mix(in srgb,var(--acc) 36%,transparent)}
.ld-flow-k{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.5rem;letter-spacing:-.01em;color:#fff;line-height:1}
.ld-flow-metric{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.ld-flow-d{font-family:var(--font-sans);font-size:.9rem;line-height:1.45;color:var(--fg-on-dark-2)}
.ld-flow--h .ld-flow-link{flex:0 0 56px;align-self:center;height:2px;background:linear-gradient(90deg,var(--ink-500),var(--ink-600));position:relative;overflow:hidden;
  opacity:0;transition:opacity .5s var(--ease)}
.ld-flow.is-in .ld-flow-link{opacity:1}
.ld-flow--h .ld-flow-link::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:7px solid var(--ink-500);border-top:5px solid transparent;border-bottom:5px solid transparent}
.ld-flow-pulse{position:absolute;top:50%;left:0;width:14px;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,transparent,var(--pink-500));animation:ldpulse 2.2s linear infinite}
@keyframes ldpulse{0%{left:-14px}100%{left:100%}}

.ld-flow-loop,.ld-flow-base{display:flex;align-items:center;gap:12px;margin-top:18px;padding:16px 22px;border-radius:var(--r-md);font-family:var(--font-sans);font-size:1rem;font-weight:500}
.ld-flow-loop{margin-top:26px;background:color-mix(in srgb,var(--craft-500) 9%,transparent);border:1px dashed color-mix(in srgb,var(--craft-500) 40%,transparent);color:#fff}
.ld-flow-base{background:color-mix(in srgb,var(--ai-500) 10%,transparent);border:1px solid color-mix(in srgb,var(--ai-500) 30%,transparent);color:#fff}

/* =================================================================
   WHAT WE BUILT
   ================================================================= */
.ld-built{background:var(--paper)}
.ld-built-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.ld-built-card{height:100%;background:#fff;border:1px solid var(--line-100);border-radius:var(--r-lg);padding:30px 28px;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.ld-built-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--acc) 50%,var(--line-200))}
.ld-built-ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acc) 12%,transparent);margin-bottom:20px}
.ld-built-t{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.45rem;letter-spacing:-.01em;color:var(--fg-on-light);margin:0 0 10px;line-height:1}
.ld-built-d{font-family:var(--font-sans);font-size:.96rem;line-height:1.55;color:var(--fg-on-light-2);margin:0}

/* =================================================================
   THREE-ACT PHASES
   ================================================================= */
.ld-phase--light{background:var(--paper)}
.ld-phase--warm{background:var(--paper-2)}
.ld-phase--dark{background:var(--ink-900)}
.ld-phase-in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ld-phase-in--rev .ld-phase-copy{order:2}
.ld-phase-in--rev .ld-phase-vis{order:1}
.ld-phase-copy .d-sec-h{margin-bottom:20px}
.ld-points{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:13px}
.ld-points li{display:flex;align-items:center;gap:11px;font-family:var(--font-sans);font-size:1.02rem;color:var(--fg-on-light)}
.ld-points--ondark li{color:#fff}

/* visual cards */
.ld-vis-card{background:#fff;border:1px solid var(--line-200);border-radius:var(--r-lg);padding:26px 28px 30px;box-shadow:var(--shadow-md)}
.ld-vis-card--dark{background:rgba(20,23,28,.7);border-color:var(--ink-600);box-shadow:none}
.ld-vis-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.ld-vis-head span:first-child{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-on-light-3)}
.ld-vis-head--ondark span:first-child{color:var(--fg-on-dark-3)}
.ld-vis-peak{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--pink-500);letter-spacing:-.01em}
.ld-vis-peak.is-teal{color:#22C3D0}
.ld-vis-foot{margin-top:20px}
.ld-vis-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-on-light);background:var(--pink-100);border:1px solid color-mix(in srgb,var(--pink-500) 22%,transparent);border-radius:var(--r-pill);padding:8px 14px}

/* lead volume bars */
.ld-leadchart-bars{display:flex;align-items:flex-end;gap:7px;height:180px}
.ld-leadbar{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--pink-500),color-mix(in srgb,var(--pink-500) 36%,#fff));transition:height .9s cubic-bezier(.22,.61,.36,1)}
.ld-vis-card--dark .ld-leadbar{background:linear-gradient(180deg,var(--pink-500),color-mix(in srgb,var(--pink-500) 30%,var(--ink-900)))}

/* revenue chart */
.ld-revchart{position:relative}
.ld-revchart-svg{width:100%;height:var(--h,260px);display:block;overflow:visible}
.ld-grid{stroke:color-mix(in srgb,currentColor 12%,transparent);stroke-width:1;color:#000;opacity:.12}
.ld-results .ld-grid,.ldm-results .ld-grid{color:#fff;opacity:.12}
.ld-revchart-line{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.8s cubic-bezier(.5,.1,.2,1)}
.ld-revchart-line.is-in{stroke-dashoffset:0}
.ld-revchart-area{opacity:0;transition:opacity 1.2s var(--ease) .5s}
.ld-revchart-area.is-in{opacity:1}
.ld-revchart-dot{opacity:0;transition:opacity .4s var(--ease) 1.6s;filter:drop-shadow(0 0 8px var(--pink-500))}
.ld-revchart-dot.is-in{opacity:1}
.ld-revchart-axis{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-on-light-3)}
.ld-results-chart .ld-revchart-axis,.ldm-results .ld-revchart-axis{color:var(--fg-on-dark-3)}

/* cost compare */
.ld-costcompare{display:flex;flex-direction:column;gap:18px}
.ld-cc-row{display:grid;grid-template-columns:64px 1fr 44px;align-items:center;gap:14px}
.ld-cc-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-on-light-3)}
.ld-vis-card--dark .ld-cc-label{color:var(--fg-on-dark-3)}
.ld-cc-track{height:18px;border-radius:var(--r-pill);background:var(--paper-3);overflow:hidden}
.ld-vis-card--dark .ld-cc-track{background:var(--ink-700)}
.ld-cc-fill{display:block;height:100%;border-radius:var(--r-pill);transition:width 1s cubic-bezier(.22,.61,.36,1)}
.ld-cc-fill.is-before{background:linear-gradient(90deg,#5b6068,#8a909a)}
.ld-cc-fill.is-after{background:linear-gradient(90deg,var(--data-500),#22C3D0)}
.ld-cc-val{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--fg-on-light-3);text-align:right}
.ld-vis-card--dark .ld-cc-val{color:var(--fg-on-dark-2)}
.ld-cc-val.is-after{color:#22C3D0}
.ld-cc-note{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-on-light-3);margin:4px 0 0}
.ld-vis-card--dark .ld-cc-note{color:var(--fg-on-dark-3)}

/* retention loop */
.ld-retain{display:flex;justify-content:center}
.ld-retain-loop{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:360px}
.ld-retain-node{display:flex;align-items:center;gap:12px;padding:16px 20px;background:#fff;border:1px solid var(--line-200);border-radius:var(--r-md);font-family:var(--font-sans);font-weight:600;font-size:1rem;color:var(--fg-on-light);box-shadow:var(--shadow-sm)}
.ld-retain-node.is-strong{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}
.ld-retain-arrow{display:flex;justify-content:center;align-items:center}
.ld-retain-back{position:relative}

/* =================================================================
   WEBSITE SHOWCASE
   ================================================================= */
.ld-web{background:var(--ink-900)}
.ld-web-head{text-align:center;max-width:24ch;margin:0 auto}
.ld-web-head .d-sec-h{color:#fff}
.ld-web-stage{margin:50px auto 0;max-width:1020px}
.ld-web-stage img{width:100%;display:block;filter:drop-shadow(0 40px 90px rgba(0,0,0,.55))}
.ld-web-points{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px;max-width:1020px;margin-left:auto;margin-right:auto}
.ld-web-point{display:flex;align-items:flex-start;gap:14px;font-family:var(--font-sans);font-size:1.02rem;line-height:1.4;color:var(--fg-on-dark)}
.ld-web-num{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--pink-500);flex:none;padding-top:2px}

/* =================================================================
   CATEGORY EXPANSION
   ================================================================= */
.ld-expand{background:var(--ink-850)}
.ld-expand-head{margin-bottom:50px}
.ld-expand-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.ld-expand-card{background:rgba(20,23,28,.6);border:1px solid var(--ink-600);border-radius:var(--r-lg);padding:34px 32px;height:100%}
.ld-expand-tag{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.ld-expand-t{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.7rem;line-height:1;letter-spacing:-.01em;color:#fff;margin:14px 0 12px}
.ld-expand-d{font-family:var(--font-sans);font-size:1rem;line-height:1.55;color:var(--fg-on-dark-2);margin:0}
.ld-expand-img{margin-top:24px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--ink-600)}
.ld-expand-img img{width:100%;display:block}
.ld-expand-list{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:12px}
.ld-expand-list li{display:flex;align-items:center;gap:11px;font-family:var(--font-sans);font-size:.98rem;color:#fff}

/* =================================================================
   RECOGNITION & MEDIA
   ================================================================= */
.ld-recog{background:var(--paper)}
.ld-recog-head{margin-bottom:50px}
.ld-award-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ld-award{display:flex;flex-direction:column;gap:8px;padding:30px 26px;background:var(--paper-2);border:1px solid var(--line-200);border-radius:var(--r-lg);border-top:3px solid var(--acc);height:100%}
.ld-award-rank{font-family:var(--font-display);font-weight:900;font-size:2.6rem;line-height:.85;letter-spacing:-.02em}
.ld-award-t{font-family:var(--font-sans);font-weight:600;font-size:1.02rem;color:var(--fg-on-light);line-height:1.25}
.ld-award-scope{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-on-light-3)}
.ld-recog-extra{margin-top:30px}
.ld-recog-cca{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sans);font-weight:600;font-size:1.05rem;color:var(--fg-on-light)}
.ld-media{margin-top:48px;border-top:1px solid var(--line-200);padding-top:30px;display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.ld-media-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-on-light-3)}
.ld-media-row{display:flex;gap:38px;flex-wrap:wrap;align-items:center}
.ld-media-name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.4rem;letter-spacing:-.01em;color:var(--fg-on-light-2);opacity:.7;transition:opacity .2s}
.ld-media-name:hover{opacity:1}

/* =================================================================
   RESULTS
   ================================================================= */
.ld-results{background:var(--ink-900)}
.ld-results-head{margin-bottom:56px}
.ld-results-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.ld-results-chart .ld-vis-head{margin-bottom:24px}
.ld-results-metrics{display:grid;grid-template-columns:1fr 1fr;gap:34px 28px}

/* =================================================================
   WHY IT WORKED
   ================================================================= */
.ld-why{background:var(--paper-2)}
.ld-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:50px}
.ld-why-card{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--line-100);border-radius:var(--r-lg);padding:32px 30px;height:100%;box-shadow:var(--shadow-sm)}
.ld-why-ic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--pink-100)}
.ld-why-t{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.5rem;letter-spacing:-.01em;color:var(--fg-on-light);margin:0;line-height:1}
.ld-why-d{font-family:var(--font-sans);font-size:1rem;line-height:1.55;color:var(--fg-on-light-2);margin:0}

/* =================================================================
   FINAL CTA
   ================================================================= */
.ld-cta{background:var(--ink-900);position:relative;overflow:hidden;text-align:center}
.ld-cta-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(255,0,94,.22),transparent 60%);pointer-events:none}
.ld-cta-in{position:relative;z-index:2}
.ld-cta-h{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(2.8rem,5.4vw,5rem);line-height:.92;color:#fff;margin:16px 0 22px}
.ld-cta-sub{font-family:var(--font-sans);font-size:1.18rem;line-height:1.55;color:var(--fg-on-dark-2);max-width:46ch;margin:0 auto 34px}
.ld-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* =================================================================
   ======================  MOBILE  =================================
   ================================================================= */
.ldm-root{background:var(--ink-900)}
.ldm-lede{font-family:var(--font-sans);font-size:1rem;line-height:1.6;color:var(--fg-on-light-2);margin:1rem 0 0}
.ldm-lede--ondark{color:var(--fg-on-dark-2)}

/* hero */
.ldm-hero{position:relative;background:var(--ink-900);min-height:35rem;display:flex;flex-direction:column;overflow:hidden}
.ldm-hero-img{position:absolute;right:-12%;top:-2%;height:62%;width:auto;object-fit:contain;object-position:top right;pointer-events:none;filter:drop-shadow(0 18px 50px rgba(255,0,94,.3))}
.ldm-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,13,.1) 0%,rgba(10,11,13,.55) 52%,#0a0b0d 90%)}
.ldm-hero-top{position:relative;z-index:3;display:flex;align-items:center;gap:0.875rem;padding:1.375rem 1.375rem 0}
.ldm-back{width:2.375rem;height:2.375rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid var(--ink-600);backdrop-filter:blur(6px)}
.ldm-hero-eb{font-family:var(--font-mono);font-size:0.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-on-dark-2)}
.ldm-hero-content{position:relative;z-index:3;margin-top:auto;padding:0 1.375rem 2.125rem}
.ldm-hero-kicker{display:inline-flex;align-items:center;gap:0.5625rem;font-family:var(--font-mono);font-size:0.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-on-dark-2);margin:0 0 0.875rem}
.ldm-hero-kicker .eb-dot{width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--pink-500);box-shadow:0 0 10px 1px rgba(255,0,94,.7)}
.ldm-hero-h{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:4.1rem;line-height:.82;letter-spacing:-.02em;color:#fff;margin:0 0 1rem;text-shadow:0 2px 26px rgba(0,0,0,.5)}
.ldm-hero-lead{font-family:var(--font-sans);font-size:1.08rem;line-height:1.5;color:#fff;margin:0 0 1.5rem;max-width:30ch}
.ldm-hero-meta{display:flex;gap:0.875rem}
.ldm-hero-meta span{flex:1;display:flex;flex-direction:column;gap:0.1875rem;font-family:var(--font-mono);font-size:0.5625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-on-dark-3);border-top:1px solid var(--ink-600);padding-top:0.5625rem}
.ldm-hero-meta b{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:#fff;letter-spacing:0}

/* impact */
.ldm-impact{background:var(--ink-900);padding:0.5rem 1.375rem 3.125rem}
.ldm-impact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.625rem 1.125rem}
.ldm-metric{display:flex;flex-direction:column;gap:0.375rem}
.ldm-metric-n{font-family:var(--font-display);font-weight:900;font-size:2.9rem;line-height:.82;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.ldm-metric-n.is-pink{color:var(--pink-500)}
.ldm-metric-l{font-family:var(--font-sans);font-size:.82rem;font-weight:500;color:var(--fg-on-dark-2);margin:0;line-height:1.3}
.ldm-metric.is-ondark .ldm-metric-l{color:var(--fg-on-dark-2)}

/* sections base on mobile */
.ldm-challenge{background:var(--paper)}
.ldm-fromto{display:flex;flex-direction:column;align-items:flex-start;gap:0.625rem;margin-top:1.375rem}
.ldm-fromto span{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-on-light-3)}
.ldm-fromto span.is-b{color:var(--pink-500);font-weight:600}

.ldm-system{background:var(--ink-900)}
.ldm-built{background:var(--paper)}
.ldm-phase{background:var(--paper)}
.ldm-phase--dark{background:var(--ink-900)}
.ldm-phase--warm{background:var(--paper-2)}
.ldm-web{background:var(--ink-900)}
.ldm-expand{background:var(--ink-850)}
.ldm-recog{background:var(--paper)}
.ldm-results{background:var(--ink-900)}
.ldm-why{background:var(--paper-2)}
.ldm-cta{background:var(--ink-900);text-align:center;position:relative}

/* vertical system flow */
.ld-flow--v .ld-flow-stages{display:flex;flex-direction:column;gap:0;margin-top:8px}
.ld-flow--v .ld-flow-node{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease);align-items:flex-start;background:rgba(20,23,28,.6);border:1px solid var(--ink-600);border-radius:var(--r-md);padding:18px 18px}
.ld-flow--v.is-in .ld-flow-node{opacity:1;transform:none}
.ld-flow--v .ld-flow-link{height:26px;width:2px;margin-left:40px;background:linear-gradient(180deg,var(--ink-500),var(--ink-600));position:relative;overflow:hidden;opacity:0;transition:opacity .5s var(--ease)}
.ld-flow--v.is-in .ld-flow-link{opacity:1}
.ld-flow--v .ld-flow-pulse{position:absolute;left:50%;top:0;width:2px;height:12px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,var(--pink-500));animation:ldpulsev 2.2s linear infinite}
@keyframes ldpulsev{0%{top:-12px}100%{top:100%}}
.ld-flow--v .ld-flow-k{font-size:1.3rem}
.ld-flow--v .ld-flow-ic{width:42px;height:42px}

/* built accordion (mobile) */
.ldm-built-list{display:flex;flex-direction:column;gap:0.625rem;margin-top:1.75rem}
.ldm-built-row{background:#fff;border:1px solid var(--line-200);border-radius:var(--r-md);overflow:hidden}
.ldm-built-row.is-open{border-color:color-mix(in srgb,var(--acc) 50%,var(--line-200))}
.ldm-built-head{display:flex;align-items:center;gap:0.875rem;width:100%;background:none;border:0;padding:1.125rem 1.125rem;text-align:left}
.ldm-built-ic{width:2.5rem;height:2.5rem;border-radius:0.6875rem;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acc) 12%,transparent);flex:none}
.ldm-built-t{flex:1;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.2rem;letter-spacing:-.01em;color:var(--fg-on-light);line-height:1}
.ldm-built-chev{transition:transform .3s var(--ease)}
.ldm-built-row.is-open .ldm-built-chev{transform:rotate(180deg)}
.ldm-built-panel{overflow:hidden;transition:max-height .4s var(--ease)}
.ldm-built-panel p{margin:0;padding:0 1.125rem 1.125rem 4.5rem;font-family:var(--font-sans);font-size:.92rem;line-height:1.55;color:var(--fg-on-light-2)}

/* mobile visual cards */
.ldm-vis-card{margin-top:1.5rem;background:#fff;border:1px solid var(--line-200);border-radius:var(--r-lg);padding:1.375rem 1.25rem 1.5rem;box-shadow:var(--shadow-md)}
.ldm-vis-card--dark{background:rgba(20,23,28,.7);border-color:var(--ink-600);box-shadow:none}
.ldm-vis-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.125rem}
.ldm-vis-head span:first-child{font-family:var(--font-mono);font-size:0.65625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-on-light-3)}
.ldm-vis-head--ondark span:first-child{color:var(--fg-on-dark-3)}
.ldm-vis-peak{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--pink-500)}
.ldm-vis-peak.is-teal{color:#22C3D0}
.ldm-vis-chip{display:inline-flex;align-items:center;gap:0.4375rem;margin-top:1.125rem;font-family:var(--font-mono);font-size:0.65625rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-on-light);background:var(--pink-100);border:1px solid color-mix(in srgb,var(--pink-500) 22%,transparent);border-radius:var(--r-pill);padding:0.4375rem 0.8125rem}
.ldm-vis-card .ld-leadchart-bars{height:8.75rem}

/* mobile retention */
.ldm-retain{display:flex;flex-direction:column;align-items:center;gap:0.5rem;margin-top:1.5rem}
.ldm-retain-node{display:flex;align-items:center;gap:0.6875rem;width:100%;max-width:20rem;padding:0.875rem 1.125rem;background:#fff;border:1px solid var(--line-200);border-radius:var(--r-md);font-family:var(--font-sans);font-weight:600;font-size:.96rem;color:var(--fg-on-light)}
.ldm-phase--warm .ldm-retain-node{background:#fff}
.ldm-retain-node.is-strong{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}

/* mobile web */
.ldm-web-img{margin:1.5rem 0 0;filter:drop-shadow(0 24px 50px rgba(0,0,0,.5))}
.ldm-web-img img{width:100%;display:block}
.ldm-points{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-direction:column;gap:0.75rem}
.ldm-points li{display:flex;align-items:center;gap:0.625rem;font-family:var(--font-sans);font-size:.96rem;color:#fff}
.ldm-web .ldm-points li{color:#fff}

/* mobile expand */
.ldm-expand-card{margin-top:1.125rem;background:rgba(20,23,28,.6);border:1px solid var(--ink-600);border-radius:var(--r-lg);padding:1.5rem 1.375rem}
.ldm-expand-tag{font-family:var(--font-mono);font-size:0.65625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.ldm-expand-t{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.4rem;line-height:1.02;color:#fff;margin:0.75rem 0 0.625rem}
.ldm-expand-d{font-family:var(--font-sans);font-size:.94rem;line-height:1.55;color:var(--fg-on-dark-2);margin:0}
.ldm-expand-img{margin-top:1.125rem;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--ink-600)}
.ldm-expand-img img{width:100%;display:block}

/* mobile recognition */
.ldm-award-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-top:1.625rem}
.ldm-award{display:flex;flex-direction:column;gap:0.375rem;padding:1.25rem 1.125rem;background:var(--paper-2);border:1px solid var(--line-200);border-radius:var(--r-md);border-top:3px solid var(--acc);height:100%}
.ldm-award-rank{font-family:var(--font-display);font-weight:900;font-size:2rem;line-height:.85}
.ldm-award-t{font-family:var(--font-sans);font-weight:600;font-size:.92rem;color:var(--fg-on-light);line-height:1.25}
.ldm-award-scope{font-family:var(--font-mono);font-size:0.59375rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-on-light-3)}
.ldm-cca{display:flex;align-items:center;gap:0.5625rem;margin-top:1.375rem;font-family:var(--font-sans);font-weight:600;font-size:.98rem;color:var(--fg-on-light)}
.ldm-media{margin-top:1.625rem;border-top:1px solid var(--line-200);padding-top:1.375rem}
.ldm-media-label{font-family:var(--font-mono);font-size:0.65625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-on-light-3)}
.ldm-media-row{display:flex;flex-wrap:wrap;gap:0.5rem 1rem;margin-top:0.875rem}
.ldm-media-row span{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.05rem;letter-spacing:-.01em;color:var(--fg-on-light-2)}

/* mobile results */
.ldm-results-chart{margin-top:1.625rem;margin-bottom:2.25rem}
.ldm-results .ldm-impact-grid--ondark{margin-top:0.5rem}
.ldm-results .ldm-metric.is-ondark .ldm-metric-n{color:#fff}
.ldm-results .ldm-metric.is-ondark .ldm-metric-n.is-pink{color:var(--pink-500)}

/* mobile why */
.ldm-why-list{display:flex;flex-direction:column;gap:0.75rem;margin-top:1.625rem}
.ldm-why-card{display:flex;gap:0.875rem;align-items:flex-start;background:#fff;border:1px solid var(--line-100);border-radius:var(--r-md);padding:1.25rem 1.125rem}
.ldm-why-ic{width:2.625rem;height:2.625rem;border-radius:0.75rem;display:flex;align-items:center;justify-content:center;background:var(--pink-100);flex:none}
.ldm-why-t{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.2rem;letter-spacing:-.01em;color:var(--fg-on-light);margin:0 0 0.375rem;line-height:1}
.ldm-why-d{font-family:var(--font-sans);font-size:.9rem;line-height:1.5;color:var(--fg-on-light-2);margin:0}

/* mobile final cta */
.ldm-cta-h{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:2.7rem;line-height:.9;color:#fff;margin:0.875rem 0 1.5rem}
.ldm-cta-btn{width:min(17.5rem,100%);justify-content:center;margin:0 auto}
.ldm-cta-back{display:block;margin:1.125rem auto 0;background:none;border:0;font-family:var(--font-mono);font-size:0.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-on-dark-2)}

/* =================================================================
   RESPONSIVE — desktop breakpoints
   ================================================================= */
@media (max-width:1080px){
  .ld-hero-img{max-width:52%;opacity:.82}
  .ld-challenge-in,.ld-phase-in,.ld-results-grid,.ld-expand-grid{grid-template-columns:1fr;gap:40px}
  .ld-phase-in--rev .ld-phase-copy{order:1}
  .ld-phase-in--rev .ld-phase-vis{order:2}
  .ld-impact-grid,.ld-built-grid,.ld-award-grid{grid-template-columns:repeat(2,1fr)}
  .ld-why-grid{grid-template-columns:1fr}
  .ld-web-points{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .ld-revchart-line,.ld-revchart-area,.ld-revchart-dot,.ld-leadbar,.ld-cc-fill,.ld-flow-node,.ld-flow-link{transition:none}
  .ld-flow-pulse{animation:none}
}

/* =================================================================
   CLICKABLE "Lip Doctor" CASE CARD (on the home / work grid)
   ================================================================= */
.d-case.is-live{cursor:pointer}
.d-case.is-live .d-case-img{position:relative}
.d-case-live{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:rgba(10,11,13,.62);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-pill);padding:7px 12px;
  opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.d-case.is-live:hover .d-case-live,.d-case.is-live:focus-visible .d-case-live{opacity:1;transform:none}
.d-case-live-dot{width:7px;height:7px;border-radius:50%;background:#22D67F;flex:none;box-shadow:0 0 8px 1px rgba(34,214,127,.85);animation:dCaseDotPulse 1.7s ease-in-out infinite}
@keyframes dCaseDotPulse{0%,100%{transform:scale(.82);box-shadow:0 0 6px 0 rgba(34,214,127,.6)}50%{transform:scale(1.12);box-shadow:0 0 13px 3px rgba(34,214,127,.95)}}
.d-case.is-live:focus-visible{outline:2px solid var(--pink-500);outline-offset:3px}
.d-case-cta{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pink-500)}
.d-case-cta i{transition:transform .25s var(--ease)}
.d-case.is-live:hover .d-case-cta i{transform:translateX(4px)}

.m-case.is-live{cursor:pointer}
.m-case.is-live .m-case-img{position:relative}
.m-case-live{position:absolute;top:0.75rem;right:0.75rem;display:inline-flex;align-items:center;gap:0.3125rem;
  font-family:var(--font-mono);font-size:0.59375rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:rgba(10,11,13,.62);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-pill);padding:0.375rem 0.6875rem}
.m-case-cta{display:inline-flex;align-items:center;gap:0.4375rem;margin-top:0.875rem;
  font-family:var(--font-mono);font-size:0.65625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pink-500)}
.m-case-live-dot{width:0.375rem;height:0.375rem;border-radius:50%;background:#22D67F;flex:none;box-shadow:0 0 8px 1px rgba(34,214,127,.85);animation:dCaseDotPulse 1.7s ease-in-out infinite}