/* ═══════════════════════════════════════════════════════════════════════════
   Eve SellerOps — marketing site.

   Dark-only by design: the page is the same graphite the application's dark
   theme uses, so the product previews below are not illustrations of Eve, they
   are Eve's own surfaces sitting on the page. Every preview is built from the
   public demo account's dataset — no invented figures.

   The accent is Eve's own logo emerald (#17B890) and it is the page's ONLY
   chrome colour. The four bright metric colours are copied verbatim from the
   app's Product Sales chart (sales orange / COG blue / profit green / fees red)
   and are allowed inside product previews only, never on page furniture — that
   restriction is what stops a data-dense page turning into confetti.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── ground & surfaces (each step up in elevation gets lighter) ─────────── */
  --bg:#080C10;
  --s1:#0C1218;
  --s2:#111A21;
  --s3:#17222B;
  --s4:#1E2B36;

  /* ── hairlines ──────────────────────────────────────────────────────────── */
  --line:rgba(150,178,199,.12);
  --line-2:rgba(150,178,199,.20);
  --line-3:rgba(150,178,199,.32);

  /* ── type ───────────────────────────────────────────────────────────────── */
  /* Four tiers, and every one clears 4.5:1 against the darkest AND the lightest
     surface it is ever used on (--s3). The faint tier carries real content —
     table headers, KPI labels, plan footnotes — so "decorative grey" was not an
     option for it. */
  --ink:#E9EFF4;
  --ink-2:#A6B4C0;
  --ink-3:#8B9AA7;
  --ink-4:#7C8C9B;

  /* ── accent (Eve's logo emerald) ────────────────────────────────────────── */
  --eve:#17B890;
  --eve-2:#3FD3AE;
  --eve-deep:#0E7C66;
  --eve-ink:#04120E;
  --eve-soft:rgba(23,184,144,.10);
  --eve-line:rgba(23,184,144,.28);
  --eve-glow:rgba(23,184,144,.20);

  /* ── metric colours, lifted straight from the app's Product Sales chart ─── */
  --m-sales:#E67E22;
  --m-cog:#3498DB;
  --m-profit:#2ECC71;
  --m-fees:#E74C3C;

  /* ── shape & motion ─────────────────────────────────────────────────────── */
  --r-sm:6px;
  --r:10px;
  --r-lg:16px;
  --r-xl:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --fast:.16s var(--ease);
  --med:.28s var(--ease);

  --shadow-panel:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 24px 60px -24px rgba(0,0,0,.9),
    0 2px 8px rgba(0,0,0,.4);
  --shadow-float:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 32px 80px -28px rgba(0,0,0,.95);

  --wrap:1220px;
  --gutter:24px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.65;
  font-feature-settings:'cv05' 1,'cv11' 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Inter Tight','Inter',system-ui,sans-serif;line-height:1.08;letter-spacing:-.028em;font-weight:600}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--eve);color:var(--eve-ink)}

:focus-visible{outline:2px solid var(--eve-2);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-ligatures:none}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--eve);color:var(--eve-ink);padding:12px 20px;border-radius:0 0 var(--r) 0;font-weight:600}
.skip:focus{left:0}

/* ═══ ambient background ══════════════════════════════════════════════════
   Three near-imperceptible layers: a hairline grid that fades out below the
   fold, one emerald bloom behind the hero, and a grain plate that stops the
   large flat areas from banding. Fixed and inert — they never intercept a
   click and never repaint on scroll. */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none}
.bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgba(150,178,199,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(150,178,199,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 120% 70% at 50% 0%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 120% 70% at 50% 0%,#000 0%,transparent 72%);
}
.bg-bloom{
  position:absolute;top:-32vh;left:50%;width:min(1500px,140vw);height:90vh;
  transform:translateX(-50%);
  background:
    radial-gradient(ellipse 46% 52% at 62% 44%,rgba(23,184,144,.14),transparent 68%),
    radial-gradient(ellipse 40% 46% at 26% 30%,rgba(52,152,219,.09),transparent 70%);
  filter:blur(28px);
}
.bg-grain{
  position:absolute;inset:0;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ shared furniture ════════════════════════════════════════════════════ */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--eve-2);
}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--eve);box-shadow:0 0 10px var(--eve)}

.section{padding:clamp(72px,9vw,124px) 0;position:relative}
.section-rule{border-top:1px solid var(--line)}

.sec-head{max-width:44rem;margin-bottom:clamp(36px,5vw,60px)}
.sec-head h2{font-size:clamp(1.85rem,3.6vw,2.85rem);margin:18px 0 14px}
.sec-head p{color:var(--ink-2);font-size:clamp(1rem,1.4vw,1.09rem);max-width:38rem}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center p{margin-inline:auto}

/* ── buttons ──────────────────────────────────────────────────────────────
   Three ranks only: accent (the one action we want), quiet (a real alternative)
   and ghost (navigation). Anything more and the page stops pointing anywhere. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 20px;border-radius:var(--r);
  font-size:.925rem;font-weight:600;letter-spacing:-.008em;white-space:nowrap;
  border:1px solid transparent;
  transition:background var(--fast),border-color var(--fast),color var(--fast),
             transform var(--fast),box-shadow var(--fast);
}
.btn:active{transform:translateY(1px)}
.btn--accent{
  background:var(--eve);color:var(--eve-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 6px 22px -8px var(--eve-glow);
}
.btn--accent:hover{background:var(--eve-2);box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 10px 30px -8px var(--eve-glow)}
.btn--quiet{background:var(--s3);color:var(--ink);border-color:var(--line-2)}
.btn--quiet:hover{background:var(--s4);border-color:var(--line-3)}
.btn--ghost{background:transparent;color:var(--ink-2);border-color:var(--line-2)}
.btn--ghost:hover{color:var(--ink);border-color:var(--line-3)}
.btn--lg{padding:14px 26px;font-size:1rem;border-radius:11px}
.btn svg{flex:none}

/* ═══ header ══════════════════════════════════════════════════════════════ */
.hdr{position:sticky;top:0;z-index:50;transition:background var(--med),border-color var(--med),backdrop-filter var(--med)}
.hdr::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--line);opacity:0;transition:opacity var(--med)}
.hdr[data-stuck='true']{background:rgba(8,12,16,.72);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
.hdr[data-stuck='true']::after{opacity:1}
.hdr-in{display:flex;align-items:center;gap:20px;height:66px}

.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{width:29px;height:29px;border-radius:8px;flex:none}
.brand-name{font-family:'Inter Tight';font-weight:600;font-size:1.04rem;letter-spacing:-.03em}

.hdr-nav{display:flex;align-items:center;gap:4px;margin-left:14px;flex:1}
.hdr-nav a{
  padding:7px 12px;border-radius:7px;font-size:.9rem;font-weight:450;color:var(--ink-2);
  transition:color var(--fast),background var(--fast);
}
.hdr-nav a:hover{color:var(--ink);background:rgba(150,178,199,.07)}
.hdr-act{display:flex;align-items:center;gap:9px;flex:none}
.hdr-act .btn{padding:8px 16px;font-size:.875rem}
/* Sign in is a returning-user link, not a call to action — keeping it as plain
   text leaves exactly two buttons in the bar and one obvious next step. */
.hdr-signin{padding:7px 10px;border-radius:7px;font-size:.9rem;font-weight:450;color:var(--ink-2);transition:color var(--fast)}
.hdr-signin:hover{color:var(--ink)}

.hdr-toggle{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line-2);align-items:center;justify-content:center;color:var(--ink-2)}
.hdr-drawer{display:none}

@media(max-width:940px){
  .hdr-nav{display:none}
  .hdr-signin{display:none}
  .hdr-act .btn--quiet{display:none}
  .hdr-toggle{display:inline-flex}
  .hdr-in{justify-content:space-between}
  .hdr-drawer{
    display:block;overflow:hidden;max-height:0;
    border-top:1px solid transparent;
    transition:max-height var(--med),border-color var(--med);
    background:rgba(8,12,16,.94);backdrop-filter:blur(18px);
  }
  /* Fallback ceiling only — the toggle is scripted, and the script sets the
     exact content height so nothing is ever clipped as the menu changes. */
  .hdr[data-open='true'] .hdr-drawer{max-height:600px;border-top-color:var(--line)}
  .hdr-drawer-in{padding:14px var(--gutter) 22px;display:flex;flex-direction:column;gap:2px}
  .hdr-drawer a:not(.btn){padding:12px 4px;font-size:1rem;color:var(--ink-2);border-bottom:1px solid var(--line)}
  .hdr-drawer .btn{margin-top:10px}
  .hdr-drawer .btn:first-of-type{margin-top:16px}
}

/* ═══ hero ════════════════════════════════════════════════════════════════ */
.hero{padding:clamp(56px,7vw,88px) 0 clamp(56px,7vw,92px)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(36px,5vw,68px);align-items:center}
@media(max-width:1020px){.hero-in{grid-template-columns:1fr;gap:48px}}

.hero h1{font-size:clamp(2.35rem,5.1vw,3.85rem);font-weight:700;margin:20px 0 20px;letter-spacing:-.038em}
.hero h1 em{font-style:normal;color:var(--eve-2);white-space:nowrap}
.hero-lead{color:var(--ink-2);font-size:clamp(1.02rem,1.5vw,1.14rem);max-width:33rem;margin-bottom:30px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
/* Inline, not flex: as a flex row this wrapped mid-sentence on a phone and left
   an em dash stranded at the start of a line. */
.hero-note{margin-top:20px;color:var(--ink-3);font-size:.855rem;max-width:30rem}
.hero-note svg{display:inline;vertical-align:-2px;margin-right:7px;color:var(--eve)}
.hero-note b{color:var(--ink-2);font-weight:500}

/* ── hero product composition ─────────────────────────────────────────────
   The signature. A Product Sales panel from the demo account, tilted a few
   degrees into the page, with two of the app's own contextual cards floating
   off its edges. `--px/--py` are written by the pointer handler and drive the
   rim light; with no JS they stay at 0 and the panel simply sits still. */
.stage{
  position:relative;
  --px:0;--py:0;
  perspective:1800px;
}
.stage-glow{
  position:absolute;inset:-14% -10%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at calc(50% + var(--px)*26px) calc(46% + var(--py)*26px),var(--eve-glow),transparent 62%);
  filter:blur(46px);opacity:.85;
}

.panel{
  position:relative;
  background:linear-gradient(168deg,var(--s2),var(--s1) 62%);
  border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:var(--shadow-panel);
  overflow:hidden;
}
/* Rim light: a hairline that brightens on the side the pointer is on. */
.panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;
  background:linear-gradient(calc(135deg + var(--px)*40deg),rgba(23,184,144,.42),rgba(150,178,199,.05) 42%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.9;
}
.hero-panel{
  transform:rotateY(calc(var(--px)*-2.6deg)) rotateX(calc(var(--py)*2.2deg));
  transform-style:preserve-3d;
  transition:transform .45s var(--ease);
}

.panel-bar{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line);
  background:rgba(150,178,199,.03);
}
.panel-title{font-family:'Inter Tight';font-weight:600;font-size:.9rem;letter-spacing:-.02em}
.panel-meta{margin-left:auto;font-size:.68rem;color:var(--ink-4);letter-spacing:.06em}
.dot{width:7px;height:7px;border-radius:50%;background:var(--eve);flex:none;box-shadow:0 0 8px var(--eve)}
.dot--live{animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* KPI row — the app's summary tiles. */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.kpi{padding:15px 16px 16px;border-right:1px solid var(--line)}
.kpi:last-child{border-right:none}
.kpi-k{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.kpi-v{font-family:'Inter Tight';font-weight:600;font-size:1.32rem;letter-spacing:-.03em;margin-top:5px;line-height:1.1}
.kpi-d{font-size:.7rem;color:var(--m-profit);font-weight:500;margin-top:2px}
@media(max-width:520px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpi:nth-child(2){border-right:none}
  .kpi:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

.chart-wrap{padding:16px 16px 12px}
.chart-head{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;flex-wrap:wrap}
/* Not a heading: this panel is role="img", so its innards are decorative and a
   real <h4> here only broke the document's heading order. */
.chart-head .ct{font-family:'Inter Tight';font-size:.83rem;font-weight:600;letter-spacing:-.01em}
.chart-head .sub{font-size:.7rem;color:var(--ink-4)}
.legend{display:flex;gap:12px;margin-left:auto;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:5px;font-size:.66rem;color:var(--ink-3);font-family:'JetBrains Mono',monospace}
.legend i{width:7px;height:7px;border-radius:2px;flex:none}
.chart{width:100%;height:auto;overflow:visible}
.chart-axis{stroke:var(--line);stroke-width:1}
.chart-axis-label{fill:var(--ink-4);font-family:'JetBrains Mono',monospace;font-size:8px}

/* Bars deal out left → right, once, on load. */
.bar{transform-origin:50% 150px;animation:grow .62s var(--ease) both;animation-delay:calc(var(--i)*32ms + 160ms)}
@keyframes grow{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
.trend{
  stroke:var(--eve-2);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:620;stroke-dashoffset:620;
  animation:draw 1.5s var(--ease) .5s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.trend-cap{opacity:0;animation:fadein .5s var(--ease) 1.7s forwards}
@keyframes fadein{to{opacity:1}}

/* Floating contextual cards. */
.float{
  position:absolute;z-index:2;
  background:linear-gradient(160deg,var(--s3),var(--s2));
  border:1px solid var(--line-2);border-radius:13px;
  box-shadow:var(--shadow-float);
  padding:12px 14px;
  animation:rise .7s var(--ease) both;
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
/* Both cards hang off the panel's BOTTOM corners, clear of the KPI row — a
   floating card that covers a number it is meant to contextualise is worse
   than no card at all. */
.float--reprice{right:-28px;bottom:-52px;width:258px;animation-delay:1s}
.float--sync{left:-26px;bottom:-34px;animation-delay:1.2s;padding:9px 13px}
.float-k{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);display:flex;align-items:center;gap:6px}
.float-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:7px;font-size:.78rem}
.float-row span{color:var(--ink-3)}
.float-row b{font-family:'Inter Tight';font-weight:600;font-size:.94rem;letter-spacing:-.02em}
.float-note{margin-top:9px;padding-top:8px;border-top:1px solid var(--line);font-size:.68rem;color:var(--ink-3);line-height:1.45}
.float-sync-t{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ink-2);white-space:nowrap}
.float-sync-t b{color:var(--ink);font-weight:500}

@media(max-width:1240px){.float--sync{left:-12px}.float--reprice{right:-12px}}
/* Between the hero going two-column and the viewport being wide enough to carry
   both cards, the panel is too narrow for them and they collide. The decision
   card is the one that earns its place, so the pill stands down. */
@media(min-width:1021px) and (max-width:1240px){.float--sync{display:none}}
@media(max-width:1020px){.float--reprice{right:0}.float--sync{left:0}}
@media(max-width:680px){
  .float--sync{display:none}
  .float--reprice{position:static;width:auto;margin-top:14px;animation-delay:.8s}
}

/* ═══ trust strip ═════════════════════════════════════════════════════════ */
.strip{border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(150,178,199,.028),transparent)}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr)}
.strip-cell{padding:26px 22px;border-right:1px solid var(--line)}
.strip-cell:last-child{border-right:none}
.strip-v{font-family:'Inter Tight';font-weight:600;font-size:1.6rem;letter-spacing:-.035em;line-height:1}
.strip-v em{font-style:normal;color:var(--eve-2)}
.strip-l{color:var(--ink-3);font-size:.845rem;margin-top:7px;line-height:1.45}
@media(max-width:780px){
  .strip-in{grid-template-columns:repeat(2,1fr)}
  .strip-cell:nth-child(2){border-right:none}
  .strip-cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:360px){.strip-in{grid-template-columns:1fr}.strip-cell{border-right:none}.strip-cell:nth-child(3){border-bottom:1px solid var(--line)}}

/* ═══ live demo — application frame ═══════════════════════════════════════ */
.frame{
  border:1px solid var(--line-2);border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(170deg,var(--s2),var(--s1) 55%);
  box-shadow:var(--shadow-panel);
}
.frame-chrome{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--line);
  background:rgba(150,178,199,.035);
}
.lights{display:flex;gap:6px;flex:none}
.lights i{width:9px;height:9px;border-radius:50%;background:var(--s4);border:1px solid var(--line-2)}
.urlbar{
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:var(--r-sm);
  background:var(--bg);border:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.urlbar svg{color:var(--eve);flex:none}

/* the app's own sidebar + tab rail */
/* minmax(0,…) on every track: a bare `1fr` refuses to shrink below its content,
   which let the tables push the whole frame wider than the phone screen. */
.frame-body{display:grid;grid-template-columns:186px minmax(0,1fr)}
@media(max-width:820px){.frame-body{grid-template-columns:minmax(0,1fr)}}

.rail{
  border-right:1px solid var(--line);padding:12px 10px;
  background:rgba(8,12,16,.5);
  display:flex;flex-direction:column;gap:2px;
}
@media(max-width:820px){
  .rail{
    flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line);
    padding:9px 10px;scrollbar-width:none;
  }
  .rail::-webkit-scrollbar{display:none}
}
.rail-h{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);padding:4px 10px 9px;
}
@media(max-width:820px){.rail-h{display:none}}
.rail-btn{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 11px;border-radius:8px;
  font-size:.855rem;font-weight:450;color:var(--ink-2);text-align:left;
  border:1px solid transparent;white-space:nowrap;
  transition:background var(--fast),color var(--fast),border-color var(--fast);
}
.rail-btn svg{flex:none;opacity:.65;transition:opacity var(--fast)}
.rail-btn:hover{background:rgba(150,178,199,.06);color:var(--ink)}
.rail-btn[aria-selected='true']{background:var(--eve-soft);color:var(--eve-2);border-color:var(--eve-line)}
.rail-btn[aria-selected='true'] svg{opacity:1}

.screen{padding:18px;min-height:300px;position:relative}
@media(max-width:560px){.screen{padding:14px;min-height:0}}
/* No-JS baseline: only the first panel is in the document, the rest carry the
   `hidden` attribute. */
.screen[hidden]{display:none}

/* Scripted: JS drops the `hidden` attributes and stacks every panel in one grid
   cell, so the frame is always as tall as its TALLEST panel and switching areas
   never shifts the page — at any width, without a hand-tuned min-height per
   breakpoint. visibility:hidden keeps the inactive panels out of the
   accessibility tree and out of the tab order while still sizing the cell. */
.is-stacked .screen{grid-column:2;grid-row:1;visibility:hidden;opacity:0;pointer-events:none;transition:opacity var(--med)}
.is-stacked .screen.is-active{visibility:visible;opacity:1;pointer-events:auto}
@media(max-width:820px){.is-stacked .screen{grid-column:1;grid-row:2}}
/* On a phone the panels differ in height by hundreds of pixels, so reserving the
   tallest one's height would leave the short areas sitting in a well of empty
   space. Below this width each panel takes its own height again — a reader
   scrolling a phone is not tracking a fixed frame edge anyway. */
@media(max-width:560px){
  .is-stacked .screen{grid-column:1;grid-row:auto;display:none;visibility:visible;opacity:1;pointer-events:auto}
  .is-stacked .screen.is-active{display:block}
}
.screen-in{animation:screenin .34s var(--ease) both}
@keyframes screenin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.screen-h{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.screen-h h3{font-size:1.02rem;letter-spacing:-.025em}
.screen-h p{font-size:.815rem;color:var(--ink-3);flex:1;min-width:12rem}

/* ── data table shared by the Catalogue / Repricing / Scout screens ─────── */
.tbl{width:100%;border-collapse:collapse;font-size:.795rem}
.tbl th{
  text-align:left;font-family:'JetBrains Mono',monospace;font-weight:500;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);
  padding:0 10px 9px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl td{padding:10px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl .r{text-align:right}
.tbl .sku{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--ink-3)}
.tbl .name{color:var(--ink);font-weight:450;display:block;max-width:26rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl tbody tr{transition:background var(--fast)}
.tbl tbody tr:hover{background:rgba(150,178,199,.04)}
.tbl-scroll{overflow-x:auto;margin-inline:-4px;padding-inline:4px}

.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:5px;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:500;
  letter-spacing:.04em;white-space:nowrap;border:1px solid;
}
.chip--ok{color:var(--m-profit);background:rgba(46,204,113,.09);border-color:rgba(46,204,113,.26)}
.chip--warn{color:var(--m-sales);background:rgba(230,126,34,.09);border-color:rgba(230,126,34,.26)}
.chip--info{color:var(--m-cog);background:rgba(52,152,219,.09);border-color:rgba(52,152,219,.26)}
.chip--mute{color:var(--ink-3);background:rgba(150,178,199,.07);border-color:var(--line-2)}
.chip--eve{color:var(--eve-2);background:var(--eve-soft);border-color:var(--eve-line)}

/* Scoped through .tbl on purpose: `.tbl td` sets a colour at (0,1,1), so a bare
   `.pos` at (0,1,0) lost to it and every profit figure rendered plain grey. */
.tbl .pos,.pos{color:var(--m-profit)}
.tbl .neg,.neg{color:var(--m-fees)}

.screen-foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  font-size:.735rem;color:var(--ink-4);
}
.screen-foot .chip{margin-right:auto}

/* demo CTA block beside the frame */
.demo-lead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;margin-bottom:clamp(28px,4vw,42px)}
@media(max-width:820px){.demo-lead{grid-template-columns:1fr;align-items:start;gap:20px}}
.demo-lead h2{font-size:clamp(1.85rem,3.6vw,2.85rem);margin:18px 0 14px}
.demo-lead p{color:var(--ink-2);max-width:36rem}

/* ═══ capability bento ════════════════════════════════════════════════════
   Deliberately asymmetric: the tiles that carry the most product truth
   (Performance, Catalogue, Workflows) get the width, the rest read as
   supporting instruments. */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.tile{
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,var(--s2),var(--s1) 70%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;
  transition:border-color var(--med),transform var(--med);
}
.tile::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity var(--med);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(23,184,144,.11),transparent 62%);
}
.tile:hover{border-color:var(--line-2);transform:translateY(-2px)}
.tile:hover::after{opacity:1}
.tile-3{grid-column:span 3}
.tile-2{grid-column:span 2}
.tile-4{grid-column:span 4}
@media(max-width:960px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile-3,.tile-2,.tile-4{grid-column:span 2}
}
@media(max-width:620px){.bento{grid-template-columns:1fr}.tile-3,.tile-2,.tile-4{grid-column:span 1}}

.tile-h{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.tile-ic{
  width:30px;height:30px;border-radius:8px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--eve-soft);border:1px solid var(--eve-line);color:var(--eve-2);
}
.tile h3{font-size:1.02rem;letter-spacing:-.025em}
.tile > p{font-size:.885rem;color:var(--ink-2);line-height:1.6}
.tile-note{margin-top:14px;font-size:.75rem;color:var(--ink-4);line-height:1.5}
.tile-viz{margin-top:18px}

/* fee decomposition bar (Performance tile) */
.decomp{display:flex;height:34px;border-radius:7px;overflow:hidden;border:1px solid var(--line)}
.decomp i{display:block;height:100%;position:relative}
.decomp-key{display:flex;flex-wrap:wrap;gap:12px;margin-top:11px}
.decomp-key span{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;color:var(--ink-3);font-family:'JetBrains Mono',monospace}
.decomp-key i{width:8px;height:8px;border-radius:2px;flex:none}
.decomp-key b{color:var(--ink);font-weight:500}

/* repricing decision ladder */
.ladder{display:flex;flex-direction:column;gap:0;margin-top:4px}
.rung{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);position:relative}
.rung:last-child{border-bottom:none}
.rung-k{font-family:'JetBrains Mono',monospace;font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);width:6.6rem;flex:none}
.rung-v{font-family:'Inter Tight';font-weight:600;font-size:1.02rem;letter-spacing:-.025em;margin-left:auto}
.rung--out .rung-v{color:var(--eve-2)}
.rung--out{background:linear-gradient(90deg,var(--eve-soft),transparent);margin-inline:-10px;padding-inline:10px;border-radius:7px}
.guard{margin-top:12px}
.guard-track{position:relative;height:6px;border-radius:3px;background:var(--s4);overflow:visible}
.guard-fill{position:absolute;inset-block:0;border-radius:3px;background:linear-gradient(90deg,rgba(23,184,144,.28),rgba(23,184,144,.5))}
.guard-pin{position:absolute;top:-4px;width:2px;height:14px;border-radius:1px;background:var(--eve-2);box-shadow:0 0 8px var(--eve-glow)}
.guard-ends{display:flex;justify-content:space-between;margin-top:7px;font-family:'JetBrains Mono',monospace;font-size:.63rem;color:var(--ink-4)}

/* scout opportunity flow */
.flowline{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.flowline div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 12px;background:var(--s1);font-size:.78rem;color:var(--ink-2)}
.flowline div b{font-family:'Inter Tight';font-weight:600;font-size:.9rem;letter-spacing:-.02em;color:var(--ink)}
.flowline div.is-out{background:var(--eve-soft)}
.flowline div.is-out b{color:var(--eve-2)}

/* workflow pipeline */
.pipe{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.pipe::-webkit-scrollbar{display:none}
.pipe-step{flex:1;min-width:86px;position:relative;padding-right:14px}
.pipe-step:last-child{padding-right:0}
.pipe-node{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;
  border:1px solid var(--line-2);background:var(--s3);color:var(--ink-3);
}
.pipe-step.is-done .pipe-node{background:var(--eve-soft);border-color:var(--eve-line);color:var(--eve-2)}
.pipe-step.is-now .pipe-node{background:var(--eve);border-color:var(--eve);color:var(--eve-ink);box-shadow:0 0 0 4px var(--eve-soft)}
.pipe-line{position:absolute;top:13px;left:26px;right:0;height:1px;background:var(--line-2)}
.pipe-step.is-done .pipe-line{background:var(--eve-line)}
.pipe-step:last-child .pipe-line{display:none}
.pipe-l{font-size:.735rem;color:var(--ink-2);margin-top:9px;line-height:1.35}
.pipe-s{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--ink-4);margin-top:2px}

/* permissions matrix */
.matrix{width:100%;border-collapse:collapse;font-size:.755rem}
.matrix th{padding:0 4px 8px;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);text-align:center;border-bottom:1px solid var(--line)}
.matrix th:first-child{text-align:left}
.matrix td{padding:7px 4px;text-align:center;border-bottom:1px solid var(--line);color:var(--ink-3)}
.matrix td:first-child{text-align:left;color:var(--ink-2);white-space:nowrap}
.matrix tr:last-child td{border-bottom:none}
.matrix .y{color:var(--eve-2)}
.matrix .n{color:var(--ink-4)}

/* catalogue mini rows */
.rows{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:14px;align-items:center;padding:9px 12px;background:var(--s1);font-size:.775rem}
.row-name{min-width:0;overflow:hidden}
.row-name b{display:block;color:var(--ink);font-weight:450;font-size:.79rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-name span{font-family:'JetBrains Mono',monospace;font-size:.65rem;color:var(--ink-4)}
.row-n{font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right;min-width:3.4rem}
@media(max-width:480px){.row{grid-template-columns:minmax(0,1fr) auto auto}.row .row-hide{display:none}}

/* ═══ how it connects ═════════════════════════════════════════════════════ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.step{position:relative;padding:0 22px 0 0}
.step:last-child{padding-right:0}
.step-top{display:flex;align-items:center;gap:0;margin-bottom:16px;position:relative}
.step-num{
  width:32px;height:32px;border-radius:10px;flex:none;z-index:1;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:500;
  background:var(--s3);border:1px solid var(--line-2);color:var(--ink-2);
  transition:background var(--med),border-color var(--med),color var(--med);
}
.step-track{flex:1;height:1px;background:var(--line);margin-left:12px;position:relative;overflow:hidden}
.step:last-child .step-track{display:none}
.step-track::after{
  content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--eve),transparent);
}
.is-revealed .step-track::after{animation:track .8s var(--ease) both;animation-delay:calc(var(--s)*.16s + .2s)}
@keyframes track{to{transform:scaleX(1)}}
.is-revealed .step-num{background:var(--eve-soft);border-color:var(--eve-line);color:var(--eve-2)}
.step h3{font-size:1rem;margin-bottom:8px;letter-spacing:-.02em}
.step p{font-size:.87rem;color:var(--ink-2);line-height:1.6}
.step-tag{
  display:inline-flex;align-items:center;gap:6px;margin-top:11px;
  font-family:'JetBrains Mono',monospace;font-size:.63rem;letter-spacing:.06em;
  color:var(--ink-4);
}
.step-tag svg{flex:none}
@media(max-width:940px){
  .steps{grid-template-columns:1fr;gap:0}
  .step{padding:0 0 26px 46px}
  .step:last-child{padding-bottom:0}
  .step-top{position:absolute;left:0;top:0;margin:0;height:100%;flex-direction:column;align-items:flex-start}
  .step-track{width:1px;height:auto;flex:1;margin:12px 0 0 15px}
  .step-track::after{background:linear-gradient(180deg,var(--eve),transparent);transform:scaleY(0);transform-origin:top}
  .is-revealed .step-track::after{animation-name:trackv}
  @keyframes trackv{to{transform:scaleY(1)}}
}

/* ═══ pricing ═════════════════════════════════════════════════════════════ */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:860px}
@media(max-width:760px){.plans{grid-template-columns:1fr}}
.plan{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(168deg,var(--s2),var(--s1) 70%);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
}
.plan--hi{border-color:var(--eve-line);background:linear-gradient(168deg,rgba(23,184,144,.055),var(--s1) 62%)}
.plan--hi::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  padding:1px;background:linear-gradient(160deg,var(--eve-line),transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.plan-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.plan-name{font-family:'Inter Tight';font-weight:600;font-size:1.08rem;letter-spacing:-.025em}
.plan-price{display:flex;align-items:baseline;gap:8px}
.plan-price b{font-family:'Inter Tight';font-weight:700;font-size:3rem;letter-spacing:-.045em;line-height:1}
.plan-price span{color:var(--ink-3);font-size:.88rem}
.plan-sub{color:var(--ink-3);font-size:.85rem;margin-top:10px;min-height:2.6em;line-height:1.5}
.plan-list{list-style:none;margin:22px 0 26px;display:flex;flex-direction:column;gap:9px}
.plan-list li{display:flex;gap:10px;align-items:flex-start;font-size:.885rem;color:var(--ink-2)}
.plan-list svg{flex:none;margin-top:4px;color:var(--eve)}
.plan-list .off svg{color:var(--ink-4)}
.plan-list li.off{color:var(--ink-4)}
.plan .btn{margin-top:auto;width:100%}
.plan-hr{height:1px;background:var(--line);margin:2px 0 0}
.price-notes{
  display:flex;gap:22px;flex-wrap:wrap;max-width:860px;margin-top:20px;
  font-size:.815rem;color:var(--ink-4);
}
.price-notes span{display:inline-flex;align-items:center;gap:7px}
.price-notes svg{color:var(--eve);flex:none}
.price-small{max-width:860px;margin-top:16px;color:var(--ink-3);font-size:.845rem;line-height:1.6}

/* ═══ security ════════════════════════════════════════════════════════════ */
.trust{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4vw,52px);align-items:start}
@media(max-width:920px){.trust{grid-template-columns:1fr}}

/* data-flow diagram — one column, three stages, hairline connectors */
.flow{
  background:linear-gradient(168deg,var(--s2),var(--s1) 70%);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;
}
.flow-stage{
  border:1px solid var(--line-2);border-radius:11px;padding:14px 16px;
  background:var(--bg);position:relative;
}
.flow-stage--eve{border-color:var(--eve-line);background:linear-gradient(160deg,var(--eve-soft),var(--bg) 70%)}
.flow-k{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4)}
.flow-t{font-family:'Inter Tight';font-weight:600;font-size:.98rem;letter-spacing:-.02em;margin-top:5px}
.flow-d{font-size:.79rem;color:var(--ink-3);margin-top:5px;line-height:1.5}
.flow-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.flow-link{display:flex;align-items:center;gap:10px;padding:9px 0 9px 22px;position:relative}
.flow-link::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:1px;background:var(--line-2)}
.flow-link span{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.06em;color:var(--ink-3)}
.flow-link svg{color:var(--eve);flex:none}

.trust-list{display:flex;flex-direction:column;gap:2px}
.trust-item{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.trust-item:last-child{border-bottom:none}
.trust-ic{
  width:32px;height:32px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--s3);border:1px solid var(--line-2);color:var(--eve-2);
}
.trust-item h3{font-size:.94rem;margin-bottom:5px;letter-spacing:-.02em}
.trust-item p{font-size:.855rem;color:var(--ink-2);line-height:1.6}

/* ═══ FAQ ═════════════════════════════════════════════════════════════════ */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;align-items:start}
@media(max-width:820px){.faq{grid-template-columns:1fr}}
.qa{border:1px solid var(--line);border-radius:var(--r);background:var(--s1);transition:border-color var(--fast),background var(--fast)}
.qa:hover{border-color:var(--line-2)}
.qa[open]{background:var(--s2);border-color:var(--line-2)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 18px;cursor:pointer;list-style:none;
  font-family:'Inter Tight';font-weight:600;font-size:.945rem;letter-spacing:-.02em;
}
.qa summary::-webkit-details-marker{display:none}
.qa-plus{position:relative;width:13px;height:13px;flex:none}
.qa-plus::before,.qa-plus::after{
  content:"";position:absolute;inset:50% 0 auto;height:1.5px;border-radius:1px;
  background:var(--ink-3);transform:translateY(-50%);transition:transform var(--med),background var(--med);
}
.qa-plus::after{transform:translateY(-50%) rotate(90deg)}
.qa[open] .qa-plus::before,.qa[open] .qa-plus::after{background:var(--eve-2)}
.qa[open] .qa-plus::after{transform:translateY(-50%) rotate(0)}
.qa-body{overflow:hidden}
.qa-body p{padding:0 18px 17px;color:var(--ink-2);font-size:.88rem;line-height:1.65}
.qa[open] .qa-body{animation:open .26s var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ═══ closing CTA ═════════════════════════════════════════════════════════ */
.close-card{
  position:relative;overflow:hidden;
  border:1px solid var(--line-2);border-radius:var(--r-xl);
  background:linear-gradient(150deg,var(--s2),var(--s1) 62%);
  padding:clamp(34px,5vw,58px);
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.close-card::before{
  content:"";position:absolute;top:-60%;right:-10%;width:60%;height:200%;pointer-events:none;
  background:radial-gradient(circle,var(--eve-glow),transparent 66%);filter:blur(40px);
}
.close-card > div{position:relative;max-width:34rem}
.close-card h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:12px}
.close-card p{color:var(--ink-2)}
.close-card .btn-group{position:relative;display:flex;gap:12px;flex-wrap:wrap}

/* ═══ footer ══════════════════════════════════════════════════════════════ */
.ftr{border-top:1px solid var(--line);padding:52px 0 40px;margin-top:clamp(60px,8vw,100px)}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:34px;padding-bottom:34px;border-bottom:1px solid var(--line)}
@media(max-width:720px){.ftr-top{grid-template-columns:1fr 1fr;gap:28px}.ftr-brand{grid-column:1/-1}}
.ftr-brand p{color:var(--ink-3);font-size:.845rem;max-width:24rem;margin-top:14px;line-height:1.6}
.ftr-h{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:14px}
.ftr-col{display:flex;flex-direction:column;gap:9px}
.ftr-col a{color:var(--ink-2);font-size:.87rem;width:fit-content;transition:color var(--fast)}
.ftr-col a:hover{color:var(--eve-2)}
.ftr-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;color:var(--ink-4);font-size:.8rem}
.ftr-legal{margin-top:20px;color:var(--ink-4);font-size:.775rem;line-height:1.65;max-width:62rem}

/* ═══ contact ══════════════════════════════════════════════════════════════════════
   The only place on the site a visitor types something. A section rather than a
   dialog, so it is in the DOM, linkable (#contact), reachable by keyboard
   without opening anything, and legible when the script never arrives. */
.contact-in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(30px,5vw,66px);align-items:start}
@media(max-width:900px){.contact-in{grid-template-columns:1fr}}
.contact-copy h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin:18px 0 14px}
.contact-copy p{color:var(--ink-2);max-width:33rem}
.contact-points{list-style:none;display:grid;gap:13px;margin-top:28px}
.contact-points li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-2);font-size:.885rem;line-height:1.55}
.contact-points svg{flex:none;margin-top:4px;color:var(--eve)}

.contact-form{
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(155deg,var(--s2),var(--s1) 72%);
  padding:clamp(22px,3vw,32px);display:grid;gap:16px;box-shadow:var(--shadow-panel);
}
.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.contact-row{grid-template-columns:1fr}}
.contact-field{display:grid;gap:7px;min-width:0}
.contact-field > span{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-4);
}
.contact-field > span em{font-style:normal;text-transform:none;letter-spacing:.02em;opacity:.75}
.contact-field input,.contact-field select,.contact-field textarea{
  width:100%;background:var(--bg);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r);
  padding:11px 13px;font:inherit;font-size:.92rem;
  transition:border-color var(--fast),box-shadow var(--fast);
}
.contact-field textarea{resize:vertical;min-height:136px;line-height:1.6}
/* iOS Safari zooms the page when a focused control is under 16px, which throws
   the layout off mid-typing. These are the only inputs on the site, so the rule
   lives with them. */
@media(max-width:560px){.contact-field input,.contact-field select,.contact-field textarea{font-size:16px}}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:var(--ink-4)}
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus{
  outline:none;border-color:var(--eve-line);box-shadow:0 0 0 3px var(--eve-soft);
}
/* The one non-emerald state on page furniture, and it earns it: a rejected
   field has to be distinguishable from an accented one at a glance. */
.contact-field [aria-invalid="true"]{border-color:#C4675C}

/* Honeypot. Positioned off-screen rather than display:none — a bot that reads
   styles skips hidden fields, and this one is meant to be filled in. Also out of
   the tab order and out of the accessibility tree, so nobody meets it. */
.contact-trap{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

.contact-send{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:2px}
.contact-status{font-size:.83rem;line-height:1.5;min-height:1.2em}
.contact-status[data-tone="info"]{color:var(--ink-3)}
.contact-status[data-tone="error"]{color:#E8938A}
.contact-fine{color:var(--ink-4);font-size:.77rem;line-height:1.6}
.contact-fine a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.contact-fine a:hover{color:var(--eve-2)}

.contact-done{
  border:1px solid var(--eve-line);border-radius:var(--r-lg);
  background:linear-gradient(155deg,var(--eve-soft),transparent 70%),var(--s1);
  padding:clamp(26px,3.4vw,38px);display:grid;gap:9px;
}
.contact-done strong{font-family:'Inter Tight','Inter',system-ui,sans-serif;font-size:1.3rem;letter-spacing:-.02em}
.contact-done p{color:var(--ink-2);font-size:.9rem}
.contact-ref{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--eve-2)}

.contact-noscript{
  border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--s2);padding:16px 18px;margin-bottom:16px;
  color:var(--ink-2);font-size:.86rem;line-height:1.6;
}
.contact-noscript a{color:var(--eve-2);text-decoration:underline;text-underline-offset:2px}

/* ═══ scroll reveal ═══════════════════════════════════════════════════════
   Applied by JS only. Without JS every element renders in its final state, so
   the page is fully readable with scripting off. */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.is-revealed{opacity:1;transform:none}

/* ═══ reduced motion ══════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .reveal{opacity:1;transform:none}
  .hero-panel{transform:none !important}
  .meter i{width:var(--w,62%)}
  .trend{stroke-dashoffset:0}
  .trend-cap{opacity:1}
  .step-track::after{transform:none}
}

/* ── current-page marking ──────────────────────────────────────────────────
   Added with the multi-page split. Each page's own nav entry carries
   aria-current="page"; these rules are what make that visible rather than
   only announced. Kept to colour and a hairline so the header does not
   acquire a second accent surface. */
.hdr-nav a[aria-current="page"]{color:var(--ink);background:rgba(150,178,199,.07)}
.hdr-drawer a[aria-current="page"]{color:var(--ink)}
.ftr-col a[aria-current="page"]{color:var(--eve-2)}

/* ═══════════════════════════════════════════════════════════════════════════
   Feature pages (catalogue / performance / repricing / scout / workflows /
   pricing). Added with the multi-page split. These reuse the home page's hero,
   tile and FAQ furniture; the only new pieces are a single-column hero, a
   breadcrumb, and a prose column for the long-form body copy that gives each
   page something to actually rank for.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero--page{padding:clamp(40px,5vw,64px) 0 clamp(40px,5vw,68px)}
.hero--page .hero-in{grid-template-columns:minmax(0,1fr);max-width:54rem;align-items:start}
.hero--page h1{font-size:clamp(2.05rem,4.3vw,3.2rem);margin-top:14px}
.hero--page .hero-lead{max-width:42rem}

/* Breadcrumb. Present for the reader first — a feature page reached from a
   search result gives no other clue where it sits — and it is what the
   BreadcrumbList in the page's JSON-LD describes. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:.8rem;color:var(--ink-4)}
.crumbs a{color:var(--ink-3);transition:color var(--fast)}
.crumbs a:hover{color:var(--eve-2)}
.crumbs span[aria-current]{color:var(--ink-2)}
.crumbs i{font-style:normal;opacity:.45}

/* Body copy column. Deliberately narrow: these pages are read, not scanned,
   and a 40rem measure is the difference between a paragraph someone finishes
   and one they bounce off. */
.prose{max-width:40rem}
.prose > * + *{margin-top:16px}
.prose p{color:var(--ink-2);font-size:1.01rem;line-height:1.72}
.prose h3{font-size:1.18rem;margin-top:34px;letter-spacing:-.012em}
.prose h3:first-child{margin-top:0}
.prose ul{list-style:none;display:grid;gap:10px}
.prose ul li{position:relative;padding-left:22px;color:var(--ink-2);line-height:1.62}
.prose ul li::before{
  content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--eve);opacity:.75;
}
.prose a{color:var(--eve-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose strong{color:var(--ink);font-weight:600}

/* A prose column and a product panel side by side. Collapses early — the panel
   is the part that stops being legible first. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:940px){.split{grid-template-columns:1fr;gap:36px}}
.split .prose{max-width:none}

/* Cross-links to the other four areas, at the foot of every feature page. */
.also{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.also a{
  display:block;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--s1);transition:border-color var(--fast),background var(--fast);
}
.also a:hover{border-color:var(--eve-line);background:var(--s2)}
.also b{display:block;color:var(--ink);font-size:.97rem;margin-bottom:5px;font-weight:600}
.also span{color:var(--ink-3);font-size:.83rem;line-height:1.5}

/* ═══════════════════════════════════════════════════════════════════════════
   FBA calculator (/fba-calculator.html).

   The one page on this site that is a tool rather than a description of one,
   and the only place a visitor types numbers before they have an account. It
   reuses the panel, chip and screen-foot furniture so the result reads as an
   Eve surface rather than a widget bolted onto the page; everything below is
   the form and the per-unit breakdown, which had no equivalent already.

   The result panel is sticky on wide screens: the inputs are long enough that
   scrolling to change a dimension would otherwise push the answer off screen,
   which is exactly the moment the reader is trying to compare two numbers.
   ═══════════════════════════════════════════════════════════════════════════ */

.fc{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(24px,3.4vw,44px);align-items:start}
@media(max-width:980px){.fc{grid-template-columns:1fr;gap:28px}}

/* ── ASIN lookup ───────────────────────────────────────────────────────────
   The first thing on the page and, when the lookup is available, the fastest
   route through it: one field that fills in the six the seller would otherwise
   have to measure. It sits above the two-column grid rather than inside the
   form column because it feeds both halves — the inputs and the fee quote in
   the result panel — and because a field this consequential reading as the
   fifth item in a list of eleven is how a good shortcut goes unnoticed.

   Hidden entirely (the [hidden] attribute) until the application confirms the
   lookup is configured, so nobody is offered a button that cannot work. */
.fc-lookup{
  border:1px solid var(--eve-line);border-radius:var(--r-lg);background:var(--s1);
  padding:16px 18px;margin-bottom:22px;
  background-image:radial-gradient(120% 180% at 0% 0%,var(--eve-soft),transparent 62%);
}
.fc-lookup[hidden]{display:none}
.fc-lookup-form{display:flex;gap:10px;align-items:stretch}
@media(max-width:560px){.fc-lookup-form{flex-direction:column}}

.fc-lookup-field{position:relative;display:flex;align-items:center;flex:1;min-width:0}
.fc-lookup-field svg{position:absolute;left:14px;color:var(--ink-4);pointer-events:none}
.fc-lookup-field input{
  width:100%;background:var(--s2);border:1px solid var(--line-2);border-radius:9px;
  padding:12px 14px 12px 38px;color:var(--ink);font-family:inherit;font-size:.94rem;
  transition:border-color var(--fast),background var(--fast);
}
.fc-lookup-field input::placeholder{color:var(--ink-4)}
.fc-lookup-field input:focus{
  outline:none;border-color:var(--eve-line);background:var(--s3);
  box-shadow:0 0 0 3px var(--eve-soft);
}
@media(max-width:560px){.fc-lookup-field input{font-size:16px}}
.fc-lookup-form .btn{flex:none}
/* The button spends someone's Amazon quota, so it says so while it is doing it
   and refuses to be pressed twice. */
.fc-lookup-form .btn[disabled]{opacity:.55;pointer-events:none}

.fc-lookup-note{margin-top:11px;color:var(--ink-3);font-size:.81rem;line-height:1.6;max-width:52rem}
.fc-lookup-note.is-error{color:var(--m-fees)}

/* ── the product that was found ─────────────────────────────────────────── */
.fc-product{
  display:flex;align-items:center;gap:14px;margin-bottom:22px;padding:12px 14px;
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--s1);
}
.fc-product[hidden]{display:none}
.fc-product img{
  width:60px;height:60px;flex:none;object-fit:contain;border-radius:8px;
  background:#fff;padding:4px;
}
.fc-product img[hidden]{display:none}
.fc-product-main{min-width:0;flex:1}
.fc-product-main b{
  display:block;font-family:'Inter Tight';font-weight:600;font-size:.95rem;letter-spacing:-.015em;
  color:var(--ink);line-height:1.35;
  /* Amazon titles run to 200 characters; two lines is the most this strip can
     give one without pushing the calculator itself below the fold. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fc-product-meta{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:7px}
.fc-product-meta .chip{font-size:.66rem}
.fc-product-clear{
  flex:none;background:none;border:1px solid var(--line-2);border-radius:8px;
  color:var(--ink-3);font-family:'JetBrains Mono',monospace;font-size:.63rem;letter-spacing:.09em;
  text-transform:uppercase;padding:7px 11px;cursor:pointer;
  transition:color var(--fast),border-color var(--fast);
}
.fc-product-clear:hover{color:var(--ink);border-color:var(--line-3)}

.fc-form{display:flex;flex-direction:column;gap:26px;min-width:0}

.fc-group{display:flex;flex-direction:column;gap:14px}
.fc-group-h{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);
}
.fc-hint{color:var(--ink-3);font-size:.83rem;line-height:1.6;max-width:34rem;margin-top:-4px}

.fc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:620px){.fc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.fc-field{display:grid;gap:7px;min-width:0}
/* The flat-rate input is toggled with the hidden attribute, and a class that
   sets display beats the browser's own [hidden] rule — without this the field
   is on screen for every seller who is not on the Flat Rate Scheme. */
.fc-field[hidden]{display:none}
/* Price, cost and the two selects want the room; the four box dimensions do
   not, which is what makes a four-column grid the right unit here. */
.fc-field--wide{grid-column:span 2}
@media(max-width:620px){.fc-field--wide{grid-column:1/-1}}

.fc-field > span{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);display:flex;gap:6px;flex-wrap:wrap;align-items:baseline;
}
.fc-field > span em{font-style:normal;text-transform:none;letter-spacing:.02em;color:var(--ink-4)}

/* The currency mark sits inside the field rather than in the label, so a column
   of money inputs lines up on the digits. */
.fc-input{position:relative;display:flex;align-items:center}
.fc-input i{
  position:absolute;left:13px;font-style:normal;color:var(--ink-4);font-size:.9rem;pointer-events:none;
}
.fc-input:has(i) input{padding-left:27px}

.fc-field input,.fc-field select{
  width:100%;background:var(--s1);border:1px solid var(--line-2);border-radius:9px;
  padding:11px 13px;color:var(--ink);font-family:inherit;font-size:.92rem;
  font-variant-numeric:tabular-nums;transition:border-color var(--fast),background var(--fast);
}
.fc-field select{
  cursor:pointer;appearance:none;padding-right:34px;
  /* Inlined as a data URI: the page's CSP allows data: images, and an external
     chevron would be a request for eleven bytes of triangle. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none' stroke='%238B9AA7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.fc-field input:focus,.fc-field select:focus{
  outline:none;border-color:var(--eve-line);background:var(--s2);
  box-shadow:0 0 0 3px var(--eve-soft);
}
/* 16px stops iOS Safari zooming the viewport on focus. */
@media(max-width:560px){.fc-field input,.fc-field select{font-size:16px}}

/* ── the one field a lookup cannot fill ─────────────────────────────────────
   A lookup clears the demo cost, and a calculator with no cost reports a loss on
   every product. The notice is a band above the row, not a line under the input:
   anything added inside one .fc-field drops that field's box below the three
   next to it, which is exactly the thing the seller is looking at. */
.fc-need{
  display:flex;align-items:center;gap:10px;max-width:34rem;margin-top:-2px;
  padding:9px 13px;border-radius:10px;
  border:1px solid rgba(230,126,34,.28);background:rgba(230,126,34,.08);
  color:var(--ink-2);font-size:.83rem;line-height:1.5;
}
.fc-need[hidden]{display:none}
.fc-need::before{
  content:'';flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--m-sales);box-shadow:0 0 0 3px rgba(230,126,34,.16);
}

/* The band says which field; the field says which one it means. */
.fc-field--need > span{color:var(--m-sales)}
.fc-field--need .fc-input i{color:var(--m-sales)}
.fc-field--need input{
  border-color:rgba(230,126,34,.55);background:rgba(230,126,34,.08);
  box-shadow:0 0 0 3px rgba(230,126,34,.1);
}
.fc-field--need input:focus{
  border-color:rgba(230,126,34,.8);background:rgba(230,126,34,.1);
  box-shadow:0 0 0 3px rgba(230,126,34,.18);
}

/* One pass, not a loop: it should catch the eye when the answer lands, then sit
   still while the seller types. */
@media(prefers-reduced-motion:no-preference){
  .fc-need{animation:fcNeedIn .34s ease-out 1}
  .fc-field--need input{animation:fcNeedPulse 1.1s ease-out 1}
  @keyframes fcNeedIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  @keyframes fcNeedPulse{
    0%{box-shadow:0 0 0 0 rgba(230,126,34,.42)}
    100%{box-shadow:0 0 0 3px rgba(230,126,34,.1)}
  }
}

.fc-checks{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.fc-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.865rem;color:var(--ink-2);line-height:1.5}
.fc-check input{
  appearance:none;width:16px;height:16px;flex:none;margin-top:2px;border-radius:5px;
  border:1px solid var(--line-3);background:var(--s2);cursor:pointer;position:relative;
  transition:background var(--fast),border-color var(--fast);
}
.fc-check input:checked{background:var(--eve);border-color:var(--eve)}
.fc-check input:checked::after{
  content:"";position:absolute;left:5px;top:1.5px;width:4px;height:8px;
  border:solid var(--eve-ink);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.fc-check input:focus-visible{outline:2px solid var(--eve-2);outline-offset:2px}

.fc-noscript{
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--s1);
  padding:16px 18px;color:var(--ink-2);font-size:.87rem;line-height:1.6;
}
.fc-noscript a{color:var(--eve-2);text-decoration:underline;text-underline-offset:2px}

/* ── result panel ─────────────────────────────────────────────────────────── */
.fc-panel{position:sticky;top:86px}
@media(max-width:980px){.fc-panel{position:static}}
/* Before the inputs are complete the breakdown is meaningless, so it is hidden
   rather than shown full of zeroes — a table of £0.00 reads as a broken tool. */
.fc-panel[data-state='empty'] .fc-out,
.fc-panel[data-state='empty'] .fc-lines,
.fc-panel[data-state='empty'] .fc-meta{display:none}

.fc-out{padding:20px 18px 18px;border-bottom:1px solid var(--line)}
.fc-out-k{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.fc-out-v{
  font-family:'Inter Tight';font-weight:700;font-size:clamp(2.1rem,4.6vw,2.85rem);
  letter-spacing:-.045em;line-height:1.05;margin-top:6px;font-variant-numeric:tabular-nums;
}
.fc-out-sub{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:.8rem;color:var(--ink-3)}
.fc-out-sub b{color:var(--ink);font-weight:600;font-family:'Inter Tight';letter-spacing:-.02em}

.fc-lines{display:flex;flex-direction:column}
.fc-line{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 18px;font-size:.83rem;color:var(--ink-2);border-bottom:1px solid var(--line);
}
.fc-line:last-child{border-bottom:none}
.fc-line b{font-family:'Inter Tight';font-weight:600;font-size:.9rem;letter-spacing:-.02em;color:var(--ink)}
.fc-line[hidden]{display:none}

.fc-meta{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.fc-meta > div{padding:12px 14px;border-right:1px solid var(--line);min-width:0}
.fc-meta > div:last-child{border-right:none}
.fc-meta span{
  display:block;font-family:'JetBrains Mono',monospace;font-size:.57rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-4);
}
.fc-meta b{
  display:block;margin-top:4px;font-family:'Inter Tight';font-weight:600;font-size:.86rem;
  letter-spacing:-.02em;color:var(--ink-2);
}

.fc-note{padding:13px 18px;color:var(--ink-3);font-size:.8rem;line-height:1.6;border-top:1px solid var(--line)}
.fc-note:empty{display:none}

/* ── Amazon's own fee quote ────────────────────────────────────────────────
   Tinted with the accent because it is the one block on the page whose numbers
   did not come from a table in a JavaScript file. The deltas next to each fee
   are the point of it: agreeing with the rate card is reassuring, disagreeing
   with it is information. */
.fc-amazon{
  border-top:1px solid var(--line);padding:14px 18px 15px;
  background:linear-gradient(180deg,var(--eve-soft),transparent 78%);
}
.fc-amazon[hidden]{display:none}
.fc-amazon-use{font-size:.82rem;margin-bottom:11px}
.fc-amazon-rows{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fc-amazon-rows > div{
  display:flex;flex-direction:column;gap:3px;padding:9px 11px;
  border:1px solid var(--eve-line);border-radius:9px;background:var(--s1);min-width:0;
}
.fc-amazon-rows span{
  font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-4);
}
.fc-amazon-rows b{
  font-family:'Inter Tight';font-weight:600;font-size:1.02rem;letter-spacing:-.025em;color:var(--ink);
}
.fc-amazon-rows i{font-style:normal;font-size:.72rem;color:var(--ink-4);line-height:1.3}
.fc-amazon-rows i.is-up{color:var(--m-fees)}
.fc-amazon-rows i.is-down{color:var(--m-profit)}
.fc-amazon-note{margin-top:10px;color:var(--ink-3);font-size:.76rem;line-height:1.55}
.fc-amazon-note:empty{display:none}

.fc-requote{
  margin-top:10px;width:100%;background:var(--s3);border:1px solid var(--eve-line);
  border-radius:9px;color:var(--eve-2);font-family:inherit;font-size:.8rem;font-weight:500;
  padding:9px 12px;cursor:pointer;transition:background var(--fast),color var(--fast);
}
.fc-requote:hover{background:var(--s4)}
.fc-requote[hidden]{display:none}
.fc-requote[disabled]{opacity:.55;pointer-events:none}

/* ── the same unit at other prices ─────────────────────────────────────────
   Four probes through the same engine, not an interpolation: the referral band
   and the Low-Price FBA threshold are both step changes, so a straight line
   between two prices would be wrong exactly where it matters most. */
.fc-ladder{border-top:1px solid var(--line);padding:13px 18px 15px}
.fc-ladder[hidden]{display:none}
.fc-ladder-h{
  font-family:'JetBrains Mono',monospace;font-size:.57rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:9px;
}
.fc-ladder-rows{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
@media(max-width:420px){.fc-ladder-rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fc-ladder-cell{
  padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:var(--s1);min-width:0;
}
.fc-ladder-cell.is-current{border-color:var(--eve-line);background:var(--eve-soft)}
.fc-ladder-cell u{
  display:block;text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:.55rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);
}
.fc-ladder-cell em{
  display:block;font-style:normal;margin-top:3px;font-family:'Inter Tight';font-weight:600;
  font-size:.82rem;letter-spacing:-.02em;color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.fc-ladder-cell b{
  display:block;margin-top:2px;font-family:'Inter Tight';font-weight:700;font-size:.95rem;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}

.fc-share{
  margin-right:auto;background:none;border:none;padding:0;cursor:pointer;
  color:var(--ink-3);font-family:inherit;font-size:.735rem;text-align:left;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-3);
  transition:color var(--fast);
}
.fc-share:hover{color:var(--ink-2)}

/* ═══════════════════════════════════════════════════════════════════════════
   ANSWERS (/answers.html and /answers/<slug>.html).

   The informational half of the site. Product pages argue; these pages answer,
   and are frequently the first Eve page anyone sees — arrived at from a search
   result for a question that has nothing to do with buying software. So they
   reuse the same furniture (hero, crumbs, prose, faq, also, close-card) rather
   than inventing an article skin, and add only what a long read genuinely needs
   that a feature page does not: a measure, a callout, and a table.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the hub ──────────────────────────────────────────────────────────────── */

/* One featured answer, treated as a surface rather than a link. It is the only
   thing above the fold that is not navigation, so it gets the whole width. */
.ans-feature{
  display:block;padding:clamp(22px,3vw,32px);border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--s1);
  transition:border-color var(--fast),background var(--fast);
}
.ans-feature:hover{border-color:var(--eve-line);background:var(--s2)}
.ans-feature-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px}
.ans-date{color:var(--ink-4);font-size:.78rem}
.ans-feature h3{
  font-size:clamp(1.3rem,2.4vw,1.72rem);letter-spacing:-.028em;
  max-width:34rem;margin-bottom:12px;
}
.ans-feature p{color:var(--ink-2);font-size:.98rem;line-height:1.68;max-width:44rem}
.ans-more{
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  color:var(--eve-2);font-size:.88rem;font-weight:500;
}
.ans-feature:hover .ans-more svg{transform:translateX(3px)}
.ans-more svg{transition:transform var(--fast)}

/* ── an article ───────────────────────────────────────────────────────────── */

/* The hero drops the two-column grid entirely: an answer page has no product
   panel to sit beside the headline, and a lone column in a grid built for two
   reads as a layout that lost something. */
.hero--art .wrap{max-width:52rem}
.hero--art h1{font-size:clamp(1.95rem,3.9vw,2.85rem);margin-top:14px}
.hero--art .hero-lead{max-width:44rem;margin-bottom:0}

.art-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:22px;
  color:var(--ink-4);font-size:.8rem;
}
.art-meta .chip{text-decoration:none}
.art-meta-by{
  padding-left:14px;border-left:1px solid var(--line-2);
}

/* Wider than the 40rem .prose measure the feature pages use, because these
   pages carry tables and FAQ blocks that a 40rem column squeezes into
   unreadability — but still nowhere near the 1220px wrap. */
.art-body{max-width:46rem}
.art-body h2{
  font-size:clamp(1.32rem,2.2vw,1.55rem);letter-spacing:-.026em;
  margin-top:46px;padding-top:26px;border-top:1px solid var(--line);
}
.art-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.art-body h3{margin-top:30px}
.art-body p a,.art-body li a{color:var(--eve-2)}

/* The thing the reader must not miss — a deadline, a caveat, a "check this in
   Seller Central rather than trusting us". Deliberately only one style: a page
   with three kinds of callout has taught the reader to skip all of them. */
.art-note{
  padding:16px 18px;border:1px solid var(--eve-line);border-left-width:3px;
  border-radius:var(--r);background:var(--eve-soft);
  color:var(--ink-2);font-size:.94rem;line-height:1.66;
}
.art-note strong{color:var(--ink)}

/* Tables scroll inside their own box rather than widening the page. A table
   that forces the body to scroll sideways breaks every paragraph above it. */
.art-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.art-table{border-collapse:collapse;width:100%;min-width:30rem;font-size:.9rem}
.art-table th,.art-table td{
  padding:12px 15px;text-align:left;vertical-align:top;line-height:1.55;
  border-bottom:1px solid var(--line);
}
.art-table thead th{
  background:var(--s2);color:var(--ink-3);font-weight:600;font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;
}
.art-table tbody td{color:var(--ink-2)}
.art-table tbody tr:last-child td{border-bottom:0}
.art-table strong{color:var(--ink)}

.art-sources{font-size:.88rem;color:var(--ink-3)}

/* The FAQ grid is two columns on a feature page, where it spans the full wrap.
   Inside a 46rem article column it has to be one. */
.art-body .faq{grid-template-columns:minmax(0,1fr)}