/* Tempost marketing site. Monochrome, Apple-style. No external dependencies. */
:root {
  --bg: #fff;
  --alt: #F5F5F7;
  --label: #1D1D1F;
  --label-2: #6E6E73;
  --label-3: #86868B;
  --sep: #D2D2D7;
  --ink: #1D1D1F;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --k: 1;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body { font-family: var(--font); color: var(--label); -webkit-font-smoothing: antialiased; line-height: 1.47; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: var(--label); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: #D2D2D7; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 980px; font-size: 14px; }
.skip:focus { left: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons and links */
.btn { display: inline-block; background: var(--ink); color: #fff; font-size: 17px; line-height: 1.2; padding: 12px 24px; border-radius: 980px; text-decoration: none; transition: background .2s; }
.btn:hover { background: #000; color: #fff; text-decoration: none; }
.btn-sm { font-size: 12px; padding: 6px 13px; }
.btn-inv { background: #F5F5F7; color: var(--label); }
.btn-inv:hover { background: #fff; color: #000; }
.more { font-size: 17px; color: var(--label); }
.more::after { content: " ›"; }

/* Global nav */
.gnav { position: sticky; top: 0; z-index: 80; height: 48px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .06); }
.gnav-in, .pbar-in { max-width: 1024px; margin: 0 auto; height: 100%; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--label); }
.wordmark:hover { text-decoration: none; }
.wordmark svg { width: 22px; height: 22px; }
.gnav-links { display: flex; align-items: center; gap: 32px; font-size: 14px; }
.gnav-links a, .pbar-links a { color: var(--label); opacity: .85; }
.gnav-links a:hover, .pbar-links a:hover { opacity: 1; }
.gnav-right { display: flex; align-items: center; gap: 20px; font-size: 14px; }

/* Product bar (appears on scroll, home only) */
.pbar { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: 52px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .08); transform: translateY(-100%); transition: transform .5s var(--ease); }
.pbar.on { transform: none; }
.pbar .wordmark { font-size: 21px; }
.pbar-links { display: flex; gap: 28px; font-size: 12px; }
@media (max-width: 899px) { .gnav-links, .pbar-links { display: none; } }

/* Sections */
.sec { padding: clamp(88px, 11vw, 160px) 22px; scroll-margin-top: 52px; }
.sec-alt { background: var(--alt); }
.sec-dark { background: #000; color: #F5F5F7; }
.wrap { max-width: 1200px; margin: 0 auto; }
.narrow { max-width: 980px; margin: 0 auto; }
.center { text-align: center; }
.eyebrow { font-size: 21px; font-weight: 600; color: var(--label-2); }
.h1 { margin: 14px 0 0; font-size: clamp(48px, 6.4vw, 80px); font-weight: 600; letter-spacing: -.015em; line-height: 1.05; text-wrap: balance; }
.h2 { margin: 0; font-size: clamp(40px, 4.6vw, 56px); font-weight: 600; letter-spacing: -.01em; line-height: 1.07; text-wrap: balance; }
.sub { margin: 20px auto 0; max-width: 680px; font-size: clamp(19px, 1.8vw, 21px); line-height: 1.42; color: var(--label-2); text-wrap: pretty; }
.fine { margin-top: 16px; font-size: 12px; color: var(--label-2); }
.cta-row { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }

/* Reveal on scroll (enabled by JS only) */
.js [data-reveal].pre { opacity: 0; transform: translateY(32px); }
.js [data-reveal] { transition: opacity 1s var(--ease), transform 1s var(--ease); }

/* Hero */
.hero { padding: clamp(64px, 8vw, 96px) 22px 0; text-align: center; scroll-margin-top: 52px; }
.hero .narrow { display: flex; flex-direction: column; align-items: center; }
.hero-eyebrow { font-size: clamp(19px, 2vw, 24px); font-weight: 600; letter-spacing: -.01em; }
.hero-sub { margin: 24px 0 0; max-width: 760px; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.38; color: var(--label-2); text-wrap: pretty; }
.hero-stage { position: relative; max-width: 1200px; margin: clamp(56px, 7vw, 88px) auto 0; padding-bottom: clamp(40px, 5vw, 64px); }
.bloom { position: absolute; left: 8%; right: 8%; top: 6%; height: 80%; background: radial-gradient(50% 55% at 50% 50%, rgba(0, 0, 0, .14), transparent 75%); filter: blur(60px); opacity: .55; pointer-events: none; }
.hero-shot { position: relative; transform-origin: 50% 0; will-change: transform; }
.shot { width: calc(1200px * var(--k)); height: calc(520px * var(--k)); margin: 0 auto; position: relative; }
.shot-in { position: absolute; left: 0; top: 0; width: 1200px; height: 520px; transform: scale(var(--k)); transform-origin: 0 0; }
.caption { margin-top: 76px; font-size: 12px; color: var(--label-2); }

/* Platform icons (official colors inside a squircle) */
.pi { width: 1em; height: 1em; border-radius: .225em; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; position: relative; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .1); color: #fff; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-family: var(--font); }
.pi b { font-size: .52em; }
.pi b.two { font-size: .4em; }
.pi-yt { background: #FF0000; }
.pi-yt i { width: .62em; height: .44em; background: #fff; border-radius: .12em; display: flex; align-items: center; justify-content: center; }
.pi-yt i::after { content: ""; border-left: .17em solid #FF0000; border-top: .1em solid transparent; border-bottom: .1em solid transparent; margin-left: .04em; }
.pi-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.pi-ig i { width: .6em; height: .6em; border: max(1.2px, .06em) solid #fff; border-radius: .18em; display: flex; align-items: center; justify-content: center; position: relative; }
.pi-ig i::before { content: ""; width: .27em; height: .27em; border: max(1.2px, .06em) solid #fff; border-radius: 50%; }
.pi-ig i::after { content: ""; position: absolute; width: .07em; height: .07em; border-radius: 50%; background: #fff; top: .03em; right: .03em; }
.pi-fb { background: #0866FF; }
.pi-tt, .pi-x, .pi-th { background: #000; }
.pi-li { background: #0A66C2; }
.pi-pi { background: #E60023; }
.pi-bs { background: #1185FE; }

/* Mock app window (hero) */
.win { width: 1200px; height: 520px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 30px 70px -20px rgba(0, 0, 0, .22), 0 10px 24px -12px rgba(0, 0, 0, .1); overflow: hidden; display: flex; text-align: left; }
.side { width: 220px; flex: none; background: #F2F2F5; border-right: 1px solid #E3E3E8; padding: 16px 10px; display: flex; flex-direction: column; }
.lights { display: flex; gap: 8px; padding: 2px 6px 18px; }
.lights span { width: 12px; height: 12px; border-radius: 50%; }
.lights span:nth-child(1) { background: #FF5F57; } .lights span:nth-child(2) { background: #FEBC2E; } .lights span:nth-child(3) { background: #28C840; }
.side-h { font-size: 11px; font-weight: 600; color: #6E6E73; padding: 4px 8px 6px; }
.side-h + .side-h, .side-gap { padding-top: 16px; }
.side-row { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 6px; font-size: 13px; }
.side-row .pi { font-size: 18px; }
.side-row .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-row .rate { font-size: 11px; color: #6E6E73; }
.side-row.sel { background: rgba(0, 0, 0, .07); }
.sw { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.badge { font-size: 11px; font-weight: 600; color: #fff; background: var(--ink); border-radius: 8px; padding: 1px 6px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); margin: 0 5px; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tool { height: 52px; flex: none; display: flex; align-items: center; padding: 0 20px; gap: 16px; border-bottom: 1px solid #E5E5EA; }
.tool-l, .tool-r { display: flex; gap: 8px; width: 230px; }
.tool-l { align-items: baseline; }
.tool-r { align-items: center; gap: 10px; justify-content: flex-end; font-size: 12px; color: #6E6E73; }
.month { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.week { font-size: 13px; color: #6E6E73; }
.seg { flex: 1; display: flex; justify-content: center; }
.seg div { display: flex; background: #EBEBEE; border-radius: 7px; padding: 2px; gap: 2px; font-size: 12px; }
.seg span { padding: 3px 16px; border-radius: 5px; }
.seg .on { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .06); font-weight: 500; }
.meter { width: 64px; height: 4px; border-radius: 2px; background: #E5E5EA; overflow: hidden; }
.meter span { display: block; width: 92%; height: 100%; background: var(--ink); }
.tool-r b { color: var(--label); }
.grid-h, .grid-r { display: grid; grid-template-columns: 150px repeat(7, minmax(0, 1fr)); }
.grid-h { height: 44px; flex: none; border-bottom: 1px solid #E5E5EA; }
.grid-h > div { display: flex; align-items: baseline; gap: 5px; padding: 0 8px 8px; align-self: end; font-size: 12px; color: #6E6E73; }
.grid-h > div:first-child { padding-left: 14px; font-size: 11px; }
.grid-h .d { font-size: 17px; color: var(--label); }
.grid-h .today, .grid-h .today .d { color: var(--label); font-weight: 700; }
.rows { position: relative; flex: 1; }
.grid-r { border-bottom: 1px solid #EFEFF2; }
.ch { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px; }
.ch .pi { font-size: 26px; }
.ch span { display: flex; flex-direction: column; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ch small { font-size: 11px; color: #6E6E73; font-weight: 400; }
.cell { padding: 6px 4px; border-left: 1px solid #F0F0F3; display: flex; flex-direction: column; gap: 4px; }
.cell.today { background: rgba(0, 0, 0, .022); }
.chip { height: 44px; border-radius: 6px; display: flex; align-items: center; gap: 6px; padding: 0 6px; overflow: hidden; border: 1px solid transparent; }
.chip .th { width: 18px; height: 32px; border-radius: 3px; flex: none; }
.chip .tx { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.chip .t { font-size: 11px; font-weight: 600; }
.chip .s { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip.past { background: #F2F2F7; color: #6E6E73; }
.chip.past .th { background: #D8D8DD; }
.chip.sched { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip.sched .s { color: #D1D1D6; }
.chip.draft { background: #fff; border: 1.5px dashed var(--ink); color: var(--label); }
.chip.draft .s { color: #6E6E73; }
.chip.open { border: 1.5px dashed #C7C7CC; justify-content: center; font-size: 11px; color: #6E6E73; gap: 4px; }
.chip.open::before { content: "+"; font-size: 15px; font-weight: 300; }
.now { position: absolute; top: 0; bottom: 0; left: calc(150px + (100% - 150px) * var(--now, .38)); width: 0; pointer-events: none; }
.now::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #FF3B30; }
.now::after { content: ""; position: absolute; top: -5px; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: #FF3B30; }
.now span { position: absolute; top: -24px; left: 8px; font-size: 11px; font-weight: 600; color: #D70015; white-space: nowrap; }
.g1 { background: linear-gradient(170deg, #E2B467, #8A5A2B); }
.g2 { background: linear-gradient(170deg, #8CC7B2, #2F5E57); }
.g3 { background: linear-gradient(170deg, #9DBDF0, #2F5DA8); }
.g4 { background: linear-gradient(170deg, #EE9A8E, #9C2F3C); }

/* Channels */
.launch { margin-top: 56px; display: flex; justify-content: center; gap: clamp(28px, 6vw, 64px); flex-wrap: wrap; }
.launch figure, .planned figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.launch .pi { font-size: 88px; }
.launch figcaption { font-size: 15px; font-weight: 500; }
.planned-h { margin-top: 56px; font-size: 12px; color: var(--label-2); }
.planned { margin-top: 16px; display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.planned .pi { font-size: 44px; background: #6E6E73; }
.planned figcaption { font-size: 12px; color: var(--label-2); }

/* Statement collapse */
.collapse { position: relative; height: 240vh; background: #fff; }
.collapse-in { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 22px 40px; text-align: center; overflow: hidden; }
.statement { margin: 0; font-size: clamp(44px, 7vw, 96px); font-weight: 600; letter-spacing: -.02em; line-height: 1.02; max-width: 1000px; text-wrap: balance; }
.stage { position: relative; width: 100%; max-width: 1200px; flex: 1; min-height: 280px; max-height: 460px; margin-top: 24px; }
.mw { position: absolute; left: 50%; top: 50%; width: calc(240px * var(--mk, 1)); height: calc(150px * var(--mk, 1)); border-radius: 10px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 14px 34px -12px rgba(0, 0, 0, .2); overflow: hidden; text-align: left; will-change: transform, opacity; transform: translate(-50%, -50%); }
.mw-h { height: 24px; background: #F2F2F5; border-bottom: 1px solid #E5E5EA; display: flex; align-items: center; gap: 5px; padding: 0 8px; }
.mw-h i { width: 7px; height: 7px; border-radius: 50%; background: #D1D1D6; flex: none; }
.mw-h span { font-size: 10px; color: #6E6E73; margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-b { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.mw-b i { height: 6px; border-radius: 3px; background: #EFEFF2; }
.mw-b i:nth-child(1) { width: 70%; background: #E5E5EA; } .mw-b i:nth-child(2) { width: 90%; } .mw-b i:nth-child(3) { width: 55%; } .mw-b i:nth-child(4) { width: 80%; }
.final { position: absolute; left: 50%; top: 50%; width: min(560px, calc(100vw - 44px)); border-radius: 12px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 30px 60px -20px rgba(0, 0, 0, .25); overflow: hidden; opacity: 0; transform: translate(-50%, -50%) scale(.88); text-align: left; }
.final-h { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid #E5E5EA; background: #F7F7F9; }
.final-h i { width: 10px; height: 10px; border-radius: 50%; }
.final-h i:nth-child(1) { background: #FF5F57; } .final-h i:nth-child(2) { background: #FEBC2E; } .final-h i:nth-child(3) { background: #28C840; }
.final-h span { flex: 1; text-align: center; font-size: 12px; font-weight: 600; margin-right: 46px; }
.final-b { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.final-r { display: flex; align-items: center; gap: 8px; }
.final-r .pi { font-size: 18px; }
.final-r div { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.final-r span { height: 18px; border-radius: 4px; background: var(--ink); }
.final-r span.p { background: #F2F2F7; }
.final-r span.d { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.no-motion .mw { display: none; }
.no-motion .final { opacity: 1; transform: translate(-50%, -50%); }
.no-motion .collapse { height: auto; }
.no-motion .collapse-in { position: relative; height: auto; min-height: 720px; }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.tile { background: #fff; border-radius: 28px; padding: clamp(28px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.span4 { grid-column: span 4; } .span2 { grid-column: span 2; } .span3 { grid-column: span 3; } .span6 { grid-column: 1 / -1; }
@media (max-width: 999px) { .span4, .span2 { grid-column: span 6; } }
@media (max-width: 759px) { .span3 { grid-column: span 6; } }
.tile-k { font-size: 21px; font-weight: 600; color: var(--label-2); }
.tile-h { margin: 6px 0 0; font-size: clamp(26px, 2.6vw, 32px); font-weight: 600; letter-spacing: -.01em; line-height: 1.12; max-width: 520px; }
.tile p { margin: 0; font-size: 17px; line-height: 1.47; color: var(--label-2); }
.num { justify-content: center; align-items: center; text-align: center; min-height: 320px; gap: 12px; }
.num-v { font-size: clamp(96px, 11vw, 148px); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.num-c { font-size: 21px; color: var(--label-2); line-height: 1.3; }
.tempo { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.editor { flex: 1 1 260px; background: var(--alt); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.ed-ch { display: flex; align-items: center; gap: 10px; }
.ed-ch .pi { font-size: 28px; }
.ed-ch span { display: flex; flex-direction: column; font-size: 15px; font-weight: 600; }
.ed-ch small, .lab { font-size: 12px; color: var(--label-2); font-weight: 400; }
.lab { display: block; margin-bottom: 8px; }
.days { display: flex; gap: 6px; flex-wrap: wrap; }
.days span { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.times { display: flex; gap: 8px; flex-wrap: wrap; }
.times span { padding: 6px 14px; border-radius: 980px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; }
.times span.add { background: none; border: 1px dashed #C7C7CC; color: var(--label-2); font-weight: 400; }
.heat { flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.heat-top, .heat-leg { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--label-2); }
.heat-leg { justify-content: flex-start; }
.heat-leg span { display: flex; align-items: center; gap: 6px; }
.heat-leg i { width: 10px; height: 10px; border-radius: 3px; background: var(--ink); }
.heat-leg i.qt { background: rgba(29, 29, 31, .12); }
.heat-g { display: flex; flex-direction: column; gap: 3px; }
.heat-r { display: flex; align-items: center; gap: 3px; }
.heat-r b { width: 28px; font-size: 11px; color: var(--label-2); font-weight: 400; flex: none; }
.heat-r i { flex: 1; height: 18px; border-radius: 4px; background: rgba(29, 29, 31, var(--a)); }
.queue { display: flex; flex-direction: column; gap: 10px; }
.q { background: var(--alt); border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.q-th { width: 30px; height: 52px; border-radius: 6px; flex: none; }
.q-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.q-src { font-size: 11px; font-weight: 600; }
.q-title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-slot { font-size: 12px; color: var(--label-2); }
.q-act { display: flex; align-items: center; gap: 12px; flex: none; }
.q-act button { border: none; font: inherit; font-size: 14px; cursor: pointer; }
.q-skip { background: none; color: var(--label-2); padding: 0; }
.q-ok { color: #fff; background: var(--ink); border-radius: 980px; padding: 6px 14px; }
.q-ok:hover { background: #000; }
.q-done { font-size: 14px; font-weight: 600; display: none; align-items: center; gap: 6px; flex: none; }
.q-done i { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; font-style: normal; display: flex; align-items: center; justify-content: center; }
.q-skipped { font-size: 14px; color: var(--label-2); display: none; flex: none; }
.q[data-s="a"] .q-act, .q[data-s="s"] .q-act { display: none; }
.q[data-s="a"] .q-done { display: flex; }
.q[data-s="s"] .q-skipped { display: block; }
@media (max-width: 480px) { .q { flex-wrap: wrap; } .q-act { width: 100%; justify-content: flex-end; } }
.wins { display: flex; flex-direction: column; gap: 18px; }
.wins-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--label-2); }
.win-r { display: flex; flex-direction: column; gap: 7px; }
.win-r div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.win-r em { font-style: normal; color: var(--label-2); margin-right: 10px; }
.win-r strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.win-r .bar { height: 6px; border-radius: 3px; background: #F2F2F7; overflow: hidden; display: block; }
.win-r .bar i { display: block; height: 100%; border-radius: 3px; background: #C7C7CC; }
.win-r.top div span { font-weight: 600; }
.win-r.top .bar i { background: var(--ink); }
.formats-t { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px; }
.formats-t .txt { flex: 1 1 280px; }
.formats-t .tile-h, .formats-t p { max-width: 380px; }
.formats-t p { margin-top: 14px; }
.formats { flex: 2 1 420px; display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 2vw, 24px); min-width: 0; }
.formats figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.frame { height: clamp(200px, 24vw, 340px); border-radius: 18px; background: repeating-linear-gradient(135deg, #EDEDF0 0 10px, #F5F5F7 10px 20px); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .08); display: flex; align-items: center; justify-content: center; max-width: 100%; }
.frame.v { aspect-ratio: 9 / 16; } .frame.p { aspect-ratio: 4 / 5; }
.frame span { font-family: var(--mono); font-size: 11px; color: var(--label-2); text-align: center; padding: 8px; }
.formats figcaption { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.formats .pi { font-size: 20px; }

/* Dark pro chapter */
.sec-dark .eyebrow { color: #F5F5F7; }
.sec-dark .sub { color: #A1A1A6; }
.pill { display: inline-block; margin-top: 18px; font-size: 12px; color: #F5F5F7; border: 1px solid #424245; border-radius: 980px; padding: 4px 12px; }
.pro { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.ptile { background: #1C1C1E; border-radius: 28px; padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 12px; min-height: 220px; min-width: 0; }
.ptile.wide { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 32px; align-items: center; min-height: 0; }
.ptile .tag { font-size: 12px; color: #A1A1A6; }
.ptile h3 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.ptile p { margin: 0; font-size: 17px; line-height: 1.47; color: #A1A1A6; flex: 1; }
.ptile code { align-self: flex-start; font-family: var(--mono); font-size: 13px; color: #F5F5F7; background: #000; border-radius: 8px; padding: 6px 10px; }
.ptile .lead { flex: 1 1 260px; }
.ptile .lead h3 { font-size: 21px; }
.ptile .lead p { margin-top: 10px; max-width: 340px; }
.term { flex: 2 1 520px; min-width: 0; margin: 0; background: #000; border-radius: 16px; padding: 22px 24px; font-family: var(--mono); font-size: 13px; line-height: 1.75; overflow-x: auto; white-space: pre; color: #D1D1D6; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12); }
.term .p { color: #86868B; } .term .w { color: #F5F5F7; } .term .m { color: #A1A1A6; }
.pro-note { margin: 40px auto 0; text-align: center; font-size: 12px; color: #A1A1A6; }

/* Proof */
.proof { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 48px 32px; }
.proof div { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.proof b { font-size: 96px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.proof span { font-size: 17px; color: var(--label-2); max-width: 220px; line-height: 1.35; }

/* FAQ */
.faq { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 48px 64px; }
.faq .h2 { flex: 1 1 280px; }
.faq-l { flex: 2 1 520px; border-top: 1px solid var(--sep); min-width: 0; }
.faq details { border-bottom: 1px solid var(--sep); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-size: clamp(19px, 1.7vw, 21px); font-weight: 600; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; font-weight: 300; color: var(--label-2); line-height: 1; transition: transform .4s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 48px 28px 0; font-size: 17px; line-height: 1.47; color: var(--label-2); text-wrap: pretty; }
.faq details p a { text-decoration: underline; }

/* Closing */
.closing .h2 { font-size: clamp(40px, 5vw, 64px); letter-spacing: -.015em; line-height: 1.05; }

/* Footer */
.foot { background: var(--alt); padding: 0 22px 32px; font-size: 12px; color: var(--label-2); line-height: 1.5; }
.foot-in { max-width: 980px; margin: 0 auto; border-top: 1px solid var(--sep); padding-top: 28px; }
.foot-about { margin: 0 0 24px; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; }
.foot-cols div { display: flex; flex-direction: column; gap: 8px; }
.foot-cols h2 { margin: 0; font-size: 12px; font-weight: 600; color: var(--label); }
.foot a { color: var(--label-2); }
.foot a:hover { color: var(--label); }
.foot-bot { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--sep); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.foot-bot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.foot-bot nav a { color: var(--label); }
.page-foot .foot-in { border-top: none; }

/* Floating "Talk to us" */
.talk { position: fixed; right: 22px; bottom: 22px; z-index: 70; font-size: 14px; font-weight: 500; color: var(--label); background: #fff; border-radius: 980px; padding: 12px 18px 12px 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 8px 24px -6px rgba(0, 0, 0, .2); }
.talk:hover { text-decoration: none; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 12px 28px -6px rgba(0, 0, 0, .26); }
.talk::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }

/* Document pages (privacy, terms, contact, 404) */
.doc { padding: clamp(56px, 8vw, 96px) 22px clamp(72px, 9vw, 120px); }
.doc-in { max-width: 720px; margin: 0 auto; }
.doc h1 { margin: 0; font-size: clamp(40px, 5vw, 56px); font-weight: 600; letter-spacing: -.015em; line-height: 1.07; }
.doc .meta { margin: 14px 0 0; font-size: 14px; color: var(--label-2); }
.doc .lede { margin: 28px 0 0; font-size: 21px; line-height: 1.42; color: var(--label-2); }
.doc h2 { margin: 48px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.doc h3 { margin: 28px 0 0; font-size: 19px; font-weight: 600; }
.doc p, .doc li { font-size: 17px; line-height: 1.6; }
.doc p { margin: 14px 0 0; }
.doc ul { margin: 14px 0 0; padding-left: 22px; }
.doc li + li { margin-top: 8px; }
.doc a { text-decoration: underline; text-underline-offset: 2px; }
.doc .box { margin-top: 20px; background: var(--alt); border-radius: 18px; padding: 20px 22px; }
.doc .box p:first-child { margin-top: 0; }
.mail { display: inline-block; margin-top: 8px; font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -.01em; user-select: all; -webkit-user-select: all; }
.cards { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card { background: var(--alt); border-radius: 28px; padding: 28px; }
.card h2 { margin: 0; font-size: 21px; }
.card p { margin: 8px 0 0; color: var(--label-2); }
.card .addr { margin-top: 16px; font-size: 19px; font-weight: 600; color: var(--label); user-select: all; -webkit-user-select: all; word-break: break-all; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.doc code { font-family: var(--mono); font-size: 15px; overflow-wrap: anywhere; }
.doc p, .doc li { overflow-wrap: break-word; }
.side-row.sel .rate { color: #545458; }