/* Marketing site layer on top of gap-ui.css. Tokens and components come from gap-ui. */

/* ---------- Header and footer ---------- */
.site-head { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid transparent; }
.site-head.scrolled { border-bottom-color: var(--sep); }
.site-head .page { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 60px; }
.brand { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: -0.02em; }
.brand img { border-radius: 8px; }
.site-nav { display: flex; align-items: center; gap: var(--s5); font-size: var(--t-md); }
.site-nav a { text-decoration: none; color: var(--ink-2); font-weight: 500; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav .btn { color: var(--bg); }
@media (max-width: 720px) { .site-nav a:not(.btn):not(.signin) { display: none; } }
@media (max-width: 420px) { .site-nav .signin { display: none; } }
.site-foot { border-top: 1px solid var(--sep); padding: var(--s10) 0 var(--s12); font-size: var(--t-sm); color: var(--ink-3); }
.site-foot .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s8); }
.site-foot h2 { font-size: var(--t-sm); color: var(--ink); margin: 0 0 var(--s3); font-weight: 600; letter-spacing: 0; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-foot a { color: var(--ink-3); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 720px) { .site-foot .cols { grid-template-columns: 1fr 1fr; } .site-foot .cols > :first-child { grid-column: 1 / -1; } }

/* ---------- Hero ---------- */
.hero { padding: var(--s16) 0 var(--s12); }
.hero .split { align-items: start; }
.hero .split > :last-child { padding-top: var(--s4); }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: 0.98; letter-spacing: -0.045em; margin: 0 0 var(--s5); }
.hero .lede { max-width: 30ch; margin-bottom: var(--s8); }
.hero .paste { max-width: 560px; }
.hero-note { margin: var(--s3) 0 0 var(--s4); }
@media (max-width: 900px) { .hero { padding-top: var(--s10); } }

/* The phone that shows the gap */
.device { width: min(100%, 360px); margin-inline: auto; border-radius: var(--r-device); background: #0b0b0d; padding: 12px; box-shadow: var(--shadow-float); }
.device-screen { border-radius: 34px; background: var(--surface); overflow: hidden; padding-bottom: 10px; }
.device-bar { padding: 18px 20px 6px; font: 700 var(--t-xl)/1.1 var(--font); letter-spacing: -0.02em; }
.device-search { margin: 6px 16px 10px; padding: 8px 12px; border-radius: 10px; background: rgba(118, 118, 128, 0.12); color: var(--ink-3); font-size: var(--t-md); display: flex; align-items: center; gap: 8px; }
.device-search b { color: var(--ink); font-weight: 500; }
.device .result { grid-template-columns: 24px 44px minmax(0, 1fr) auto; }
.device .result.gap { grid-template-columns: 24px 1fr; }
.device .result > div { min-width: 0; }
.device .result .item-title { font-size: var(--t-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.device .icon { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 17px; }
.device-caption { text-align: center; margin-top: var(--s4); }
.device.live .ruler::before { animation: gap-draw 1.1s var(--ease) 0.2s both; transform-origin: top; }

/* Look result under the hero */
.look { margin-top: var(--s8); max-width: 640px; }
.look-card { background: var(--surface); border-radius: 20px; padding: var(--s6); box-shadow: 0 0 0 1px var(--sep), var(--shadow-float); }
.look-card .h2 { margin: 0 0 var(--s3); }
.locked { position: relative; }
.locked .blur { filter: blur(5px); user-select: none; pointer-events: none; }
.locked .unlock { position: absolute; inset: 0; display: grid; place-items: center; }
.progress-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: var(--t-md); }
.progress-steps li { display: flex; gap: 10px; align-items: center; color: var(--ink-3); }
.progress-steps li.on { color: var(--ink); font-weight: 600; }
.progress-steps li.done { color: var(--ink-2); }
.progress-steps li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--sep-strong); flex: none; }
.progress-steps li.on::before { border-color: var(--ink); border-right-color: transparent; animation: gap-spin 0.8s linear infinite; }
.progress-steps li.done::before { background: var(--up); border-color: var(--up); }

/* ---------- Sections ---------- */
.band { padding: var(--s16) 0; }
.band + .band { border-top: 1px solid var(--sep); }
.band-alt { background: var(--surface); }
.band h2.h1 { max-width: 20ch; margin-bottom: var(--s4); }
.band .lede { max-width: 52ch; }
.weekly { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s10); align-items: start; margin-top: var(--s10); }
@media (max-width: 900px) { .weekly { grid-template-columns: 1fr; } }
.does { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
.does li { display: grid; grid-template-columns: 28px 1fr; gap: var(--s3); }
.does .tick { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--sep); display: grid; place-items: center; }
.does .tick svg { width: 14px; height: 14px; }
.does b { display: block; font-size: var(--t-body); margin-bottom: 2px; }
.does p { margin: 0; color: var(--ink-2); font-size: var(--t-md); line-height: 1.5; }

/* Proposed change card */
.move-demo { background: var(--surface); border-radius: var(--r-group); box-shadow: 0 0 0 1px var(--sep), var(--shadow-float); overflow: hidden; }
.move-demo .body { padding: var(--s5); display: grid; gap: var(--s3); }
.move-demo .foot { display: flex; gap: var(--s2); padding: var(--s3) var(--s5); border-top: 1px solid var(--sep); background: var(--surface-2); }
.diff { display: grid; gap: 4px; }
.diff .lab { display: flex; justify-content: space-between; font-size: var(--t-sm); color: var(--ink-2); font-weight: 600; }
.diff .lab span { font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.diff .was, .diff .now { padding: 9px 12px; border-radius: 10px; font-size: var(--t-md); word-break: break-word; }
.diff .was { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--sep-strong); }
.diff .now { background: var(--measure-soft); box-shadow: inset 3px 0 0 var(--measure); }

/* Steps with real sequence */
.seq { counter-reset: s; list-style: none; padding: 0; margin: var(--s10) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.seq li { counter-increment: s; background: var(--bg); border-radius: var(--r-group); padding: var(--s6); box-shadow: 0 0 0 1px var(--sep); }
.band-alt .seq li { background: var(--bg); }
.seq li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 700 var(--t-md)/1 var(--font-round); margin-bottom: var(--s4); }
.seq h3 { margin: 0 0 var(--s2); }
.seq p { margin: 0; color: var(--ink-2); font-size: var(--t-md); line-height: 1.5; }
@media (max-width: 900px) { .seq { grid-template-columns: 1fr; } }

/* Timeline of expectations */
.timeline { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; gap: 0; max-width: 720px; }
.timeline li { display: grid; grid-template-columns: 120px 1fr; gap: var(--s5); padding: var(--s5) 0; border-top: 1px solid var(--sep); }
.timeline li:last-child { border-bottom: 1px solid var(--sep); }
.timeline .when { font-weight: 700; font-family: var(--font-round); }
.timeline p { margin: 0; color: var(--ink-2); font-size: var(--t-md); line-height: 1.5; }
@media (max-width: 560px) { .timeline li { grid-template-columns: 1fr; gap: 4px; } }

/* Pricing */
.plans { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s5); margin-top: var(--s10); align-items: stretch; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }
.plan { background: var(--surface); border-radius: 20px; padding: var(--s8); box-shadow: 0 0 0 1px var(--sep); display: flex; flex-direction: column; gap: var(--s5); }
.plan.main { box-shadow: 0 0 0 2px var(--ink), var(--shadow-float); }
.plan .price { font: 700 var(--t-4xl)/1 var(--font-round); letter-spacing: -0.04em; }
.plan .price small { font: 500 var(--t-md)/1 var(--font); color: var(--ink-3); letter-spacing: 0; margin-left: 4px; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: var(--t-md); }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--ink-2); line-height: 1.45; }
.plan li::before { content: ""; width: 8px; height: 8px; margin: 7px 0 0 5px; border-radius: 50%; background: var(--ink); }
.plan .terms { font-size: var(--t-sm); color: var(--ink-3); margin: 0; }
.plan.studio { grid-column: 1 / -1; display: grid; grid-template-columns: max-content 1fr auto; align-items: center; gap: var(--s6); padding: var(--s6) var(--s8); }
.plan.studio .studio-body { display: grid; gap: var(--s2); color: var(--ink-2); }
@media (max-width: 860px) { .plan.studio { grid-template-columns: 1fr; align-items: start; gap: var(--s4); } }
.plan .btn { margin-top: auto; }
.compare { margin-top: var(--s10); }
.compare td:first-child { font-weight: 600; }
.compare tr.us td { background: var(--measure-soft); }

/* FAQ */
.faq { margin-top: var(--s8); max-width: 760px; }
.faq details { border-top: 1px solid var(--sep); padding: var(--s5) 0; }
.faq details:last-child { border-bottom: 1px solid var(--sep); }
.faq summary { cursor: pointer; font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.015em; list-style: none; display: flex; justify-content: space-between; gap: var(--s4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--ink-3); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: var(--s3) 0 0; color: var(--ink-2); line-height: 1.55; max-width: 64ch; }

/* Closing call */
.closer { text-align: left; }
.closer .paste { max-width: 560px; margin-top: var(--s6); }

/* ---------- Long-form pages (legal, security, niches, answers) ---------- */
.doc { padding: var(--s12) 0 var(--s16); }
.doc .page { max-width: 760px; }
.doc h1 { margin-bottom: var(--s3); }
.doc .meta { color: var(--ink-3); font-size: var(--t-sm); margin: 0 0 var(--s8); }
.doc h2 { font-size: var(--t-xl); margin: var(--s10) 0 var(--s3); letter-spacing: -0.02em; }
.doc h3 { font-size: var(--t-lg); margin: var(--s6) 0 var(--s2); }
.doc p, .doc li { line-height: 1.62; color: var(--ink); }
.doc p { margin: 0 0 var(--s4); }
.doc ul, .doc ol { padding-left: 22px; margin: 0 0 var(--s4); }
.doc li { margin-bottom: 6px; }
.doc .table { margin: var(--s4) 0 var(--s6); font-size: var(--t-md); }
.doc .table-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--r-group); box-shadow: 0 0 0 1px var(--sep); margin: var(--s4) 0 var(--s6); }
.doc .table-wrap .table { margin: 0; }
.doc .callout { background: var(--measure-soft); border-radius: var(--r-group); padding: var(--s5); margin: var(--s6) 0; box-shadow: inset 4px 0 0 var(--measure); }
.doc .callout p:last-child { margin: 0; }
.toc { background: var(--surface); border-radius: var(--r-group); padding: var(--s5) var(--s6); box-shadow: 0 0 0 1px var(--sep); margin-bottom: var(--s8); font-size: var(--t-md); }
.toc ol { margin: 0; }

/* Hosted answer pages */
.answer .short-answer { font-size: var(--t-lg); line-height: 1.5; background: var(--surface); padding: var(--s5); border-radius: var(--r-group); box-shadow: 0 0 0 1px var(--sep); }
.answer .app-cta { background: var(--measure-soft); border-radius: var(--r-group); padding: var(--s5); margin: var(--s8) 0; box-shadow: inset 4px 0 0 var(--measure); }
.answer-app { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s6); color: var(--ink-3); font-size: var(--t-sm); }
.answer-app img { width: 36px; height: 36px; border-radius: 22.5%; }

/* Unsubscribe */
.center-card { max-width: 480px; margin: var(--s16) auto; background: var(--surface); border-radius: 20px; padding: var(--s8); box-shadow: 0 0 0 1px var(--sep), var(--shadow-float); }
@media (max-width: 560px) { .doc .table th, .doc .table td { padding: 10px 8px; } }