:root {
  --ground: #ffffff;
  --panel: #f3f5f7;
  --surface: #ffffff;
  --ink: #444444;
  --muted: #888888;
  --line: #e4e7e9;
  --accent: #f2af31;
  --accent-soft: #fff4d7;
  --bear-blue: #456aa3;
  --bear-purple: #884aa8;
  --bear-green: #2b6451;
  --bear-red: #dd4c4f;
  --bear-yellow: #fcb827;
  --shadow: 0 22px 60px rgba(32, 39, 47, .13), 0 3px 12px rgba(32, 39, 47, .06);
  --sans: 'IBM Plex Sans Thai', system-ui, sans-serif;
  --display: 'Anuphan', 'IBM Plex Sans Thai', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --ground: #111313; --panel: #1b1f20; --surface: #171a1a; --ink: #e8e5df; --muted: #aaa9a4; --line: #303535; --accent: #ffd16a; --accent-soft: #3a2b0a; --shadow: 0 24px 65px rgba(0,0,0,.45); }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-width: 0; margin: 0; overflow-x: clip; background: var(--ground); color: var(--ink); font: 16px/1.72 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.wrap { width: min(100%, 72rem); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.narrow { width: min(100%, 38rem); }
.eyebrow { margin: 0 0 .8rem; color: var(--muted); font-size: .69rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--display); font-weight: 400; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5.1vw, 4rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }
.site-head { position: relative; z-index: 2; padding: 1.45rem 0; }
.nav-wrap, .site-head nav, footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .48rem; color: var(--ink); font-family: var(--display); font-weight: 600; letter-spacing: -.02em; text-decoration: none; }
.brand svg { flex: none; }.brand span { color: var(--muted); font-weight: 400; }
.site-head nav { gap: clamp(1rem, 3vw, 2rem); }.site-head nav a { color: var(--muted); font-size: .88rem; text-decoration: none; }.site-head nav a:hover { color: var(--ink); }
.small-cta { border: 1px solid var(--line); border-radius: 99px; padding: .38rem .8rem; }
.hero { min-height: min(57rem, calc(100svh - 4.75rem)); padding: clamp(4rem, 10vh, 8rem) 0 0; text-align: center; overflow: hidden; }
.hero-copy { position: relative; z-index: 1; }.hero-copy h1 { margin: 0 auto; max-width: 16em; }.sketch { position: relative; white-space: nowrap; }.nowrap { white-space: nowrap; }.sketch::after { position: absolute; right: -.1em; bottom: -.17em; left: -.12em; height: .34em; border-top: 3px solid var(--accent); border-radius: 50%; content: ''; transform: rotate(-2deg); }
.lede { max-width: 36rem; margin: 1.7rem auto 0; color: var(--muted); }.hero-note { margin-top: .85rem; color: var(--ink); font-size: .9rem; }
.hero-soon { max-width: 36rem; margin: .9rem auto 0; color: var(--ink); font-size: .95rem; }
.hero-soon--cta { margin-top: 1.15rem; }
.hero-soon--cta a { font-weight: 600; text-underline-offset: .18em; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.6rem; }
.cta-row .button { text-align: center; }
.hero-document { position: relative; width: min(92vw, 57rem); margin: clamp(3.8rem, 8vh, 6.5rem) auto -3.5rem; }
.doc { position: relative; z-index: 1; min-height: 20rem; border: 1px solid var(--line); border-radius: 5px 5px 0 0; background: var(--surface); box-shadow: var(--shadow); padding: clamp(2rem, 5vw, 4.8rem); text-align: left; transform: rotate(-.8deg); animation: land .75s cubic-bezier(.2,.75,.25,1) both; }
.doc::before { position: absolute; z-index: -1; inset: .75rem -.85rem -.5rem .85rem; border: 1px solid var(--line); border-radius: 4px 4px 0 0; background: var(--panel); content: ''; transform: rotate(1.3deg); }
.doc-head, .doc footer { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .78rem; }.doc-head { margin-bottom: 2.3rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }.doc p { max-width: 44rem; font-size: clamp(1.05rem, 2.1vw, 1.38rem); line-height: 1.85; }.doc footer { margin-top: 2.7rem; padding-top: 1rem; border-top: 1px solid var(--line); justify-content: flex-start; }.scribble { color: var(--accent); font-size: 1.6rem; line-height: .8; }
mark { background: linear-gradient(transparent 62%, var(--accent-soft) 0); color: inherit; padding: 0 .06em; box-decoration-break: clone; }
.doc mark { background-size: 0 100%; background-repeat: no-repeat; animation: highlight .62s ease-out forwards; }.doc mark:nth-of-type(2) { animation-delay: .13s; }.doc mark:nth-of-type(3) { animation-delay: .26s; }.doc mark:nth-of-type(4) { animation-delay: .39s; }
.ray { position: absolute; z-index: 2; width: 1px; background: var(--accent); transform-origin: bottom; }.ray-one { top: 1.6rem; left: -1rem; height: 1.8rem; transform: rotate(-40deg); }.ray-two { top: -.25rem; left: .7rem; height: 1.4rem; transform: rotate(-8deg); }.ray-three { top: .45rem; left: 2.4rem; height: 1.25rem; transform: rotate(27deg); }

.soon { display: inline-block; border-radius: 99px; background: var(--ink); color: var(--ground); font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .02em; line-height: 1.2; padding: .28rem .62rem; vertical-align: .12em; white-space: nowrap; }
h2 .soon { margin-top: .4rem; }
.soon-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .8rem; margin: 0 0 1.8rem; border-radius: 1.1rem; background: var(--ink); color: var(--ground); font-size: .95rem; font-weight: 600; line-height: 1.5; padding: .9rem 1.15rem; }
.soon-banner .soon { background: var(--ground); color: var(--ink); vertical-align: 0; }
.now { margin-top: .85rem; color: var(--ink); font-size: .88rem; font-weight: 600; }
.section-copy { max-width: 38rem; margin-bottom: 2.2rem; }
.section-lede { margin-top: 1rem; color: var(--muted); }

.problem { padding: clamp(7rem, 14vw, 12rem) 1.25rem clamp(5.5rem, 11vw, 9rem); text-align: center; }
.problem .narrow { margin: auto; }
.pain { width: min(100%, 28rem); margin: 1.5rem auto 0; padding: 0; list-style: none; text-align: left; }
.pain li { padding: .55rem 0; border-bottom: 1px solid var(--line); }
.pain li:last-child { border-bottom: 0; }
.problem .narrow > p:last-child { margin-top: 1.4rem; }

.howto, .memory, .work, .connect-tools, .audience, .faq { padding-top: clamp(5.5rem, 11vw, 9rem); padding-bottom: clamp(5.5rem, 11vw, 9rem); }
.steps, .tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; margin: 0; padding: 0; list-style: none; }
.audience-grid, .work-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.15rem; margin: 0; padding: 0; list-style: none; }
.work-list { gap: 0 1.5rem; }
.work-list li { min-width: 0; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.steps li, .tool-grid article, .audience-grid article { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); padding: 1.55rem; }
.steps li.unbuilt, .tool-grid article.unbuilt, .audience-grid article.unbuilt, .coming-box { border-width: 2px; border-style: dashed; }
.step-num { margin: .45rem 0 .55rem; font-family: var(--display); font-size: 2rem; line-height: 1; letter-spacing: -.04em; }
.steps h3, .tool-grid h3, .audience-grid h3 { margin-bottom: .55rem; }
.steps p, .tool-grid p, .audience-grid p { font-size: .93rem; line-height: 1.52; }
.howto-note { margin-top: 1.4rem; color: var(--ink); font-size: .9rem; }
.coming-box { min-width: 0; border: 2px dashed var(--line); border-radius: 7px; background: var(--panel); padding: clamp(1.5rem, 4vw, 2.4rem); }
.memory-list { margin: 0; padding: 0; list-style: none; }
.memory-list li { padding: .65rem 0; border-bottom: 1px solid var(--line); }
.memory-list li:last-child { border-bottom: 0; }
.tool-grid code, .connect code { display: inline-block; margin-top: 1.3rem; border-radius: 5px; background: var(--accent-soft); color: var(--ink); font: .81rem/1.3 'IBM Plex Mono', monospace; padding: .7rem .85rem; overflow-wrap: anywhere; }
.hosts { display: grid; gap: .5rem; margin-top: 1.6rem !important; font-size: .84rem; }
.hosts a { text-decoration: underline; text-underline-offset: .18em; }
.hosts i { margin-left: .35rem; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-style: normal; padding: .08rem .4rem; }

.scope { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(2rem, 8vw, 8rem); padding-bottom: clamp(6rem, 12vw, 10rem); }.scope-head { padding-top: .7rem; }.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }.panel { min-width: 0; min-height: 20.5rem; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); padding: 1.55rem; }.panel--open { border-style: dashed; }.rule { display: block; width: 2.6rem; margin-bottom: 1.45rem; border-top: 3px solid var(--accent); }.rule.dashed { border-top-style: dashed; }.panel h3 { margin-bottom: 1rem; }.panel ul { margin: 0; padding: 0; list-style: none; }.panel li { padding: .58rem 0; border-bottom: 1px solid var(--line); font-size: .93rem; line-height: 1.52; }.panel li:last-child { border-bottom: 0; }.scope-foot, .second-read { grid-column: 2; color: var(--muted); }.scope-foot { margin-top: -5.6rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .87rem; }.second-read { padding-top: 1rem; border-top: 1px solid var(--line); font-size: .91rem; }.second-read b { color: var(--ink); }

.proof-section { background: var(--panel); padding: clamp(6rem, 12vw, 10rem) 0; }.section-title { margin-bottom: 2.5rem; }.proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface); box-shadow: 0 12px 35px rgba(32,39,47,.06); }.proof-pane { min-width: 0; padding: clamp(1.75rem, 4vw, 3.2rem); }.proof-pane + .proof-pane { border-left: 1px solid var(--line); }.proof-pane--after { box-shadow: inset 4px 0 var(--accent); }.label { margin-bottom: 1.2rem; color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }.proof-pane p:last-child { font-size: 1.03rem; line-height: 1.9; }.proof mark { background: linear-gradient(transparent 62%, var(--accent-soft) 0); }
.kept-pane { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--line); padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.75rem, 4vw, 3.2rem); }
.kept-list { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.kept-list li { min-width: 0; border: 1px solid var(--line); border-radius: 99px; padding: .32rem .75rem; font-size: .88rem; }
.proof-note { margin-top: 1.15rem; color: var(--ink); font-size: .9rem; font-weight: 600; }

.details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 10vw, 10rem); padding-top: clamp(6rem, 11vw, 9rem); padding-bottom: clamp(6rem, 11vw, 9rem); }.detail-block h2 { margin-bottom: 1.4rem; }.detail-block p:not(.eyebrow) { max-width: 30rem; margin-top: .9rem; color: var(--muted); }.connect { border-left: 1px solid var(--line); padding-left: clamp(2rem, 6vw, 5rem); }

.faq-list { max-width: 42rem; }
.faq details { border-bottom: 1px solid var(--line); padding: 1.05rem 0; }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; cursor: pointer; font-family: var(--display); font-size: 1.15rem; line-height: 1.35; letter-spacing: -.02em; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { min-width: 0; }
.faq summary::after { content: '+'; flex: none; color: var(--ink); font-family: var(--sans); font-weight: 600; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin-top: .75rem; color: var(--ink); font-size: .95rem; }

.closing { border-top: 1px solid var(--line); padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(5rem, 10vw, 8rem); text-align: center; }.closing h2 { margin: 0 auto; }.closing > p:not(.eyebrow) { margin: 1.1rem 0 0; color: var(--muted); }.button { display: inline-block; border-radius: 99px; background: var(--accent); color: #25231d; font-weight: 600; padding: .76rem 1.25rem; text-decoration: none; }
.button--ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.closing .cta-row { margin-top: 1.8rem; }
footer { border-top: 1px solid var(--line); padding: 1.7rem 0; color: var(--muted); font-size: .82rem; } footer .brand { color: var(--ink); }
@keyframes land { from { opacity: 0; transform: translateY(1.2rem) rotate(.2deg); } to { opacity: 1; transform: rotate(-.8deg); } } @keyframes highlight { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
@media (max-width: 46rem) {
  .site-head nav a:not(.small-cta) { display: none; }
  .hero { min-height: 0; }
  h1, .hero-copy h1 { font-size: 2.35rem; }
  .scope { padding-bottom: 4.5rem; }
  .hero-document { width: 92vw; margin-top: 3.4rem; }
  .doc { min-height: 18rem; padding: 1.5rem; }
  .doc p { font-size: 1rem; }
  .scope, .details { grid-template-columns: minmax(0, 1fr); }
  .scope-foot, .second-read { grid-column: auto; margin-top: 0; }
  .pair, .proof, .steps, .tool-grid, .audience-grid, .work-list { grid-template-columns: minmax(0, 1fr); }
  .panel { min-height: auto; }
  .proof-pane + .proof-pane { border-top: 1px solid var(--line); border-left: 0; }
  .proof-pane--after { box-shadow: inset 0 4px var(--accent); }
  .kept-pane { padding: 1.3rem 1.5rem; }
  .connect { border-top: 1px solid var(--line); border-left: 0; padding-top: 2.5rem; padding-left: 0; }
  .cta-row { display: grid; grid-template-columns: minmax(0, 1fr); }
  .cta-row .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Light mode is deliberately its own composition. The dark theme above is
   left intact; its quiet charcoal document mood is a separate, approved look. */
@media (prefers-color-scheme: light) {
  :root {
    --blob-muted: #666666;
    --light-shadow: 0 28px 70px rgba(55, 73, 94, .12), 0 5px 18px rgba(55, 73, 94, .06);
  }

  body { background: var(--ground); }
  .site-head { padding-top: 1.8rem; }
  .site-head::after { position: absolute; z-index: -1; top: .7rem; left: 50%; width: min(94vw, 78rem); height: 4.7rem; border-radius: 2.35rem; background: #f7f8fa; content: ''; transform: translateX(-50%); }
  .small-cta { border-color: #dfe4ea; background: #ffffff; box-shadow: 0 3px 10px rgba(55, 73, 94, .07); }

  .hero, .problem, .howto, .scope, .memory, .proof-section, .details, .closing { position: relative; isolation: isolate; overflow: clip; }
  .hero::before, .problem::before, .howto::before, .scope::before, .memory::before, .proof-section::before, .details::before, .closing::before { position: absolute; z-index: -1; display: block; content: ''; pointer-events: none; }
  .hero--blue::before { top: 5.5rem; left: 50%; width: min(91vw, 72rem); height: 37rem; border-radius: 42% 58% 54% 46% / 44% 43% 57% 56%; background: radial-gradient(ellipse at 40% 38%, #edf3fd 0 33%, #e7effc 34% 57%, #f8faff 58% 70%, transparent 71%); transform: translateX(-50%) rotate(-6deg); }
  .problem--purple::before { top: 8%; left: 50%; width: min(88vw, 64rem); height: 29rem; border-radius: 58% 42% 44% 56% / 54% 48% 52% 46%; background: radial-gradient(ellipse at 52% 48%, #f3eafb 0 43%, #f8f2fc 44% 65%, transparent 66%); transform: translateX(-50%) rotate(4deg); }
  .howto--blue::before { top: -2rem; right: -18rem; width: 52rem; height: 38rem; border-radius: 46% 54% 48% 52% / 52% 40% 60% 48%; background: radial-gradient(ellipse at 42% 46%, #edf3fd 0 40%, #f4f8fe 41% 64%, transparent 65%); transform: rotate(-11deg); }
  .scope--green::before { top: 1.2rem; right: -16rem; width: 56rem; height: 44rem; border-radius: 51% 49% 43% 57% / 58% 44% 56% 42%; background: radial-gradient(ellipse at 45% 50%, #e6f3ec 0 40%, #f3faf6 41% 63%, transparent 64%); transform: rotate(13deg); }
  .memory--yellow::before { top: -6rem; left: -14rem; width: 48rem; height: 40rem; border-radius: 60% 40% 54% 46% / 48% 58% 42% 52%; background: radial-gradient(ellipse at 48% 50%, #fff4d9 0 42%, #fffaf0 43% 65%, transparent 66%); transform: rotate(-8deg); }
  .proof-section--red::before { top: -12rem; left: -13rem; width: 57rem; height: 48rem; border-radius: 43% 57% 59% 41% / 50% 43% 57% 50%; background: radial-gradient(ellipse at 50% 50%, #fdebec 0 42%, #fff5f4 43% 64%, transparent 65%); transform: rotate(-14deg); }
  .details--yellow::before { top: -7rem; right: -10rem; width: 48rem; height: 44rem; border-radius: 60% 40% 54% 46% / 48% 58% 42% 52%; background: radial-gradient(ellipse at 48% 50%, #fff4d9 0 42%, #fffaf0 43% 65%, transparent 66%); transform: rotate(-8deg); }
  .closing--purple::before { top: -8rem; left: 50%; width: min(87vw, 66rem); height: 35rem; border-radius: 45% 55% 50% 50% / 55% 43% 57% 45%; background: radial-gradient(ellipse at 50% 52%, #f3eafb 0 41%, #fbf7fe 42% 64%, transparent 65%); transform: translateX(-50%) rotate(3deg); }

  .hero { min-height: min(61rem, calc(100svh - 4.75rem)); padding-top: clamp(4.9rem, 11vh, 8.6rem); }
  .hero-copy h1 { max-width: 16em; color: var(--bear-blue); font-size: clamp(2.7rem, 5.1vw, 4rem); font-weight: 400; }
  .hero-copy .eyebrow, .problem .eyebrow, .howto .eyebrow, .scope .eyebrow, .memory .eyebrow, .work .eyebrow, .connect-tools .eyebrow, .audience .eyebrow, .proof-section .eyebrow, .details .eyebrow, .faq .eyebrow, .closing .eyebrow { color: var(--blob-muted); }
  .hero-copy .lede { color: #555e69; }
  .hero-note { display: inline-block; border-radius: 999px; background: rgba(255, 255, 255, .78); color: #555e69; padding: .35rem .8rem; box-shadow: 0 2px 10px rgba(69, 106, 163, .06); }
  .doc { border: 0; border-radius: 32px 32px 8px 8px; box-shadow: var(--light-shadow); }
  .doc::before { border: 0; border-radius: 31px 31px 8px 8px; background: #dfeafa; }
  .doc-head, .doc footer { color: var(--blob-muted); }
  .doc mark, .proof mark { background: linear-gradient(transparent 62%, var(--accent-soft) 0); }

  .problem { padding-top: clamp(9rem, 17vw, 14rem); padding-bottom: clamp(8rem, 14vw, 11rem); }
  .problem h2 { color: var(--bear-purple); }
  .pain li { border-color: #eadff3; }
  .howto h2 { color: var(--bear-blue); }
  .howto > *, .memory > *, .scope > *, .work > *, .connect-tools > *, .audience > *, .faq > * { position: relative; z-index: 1; }
  .scope { gap: clamp(2rem, 8vw, 8rem); padding-bottom: clamp(8rem, 15vw, 12rem); }
  .scope h2 { color: var(--bear-green); }
  .pair { gap: 1.15rem; }
  .panel { min-height: 21rem; border: 2px solid #a7c9b8; border-radius: 26px; background: rgba(255, 255, 255, .73); box-shadow: 0 16px 38px rgba(43, 100, 81, .07); backdrop-filter: blur(3px); }
  .panel--open { border-color: #a7c9b8; border-style: dashed; }
  .panel li { border-color: #dcece4; color: var(--ink); }
  .scope-foot, .second-read { color: var(--blob-muted); border-color: #c9ddd2; }
  .second-read b { color: var(--ink); }

  .memory h2 { color: var(--bear-yellow); }
  .work h2 { color: var(--bear-purple); }
  .connect-tools h2 { color: var(--bear-blue); }
  .audience h2 { color: var(--bear-green); }
  .faq h2 { color: var(--bear-purple); }
  .work-list li { border-color: #eadff3; }
  .steps li, .tool-grid article, .audience-grid article, .coming-box { border-color: #dfe4ea; border-radius: 26px; background: rgba(255, 255, 255, .73); box-shadow: 0 16px 38px rgba(55, 73, 94, .07); backdrop-filter: blur(3px); }
  .steps li.unbuilt, .tool-grid article.unbuilt, .audience-grid article.unbuilt, .coming-box { border-color: #444444; border-style: dashed; }
  .soon-banner { border-radius: 1.4rem; }

  .proof-section { background: transparent; }
  .proof-section .wrap { position: relative; z-index: 1; }
  .proof-section h2 { color: var(--bear-red); }
  .proof { border: 0; border-radius: 40px; background: rgba(255, 255, 255, .8); box-shadow: var(--light-shadow); }
  .proof-pane { padding: clamp(2rem, 4.6vw, 3.7rem); }
  .proof-pane + .proof-pane { border-color: #f0d3d4; }
  .proof-pane--after { box-shadow: inset 5px 0 var(--accent); }
  .kept-pane { border-color: #f0d3d4; }
  .kept-list li { border-color: #f0d3d4; background: rgba(255, 255, 255, .7); }
  .label { color: var(--blob-muted); }

  .details { padding-top: clamp(8rem, 13vw, 11rem); padding-bottom: clamp(8rem, 13vw, 11rem); }
  .details > * { position: relative; z-index: 1; }
  .details h2 { color: var(--bear-yellow); }
  .detail-block p:not(.eyebrow) { color: var(--blob-muted); }
  .connect { border-color: #ead9ab; }
  .connect code, .tool-grid code { border-radius: 16px; background: #fff8e8; color: #57420d; }
  .hosts i { border-color: #e5cf90; color: #695d42; }

  .faq details { border-color: #eadff3; }
  .closing { border-top: 0; padding-top: clamp(7rem, 12vw, 10rem); }
  .closing > * { position: relative; z-index: 1; }
  .closing h2 { color: var(--bear-purple); }
  .closing > p:not(.eyebrow) { color: var(--blob-muted); }
  .button { background: var(--bear-red); color: #ffffff; box-shadow: 0 10px 24px rgba(221, 76, 79, .25); }
  .button--ghost { border-color: #dfe4ea; background: #ffffff; color: var(--ink); box-shadow: 0 3px 10px rgba(55, 73, 94, .07); }
  footer { border-color: #e7e9ed; }
}

@media (prefers-color-scheme: light) and (max-width: 46rem) {
  .hero--blue::before { top: 3rem; width: 48rem; height: 33rem; }
  .problem--purple::before { width: 48rem; height: 27rem; }
  .howto--blue::before { top: 10rem; right: -26rem; }
  .scope--green::before { top: 13rem; right: -26rem; }
  .memory--yellow::before { top: 8rem; left: -24rem; }
  .proof-section--red::before { top: 4rem; left: -25rem; }
  .details--yellow::before { top: 9rem; right: -28rem; }
  .closing--purple::before { top: 0; width: 48rem; }
  .hero { min-height: 0; padding-top: 4.4rem; }
  .hero-copy h1 { font-size: 2.35rem; }
  .doc { border-radius: 25px 25px 7px 7px; }
  .panel { min-height: auto; }
  .proof { border-radius: 28px; }
  .proof-pane--after { box-shadow: inset 0 5px var(--accent); }
  .steps li, .tool-grid article, .audience-grid article, .coming-box { border-radius: 22px; }
}