/* ===== Writecream v2 site: the page layer only. Every component is the dashboard's app.css; this file places them
   on long public pages, opens the stage up into a theatre, and adds the family wall, the business-type picker, the
   plain answers, the signup forms and the shared header, menu and footer, all in the dashboard's own tokens
   (paper, ink, pressed buttons, offset shadows on things that speak or are picked). */

/* Bricolage arrives from Google Fonts after first paint; a metric-matched fallback keeps the headline from
   reflowing (it used to wrap to two lines, then jump to one, shifting the whole stage). */
@font-face { font-family: "Bricolage Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 500 800; size-adjust: 92%; ascent-override: 95%; descent-override: 26%; }
:root { --display: "Bricolage Grotesque", "Bricolage Fallback", "Inter", ui-sans-serif, system-ui, sans-serif; }

.lp-page { background: var(--bg); background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 24px 24px; background-attachment: fixed; overflow-x: clip; }
/* speech bubbles slide under the header like the rest of the page (say-layer is z 95, toasts 100, dock 60) */
.lp-page .lp-top { position: sticky; z-index: 96; }
.lp-top .lp-nav { display: flex; gap: 2px; margin-left: 18px; }
.lp-top .lp-nav a { padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.lp-top .lp-nav a:hover { background: var(--bg-2); color: var(--ink); }
.lp-top .lp-nav a[aria-current="page"] { background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink-edge); padding: 6.5px 10.5px; }
.lp-signin { padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.lp-signin:hover { background: var(--bg-2); color: var(--ink); }
.lp-menu-btn { display: none; }
.lp-main { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.lp-sec { margin-top: 128px; }
.lp-sec h2.display, .lp-final h2.display { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.04; letter-spacing: -.03em; }
.lp-sec-head { max-width: 780px; margin-bottom: 26px; }
.lp-sec-head .display { margin: 8px 0 12px; }
.lp-sec-head .lede, .lp-sec .page-head .lede { font-size: clamp(16.5px, 1.4vw, 18.5px); }
.lp-center { margin-left: auto; margin-right: auto; text-align: center; }
.lp-center .eyebrow { justify-content: center; }
.lp-center .lede { margin-left: auto; margin-right: auto; }
.lp-h3 { font: 800 21px/1.2 var(--display); letter-spacing: -.01em; }
.lp-head { padding-top: 0; }
.lp-sec .page-head { margin-bottom: 18px; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.lp-center-row { justify-content: center; }
.lp-actions .btn .i { width: 18px; height: 18px; }
.lp-sec-link { margin: 18px 0 0; }
.lp-sec-link .link { font-size: 15px; }
.lp-linkbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px; border: 0; background: none; font: 600 14px var(--font); color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lp-linkbtn:hover { color: var(--accent-2); }
.lp-linkbtn .i { width: 17px; height: 17px; }
:root[data-theme="dark"] .lp-linkbtn { color: #B9C2FF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-linkbtn { color: #B9C2FF; } }

/* ---------- the signup form (a GET to the v2 onboarding) ---------- */
.lp-siteform { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.lp-siteform-field { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 16px; border-radius: 16px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink-edge); color: var(--muted); }
.lp-siteform-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.lp-siteform-field .i { width: 19px; height: 19px; flex: none; }
.lp-siteform-field input { flex: 1; min-width: 0; height: 54px; border: 0; outline: 0; background: transparent; font: 500 17px var(--font); color: var(--ink); }
.lp-siteform .btn { flex: 0 0 auto; }
.lp-siteform .btn .i { width: 20px; height: 20px; }
.lp-siteform-alt { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; font-size: 13.5px; color: var(--muted); }
.lp-siteform.is-dark .lp-siteform-field { border-color: #1D1B18; }
.lp-siteform.is-dark .lp-siteform-alt { color: #CDBFA5; }
.lp-siteform.is-dark .lp-linkbtn { color: #FFD66B; }

/* ---------- the hero: a title over the theatre ---------- */
.lp-hero { padding-top: clamp(26px, 3.8vw, 48px); }
.lp-hero-copy { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.lp-h1 { font-size: clamp(44px, 5.5vw, 80px); line-height: .98; letter-spacing: -.03em; margin: 0; }
.lp-tagline { margin: -4px 0 0; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.025em; color: var(--ink); }
.lp-hero-lede { font-size: clamp(16.5px, 1.4vw, 19px); max-width: 900px; margin: 0; }
.lp-hero-form { width: 100%; max-width: 660px; margin-top: 4px; }
.lp-hero-form .lp-siteform-alt { justify-content: center; }
.lp-hero-soft { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 18px; margin: 0; font-size: 14px; color: var(--muted); }
.lp-hero-free { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-2); }
.lp-hero-free .i { width: 17px; height: 17px; color: var(--good); }

.lp-theatre { display: block; margin-top: 28px; padding: 0 26px; border-radius: 32px; box-shadow: var(--shadow-lg); }
.lp-stage { min-height: 404px; }
.lp-stage .stage-row { max-width: 1150px; column-gap: 6px; padding-bottom: 6px; }
.lp-stage .sky-bunting { left: 4%; width: 92%; }
.lp-stage .sky-sun { top: 104px; left: 4%; width: 52px; }
.lp-stage .sky-moon { top: 104px; left: 4.5%; width: 40px; }
.lp-stage .sky-star:nth-of-type(3) { top: 150px; left: 26%; }
.lp-stage .sky-star:nth-of-type(4) { top: 196px; left: 15%; }
.lp-stage .sky-star:nth-of-type(5) { top: 136px; left: 58%; }
.lp-stage .sky-cloud.c1 { top: 132px; right: 9%; width: 104px; }
.lp-stage .sky-cloud.c2 { top: 160px; left: 38%; width: 72px; }
.lp-stage .sky-plane { top: 168px; }
.lp-stage .stage-hint { top: 108px; right: 2.5%; font-size: 13px; padding: 4px 10px; }
.lp-stage .stage-floor { height: 58px; left: -40px; right: -40px; }
.lp-stage .actor-tag { max-width: 168px; padding: 4px 12px; border-radius: 12px; bottom: -14px; }
.lp-stage .actor-tag b { font-size: 15.5px; }
.lp-stage .actor-tag span { font-size: 11.5px; }
.lp-stage .actor-don .actor-tag { max-width: 220px; }
.lp-stage .actor-don .actor-tag b { font-size: 16px; }
/* laptop screens (1280x800, 1366x768, 1440x900 minus the browser): the whole cast and every nameplate above the fold */
@media (min-width: 761px) and (max-height: 940px) {
  .lp-hero { padding-top: 20px; }
  .lp-hero-copy { gap: 10px; }
  .lp-theatre { margin-top: 18px; }
  .lp-stage { min-height: 352px; }
  .lp-stage .sky-sun, .lp-stage .sky-moon { top: 78px; }
  .lp-stage .stage-hint { top: 84px; }
  .lp-stage .sky-cloud.c1 { top: 96px; }
  .lp-stage .sky-cloud.c2 { top: 128px; }
}
@media (min-width: 761px) and (max-height: 800px) {
  .lp-h1 { font-size: clamp(42px, 5vw, 70px); }
  .lp-tagline { font-size: clamp(20px, 2vw, 28px); }
  .lp-hero-lede { display: none; }
}
.lp-upnext { margin-top: 18px; }
.lp-upnext .upnext-head { flex-wrap: wrap; }
.lp-upnext .upnext-head .sample-pill { margin-left: auto; }
.lp-upnext .upnext-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ---------- the family tree on a public page ---------- */
#family .family { margin-top: 74px; }
#family .family-title { display: none; }
#family .family-heads { margin-top: 56px; }
.lp-page .family-head.is-soon { opacity: 1; }
.lp-page .family-head.is-soon .fh-av { opacity: .72; }
:root[data-theme="dark"] .lp-page .fh-av { background: color-mix(in srgb, var(--c) 38%, #FFFFFF); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-page .fh-av { background: color-mix(in srgb, var(--c) 38%, #FFFFFF); } }

/* ---------- the family, walking past ---------- */
.lp-wall { margin-top: 128px; display: flex; flex-direction: column; gap: 12px; }
.lp-wall-cap { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 6px; text-align: center; font: 700 15px var(--font); color: var(--ink); }
.lp-wall-cap .i { width: 18px; height: 18px; color: var(--accent); }
.lp-wall-cap span { color: var(--muted); font-weight: 500; }
@media (hover: none) { .lp-hover-only, .lp-kb-only { display: none; } }
@media (hover: hover) { .lp-touch-only { display: none; } }
.lp-wall-row { position: relative; overflow: hidden; margin: 0 -28px; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.lp-wall-track { display: flex; gap: 12px; width: max-content; padding: 0 6px; }
.lp-face { position: relative; display: inline-flex; align-items: center; gap: 10px; flex: none; padding: 5px 16px 5px 5px; border-radius: 99px; background: var(--card); border: 1.5px solid var(--line-2); box-shadow: 0 2px 0 var(--line-2); transition: transform .25s var(--spring), border-color .2s, box-shadow .2s; }
.lp-face:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink-edge); }
.lp-face-av { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--soft); border: 2px solid var(--av-line); overflow: hidden; cursor: pointer; }
.lp-face-av .av { width: 100%; height: 100%; display: block; }
.lp-face-name { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; color: var(--ink); }
.lp-face-name b { font: 800 14.5px var(--display); }
.lp-face-name small { font-size: 12px; color: var(--muted); font-weight: 600; }
.lp-face-name:hover b { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .lp-wall-track { animation: lpWall var(--dur, 110s) linear infinite; }
  .lp-wall-row.is-rev .lp-wall-track { animation-direction: reverse; --dur: 130s; }
  .lp-wall-row:hover .lp-wall-track, .lp-wall-row.is-held .lp-wall-track { animation-play-state: paused; }
}
:root.calm .lp-wall-track { animation: none; }
@media (prefers-reduced-motion: reduce) { .lp-wall-row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .lp-wall-track > .is-clone { display: none; } }
:root.calm .lp-wall-row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
:root.calm .lp-wall-track > .is-clone { display: none; }
@keyframes lpWall { to { transform: translateX(-50%); } }

/* ---------- one of them, up close ---------- */
.lp-spot { grid-template-columns: 260px minmax(0, 1fr); margin-top: 48px; }
.lp-spot .ah-blob { width: 240px; height: 240px; }
.lp-spot .ah-av { width: 246px; }
.lp-spot .chip { min-height: 40px; }
.lp-try { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.lp-who { margin-top: 6px; }
.lp-who .chip { display: inline-flex; align-items: center; gap: 6px; padding-left: 4px; }
.lp-who-av { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: var(--soft); border: 1.5px solid var(--av-line); flex: none; }
.lp-spot-card { margin-top: 6px; }

/* ---------- built for your kind of business ---------- */
.lp-for { padding: 26px; border-radius: 28px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.lp-for-chips { justify-content: flex-start; }
.lp-for-chips .type-chip { height: 44px; }
.lp-for-chips .type-chip.is-on { border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink-edge); }
.lp-for-panel { margin-top: 22px; }
.lp-for-faces { display: flex; flex-wrap: wrap; gap: 14px 10px; }
.lp-for-face { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 74px; cursor: pointer; }
.lp-for-face .av { width: 62px; height: 62px; border-radius: 50%; background: var(--soft); border: 2px solid var(--av-line); display: block; }
.lp-for-face small { font: 700 12.5px var(--display); color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { .lp-for-panel:not([hidden]) .lp-for-face { animation: lpPop .45s var(--spring) backwards; animation-delay: calc(var(--j) * 45ms); } }
@keyframes lpPop { from { transform: translateY(10px) scale(.85); opacity: 0; } }
.lp-for-line { margin: 18px 0 0; font: 700 clamp(18px, 1.6vw, 21px)/1.35 var(--display); max-width: 760px; }

/* ---------- crew at work, needs, receipts, briefing ---------- */
.lp-allclear { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; }
.lp-allclear .i { width: 18px; color: var(--good); }
.lp-brief { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
.lp-brief .bh-don-av { width: 96px; }
.lp-brief .bh-headline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.week-chip .i { width: 16px; }
.lp-star-name { font: 800 20px/1.1 var(--display); margin: 0; }
#needs .need-item:first-of-type { margin-top: 30px; }
.lp-page .ni-meta .sample-pill { margin-left: 6px; vertical-align: middle; height: 26px; font-size: 12px; }
.lp-page .ni-title { font: 800 21px/1.25 var(--display); margin: 4px 0 10px; }
button.act-receipt { font-family: inherit; cursor: pointer; }
.act-receipt.is-none { color: var(--muted); }
/* agent rows inside the Don's cream bubble sit on a theme card, so they take the theme ink */
.msg-don .dp-agent { color: var(--ink); }

/* ---------- the first minute ---------- */
.lp-start .lp-sec-head { margin-bottom: 8px; }
.lp-start .lp-onb { padding: 30px 24px 38px; border-radius: 32px; scroll-margin-top: 72px; background: radial-gradient(90% 80% at 50% 0%, #FFF6DA, transparent 70%), var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.lp-start .onb-don { margin-top: 70px; }
:root[data-theme="dark"] .lp-start .lp-onb { background: radial-gradient(90% 80% at 50% 0%, #2B2614, transparent 70%), var(--card); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-start .lp-onb { background: radial-gradient(90% 80% at 50% 0%, #2B2614, transparent 70%), var(--card); } }
.lp-onb-skip { margin: 10px 0 0; text-align: center; }
.lp-onb-free { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-weight: 600; color: var(--ink-2); font-size: 14px; }
.lp-onb-free .i { width: 17px; height: 17px; color: var(--good); }

/* ---------- what it costs ---------- */
.lp-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-facts li { display: grid; gap: 4px; padding: 20px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.lp-facts .i { width: 24px; height: 24px; color: var(--accent); margin-bottom: 6px; }
.lp-facts b { font: 800 17px/1.25 var(--display); }
.lp-facts span { font-size: 14.5px; color: var(--ink-2); }

/* ---------- plain answers: no character speaks here (plan/45 5.6, "Plain") ---------- */
.lp-faq-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 28px; align-items: start; }
.lp-not { list-style: none; margin: 0; padding: 22px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: grid; gap: 16px; }
.lp-not li { display: grid; gap: 3px; padding-left: 30px; position: relative; }
.lp-not li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--hl); }
.lp-not b { font: 800 16.5px/1.25 var(--display); }
.lp-not span { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.lp-faq { display: grid; gap: 10px; }
.lp-q { border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: border-color .2s; }
.lp-q[open] { border-color: var(--line-2); }
.lp-q summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 14px 18px; cursor: pointer; font: 700 16.5px/1.3 var(--display); }
.lp-q summary::-webkit-details-marker { display: none; }
.lp-q summary .i { width: 20px; height: 20px; flex: none; color: var(--muted); transition: transform .3s var(--spring); }
.lp-q[open] summary .i { transform: rotate(45deg); }
.lp-q p { margin: 0; padding: 0 18px 18px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.lp-q .link { font-size: inherit; }

/* ---------- keep reading ---------- */
.lp-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 96px; }
.lp-more-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink); transition: transform .25s var(--spring), border-color .2s, box-shadow .2s; }
.lp-more-card:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink-edge); }
.lp-more-av { width: 56px; height: 56px; flex: none; border-radius: 50%; overflow: hidden; background: var(--soft); border: 2px solid var(--av-line); display: grid; place-items: center; }
.lp-more-av .av { width: 100%; height: 100%; }
.lp-more-av .i { width: 26px; height: 26px; color: #B3262E; }
.lp-more-text { flex: 1; display: grid; gap: 2px; }
.lp-more-text small { font: 600 12px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lp-more-text b { font: 800 19px/1.2 var(--display); }
.lp-more-text span { font-size: 14px; color: var(--ink-2); }
.lp-more-card > .i { width: 22px; height: 22px; color: var(--muted); }

/* ---------- the seat at the table: the closing band, hosted by the Don with part of the family ---------- */
.lp-final { --plate: #2A2833; --cream: #F6E4C4; margin-top: 64px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 12px 40px; padding: 44px 44px 0; border-radius: 32px; background: radial-gradient(70% 90% at 0% 100%, rgba(179, 38, 46, .35), transparent 70%), radial-gradient(60% 80% at 100% 0%, rgba(255, 214, 107, .14), transparent 70%), var(--plate); color: var(--cream); border: 1.5px solid #1D1B18; box-shadow: 6px 6px 0 #1D1B18; }
:root[data-theme="dark"] .lp-final { border-color: #F6E4C4; box-shadow: 6px 6px 0 #0A0908; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-final { border-color: #F6E4C4; box-shadow: 6px 6px 0 #0A0908; } }
.lp-final::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(246, 228, 196, .09) 1px, transparent 1.2px); background-size: 24px 24px; pointer-events: none; }
.lp-final > * { position: relative; }
.lp-final-art { align-self: end; width: 100%; max-width: 560px; justify-self: center; position: relative; }
.lp-final-row { max-width: none; padding: 0; column-gap: 2px; }
.lp-final .actor-av::before { border-color: #1D1B18; }
.lp-final .actor:nth-child(even) { margin-bottom: 0; }
.lp-final-art::after { content: ""; position: absolute; left: -60px; right: -60px; bottom: 0; height: 22px; background: #1F1D24; border-top: 2px solid rgba(246, 228, 196, .28); z-index: 3; }
.lp-final-copy { padding-bottom: 44px; }
.lp-final .eyebrow { color: #FFD66B; }
.lp-final h2.display { color: #FFF8EA; margin: 8px 0 12px; }
.lp-final .lede { color: #E9DCC4; font-size: clamp(16.5px, 1.4vw, 18.5px); }
.lp-final .lp-siteform { margin-top: 22px; }
.lp-final-notes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: #E9DCC4; }
.lp-final-notes li { display: flex; align-items: center; gap: 8px; }
.lp-final-notes .i { width: 17px; height: 17px; color: #9BE3B5; flex: none; }
.lp-final-notes a { color: #FFD66B; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the menu sheet ---------- */
.lp-menu { position: fixed; z-index: 97; top: 66px; right: 12px; left: 12px; max-width: 420px; margin-left: auto; padding: 14px; border-radius: 22px; background: var(--card); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink-edge); display: grid; gap: 10px; }
.lp-menu[hidden] { display: none; }
.lp-menu nav { display: grid; }
.lp-menu nav a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 12px; border-radius: 12px; font: 800 18px var(--display); color: var(--ink); }
.lp-menu nav a:hover { background: var(--bg-2); }
.lp-menu nav a .i { width: 18px; height: 18px; color: var(--muted); }
.lp-menu-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 0; border-top: 1px dashed var(--line-2); }
.lp-menu-cta { justify-content: center; width: 100%; }

/* ---------- the footer ---------- */
.lp-foot { max-width: 1184px; width: calc(100% - 56px); margin: 64px auto 0; padding: 34px 0 56px; border-top: 1px dashed var(--line-2); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 28px 48px; color: var(--muted); font-size: 13.5px; }
.lp-foot .don-sign { border-top: 0; padding-top: 0; margin-top: 0; }
.lp-foot-note { margin: 14px 0 0; }
.lp-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lp-foot-col { display: grid; align-content: start; gap: 2px; }
.lp-foot-col h2 { font: 800 14px var(--display); color: var(--ink); margin: 0 0 6px; }
.lp-foot-col a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-2); font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.lp-foot-col a:hover { color: var(--accent); }

/* ---------- the Don's dock ---------- */
.don-dock.lp-away { opacity: 0; pointer-events: none; transform: translateY(130%); visibility: hidden; transition: opacity .2s, transform .3s var(--ease), visibility 0s linear .3s; }
.dp-join { margin: 0 14px 14px; justify-content: center; }
.lp-page .dp-chips button { min-height: 44px; padding: 0 14px; }
a.dp-agent { color: inherit; }

/* ---------- keeping a long page light ---------- */
.lp-offstage, .lp-offstage * { animation-play-state: paused !important; }
.lp-page svg.av:is(.av-sm, .av-xs) * { animation: none !important; }

@media (max-width: 1100px) {
  .moves { grid-template-columns: minmax(0, 1fr); }
  .lp-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-top .lp-nav, .lp-top .lp-signin, .lp-top .lp-theme-btn { display: none; }
  .lp-menu-btn { display: inline-grid; }
}
@media (max-width: 900px) {
  .lp-final { grid-template-columns: minmax(0, 1fr); padding: 34px 22px 0; text-align: center; }
  .lp-final .eyebrow { justify-content: center; }
  .lp-final .lede { margin-left: auto; margin-right: auto; }
  .lp-final-art { order: 2; max-width: 420px; }
  .lp-final-copy { padding-bottom: 0; }
  .lp-final-notes { justify-items: center; }
  .lp-facts { grid-template-columns: minmax(0, 1fr); }
  .lp-more { grid-template-columns: minmax(0, 1fr); }
  .lp-foot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .lp-main { padding: 0 16px; }
  .lp-sec { margin-top: 88px; }
  .lp-wall { margin-top: 88px; }
  /* the first screen on a phone shows the family, not a wall of text: title, tagline, stage, then the rest */
  .lp-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .lp-hero-copy { display: contents; }
  .lp-h1 { order: 1; }
  .lp-tagline { order: 2; }
  .lp-theatre { order: 3; align-self: stretch; margin-top: 0; padding: 0 14px; border-radius: 24px; }
  .lp-hero-lede { order: 4; }
  .lp-hero-form { order: 5; }
  .lp-hero-soft { order: 6; }
  .lp-stage { min-height: 0; }
  .lp-stage .stage-row { padding-top: 84px; padding-bottom: 18px; }
  .lp-stage .actor-tag { padding: 2px 9px; bottom: -12px; }
  .lp-stage .actor-tag b { font-size: 13px; }
  .lp-stage .actor-don .actor-tag { bottom: -30px; padding: 2px 9px; }
  .lp-stage .actor-don .actor-tag b { font-size: 13px; }
  .lp-stage .stage-floor { height: 60px; }
  .lp-siteform .btn { flex: 1 1 100%; justify-content: center; }
  .lp-wall-row { margin: 0 -16px; }
  .lp-face-av { width: 40px; height: 40px; }
  .lp-upnext .upnext-list { grid-template-columns: minmax(0, 1fr); }
  .lp-upnext .upnext-head .sample-pill { margin-left: 0; }
  .lp-spot { grid-template-columns: minmax(0, 1fr); text-align: center; margin-top: 84px; }
  .lp-spot .ah-copy { align-items: center; }
  .lp-spot .chips { justify-content: center; }
  .lp-spot .ah-blob { width: 196px; height: 196px; }
  .lp-spot .ah-av { width: 200px; }
  .lp-spot .chip { min-height: 44px; }
  .lp-for { padding: 18px 14px; border-radius: 22px; }
  .lp-for-face { width: 64px; }
  .lp-for-face .av { width: 54px; height: 54px; }
  .bh-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the dashboard hides these on phones because its tab bar carries them; a public page has no tab bar */
  .lp-page .don-dock { display: flex; }
  .lp-page #needs .needs-don { display: block; width: 112px; margin: 76px auto 0; }
  .lp-page .don-fab { height: 52px; }
  .lp-page .don-fab-av { width: 44px; height: 44px; }
  /* the crew cards become a swipe row, and each one's off-duty quirk shows (the hover peek has no hover here) */
  #crew .crew-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 4px 16px 14px; scrollbar-width: none; }
  #crew .crew-grid > * { flex: 0 0 84%; scroll-snap-align: center; }
  .lp-page .ac-peek { display: block; position: static; margin: 6px 0 0; padding: 0; background: none; color: var(--muted); font: italic 500 13.5px/1.4 var(--font); opacity: 1; transform: none; }
  .lp-page .ac-peek b { display: inline; text-transform: none; letter-spacing: 0; opacity: 1; font: inherit; font-style: normal; font-weight: 700; }
  .lp-page .ac-peek b::after { content: ' · '; }
  .lp-page .week-strip { flex-direction: column; align-items: stretch; overflow: visible; -webkit-mask-image: none; mask-image: none; gap: 8px; }
  .lp-page .week-chip { white-space: normal; border-radius: 16px; align-items: flex-start; }
  .lp-start .lp-onb { padding: 24px 14px 30px; border-radius: 24px; }
  .lp-start .scan-stage { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .lp-start .scan-actor small { display: none; }
  .lp-start .party-av { width: 60px; height: 60px; }
  .lp-final { border-radius: 24px; box-shadow: 4px 4px 0 #1D1B18; }
  .lp-final-art { max-width: 320px; }
  .lp-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-foot { width: calc(100% - 32px); }
  /* phone tap targets: footer links, the no-website switch and the closing band sign-in */
  .lp-foot-col a, .lp-siteform .lp-linkbtn, .lp-final-notes a { min-height: 44px; display: inline-flex; align-items: center; }
  .lp-top .top-start { padding: 0 14px; }
  .lp-top .top-start span { display: inline; }
}
@media (max-width: 400px) {
  .lp-foot-col:last-child { grid-column: 1 / -1; }
  .lp-top .brand-tag { display: none; }
  .lp-top .top-start .i { display: none; }
}

/* the crew grid sits in the dashboard's home grid; on a phone its swipe row must not widen the page */
.lp-page .home-grid, .lp-page .home-main { min-width: 0; }
@media (max-width: 760px) { .lp-page .home-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- closing band: the Don's last word fills the art side, and the floor runs the full width */
.lp-final-quote { margin: 0; padding: 6px 0 34px; max-width: 15ch; font: 800 clamp(26px, 2.6vw, 38px)/1.12 var(--display); letter-spacing: -.02em; color: #FFF8EA; }
.lp-final-quote small { display: block; margin-top: 12px; font: 650 14px var(--font); color: #FFD66B; letter-spacing: 0; }
.lp-final-art::after { left: -2000px; right: -2000px; }
@media (max-width: 900px) {
  .lp-final-quote { display: none; }
  .lp-final-notes li { max-width: 36ch; text-align: left; }
}

/* ---------- touch screens: Ask the Don stays a small round button that never covers a sentence */
@media (hover: none) {
  .lp-page .don-fab-label { display: none; }
  .lp-page .don-fab { padding-right: 4px; }
}
@media (max-width: 760px) {
  .lp-page .don-dock { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .lp-page .don-fab { height: 48px; }
  .lp-page .don-fab-av { width: 40px; height: 40px; }
  /* thumb-sized targets in the header */
  .lp-top .top-start { min-height: 44px; }
  .lp-top .lp-menu-btn { min-width: 44px; min-height: 44px; }
}

/* ---------- tablets: nametags show the nickname only, and the header button keeps its words */
@media (min-width: 761px) and (max-width: 1100px) {
  .lp-stage .actor-tag span { display: none; }
  .lp-top .top-start span { display: inline; }
  .lp-top .top-start { padding: 0 14px; }
  .lp-page #needs .needs-don { margin-top: 90px; }
}

/* a highlighted word in the dark closing band keeps dark ink on the yellow */
.lp-final .hl { color: #1D1B18; }

/* ================= round 3 audit, shared by every page ================= */
/* the pre-headline chip and the offer line inside the H1 (LP-04) */
.lp-chip { display: inline-flex; align-items: center; gap: 7px; margin: 0; min-height: 32px; padding: 0 13px; border-radius: 99px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink-edge); font: 700 13.5px var(--font); color: var(--ink); }
.lp-chip .i { width: 15px; height: 15px; color: var(--accent); }
.lp-h1-offer { display: block; margin-top: .14em; font-size: .6em; letter-spacing: -.025em; }
/* "Free on one website. No card." under the button, at 16px (LP-05) */
.lp-hero-micro { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.lp-hero-micro .i { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--good); }
.lp-hero-micro b { color: var(--ink); }
/* the honest badges, high on the page (LP-38) */
.lp-hero-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.lp-hero-badges li { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line-2); font: 600 13.5px var(--font); color: var(--ink-2); }
.lp-hero-badges li .i { width: 15px; height: 15px; color: var(--good); }
.lp-hero-badges li.lp-hero-party { background: none; border: 0; padding: 0; }
/* footer column titles are labels now, not headings (LP-14) */
.lp-foot-h { font: 800 14px var(--display); color: var(--ink); margin: 0 0 6px; }

/* the sticky "Start free" bar on phones (LP-21); the Don's button moves up above it */
.lp-sticky { display: none; }
@media (max-width: 760px) {
  .lp-sticky:not([hidden]) { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1.5px solid var(--ink); box-shadow: 0 -6px 20px rgba(29, 27, 24, .12); }
  .lp-sticky .btn { flex: none; min-height: 48px; }
  .lp-sticky span { font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--ink-2); }
  .lp-page.has-sticky .don-dock { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .lp-page.has-sticky .lp-foot { padding-bottom: 96px; }
  .menu-open .lp-sticky, .don-open .lp-sticky { display: none !important; }
  /* tap targets of at least 44 px (LP-14) */
  .lp-linkbtn, .lp-signin, .lp-menu nav a, .lp-q summary, .lp-top .brand, .skip { min-height: 44px; }
  .lp-top .brand, .skip { display: inline-flex; align-items: center; }
  .lp-linkbtn { display: inline-flex; align-items: center; }
}

/* ================= the sign-up popup (components/join-modal.cjs): a cream sticker card with the Don under the bunting.
   A centred card on wider screens, a sheet from the bottom on phones. */
.jm { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.jm[hidden] { display: none; }
.jm-backdrop { position: absolute; inset: 0; background: rgba(29, 27, 24, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.jm-card { position: relative; width: min(480px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto; overscroll-behavior: contain; border-radius: 28px; background: var(--card); color: var(--ink); border: 1.5px solid #1D1B18; box-shadow: 6px 6px 0 #1D1B18; outline: 0; }
.jm-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid #1D1B18; background: #FFF8EA; color: #1D1B18; cursor: pointer; box-shadow: 2px 2px 0 #1D1B18; }
.jm-x .i { width: 18px; height: 18px; }
.jm-x:hover { transform: translateY(-1px); }
.jm-art { position: relative; height: 168px; overflow: hidden; border-bottom: 1.5px solid #1D1B18; background: radial-gradient(60% 90% at 50% 100%, #FFE9B8, transparent 70%), linear-gradient(180deg, #FFF6DC, #FDEBD3); }
.jm-bunting { position: absolute; left: -10px; right: -10px; top: -6px; opacity: .95; }
.jm-bunting svg { width: 100%; height: auto; display: block; }
.jm-cast { position: absolute; left: 0; right: 0; bottom: -2px; display: flex; justify-content: center; align-items: flex-end; gap: 2px; }
.jm-don { width: 132px; display: block; margin: 0 -4px; position: relative; z-index: 2; }
.jm-don .av, .jm-peek .av { width: 100%; height: auto; display: block; }
.jm-peek { width: 62px; display: block; margin-bottom: -6px; }
.jm-peek.is-l, .jm-peek.is-r { width: 54px; margin-bottom: -10px; }
.jm-bubble { position: absolute; top: 40px; left: calc(50% + 58px); max-width: 150px; margin: 0; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #fff; border: 1.5px solid #1D1B18; box-shadow: 2px 2px 0 #1D1B18; font: 700 13px/1.3 var(--display); color: #1D1B18; }
.jm-body { padding: 22px 26px 24px; }
.jm-eyebrow { margin: 0 0 6px; font: 800 11.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.jm-title { margin: 0; font: 800 30px/1.08 var(--display); letter-spacing: -.02em; }
.jm-sub { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.jm-form { display: grid; gap: 14px; margin-top: 18px; }
.jm-field { display: grid; gap: 6px; }
.jm-label { font: 700 13px var(--font); color: var(--ink); }
.jm-label i { font-style: normal; font-weight: 500; color: var(--muted); }
.jm-input { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink-edge, rgba(29,27,24,.35)); color: var(--muted); }
.jm-input:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.jm-input .i { width: 18px; height: 18px; flex: none; }
.jm-input input { flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; font: 500 16px var(--font); color: var(--ink); }
.jm-field.is-bad .jm-input { border-color: #D9480F; }
.jm-types { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.jm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jm-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink-2); font: 600 13px var(--font); cursor: pointer; }
.jm-chip .i { width: 15px; height: 15px; }
.jm-chip:hover { border-color: var(--ink); color: var(--ink); }
.jm-chip[aria-pressed="true"] { background: #1D1B18; border-color: #1D1B18; color: #fff; }
.jm-error { margin: 0; padding: 10px 12px; border-radius: 12px; background: #FFF1EA; border: 1px solid #F3B9A0; color: #9A3412; font-size: 14px; }
.jm-go { width: 100%; justify-content: center; }
.jm-go[aria-busy="true"] { opacity: .75; pointer-events: none; }
.jm-fine { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); }
.jm-fine li { display: flex; align-items: center; gap: 8px; }
.jm-fine .i { width: 16px; height: 16px; color: #15803D; flex: none; }
.jm-alt { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: 13.5px; color: var(--muted); text-align: center; }
.jm-alt a { color: var(--accent); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.jm-sent .jm-back { margin-top: 18px; }
html.jm-open, html.jm-open body { overflow: hidden; }
:root[data-theme="dark"] .jm-card { border-color: var(--line-2); box-shadow: 6px 6px 0 #000; }
:root[data-theme="dark"] .jm-art { border-bottom-color: var(--line-2); background: radial-gradient(60% 90% at 50% 100%, #3A2F18, transparent 70%), linear-gradient(180deg, #1C1A2A, #241F1A); }
:root[data-theme="dark"] .jm-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
:root[data-theme="dark"] .jm-error { background: #3A1E14; border-color: #7C2D12; color: #FDBA9A; }
@media (prefers-reduced-motion: no-preference) {
  .jm:not([hidden]) .jm-backdrop { animation: jmFade .22s ease-out both; }
  .jm:not([hidden]) .jm-card { animation: jmRise .32s cubic-bezier(.2, .9, .3, 1.2) both; }
  .jm:not([hidden]) .jm-don { animation: jmPop .5s .12s cubic-bezier(.2, .9, .3, 1.3) both; }
  .jm:not([hidden]) .jm-peek { animation: jmPop .45s cubic-bezier(.2, .9, .3, 1.3) both; }
  .jm:not([hidden]) .jm-peek.is-l2, .jm:not([hidden]) .jm-peek.is-r2 { animation-delay: .2s; }
  .jm:not([hidden]) .jm-peek.is-l, .jm:not([hidden]) .jm-peek.is-r { animation-delay: .28s; }
  .jm:not([hidden]) .jm-bubble { animation: jmFade .3s .45s ease-out both; }
}
@keyframes jmFade { from { opacity: 0; } }
@keyframes jmRise { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes jmPop { from { opacity: 0; transform: translateY(26px); } }
@media (max-width: 560px) {
  .jm { padding: 0; place-items: end stretch; }
  .jm-card { width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: 26px 26px 0 0; border-bottom: 0; box-shadow: 0 -6px 0 rgba(29, 27, 24, .25); padding-bottom: env(safe-area-inset-bottom); }
  .jm-art { height: 142px; }
  .jm-don { width: 112px; }
  .jm-peek { width: 52px; }
  .jm-peek.is-l, .jm-peek.is-r { display: none; }
  .jm-bubble { left: auto; right: 14px; top: 44px; max-width: 120px; font-size: 12.5px; }
  .jm-body { padding: 18px 18px 22px; }
  .jm-title { font-size: 27px; }
  @media (prefers-reduced-motion: no-preference) { .jm:not([hidden]) .jm-card { animation: jmSheet .34s cubic-bezier(.2, .9, .3, 1) both; } }
}
@keyframes jmSheet { from { transform: translateY(100%); } }
/* while the popup is open the page behind is quiet: no speech bubble floats over the card */
html.jm-open .say-layer, html.jm-open .say { display: none !important; }
.jm { z-index: 1000; }

/* phones: while the bottom bar offers Start free, the header does not offer it twice */
@media (max-width: 760px) { .lp-page.has-sticky .lp-top .top-start { visibility: hidden; } }
.jm-noweb { margin: -6px 0 0; }
.jm-noweb .lp-linkbtn { font-size: 13.5px; padding: 4px 0; min-height: 0; }
.lp-wall-track { min-height: 58px; }

/* ===== plan cards (components/plan-cards.cjs): Growth looks good, Pro looks better ===== */
.pc-cards { list-style: none; margin: 26px auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 920px; align-items: stretch; }
.pc-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 24px; border-radius: 26px; background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); }
.pc-card.is-pro { border: 2px solid var(--ink); background: linear-gradient(180deg, var(--accent-soft), var(--card) 46%); box-shadow: 6px 6px 0 var(--ink-edge, var(--ink)); }
.pc-ribbon { position: absolute; top: -14px; right: 20px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: #fff; border: 1.5px solid var(--ink); font: 800 13px var(--display); letter-spacing: .02em; box-shadow: 0 3px 0 var(--ink); }
.pc-ribbon .i { width: 15px; height: 15px; }
.pc-top { display: grid; gap: 6px; }
.pc-tag { margin: 0; display: inline-flex; align-items: center; gap: 6px; font: 800 12px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pc-tag .i { width: 15px; height: 15px; color: var(--accent); }
.pc-card.is-pro .pc-tag { color: var(--accent); }
.pc-name { margin: 0; font: 800 26px/1.1 var(--display); letter-spacing: -.01em; }
.pc-price { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.pc-price b { font: 800 48px/1 var(--display); letter-spacing: -.03em; }
.pc-price small { font-size: 15px; color: var(--ink-2); }
.pc-line { margin: 2px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.pc-crew { display: flex; margin-top: 6px; }
.pc-face { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--soft); border: 1.5px solid var(--ink); margin-left: -8px; overflow: hidden; }
.pc-face:first-child { margin-left: 0; }
.pc-face .av, .pc-face svg { width: 100%; height: 100%; }
.pc-stats { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc-stats div { padding: 12px 14px; border-radius: 16px; background: var(--bg-2, var(--bg)); border: 1.5px solid var(--line); }
.pc-card.is-pro .pc-stats div { background: var(--card); border-color: var(--ink); }
.pc-stats dt { font-size: 12.5px; color: var(--ink-2); }
.pc-stats dd { margin: 2px 0 0; font: 800 21px/1.15 var(--display); }
.pc-feats-h { margin: 4px 0 -4px; font: 800 14px var(--display); }
.pc-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; flex: 1; }
.pc-feats li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: 15px; line-height: 1.45; }
.pc-feats .i { width: 18px; height: 18px; margin-top: 2px; color: var(--good, #1f9d55); }
.pc-card.is-pro .pc-feats .i { color: var(--accent); }
.pc-go { width: 100%; justify-content: center; margin-top: 6px; }
.pc-note { max-width: 920px; margin: 14px auto 0; font-size: 13px; color: var(--ink-2); text-align: center; }
.pc-table-wrap { max-width: 920px; margin: 30px auto 0; border-radius: 22px; border: 1.5px solid var(--line); background: var(--card); overflow-x: auto; }
.pc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pc-table caption { text-align: left; padding: 18px 20px 6px; font: 800 18px var(--display); }
.pc-table th, .pc-table td { padding: 13px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.pc-table thead th { border-top: 0; font: 800 17px var(--display); }
.pc-table thead th small { display: block; font: 600 13px var(--font, inherit); color: var(--ink-2); }
.pc-table tbody th { font-weight: 600; color: var(--ink-2); width: 34%; }
.pc-table td { font-weight: 700; width: 33%; }
.pc-table .is-pro { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.pc-table thead .is-pro { color: var(--accent); }
.pc-yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--good-soft, #dcf5e6); color: var(--good, #1f9d55); }
.pc-yes .i { width: 15px; height: 15px; }
@media (max-width: 760px) {
  .pc-cards { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pc-card { padding: 22px 18px 20px; }
  .pc-price b { font-size: 42px; }
  .pc-table { font-size: 14px; }
  .pc-table th, .pc-table td { padding: 11px 12px; }
  .pc-table caption { padding: 16px 12px 4px; }
}



.lp-paper { min-height: 100vh; background: var(--bg); background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 24px 24px; padding: 40px 16px 80px; }
.lp-wrap { max-width: 1180px; margin: 0 auto; }

.lp-say-anchor { position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); z-index: 40; pointer-events: none; width: max-content; }
.lp-say-anchor.is-left { left: 0; transform: none; }
.lp-say-anchor.is-right { left: auto; right: 0; transform: none; }
.lp-say-anchor .say { position: relative; }
.lp-say-anchor.is-left .say { --ax: 22%; }
.lp-say-anchor.is-right .say { --ax: 78%; }

/* .needs-don sits in .head-actions with a bubble above him; give the bubble room on a landing */
.lp-wrap .page-head { padding-top: 70px; }
.needs-don .lp-say-anchor { bottom: calc(100% - 18px); }



.lp-paper { min-height: 100vh; background: var(--bg); background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 24px 24px; padding: 40px 16px 80px; }
.lp-wrap { max-width: 1180px; margin: 0 auto; }

.lp-say-anchor { position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); z-index: 40; pointer-events: none; width: max-content; }
.lp-say-anchor.is-left { left: 0; transform: none; }
.lp-say-anchor.is-right { left: auto; right: 0; transform: none; }
.lp-say-anchor .say { position: relative; }
.lp-say-anchor.is-left .say { --ax: 22%; }
.lp-say-anchor.is-right .say { --ax: 78%; }
.lp-wrap .page-head { padding-bottom: 60px; } .family-don .lp-say-anchor { bottom: calc(100% - 6px); }