/* Marketing-site layout: the top bar with its menus, the footer, and the
 * section scaffolding every public page shares. Tokens come from ui.css. */

/* Widened from 1180 on 2026-09-05: at 1680 that left 243px of dead space on
 * one side and 258 on the other, and squeezed the top bar hard enough that
 * "Use Cases" and "Works with your model" wrapped onto two lines.
 *
 * Safe to widen because every prose block here carries its own cap in `ch`
 * -- .sec-head p, .split p, .page-hero .lede, .faq-list, .prose, .log -- so
 * this stretches the GRIDS (features, split, quotes) and leaves reading
 * measure alone. Raising it without those caps would have traded dead margins
 * for unreadable line lengths. */
.wrap{max-width:1440px; margin:0 auto; padding:0 24px}

/* ---------- top bar ---------- */
.top{position:sticky; top:0; z-index:40; background:var(--bar-bg); backdrop-filter:saturate(1.3) blur(12px); -webkit-backdrop-filter:saturate(1.3) blur(12px); border-bottom:1px solid transparent; transition:border-color .2s ease}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex; align-items:center; gap:14px; height:64px}
.top nav{display:flex; align-items:center; gap:2px; margin-left:10px}
.nav-item{position:relative}
.nav-item > a, .nav-item > button{display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px; border:0; background:transparent; border-radius:var(--r-pill); color:var(--text); font-size:14.5px; font-weight:500; text-decoration:none; font-family:inherit; cursor:pointer}
.nav-item > a:hover, .nav-item > button:hover, .nav-item.open > button{background:var(--white)}
.nav-item > button svg{width:12px; height:12px; transition:transform .15s ease; color:var(--muted)}
.nav-item.open > button svg{transform:rotate(180deg)}
.nav-item .menu{position:absolute; left:0; top:calc(100% + 8px); min-width:290px; background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:8px; display:none; z-index:50}
.nav-item.open .menu{display:block}
.menu a{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--text)}
.menu a:hover{background:var(--bg)}
.menu a .t{font-size:14px; font-weight:600}
.menu a .d{font-size:12.5px; color:var(--muted); line-height:1.35}
.nav-item.hl > a{color:var(--accent-ink); font-weight:600}
.nav-item.hl > a::before, .nav-item.hl > a::after{content:""; width:4px; height:4px; border-radius:1px; background:var(--gold); display:inline-block}
.top .right{margin-left:auto; display:flex; align-items:center; gap:10px}
.top .right .textlink{white-space:nowrap}
.burger{display:none; width:40px; height:40px; border:1px solid var(--line-strong); border-radius:10px; background:var(--white); align-items:center; justify-content:center; margin-left:auto}
.mobile-menu{display:none; border-top:1px solid var(--line); background:var(--bg); padding:10px 24px 20px}
.mobile-menu.open{display:block}
.mobile-menu .group{padding:10px 0; border-bottom:1px solid var(--line)}
.mobile-menu .group .g{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:6px}
.mobile-menu a{display:block; padding:8px 0; text-decoration:none; color:var(--text); font-size:15px}
.mobile-menu .cta{display:flex; gap:10px; padding-top:16px}
@media (max-width:980px){
  .top nav, .top .right{display:none}
  .burger{display:inline-flex}
}

/* ---------- page scaffolding ---------- */
section.block{padding:96px 0}
section.block.tight{padding:64px 0}
.sec-head{max-width:720px; margin:0 auto 44px; text-align:center}
.sec-head h2{font-size:clamp(28px, 3.4vw, 40px); letter-spacing:-.02em}
.sec-head p{color:var(--text-2); font-size:16px; margin-top:14px; max-width:56ch; margin-left:auto; margin-right:auto}
.eyebrow-tag{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-ink)}
.eyebrow-tag::before{content:""; width:18px; height:2px; background:var(--gold)}

/* sub-page hero */
.page-hero{position:relative; overflow:hidden; background:var(--bg-2); padding:84px 0 72px; text-align:center}
.page-hero .inner{position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 24px}
.page-hero h1{font-size:clamp(34px, 5vw, 56px); line-height:1.06; letter-spacing:-.025em; margin-top:18px}
.page-hero .lede{font-size:18px; line-height:1.5; color:var(--text-2); max-width:56ch; margin:18px auto 0}
.page-hero .cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px}
.page-hero .blob.teal{width:440px; height:440px; left:-140px; top:20%}
.page-hero .blob.sky{width:640px; height:320px; left:50%; transform:translateX(-50%); bottom:-160px}
.page-hero .blob.gold{width:420px; height:300px; right:-120px; top:-40px; opacity:.55}

/* feature cards */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.features.two{grid-template-columns:repeat(2,1fr)}
.features.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .features, .features.four{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .features, .features.two, .features.four{grid-template-columns:1fr} }
.feature{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 26px 28px; transition:transform .2s ease, box-shadow .2s ease}
.feature:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.feature .icon{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; background:var(--accent-soft)}
.feature .icon svg{width:20px; height:20px}
.feature h3{font-size:19px; margin-bottom:8px}
.feature p{font-size:14px; line-height:1.5; color:var(--text-2)}
.feature ul{margin:12px 0 0; padding-left:18px; color:var(--text-2); font-size:14px}
.feature li{margin-bottom:4px}

/* alternating text + art */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:56px 0}
.split.rev > .art-tile{order:-1}
@media (max-width:820px){ .split{grid-template-columns:1fr; gap:28px} .split.rev > .art-tile{order:0} }
.split h2{font-size:clamp(26px, 3vw, 36px); letter-spacing:-.02em; margin-top:12px}
.split p{color:var(--text-2); font-size:16px; margin-top:14px; max-width:52ch}
.split ul{margin:16px 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.split li{display:flex; gap:10px; align-items:flex-start; color:var(--text-2); font-size:15px}
.split li::before{content:""; flex:none; width:16px; height:16px; margin-top:3px; border-radius:50%; background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238F6F33' stroke-width='2'%3E%3Cpath d='M4 8.5l2.8 2.8L12 5.5'/%3E%3C/svg%3E") center/11px no-repeat}
.art-tile{border-radius:16px; overflow:hidden; background:linear-gradient(160deg,#EFEAE1 0%, var(--sky) 100%); min-height:320px; display:flex; align-items:center; justify-content:center; padding:32px}
.art-tile.gold{background:linear-gradient(160deg,#EFEAE1 0%, var(--lime) 100%)}
.art-tile.slate{background:linear-gradient(160deg,#EFEAE1 0%, var(--teal) 100%)}
.art-tile.taupe{background:linear-gradient(160deg,#EFEAE1 0%, var(--plum) 100%)}
.art-tile svg{width:min(260px, 80%); height:auto}
.ui{fill:#FFFFFF} .ui-line{fill:#DED5C7} .ui-ink{fill:#0F2A44} .ui-blue{fill:#B08A44} .ui-teal{fill:#A9B8CB} .ui-lime{fill:#D4BE86} .ui-peach{fill:#D2B47A}
.ui-txt{font:600 9px var(--font-text); fill:#0F2A44} .ui-txt.mute{fill:#7A8CA3; font-weight:500} .ui-txt.mono{font:600 8px ui-monospace,SFMono-Regular,Menlo,monospace}

/* quotes (use cases) */
.quotes{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media (max-width:760px){ .quotes{grid-template-columns:1fr} }
.quote{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:26px; display:flex; flex-direction:column; gap:12px}
.quote .who{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted)}
.quote .who .av{width:32px; height:32px; border-radius:8px; background:var(--navy); color:var(--cream); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600}
.quote blockquote{margin:0; font-family:var(--font-display); font-size:19px; line-height:1.35; color:var(--text)}
.quote p{font-size:14px; color:var(--text-2)}

/* tables */
.table{width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; font-size:14px}
.table-wrap{overflow-x:auto; border-radius:14px}
.table th, .table td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.table th{font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); background:var(--bg)}
.table tr:last-child td{border-bottom:0}
.table td.y{color:var(--good); font-weight:600}
.table td.n{color:var(--muted)}

/* faq */
.faq-list{max-width:760px; margin:0 auto; border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 4px; font-family:var(--font-display); font-size:18px; color:var(--text)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+"; font-size:22px; color:var(--muted); flex:none; transition:transform .2s ease}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary svg{display:none}
.faq-list .answer{padding:0 4px 22px; color:var(--text-2); font-size:15px; max-width:64ch}
.faq-list code, .prose code{background:var(--sunken); padding:1px 6px; border-radius:4px; font-size:13px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* prose (docs, legal) */
.prose{max-width:760px; padding-top:56px; padding-bottom:96px}
.prose h1{font-size:clamp(30px, 4vw, 44px); letter-spacing:-.025em; margin-bottom:8px}
.prose .updated{color:var(--muted); font-size:14px; margin:0 0 32px}
.prose h2{font-size:22px; margin:40px 0 10px; letter-spacing:-.015em}
.prose h3{font-size:17px; margin:26px 0 8px; font-family:var(--font-text); font-weight:600}
.prose p, .prose li{color:var(--text-2); font-size:16px; line-height:1.65}
.prose p{margin:0 0 14px}
.prose ul, .prose ol{margin:0 0 16px; padding-left:22px}
.prose li{margin-bottom:6px}
.prose a{color:var(--accent-ink)}
.prose pre{background:var(--code-bg); color:var(--code-fg); border-radius:12px; padding:14px 16px; overflow-x:auto; font-size:13px; line-height:1.7; margin:0 0 16px}
.prose pre code{background:transparent; padding:0; color:inherit; font-size:inherit}
.prose .callout{background:var(--white); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:0 12px 12px 0; padding:14px 16px; margin:0 0 28px; color:var(--text-2)}
.prose .callout strong{color:var(--text)}
.prose .legal-note{border-top:1px solid var(--line); margin-top:48px; padding-top:20px; font-size:14px; color:var(--muted)}
.prose .legal-note p{font-size:14px; color:var(--muted)}
.prose table{width:100%; border-collapse:collapse; font-size:14px; margin:0 0 18px}
.prose th, .prose td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--text-2)}
.prose th{color:var(--text); font-weight:600}
.docs-layout{display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:start}
.docs-layout .prose{padding-top:0; max-width:none}
.docs-nav{position:sticky; top:84px; font-size:14px; display:flex; flex-direction:column; gap:2px}
.docs-nav a{padding:6px 10px; border-radius:8px; text-decoration:none; color:var(--text-2)}
.docs-nav a:hover{background:var(--white); color:var(--text)}
@media (max-width:820px){ .docs-layout{grid-template-columns:1fr} .docs-nav{position:static; flex-direction:row; flex-wrap:wrap} }

/* changelog */
.log{max-width:760px; margin:0 auto}
.log .entry{display:grid; grid-template-columns:130px 1fr; gap:24px; padding:26px 0; border-top:1px solid var(--line)}
@media (max-width:600px){ .log .entry{grid-template-columns:1fr; gap:6px} }
.log .date{font-size:13px; color:var(--muted); padding-top:4px; font-variant-numeric:tabular-nums}
.log h3{font-size:19px; margin-bottom:6px}
.log p, .log li{color:var(--text-2); font-size:15px}
.log ul{margin:8px 0 0; padding-left:18px}
.log .tag{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft); border-radius:var(--r-pill); padding:2px 8px; margin-left:8px; vertical-align:middle}

/* send-off */
.sendoff{position:relative; overflow:hidden; background:var(--bg-2); text-align:center; padding:130px 0}
.sendoff .blob.teal{width:520px; height:400px; left:-120px; bottom:-200px; opacity:.6}
.sendoff .blob.sky{width:700px; height:340px; left:50%; transform:translateX(-50%); top:-160px}
.sendoff .blob.plum{width:400px; height:300px; right:-120px; bottom:-120px; opacity:.55}
.sendoff .inner{position:relative; z-index:1}
.sendoff h2{font-size:clamp(30px, 4vw, 48px); letter-spacing:-.025em}
.sendoff p{color:var(--text-2); margin:14px auto 30px; max-width:46ch; font-size:16px}

/* ---------- footer ---------- */
.site-footer{background:var(--navy); color:var(--cream); padding:56px 0 28px}
.site-footer .cols{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:28px; padding-bottom:36px; border-bottom:1px solid rgba(242,237,229,.14)}
@media (max-width:900px){ .site-footer .cols{grid-template-columns:repeat(2,1fr)} }
.site-footer .logo{color:var(--cream)}
.site-footer .tag{font-size:13.5px; color:#C5CFDD; margin-top:12px; max-width:30ch; line-height:1.5}
.site-footer h4{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:#C5CFDD; margin-bottom:12px; font-family:var(--font-text); font-weight:600}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.site-footer a{color:var(--cream); text-decoration:none; font-size:14px; opacity:.9}
.site-footer a:hover{opacity:1; text-decoration:underline; text-decoration-color:var(--gold)}
.site-footer .bottom{display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; padding-top:22px; font-size:13px; color:#C5CFDD}
.site-footer .bottom span.gold{color:var(--gold)}


/* ---------------------------------------------------------------------------
   Dark theme, for the pieces this stylesheet owns.
   --------------------------------------------------------------------------- */
:root{ --bar-bg:rgba(242,237,229,.84); }
:root[data-theme="dark"]{ --bar-bg:rgba(42,45,49,.86); }

/* The tiles behind the product drawings are lit for a cream page. The drawings
   themselves stay light on purpose -- they are meant to read as a screen. */
:root[data-theme="dark"] .art-tile{background:linear-gradient(160deg,#2F343A 0%, #3C4A5C 100%)}
:root[data-theme="dark"] .art-tile.gold{background:linear-gradient(160deg,#2F343A 0%, #4A4331 100%)}
:root[data-theme="dark"] .art-tile.slate{background:linear-gradient(160deg,#2F343A 0%, #39505F 100%)}
:root[data-theme="dark"] .art-tile.taupe{background:linear-gradient(160deg,#2F343A 0%, #3F3A44 100%)}
:root[data-theme="dark"] .ui{fill:#EDE9E2}
:root[data-theme="dark"] .ui-line{fill:#C3BCB1}
:root[data-theme="dark"] .table td.y{color:var(--good)}

/* The theme control sits with the other nav actions. */
.theme-toggle{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--line); border-radius:var(--r-pill); background:transparent; color:var(--text-2)}
.theme-toggle:hover{background:var(--white); color:var(--text); border-color:var(--line-strong)}
.theme-toggle svg{width:17px; height:17px}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:block}
:root[data-theme="dark"] .theme-toggle .sun{display:none}