/* Linear-style theme layer (see DESIGN.md): loaded after styles.css and fx.css.
   Flat surfaces, hairlines, one scarce coral accent, two-tone headlines instead of the serif. */
:root {
  --bg: #08090a;
  --surface-1: #0f1011;
  --surface-2: #141516;
  --surface-3: #1b1c1e;
  --panel: var(--surface-1);
  --panel-2: var(--surface-2);
  --text: #f7f8f8;
  --ink-muted: #d0d6e0;
  --muted: #8a8f98;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .13);
  --accent-soft: #ff8f8f;
  --ok: #4cc38a;
  --radius: 12px;
  --text-hero: clamp(2.6rem, 1.4rem + 4.4vw, 5rem);
  --text-display: clamp(2rem, 1.2rem + 2.9vw, 3.5rem);
  --text-lead: clamp(1.02rem, .97rem + .25vw, 1.125rem);
  --faint: #7d828b; /* 5:1 on canvas, so it can carry small text */
  /* Linear-style frame: 1280px content, 56px menu bar, 96px between sections. */
  --wrap: min(1280px, 100% - 2 * var(--gutter));
  --header-h: 56px;
  --banner-h: 36px;
  --section-y: clamp(4rem, 2.5rem + 4vw, 6rem);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.has-banner { --header-h: calc(56px + var(--banner-h)); }
.header-inner { height: 56px; }
body { font-feature-settings: "cv11", "ss01"; letter-spacing: -.005em; }
h1 { letter-spacing: -.0375em; line-height: 1.05; }
h2 { letter-spacing: -.032em; line-height: 1.1; }
h3 { letter-spacing: -.018em; font-weight: 500; }
.section { padding-block: var(--section-y); }

/* Two-tone headlines: the accent clause drops to the subtle ink instead of a coloured italic serif. */
em.serif, .serif, .statement em,
.page-hero h1 .serif, .display .serif, .cta-band .serif, .fx-section h2 .serif {
  font-family: var(--font-sans); font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--muted);
}
.hero h1 .serif { background: none; color: var(--muted); padding: 0; }

.eyebrow { font: 500 .8125rem/1.4 var(--font-sans); letter-spacing: .025em; text-transform: none; color: var(--muted); gap: .55rem; }
.eyebrow::before { width: 6px; height: 6px; border-radius: 1px; background: rgb(var(--accent-rgb)); }

/* Buttons: 8px corners, no lift or coloured glow. */
/* Compact like Linear (14px label), but never under 40px tall for touch. */
.btn { border-radius: 8px; min-height: 40px; padding: .55rem 1rem; font-size: .875rem; box-shadow: none; transition: background-color .2s, border-color .2s, color .2s; }
.btn:hover { transform: none; box-shadow: none; background: #fff; }
.btn:active { transform: none; background: var(--ink-muted); }
.btn-glass { background: var(--surface-2); border-color: var(--line-strong); backdrop-filter: none; }
.btn-glass:hover { background: var(--surface-3); border-color: rgba(255,255,255,.2); }
.btn-small { padding: .5rem .85rem; border-radius: 7px; font-size: .84rem; }
:focus-visible { outline-color: rgb(var(--accent-rgb)); }

/* Header: solid hairline bar once scrolled. */
.site-header.scrolled, .site-header:has(.open) { background: rgba(8, 9, 10, .86); backdrop-filter: blur(12px); }
.has-banner .promo-bar { background: var(--surface-1); }
.promo-bar::before { display: none; }
.promo-tag { background: var(--surface-3); color: var(--ink-muted); border-radius: 999px; padding: .28rem .55rem; font-family: var(--font-sans); letter-spacing: .02em; }
.promo-cta { border-radius: 6px; }
.promo-cta:hover { box-shadow: none; }

/* Surfaces */
.panel { background: var(--surface-1); border-color: var(--line); box-shadow: var(--edge); }
.page-hero { padding: calc(var(--header-h) + clamp(3.5rem, 2.5rem + 4vw, 6rem)) 0 clamp(2.5rem, 2rem + 2vw, 4rem); }
.page-hero::before { display: none; }
.page-hero h1 { font-size: var(--text-display); }
.checklist li::before { border-radius: 5px; border-color: var(--line-strong); background-color: var(--surface-2); }
.chip, .link-row a { border-radius: 7px; }
.svc-card::after { display: none; }
.svc-card:hover { transform: none; background: var(--surface-2); border-color: var(--line-strong); }
.why-card { background: var(--surface-1); }
.why-card::after { display: none; }

/* Product frames (mockups): flat, hairline, no tilt or coloured shadow. */
.mock { border-radius: 16px; border-color: var(--line-strong); background: var(--surface-1); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 80px -40px rgba(0,0,0,.9); }
.win-bar { background: var(--surface-2); }
.console, .console:hover { transform: none; }

/* Remaining serif spots become plain Inter or mono. */
.xgrade { font: 500 .8rem var(--font-mono); }
.xnext-gain { font: 600 1rem var(--font-mono); }
.prose blockquote { font: 500 1.25rem/1.45 var(--font-sans); letter-spacing: -.015em; background: var(--surface-1); }

/* Closing call to action: a lifted panel, heading and copy left, buttons right. */
.cta-band { text-align: left; padding-block: var(--section-y); overflow: visible; }
.cta-band::before, .cta-band::after { display: none; }
.cta-band .wrap { display: grid; gap: .5rem 3rem; align-items: center; padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  background: var(--surface-1); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--edge); }
.cta-band h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.75rem); letter-spacing: -.022em; max-width: none; margin: 0; }
.cta-band .lead { margin: 0; font-size: 1rem; }
.cta-band .actions { justify-content: flex-start; margin-top: 1rem; }
@media (min-width: 860px) {
  .cta-band .wrap { grid-template-columns: 1fr auto; }
  .cta-band .actions { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}

/* Compact footer: small subtle type, 64px of breathing room. */
.site-footer { padding-block: 4rem 2rem; font-size: .875rem; }
.footer-title { font-size: 1rem; letter-spacing: -.01em; margin-bottom: .6rem; }
.footer-lead { font-size: .875rem; line-height: 1.7; }
.site-footer address { font-size: .875rem; }
.footer-grid h3 { font: 500 .8125rem/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink-muted); margin-bottom: .8rem; }
.copyright { margin-top: 3rem; font-size: .75rem; }

/* Status tags inside product frames: quiet pills, not coral. */
.xnext-tag { background: var(--surface-3); color: var(--ink-muted); border-radius: 999px; }

/* Vision reasons: a calm 3-column grid of feature cards with a small line icon (no stacked deck, blur or glow). */
.why-stack { display: grid; height: auto; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.why-stack .why-card { --open: 1; flex: none; margin: 0; z-index: auto; box-shadow: var(--edge); padding: 1.5rem; gap: .9rem; grid-template-rows: none; cursor: auto; }
.why-stack .why-card:is(:hover, :focus-visible) { border-color: var(--line-strong); background: var(--surface-2); }
.why-stack .why-card::before { display: none; }
.why-stack .why-side { display: none; }
.why-stack .why-body { width: auto; opacity: 1; transform: none; align-self: start; }
.why-stack .why-body h3 { font-size: 1.125rem; margin-bottom: .45rem; }
.why-stack .why-body p { color: var(--muted); font-size: .92rem; }
.why-stack .why-card .why-num { position: absolute; top: 1.5rem; right: 1.5rem; font: 500 .75rem var(--font-mono); color: var(--faint); text-shadow: none; }
.why-stack .why-art { position: static; width: 36px; height: 36px; transform: none; opacity: 1; stroke: var(--ink-muted); }
.why-stack .why-art > * { stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.js .why-stack .why-card[data-reveal] { filter: none; transform: translateY(12px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), background-color .2s, border-color .2s; }
.js .why-stack .why-card[data-reveal].in { transform: none; }

/* Exposure pricing: three cards, the live plan lifted one surface step. */
@media (min-width: 900px) { .exp-plans { grid-template-columns: repeat(3, 1fr); } }
.exp-plan { padding: 1.5rem; box-shadow: var(--edge); }
.exp-plan.is-live { background: var(--surface-2); border-color: var(--line-strong); }
.exp-plan .meta { align-self: flex-start; padding: .2rem .55rem; border-radius: 999px; background: var(--surface-3); color: var(--ink-muted); font: 500 .75rem var(--font-sans); }
.exp-price { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); letter-spacing: -.03em; }

/* Gentler entrances everywhere */
.js [data-reveal] { transform: translateY(12px); transition-duration: .7s; }
.why-stack:not(:hover, :focus-within) .why-card:first-child { border-color: var(--line); }
@media (min-width: 900px) { .why-stack { grid-template-columns: repeat(3, 1fr); } }

/* Shared page components (DESIGN.md): sections, heads, splits, cards, product frames, stats, rows. */
.l-section { padding-block: var(--section-y); border-top: 1px solid var(--line); }
.l-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 1.8rem + 1.5vw, 3rem); }
.l-section h2, .l-head h2 { font-size: var(--text-display); margin-bottom: 1.1rem; }
.l-split { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
@media (min-width: 1000px) { .l-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.l-split > * { min-width: 0; }
.actions { margin-top: 2rem; }

/* Hero: headline, then the product frame running wide below it. */
.l-hero { padding: calc(var(--header-h) + clamp(3.5rem, 2.5rem + 4vw, 6.5rem)) 0 var(--section-y); }
.l-hero-copy { max-width: min(var(--wrap), 62rem); }
.l-hero h1 { font-size: var(--text-hero); max-width: 16ch; margin-bottom: 1.4rem; }
.l-hero .lead { max-width: 40rem; }
/* Product frames sit inside a padded lifted panel, as Linear frames its screenshots. */
.l-shot { min-width: 0; padding: clamp(.75rem, .5rem + 1vw, 1.5rem); background: var(--surface-1); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--edge); }
.l-shot .mock { border-radius: 12px; box-shadow: none; background: var(--bg); }
.l-hero .l-shot { margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }


/* Vendor logos: a quiet static row. */
.l-vendors { padding-block: 2.6rem 3rem; border-top: 1px solid var(--line); }
.l-vendors-label { text-align: center; font-size: .85rem; color: var(--muted); margin-bottom: 1.6rem; }
.l-vendors ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.6rem clamp(2rem, 5vw, 4rem); list-style: none; padding: 0; }
.l-vendors img { height: 22px; width: auto; opacity: .5; filter: grayscale(1) brightness(2); transition: opacity .2s; }
.l-vendors a:hover img { opacity: .9; }

/* Exposure points */
.l-points { list-style: none; padding: 0; margin-top: 1.8rem; display: grid; gap: 0; border-top: 1px solid var(--line); }
.l-points li { display: grid; gap: .15rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.l-points strong { font-weight: 500; font-size: .95rem; }
.l-points span { color: var(--muted); font-size: .9rem; }

/* Cards */
.l-card { display: flex; flex-direction: column; height: 100%; background: var(--surface-1); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--edge); text-decoration: none; color: inherit;
  transition: background-color .2s, border-color .2s; }
.l-card:hover { color: inherit; background: var(--surface-2); border-color: var(--line-strong); }

/* Services: 2×2 cards, each ending in a cropped product frame. */
.l-svc-grid { list-style: none; padding: 0; display: grid; gap: 1rem; }
/* Grid items default to min-width:auto, which lets the mockups' nowrap lines widen the cards. */
.l-svc-grid > li { min-width: 0; }
@media (min-width: 900px) { .l-svc-grid { grid-template-columns: 1fr 1fr; } }
.l-svc { position: relative; overflow: hidden; padding: 1.5rem 1.5rem 0; }
.l-svc-num { font: 500 .75rem var(--font-mono); color: rgb(var(--accent-rgb)); margin-bottom: .9rem; }
.l-svc h3 { font-size: 1.375rem; margin-bottom: .5rem; }
.l-svc p { color: var(--muted); font-size: .93rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.l-svc-link { margin-top: .9rem; font-size: .88rem; font-weight: 500; color: var(--ink-muted); }
.l-svc-link span { display: inline-block; transition: transform .2s; }
.l-svc:hover .l-svc-link span { transform: translateX(3px); }
.l-svc-shot { margin: 1.5rem -1px 0 1.5rem; height: 230px; overflow: hidden; pointer-events: none;
  mask-image: linear-gradient(180deg, #000 55%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); }
.l-svc-shot .mock { border-radius: 12px 0 0 0; border-right: 0; font-size: .76rem; box-shadow: none; }
.l-svc-shot .term-body { min-height: 0; }

/* Stats: big numbers split by hairlines */
.l-stats { display: grid; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .l-stats { grid-template-columns: repeat(3, 1fr); } .l-stats > div + div { border-left: 1px solid var(--line); } }
@media (max-width: 759px) { .l-stats > div + div { border-top: 1px solid var(--line); } }
.l-stats > div { padding: 2rem 1.6rem 2.2rem; }
.l-stats > div:first-child { padding-left: 0; }
.l-stats dt { font: 600 clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem)/1 var(--font-sans); letter-spacing: -.045em; margin-bottom: .8rem; }
.l-stats dd { margin: 0; color: var(--muted); font-size: .93rem; max-width: 28ch; }

/* Challenges: table-like rows */
.l-rows { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.l-row { display: grid; gap: .8rem 2.5rem; padding: 1.8rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .l-row { grid-template-columns: 11rem 1fr 1fr; } }
.l-row-tag { font: 500 .78rem/1.8 var(--font-mono); color: var(--faint); }
.l-row h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.l-row p { color: var(--muted); font-size: .92rem; }
.l-row .l-row-fix { color: var(--ink-muted); }
.l-row .l-row-out { margin-top: .5rem; font-size: .85rem; color: var(--faint); }

/* Compliance frameworks */
.l-frameworks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.l-frameworks li { padding: .95rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-1); font: 500 .82rem var(--font-mono); color: var(--ink-muted); }

/* Gentler entrance than the old pages */
.js .l-section [data-reveal] { transform: translateY(12px); transition-duration: .7s; }
.js .l-section [data-reveal].in { transform: none; }

/* Inner pages: header flows straight into content; sections carry the hairlines. */
.page-hero { border-bottom: 0; }
.page-hero .lead { max-width: 40rem; }
.l-first { border-top: 0; padding-top: 0; }
.l-split-top { align-items: start; }
.l-prose { margin-top: 1.5rem; }
.statement { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height: 1.35; letter-spacing: -.022em; max-width: 34ch; }
.btn-ghost { background: transparent; color: var(--ink-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

/* Service pages: actions and a wide product frame right under the header. */
.l-hero-tail { padding-bottom: var(--section-y); }
.l-hero-tail .actions { margin: 0 0 clamp(2.5rem, 2rem + 2vw, 4rem); }
.l-feature-grid, .l-related-grid { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.l-feature-grid > li, .l-related-grid > li { min-width: 0; }
.l-feature { padding: 1.5rem; gap: .9rem; }
.l-feature-num { font: 500 .75rem var(--font-mono); color: rgb(var(--accent-rgb)); }
.l-feature p { color: var(--ink-muted); font-size: .95rem; line-height: 1.5; }
.l-related { padding: 1.5rem; gap: .5rem; }
.l-related h3 { font-size: 1.125rem; }
.l-related p { color: var(--muted); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.l-related .l-svc-link { margin-top: auto; padding-top: .6rem; }
.l-related:hover .l-svc-link span { transform: translateX(3px); }
.l-note { margin-top: 2rem; padding: 1.5rem; gap: 1rem; }
.l-note p { color: var(--muted); font-size: .93rem; }
.l-note strong { color: var(--text); font-weight: 500; }
.l-note .actions { margin: 0; }

/* Forms (Linear text-input): surface-1, 8px corners, hairline, quiet focus ring. */
.contact-form input, .contact-form textarea { border-radius: 8px; padding: .6rem .8rem; border-color: var(--line-strong); background: var(--surface-1); font-size: .95rem; }
.contact-form input:focus, .contact-form textarea:focus { border-color: rgba(255,255,255,.28); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .25); }
.contact-form label { font-size: .84rem; color: var(--ink-muted); }
.contact-card .big { font-size: 1.15rem; }
.form-status { color: var(--ink-muted); }

/* Blog and shop: flat cards, no lift, no coloured hover. */
.post-card img, .product-card .shot, .gallery img, .post-cover { background: var(--surface-1); border-color: var(--line); }
.post-card a:hover img, .product-card a:hover .shot { transform: none; border-color: var(--line-strong); }
.post-card a:hover h2 { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .2em; }
.post-card h2 { font-size: 1.2rem; letter-spacing: -.018em; font-weight: 500; }
.post-card-featured h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 600; }
.product-card .shot img { filter: none; }
.post-header h1 { font-size: var(--text-display); }

/* Exposure page: product frame under the header */
/* Two-column sections carry longer headlines: one step down the scale (display-md). */
.l-split-top h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing: -.028em; }

/* Hero light (our take on Linear's spotlight): a cool graphite glow rising from below the product frame,
   with a faint coral ember off-centre and a soft horizon line. Monochrome-first, no colour wash. */
.l-hero { position: relative; isolation: isolate; overflow: hidden; }
.l-hero::before { content: ''; position: absolute; z-index: -1; inset: 30% -10% 0; pointer-events: none;
  background:
    radial-gradient(46% 58% at 50% 100%, rgba(214, 222, 235, .22), transparent 72%),
    radial-gradient(24% 30% at 74% 94%, rgb(var(--accent-rgb) / .14), transparent 70%),
    radial-gradient(75% 45% at 50% 100%, rgba(255, 255, 255, .05), transparent 80%); }
.l-hero::after { content: ''; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent); }
.page-hero { position: relative; isolation: isolate; }
.page-hero::after { content: ''; position: absolute; z-index: -1; inset: 0 -10% -40% 30%; pointer-events: none;
  background: radial-gradient(45% 60% at 70% 30%, rgba(214, 222, 235, .06), transparent 70%); }

/* Product frames dissolve into the page at their far edges, as Linear's screenshots do. */
.l-shot { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.l-split .l-shot {
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%), linear-gradient(180deg, #000 74%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 82%, transparent 100%), linear-gradient(180deg, #000 74%, transparent 100%);
  mask-composite: intersect; }
.l-hero .l-shot { -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }
@media (max-width: 999px) { .l-split .l-shot { -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, #000 74%, transparent 100%); } }

/* Legal pages: a sticky "On this page" index on the left; a collapsible panel on phones. */
.legal-grid { display: grid; gap: 2rem; }
.legal .prose [id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
@media (prefers-reduced-motion: no-preference) { html:has(.legal-index) { scroll-behavior: smooth; } }
.legal-index { background: var(--surface-1); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--edge); padding: .9rem 1rem; }
.legal-index summary { font: 500 .8125rem var(--font-sans); color: var(--ink-muted); cursor: pointer; list-style-position: inside; }
.legal-index ol { list-style: none; padding: 0; margin: .9rem 0 .2rem; border-left: 1px solid var(--line); }
.legal-index a { display: block; margin-left: -1px; padding: .28rem .8rem; border-left: 1px solid transparent; color: var(--muted); font-size: .84rem; line-height: 1.4; text-decoration: none; transition: color .15s, border-color .15s; }
.legal-index .lvl-3 a { padding-left: 1.5rem; font-size: .8rem; color: var(--faint); }
.legal-index a:hover { color: var(--text); }
.legal-index a[aria-current="true"] { color: var(--text); border-left-color: rgb(var(--accent-rgb)); }
@media (min-width: 1000px) {
  .legal-grid { grid-template-columns: 250px minmax(0, 1fr); gap: 4rem; align-items: start; }
  .legal-index { position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto;
    background: none; border: 0; box-shadow: none; padding: 0; scrollbar-width: thin; }
  .legal-index summary { pointer-events: none; list-style: none; }
  .legal-index summary::-webkit-details-marker { display: none; }
}