/* /personal-assistant: DOT landing page (direction A "Dot", founder-approved, frozen).
   Ported from personal_web/design/mockup-template.html, section "1. LANDING", direction A only.
   Fonts come from the site's self-hosted design system (/_ds/.../tokens/fonts.css).
   Tokens below mirror the design system (tokens/colors.css + effects.css) exactly as the mockup does. */

/* ---------- Tokens: light ---------- */
:root{
  --orange:#FF6A00; --orange-press:#E55F00; --success:#0FAB85; --on-solid:#FFFFFF;
  --bg-page:#F7F5F0; --bg-surface:#FFFFFF; --bg-sunken:#F0EDE6; --bg-hover:rgba(23,24,26,.04);
  --text-strong:#17181A; --text-body:rgba(23,24,26,.80); --text-muted:#6B7177; --text-faint:#9AA0A6;
  --line:#E6E2D9; --line-strong:#D7D2C7; --line-faint:#EFECE4;
  --accent-tint:#FFF1E8; --accent-fg:#9A3F00;
  --success-tint:#EAF6F1; --success-fg:#0B5E49;
  --neutral-tint:rgba(23,24,26,.07); --neutral-fg:rgba(23,24,26,.78);
  --shadow-xs:0 1px 2px rgba(23,24,26,.05);
  --shadow-accent:0 6px 18px rgba(255,106,0,.28);
  --focus:0 0 0 3px rgba(255,106,0,.32);
  --radius-pill:999px;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --font-display:'Clash Display', 'Arial Narrow', system-ui, sans-serif;
  --font-body:'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Dot + props */
  --pl-sun:#FFDDBF; --pl-sun-ring:rgba(255,106,0,.32); --pl-shadow:rgba(23,24,26,.13); --pl-shine:rgba(255,255,255,.38);
  --pl-face:#17181A; --pl-hi:#FFFFFF; --pl-cheek:#FF9A5C; --pl-tongue:#FF9C8A; --pl-arm:#E55F00;
  --pl-line:#17181A; --pl-hard:#17181A; --pl-card:#FFFFFF;
  --pl-pal:#A9D2F7; --pl-pal-tint:#E7F1FC; --pl-pal-line:#4F8CC9; --pl-pal-fg:#1F4E7A;
  --sc-window:#CDE5F6; --sc-wood:#B07A47; --sc-cushion:#F4C04E; --sc-coral:#E9806E; --sc-pep:#C9473F;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --orange-press:#FF7E26;
    --bg-page:#121315; --bg-surface:#1B1C1F; --bg-sunken:#16171A; --bg-hover:rgba(247,245,240,.05);
    --text-strong:#F7F5F0; --text-body:rgba(247,245,240,.82); --text-muted:#A3A8AD; --text-faint:#7C8288;
    --line:#2B2D31; --line-strong:#3A3D42; --line-faint:#222327;
    --accent-tint:rgba(255,106,0,.15); --accent-fg:#FFA766;
    --success-tint:rgba(15,171,133,.16); --success-fg:#5CD3B2;
    --neutral-tint:rgba(247,245,240,.08); --neutral-fg:rgba(247,245,240,.80);
    --shadow-xs:0 1px 2px rgba(0,0,0,.3);
    --pl-sun:rgba(255,106,0,.15); --pl-sun-ring:rgba(255,106,0,.38); --pl-shadow:rgba(0,0,0,.45);
    --pl-line:#EDEAE3; --pl-hard:#000000; --pl-card:#1E1F23;
    --pl-pal:#9CCBF4; --pl-pal-tint:#1D2833; --pl-pal-line:#86BBEE; --pl-pal-fg:#A9D2F7;
    --sc-window:#1E2D3A; --sc-wood:#8E6238;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --orange-press:#FF7E26;
  --bg-page:#121315; --bg-surface:#1B1C1F; --bg-sunken:#16171A; --bg-hover:rgba(247,245,240,.05);
  --text-strong:#F7F5F0; --text-body:rgba(247,245,240,.82); --text-muted:#A3A8AD; --text-faint:#7C8288;
  --line:#2B2D31; --line-strong:#3A3D42; --line-faint:#222327;
  --accent-tint:rgba(255,106,0,.15); --accent-fg:#FFA766;
  --success-tint:rgba(15,171,133,.16); --success-fg:#5CD3B2;
  --neutral-tint:rgba(247,245,240,.08); --neutral-fg:rgba(247,245,240,.80);
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --pl-sun:rgba(255,106,0,.15); --pl-sun-ring:rgba(255,106,0,.38); --pl-shadow:rgba(0,0,0,.45);
  --pl-line:#EDEAE3; --pl-hard:#000000; --pl-card:#1E1F23;
  --pl-pal:#9CCBF4; --pl-pal-tint:#1D2833; --pl-pal-line:#86BBEE; --pl-pal-fg:#A9D2F7;
  --sc-window:#1E2D3A; --sc-wood:#8E6238;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-page);color:var(--text-strong);font:400 16px/1.55 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--orange);color:#fff}
h1,h2,h3,p,ol,ul,figure{margin:0}
ul,ol{padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ico.sm{width:15px;height:15px}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--text-strong);color:var(--bg-page);padding:10px 14px;border-radius:10px;font:600 14px/1 var(--font-body);text-decoration:none}
.skip:focus{top:12px}

/* ---------- Brand bits ---------- */
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--text-strong)}
.wordmark{font:700 21px/1 var(--font-display);letter-spacing:-.025em;display:inline-flex;align-items:flex-end}
.wordmark::after{content:"";width:.15em;height:.15em;border-radius:50%;background:var(--orange);margin-left:.07em;margin-bottom:.06em}
.mark{width:26px;height:26px;flex:none}
.mark .c{stroke:currentColor}
.eyebrow{font:600 11px/1.2 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--radius-pill);padding:11px 20px;font:600 15px/1 var(--font-body);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .12s var(--ease),box-shadow .2s var(--ease),transform .12s}
.btn:active{transform:translateY(.5px)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:var(--shadow-accent)}
.btn-primary:hover{background:var(--orange-press)}
.btn-ghost{background:transparent;color:var(--text-strong)}
.btn-ghost:hover{background:var(--bg-hover)}
.btn-sm{padding:8px 14px;font-size:14px}
.btn-lg{padding:15px 28px;font-size:17px}
.ok-badge{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--success);color:#fff;flex:none}
.ok-badge .ico{width:13px;height:13px;stroke-width:2.6}

/* ---------- Landing ---------- */
.lp{--gut:clamp(16px,3vw,32px);background:var(--bg-page);max-width:1240px;margin:0 auto}

/* Nav */
.lp-nav{display:flex;align-items:center;gap:16px;padding:18px var(--gut) 6px}
.lp-nav nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.lp-nav .navlink{color:var(--text-body);text-decoration:none;font:500 14.5px/1 var(--font-body)}
.lp-nav .navlink:hover{color:var(--text-strong);text-decoration:underline wavy var(--orange);text-underline-offset:6px}

/* Hero */
.lp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(20px,4vw,40px) var(--gut) clamp(44px,6vw,76px)}
.lp-meet{display:inline-flex;align-items:center;gap:10px;padding:5px 15px 5px 6px;border-radius:var(--radius-pill);background:var(--bg-surface);border:1.5px solid var(--line-strong);font:600 14px/1.25 var(--font-body);color:var(--text-strong)}
.lp-meet .av{display:inline-flex;flex:none}
.lp-meet .av svg{width:32px;height:32px}
.lp-hero h1{font:700 clamp(40px,5.7vw,74px)/.98 var(--font-display);letter-spacing:-.03em;text-wrap:balance;margin-top:20px;color:var(--text-strong)}
.lp-squig{text-decoration:underline wavy var(--orange);text-decoration-thickness:.07em;text-underline-offset:.15em;text-decoration-skip-ink:none}
.lp-sub{font:500 clamp(19px,2vw,23px)/1.35 var(--font-body);color:var(--text-strong);margin-top:20px;max-width:28ch;text-wrap:balance}
.lp-lead{font:400 16.5px/1.5 var(--font-body);color:var(--text-muted);margin-top:10px;max-width:40ch}
.lp-cta-row{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;margin-top:28px}
.lp-works{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:24px;font:500 14px/1 var(--font-body);color:var(--text-muted)}
.lp-tile{border:1.5px solid var(--line-strong);background:var(--bg-surface);border-radius:10px;padding:8px 13px;font:600 14px/1 var(--font-body);color:var(--text-strong)}
.lp-fine{display:flex;gap:8px;align-items:center;margin-top:16px;font:500 13px/1.4 var(--font-body);color:var(--text-muted)}
.lp-fine .ico{width:15px;height:15px;color:var(--success)}

/* Character drawing classes */
.k-orange{fill:var(--orange)} .k-arm{fill:none;stroke:var(--pl-arm);stroke-width:8;stroke-linecap:round} .k-hand{fill:var(--pl-arm)}
.k-shadow{fill:var(--pl-shadow)} .k-shine{fill:none;stroke:var(--pl-shine);stroke-width:5;stroke-linecap:round}
.k-band{fill:none;stroke:var(--pl-line);stroke-width:4.5;stroke-linecap:round} .k-gear{fill:var(--pl-line)} .k-boom{fill:none;stroke:var(--pl-line);stroke-width:3.5;stroke-linecap:round}
.k-face{fill:var(--pl-face)} .k-hi{fill:var(--pl-hi)} .k-cheek{fill:var(--pl-cheek)} .k-tongue{fill:var(--pl-tongue)}
.k-mouth{fill:none;stroke:var(--pl-face);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.k-pal{fill:var(--pl-pal)}
.k-paper{fill:var(--pl-card);stroke:var(--pl-line);stroke-width:2.5;stroke-linejoin:round}
.k-paper-o{fill:var(--accent-tint);stroke:var(--pl-line);stroke-width:2.5;stroke-linejoin:round}
.k-line{fill:none;stroke:var(--pl-line);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.k-linefill{fill:var(--pl-line)} .k-faint{fill:var(--text-faint)}
.k-green{fill:var(--success)} .k-tick{fill:none;stroke:var(--on-solid);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.k-wave{fill:none;stroke:var(--orange);stroke-width:3.5;stroke-linecap:round}
.k-gstroke{fill:none;stroke:var(--success);stroke-width:3.5;stroke-linecap:round}
.k-pstroke{fill:none;stroke:var(--pl-pal-line);stroke-width:3.5;stroke-linecap:round}
.k-txt{font:700 13px/1 var(--font-body);fill:var(--pl-line);text-anchor:middle}
.k-q{font:700 22px/1 var(--font-display);fill:var(--orange);text-anchor:middle}
/* Prop palette */
.s-window{fill:var(--sc-window)}
.s-leg{fill:none;stroke:var(--sc-wood);stroke-width:7;stroke-linecap:round}
.s-cushion{fill:var(--sc-cushion)}
.s-coral{fill:var(--sc-coral)} .s-pep{fill:var(--sc-pep)} .s-crust{fill:none;stroke:var(--sc-wood);stroke-width:6;stroke-linecap:round}
.s-noodle{fill:none;stroke:var(--sc-cushion);stroke-width:2.5;stroke-linecap:round}

/* Hero stage */
.st{position:relative;width:100%;max-width:580px;justify-self:center;aspect-ratio:560/500;margin:0}
.st-art{position:absolute}
.st-art svg{display:block;width:100%;height:auto;overflow:visible}
.st-a .st-art{left:22%;top:16%;width:56%}
.st-sun{position:absolute;left:50%;top:52%;width:96%;aspect-ratio:1;border-radius:50%;background:var(--pl-sun);transform:translate(-50%,-50%)}
.st-sun::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px dashed var(--pl-sun-ring);animation:plSpin 60s linear infinite}

/* Story bubbles: always readable at rest, the replay spotlights one at a time */
.bub{position:absolute;z-index:2;max-width:15rem;padding:11px 14px 12px;border-radius:16px;background:var(--pl-card);border:2px solid var(--pl-line);color:var(--text-strong);font:500 14.5px/1.42 var(--font-body);transition:opacity .35s var(--ease),transform .35s var(--ease-out)}
.bub .b-step{display:flex;align-items:center;gap:6px;font:600 10.5px/1.2 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}
.bub .b-step .ico{width:12px;height:12px}
.b-card b{display:block;font-weight:600}
.b-card .ring{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font:500 13px/1.2 var(--font-body);color:var(--text-muted)}
.b-card .ring .ico{width:14px;height:14px;color:var(--orange)}
.b-whisper{background:var(--pl-pal-tint);border-style:dashed;border-color:var(--pl-pal-line)}
.b-whisper .b-step{color:var(--pl-pal-fg)}
.b-booked{display:flex;align-items:center;gap:11px;background:var(--success);border-color:var(--success);color:var(--on-solid);font:600 15px/1.3 var(--font-body)}
.b-booked .chk{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--on-solid)}
.b-booked .chk .ico{width:16px;height:16px;stroke-width:3}
.b-booked small{display:block;font:500 12.5px/1.3 var(--font-body);opacity:.92}
.b-booked .b-step{color:var(--on-solid);opacity:.85;margin-bottom:2px}
.t-dl::after,.t-ur::after{content:"";position:absolute;width:14px;height:14px;background:inherit;border-style:inherit;border-color:inherit;transform:rotate(45deg)}
.t-dl::after{bottom:-9px;border-width:0 2px 2px 0;left:24px}
.t-ur::after{top:-9px;border-width:2px 0 0 2px;right:28px}
.st[data-beat] .bub{opacity:.32;transform:scale(.97)}
.st[data-beat="1"] .bub-1,.st[data-beat="2"] .bub-2,.st[data-beat="3"] .bub-3,.st[data-beat="4"] .bub-4{opacity:1;transform:none}
.st-a[data-beat="4"] .bub-4{animation:plPop .5s var(--ease-out)}
/* Bubble positions (desktop) */
.a-p1{top:0;left:0}
.a-p2{top:3%;right:0}
.a-p3{top:66%;left:0;max-width:14rem}
.a-p4{bottom:2%;right:0}

/* Poses: each pose shows at rest (pz-r) or on its beat */
.st .pz{opacity:0;transition:opacity .18s}
.st:not([data-beat]) .pz-r,.st[data-beat="1"] .pz-1,.st[data-beat="2"] .pz-2,.st[data-beat="3"] .pz-3,.st[data-beat="4"] .pz-4{opacity:1}
.bob{animation:plBob 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.blink{animation:plBlink 4.4s infinite;transform-box:fill-box;transform-origin:center}
.talk{animation:plTalk .3s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.waves path{animation:plWave 1.1s ease-out infinite}
.waves path:nth-child(2){animation-delay:.15s}.waves path:nth-child(3){animation-delay:.3s}
.tilt{transition:transform .45s var(--ease-out);transform-box:fill-box;transform-origin:50% 90%}
.look{transition:transform .3s var(--ease-out)}
.st-a[data-beat="3"] .tilt{transform:rotate(-12deg)}
.st-a[data-beat="1"] .look{transform:translate(2px,-3px)}
.st-a[data-beat="3"] .look{transform:translate(-4px,1px)}
.st-a[data-beat="4"] .hop{animation:plHop .55s var(--ease-out) 2}
@keyframes plBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes plBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes plTalk{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@keyframes plWave{0%,100%{opacity:.25}45%{opacity:1}}
@keyframes plHop{0%,100%{transform:translateY(0)}35%{transform:translateY(-16px)}65%{transform:translateY(0) scale(1.05,.94)}}
@keyframes plPop{0%{transform:scale(.9)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes plSpin{to{transform:rotate(360deg)}}

/* Sections */
.lp-sec{padding:clamp(44px,6vw,80px) var(--gut);border-top:1px solid var(--line)}
.lp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:28px}
.lp-h2{font:600 clamp(30px,3.8vw,44px)/1.04 var(--font-display);letter-spacing:-.022em;text-wrap:balance;max-width:18ch;margin-top:10px;color:var(--text-strong)}
.lp-head>p{color:var(--text-muted);max-width:40ch;font-size:16.5px}
.lp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lp-card{display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.lp-card .art{background:var(--accent-tint);border-bottom:1px solid var(--line)}
.lp-card .art svg,.lp-steps .art svg{display:block;width:100%;height:auto}
.lp-card .body{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px;flex:1}
.lp-card h3{font:600 22px/1.15 var(--font-display);letter-spacing:-.01em;color:var(--text-strong)}
.lp-card .ask{font:400 15px/1.5 var(--font-body);color:var(--text-body)}
.lp-card .ask b{display:block;font:600 10.5px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:7px}
.lp-card .got{display:flex;gap:10px;align-items:flex-start;margin-top:auto;padding-top:12px;border-top:1px dashed var(--line-strong);font:500 14.5px/1.45 var(--font-body);color:var(--text-strong)}
.lp-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px clamp(16px,3vw,32px)}
.lp-steps li{display:flex;flex-direction:column;gap:10px}
.lp-steps .art{border-radius:18px;background:var(--bg-surface);border:1px solid var(--line);overflow:hidden}
.lp-steps .t{display:flex;align-items:center;gap:10px;margin-top:6px}
.lp-steps .n{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--orange);color:var(--on-solid);font:600 15px/1 var(--font-display)}
.lp-steps h3{font:600 20px/1.2 var(--font-body);letter-spacing:-.01em;color:var(--text-strong)}
.lp-steps p{color:var(--text-muted);font-size:15px;max-width:36ch}
.lp-honest{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.lp-list{list-style:none;display:flex;flex-direction:column;margin-top:18px}
.lp-list li{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:16px;color:var(--text-body)}
.lp-list li:first-child{border-top:0}
.lp-list .ico{color:var(--success);margin-top:3px}
.lp-list b{color:var(--text-strong);font-weight:600}
.lp-chat{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:24px;background:var(--bg-sunken)}
.lp-chat .q,.lp-chat .a{max-width:84%;padding:10px 14px 11px;font:500 15px/1.45 var(--font-body);color:var(--text-strong)}
.lp-chat .q{align-self:flex-start;background:var(--bg-surface);border:1.5px solid var(--line-strong);border-radius:16px 16px 16px 4px}
.lp-chat .a{align-self:flex-end;background:var(--pl-card);border:2px solid var(--pl-line);border-radius:16px 16px 4px 16px}
.lp-chat .who{display:block;font:600 10.5px/1.2 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.lp-chat .cast{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.lp-chat .cast svg{height:96px;width:auto;display:block}
/* Pricing */
.lp-pricing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(24px,5vw,72px);align-items:center}
.lp-plan-note{color:var(--text-muted);font-size:16.5px;max-width:40ch;margin-top:14px}
.lp-plan-cast svg{display:block;width:min(320px,100%);height:auto;margin-top:18px}
.lp-plan{display:flex;flex-direction:column;gap:18px;padding:clamp(22px,3vw,30px);background:var(--bg-surface);border:2px solid var(--pl-line);border-radius:24px;box-shadow:6px 6px 0 var(--pl-hard)}
.lp-plan-top{display:flex;flex-direction:column;gap:6px;padding-bottom:16px;border-bottom:1px dashed var(--line-strong)}
.lp-plan h3{font:600 15px/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.lp-plan-price{display:flex;align-items:baseline;gap:6px;color:var(--text-strong);font-variant-numeric:tabular-nums}
.lp-plan-price .amt{font:600 clamp(48px,6vw,64px)/1 var(--font-display);letter-spacing:-.03em}
.lp-plan-price .per{font:500 17px/1 var(--font-body);color:var(--text-muted)}
.lp-plan-sub{font:500 15.5px/1.4 var(--font-body);color:var(--text-body)}
.lp-plan-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.lp-plan-list li{display:flex;gap:10px;font-size:15.5px;line-height:1.45;color:var(--text-body)}
.lp-plan-list .ico{flex:none;color:var(--success);margin-top:3px}
.lp-plan-cta{align-self:stretch;justify-content:center;text-align:center}
.lp-plan-fine{font-size:13.5px;color:var(--text-muted);text-align:center}
.lp-plan-alt{margin-top:-4px;padding:12px 14px;border-radius:12px;background:var(--bg-sunken);font-size:14px;line-height:1.5;color:var(--text-body)}
.lp-plan-alt b{color:var(--text-strong);font-weight:600}

/* FAQ */
.lp-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;align-items:start}
.lp-faq details{background:var(--bg-surface);border:1.5px solid var(--line-strong);border-radius:16px;padding:0 18px}
.lp-faq details[open]{border-color:var(--pl-line);box-shadow:4px 4px 0 var(--pl-hard)}
.lp-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;font:600 16.5px/1.35 var(--font-body);color:var(--text-strong)}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent-tint);color:var(--orange);font:600 18px/1 var(--font-body);transition:transform .2s var(--ease)}
.lp-faq details[open] summary::after{transform:rotate(45deg)}
.lp-faq summary:focus-visible{outline:none;box-shadow:var(--focus);border-radius:8px}
.lp-faq details p{padding:0 0 16px;color:var(--text-body);font-size:15.5px;line-height:1.55;max-width:60ch}
.lp-end{position:relative;isolation:isolate;margin:clamp(80px,9vw,110px) var(--gut) 28px}
.lp-end .peek{position:absolute;z-index:0;right:clamp(12px,7%,80px);top:0;width:clamp(120px,16vw,170px);transform:translateY(-64%)}
.lp-end .peek svg{display:block;width:100%;height:auto}
.lp-band{position:relative;z-index:1;background:var(--orange);color:var(--on-solid);border-radius:24px;padding:clamp(26px,4vw,44px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.lp-band h2{font:600 clamp(28px,3.4vw,40px)/1.05 var(--font-display);letter-spacing:-.02em;max-width:17ch;text-wrap:balance}
.lp-band .btn-ink{background:var(--pl-line);color:var(--pl-card)}
.lp-band .btn-ink:hover{opacity:.9}
.lp-foot{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px var(--gut) 26px;color:var(--text-muted);font:500 13px/1.4 var(--font-body)}
.lp-foot nav{display:flex;gap:18px}
.lp-foot a{text-decoration:none}
.lp-foot a:hover{text-decoration:underline}

/* A · Dot: sticker cut-outs with hard ink shadows */
.lp .lp-card,.lp .lp-steps .art{border:2px solid var(--pl-line);box-shadow:5px 5px 0 var(--pl-hard)}
.lp .lp-card .art{border-bottom:2px solid var(--pl-line)}
.lp .st-a .bub:not(.b-booked){box-shadow:4px 4px 0 var(--pl-hard)}
.lp .btn-primary{border:2px solid var(--pl-line);box-shadow:3px 3px 0 var(--pl-hard)}
.lp .btn-primary:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--pl-hard)}
.lp .lp-band{border:2px solid var(--pl-line);box-shadow:6px 6px 0 var(--pl-hard)}
.lp .lp-steps .n{border:2px solid var(--pl-line)}

/* Responsive */
@media (max-width:900px){
  .lp-hero,.lp-honest,.lp-pricing{grid-template-columns:minmax(0,1fr)}
  .lp-faq{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .lp-cards,.lp-steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .lp-nav .navlink:not(.navlink-keep){display:none}
  .lp-nav nav{gap:16px}
  .lp-chat{padding:18px}
}
@media (max-width:600px){
  .st{aspect-ratio:auto;display:flex;flex-direction:column;gap:10px;max-width:440px}
  .st .st-art{position:relative;left:auto;top:auto;width:100%;align-self:center}
  .st-a .st-art{width:68%;margin-block:18px 10px}
  .st .bub{position:relative;inset:auto;max-width:none;align-self:stretch}
  .st .bub::after{display:none}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
