/* ══════════════════════════════════════════════════════════════════════════
   CITRA Insight — site design system.

   Shared by all nine pages (landing + the five policy pages + the Insights
   listing and its entries) so the theme cannot drift between them. Previously
   every page carried its own styles, which is how the old site ended up with
   five pages in three different looks.

   ⚠ WHEN YOU EDIT THIS FILE, BUMP THE VERSION IN EVERY PAGE THAT LINKS IT.
   The stylesheet is served with ETag and Last-Modified but NO Cache-Control,
   so a returning visitor can hold a cached copy while receiving new HTML that
   depends on rules the cached copy does not have. The link therefore carries
   ?v=YYYYMMDD and the date is what busts the cache:

       grep -rl 'assets/site.css?v=' website/     # every page, currently 9

   All nine must carry the SAME value — a half-bumped set is worse than none,
   because it splits visitors across two stylesheets. This is a manual step and
   manual steps get forgotten; replacing it with a content hash applied at
   deploy time is filed in the backlog (category F).
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── The whole palette. Eight values, nothing else. ───────────────────── */
  --bg:#FAFAF8;          /* page ground */
  --white:#FFFFFF;       /* cards + white sections */
  --alt:#F2F2EF;         /* alternating section band */
  --ink:#171717;         /* primary text */
  --muted:#5F6368;       /* secondary text */
  --accent:#155EEF;      /* buttons, links, highlights — NOTHING else */
  --dark:#14181F;        /* dark sections + footer */
  --edge:#E6E6E1;        /* borders */

  /* The wordmark's four colours, preserved exactly from the previous site.
     Used in exactly two places: the "Insight" wordmark, and the 8s shimmer
     on the How-it-works step numbers. Nowhere else. */
  --violet:#6d4aff; --blue:#2f7bf6; --coral:#ff5f6d; --orange:#ffa63d;
  --grad:linear-gradient(115deg,var(--violet),var(--blue) 42%,var(--coral) 78%,var(--orange));

  --wrap:1200px;         /* max content width */
  --read:720px;          /* reading measure */
  --r:8px;               /* radius; 10px is the cap and only cards use it */
  color-scheme:light;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,sans-serif;
  font-size:17px; line-height:1.65; font-weight:400;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.1; font-weight:600; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:56px; font-weight:700; letter-spacing:-.03em}
h2{font-size:40px}
h3{font-size:21px}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
p{color:var(--muted)}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.read{max-width:var(--read)}
section{padding:112px 0}                 /* the 104-128px section rhythm */
.sec-white{background:var(--white)}
.sec-alt{background:var(--alt)}
.sec-dark{background:var(--dark); color:#fff}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark p{color:#A7ADBA}
.eyebrow{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:16px}
.lead{font-size:19px; margin-top:24px}

/* ── Buttons — rectangular, 8px radius, never pills ─────────────────────── */
.btn{display:inline-block; padding:14px 24px; border-radius:var(--r); font-size:15px; font-weight:500; border:1px solid transparent; transition:background .16s ease,border-color .16s ease}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:#0F4BC4}
.btn-secondary{background:transparent; color:var(--ink); border-color:var(--edge)}
.btn-secondary:hover{border-color:var(--muted)}
.sec-dark .btn-secondary{color:#fff; border-color:rgba(255,255,255,.28)}

/* ── Nav ────────────────────────────────────────────────────────────────── */
/* Anchored sections must clear the sticky bar below. WHY THIS EXISTS: the
   header is position:sticky at 69px tall, so a jump to #why / #how / #receive
   / #pricing / #talk used to land with the section's HEADING hidden behind it
   — the visitor arrived mid-sentence and reasonably concluded the nav link was
   broken. That was the "Pricing tab is not working" report (19 Aug 2026).
   scroll-margin-top is the one-property fix and applies to every in-page
   anchor, not just the one that got reported. */
section[id]{scroll-margin-top:88px}

.nav{position:sticky; top:0; z-index:50; background:rgba(250,250,248,.92); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--edge)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:68px; gap:32px}
.brand{display:flex; align-items:center; gap:12px}
.logomark{flex:none; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--r); background:#fff; border:1px solid var(--edge); overflow:hidden}
/* 6px, not the system 8px: the image sits INSIDE an 8px-radius container, so
   matching the container's radius would push its corners past the mask. */
.logomark img{width:28px; height:28px; border-radius:6px}
/* PRESERVED EXACTLY from the previous site — brand asset, not body type. */
.logo{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:21px;color:var(--ink);line-height:1.05;letter-spacing:-.03em}
.logo span{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.navlinks{display:flex; gap:28px; font-size:15px; font-weight:500; color:var(--muted)}
.navlinks a:hover{color:var(--ink)}
.nav-cta{font-size:14px; padding:10px 18px}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{padding:104px 0 112px}
.hero .wrap{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center}
.hero p.lead{max-width:520px}
.hero-actions{display:flex; gap:12px; margin-top:36px; flex-wrap:wrap}
.badges{margin-top:32px; font-size:14px; color:var(--muted); line-height:1.9}

/* The illustrative report card. 10px radius = the documented cap, cards only. */
.reportcard{background:var(--white); border:1px solid var(--edge); border-radius:10px; padding:32px}
.rc-head{padding-bottom:20px; margin-bottom:8px; border-bottom:1px solid var(--edge)}
.rc-label{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.rc-title{font-size:15px; font-weight:600; margin-top:6px}
.rc-row{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--edge)}
.rc-row:last-child{border-bottom:0; padding-bottom:0}
.rc-row .k{font-size:15px; color:var(--muted)}
.rc-row .v{font-size:21px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.rc-row.total .v{font-size:31px; color:var(--accent)}
/* The values COUNT to their new figure like a meter rather than fading and
   snapping to it. tabular-nums is what makes that readable: with
   proportional digits every tick would change the number's width and the
   whole row would jitter sideways while counting. The counting itself is
   driven by requestAnimationFrame in the page script — there is no CSS
   transition here on purpose, because the element's TEXT is what changes,
   and text content is not a transitionable property. */
.rc-anim{font-variant-numeric:tabular-nums}

/* ── The email section ──────────────────────────────────────────────────── */
.inbox{background:var(--white); border:1px solid var(--edge); border-radius:10px; overflow:hidden; margin-top:48px}
.inbox-bar{display:flex; align-items:center; gap:8px; padding:14px 20px; border-bottom:1px solid var(--edge); background:var(--alt)}
.dot{width:10px; height:10px; border-radius:50%; background:#D8D8D2}
.inbox-body{padding:28px 32px 32px}
.inbox-meta{display:flex; align-items:center; gap:12px; font-size:14px; color:var(--muted); flex-wrap:wrap}
.inbox-meta strong{color:var(--ink); font-weight:600}
/* 4px, not the system 8px: on an ~18px-tall chip an 8px radius reads as a
   PILL, which the design system bans outright. */
.badge-new{font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--accent); border:1px solid var(--accent); border-radius:4px; padding:2px 7px}
.inbox-subject{font-size:21px; font-weight:600; margin:16px 0 12px; min-height:1.1em; transition:opacity .8s ease}
.inbox-subject.is-fading{opacity:0}

/* ── Why CITRA — small blue rules, deliberately NOT cards ───────────────── */
.rules{display:grid; grid-template-columns:repeat(2,1fr); gap:56px 64px; margin-top:64px}
.rule h3{margin-bottom:12px}
.rule:before{content:""; display:block; width:32px; height:2px; background:var(--accent); margin-bottom:20px}

/* ── Approach — a bordered list, one row per line ───────────────────────── */
.rowlist{margin-top:56px; border-top:1px solid var(--edge)}
.rowlist .row{display:grid; grid-template-columns:280px 1fr; gap:40px; padding:28px 0; border-bottom:1px solid var(--edge)}
.rowlist .row h3{font-size:19px}

/* ── How it works — the shimmer step numbers ────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:56px; margin-top:64px}
.stepnum{
  font-size:13px; font-weight:600; letter-spacing:.12em; margin-bottom:20px;
  background:var(--grad); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:shimmer 8s linear infinite;
}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* ── What you receive — the ONLY card grid on the site ──────────────────── */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:64px}
.card{background:var(--white); border:1px solid var(--edge); border-radius:10px; padding:32px}
.card h3{font-size:19px; margin-bottom:12px}

/* ── Stats carousel ──────────────────────────────────────────────────────
   REUSES .card deliberately: the design system has exactly one card
   language, and a second one invented for this section would be the visual
   equivalent of the second notification vocabulary. The carousel adds
   MOVEMENT, not a new look — the cards are the same object as the ones in
   "What you receive".

   Track-and-window, not a library: three cards visible on desktop, one on
   mobile, moved by a transform on the track. */
.carousel{margin-top:56px}
.carousel-window{overflow:hidden}
.carousel-track{
  display:flex; gap:24px;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
/* 3-up: each slide is a third of the window minus its share of the gaps. */
.carousel-track > .card{flex:0 0 calc((100% - 48px) / 3); margin:0}
.stat-num{
  font-size:40px; font-weight:700; letter-spacing:-.03em; line-height:1.1;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
/* Not every card's headline is a number. "Back-maintenance" set at 40px wraps
   to two lines, reads as a heading rather than a figure, and — because the
   flex track stretches every card to the tallest — inflated the whole
   carousel, leaving dead space under the short cards. 27px is already in the
   scale (the pricing box's value), so this borrows a size rather than
   inventing one. */
.stat-num.is-phrase{font-size:27px}
.stat-body{margin-top:12px}
.stat-src{
  margin-top:16px; padding-top:12px; border-top:1px solid var(--edge);
  font-size:13px; color:var(--muted);
}
.carousel-dots{display:flex; justify-content:center; gap:10px; margin-top:32px}
.carousel-dots button{
  width:8px; height:8px; padding:0; border-radius:50%;   /* a dot is a dot */
  border:0; background:var(--edge); cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.carousel-dots button[aria-current="true"]{background:var(--accent); transform:scale(1.3)}
.stat-note{margin-top:32px; font-size:14px; color:var(--muted)}

@media (max-width:900px){
  /* 1-up. The window still clips, so a partial neighbour never peeks. */
  .carousel-track > .card{flex:0 0 100%}
}

/* Reduced motion: a STATIC GRID. Not a slower carousel — no auto-advance, no
   transform, no dots to operate. Someone who asked the OS to stop animation
   should get the same seven facts laid out, not a slideshow they must wait on.
   The 3-column grid takes any card count; seven simply wraps to 3 + 3 + 1. */
@media (prefers-reduced-motion:reduce){
  .carousel-window{overflow:visible}
  .carousel-track{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
    transform:none !important; transition:none;
  }
  .carousel-track > .card{flex:none}
  .carousel-dots{display:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:900px){
  .carousel-track{grid-template-columns:1fr}
}

/* ── Dashboard browser frame ────────────────────────────────────────────── */
.browser{border:1px solid var(--edge); border-radius:10px; overflow:hidden; margin-top:56px; background:var(--white)}
.browser-bar{display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--alt); border-bottom:1px solid var(--edge)}
.urlbar{flex:1; background:var(--white); border:1px solid var(--edge); border-radius:var(--r); padding:6px 12px; font-size:13px; color:var(--muted); text-align:center}
.browser img{width:100%}

/* ── Pricing ────────────────────────────────────────────────────────────── */
.pricing{display:grid; grid-template-columns:1fr 400px; gap:72px; align-items:start}
.quote{background:var(--white); border:1px solid var(--edge); border-radius:10px; padding:32px}
.quote .qlabel{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.quote .qvalue{font-size:27px; font-weight:600; margin:8px 0 16px; letter-spacing:-.02em}
.quote .btn{width:100%; text-align:center; margin:24px 0}
.quote a.line{display:block; font-weight:500; color:var(--ink); padding:4px 0}

/* ── Form ───────────────────────────────────────────────────────────────── */
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px; max-width:var(--read)}
.field{display:flex; flex-direction:column; gap:8px}
.field.full{grid-column:1/-1}
label{font-size:14px; font-weight:500}
input{font-family:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--edge); border-radius:var(--r); background:var(--white); color:var(--ink)}
input:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
.phonewrap{display:flex; align-items:stretch}
.phonewrap .pfx{display:flex; align-items:center; padding:0 12px; font-weight:500; border:1px solid var(--edge); border-right:0; border-radius:var(--r) 0 0 var(--r); background:var(--alt)}
.phonewrap input{border-radius:0 var(--r) var(--r) 0; flex:1; width:100%}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.formnote{font-size:14px; color:var(--muted); margin-top:16px}
.msg{margin-top:16px; font-size:15px; font-weight:500}
.msg.ok{color:#127A45}
.msg.err{color:#B4232A}

/* ══ POLICY PAGES ═══════════════════════════════════════════════════════════
   720px reading measure, a crumb back to the landing page, and the
   blue-edged callout used for the two notes that must not be skimmed past. */
.crumb{display:inline-block; font-size:15px; font-weight:500; color:var(--muted); margin-bottom:40px}
.crumb:hover{color:var(--accent)}
.policy{padding:72px 0 112px}
.policy h1{font-size:40px; margin-bottom:12px}
.policy .updated{font-size:15px; color:var(--muted)}
.policy .intro{margin-top:32px}
.policy .intro p{font-size:19px}
.policy h2{font-size:21px; margin:56px 0 16px; letter-spacing:-.01em}
.policy h3{font-size:17px; margin:32px 0 8px}
.policy p{margin-bottom:16px}
.policy ul{margin:0 0 16px 0; padding-left:22px; color:var(--muted)}
.policy li{margin-bottom:8px}
.policy a.inline{color:var(--accent); font-weight:500}
.policy .contactblock{margin-top:8px}
.policy .contactblock a{color:var(--accent); font-weight:500; display:block; padding:2px 0}

/* ── Insights ───────────────────────────────────────────────────────────────
   An insight page IS a policy page typographically — same 720px measure, same
   heading scale — so it reuses .policy wholesale rather than growing a second
   prose system that would drift from it. Only four things are genuinely new:
   the listing rows, the dateline, the source line, and the follow block. */

/* The dateline on an article, matching .updated's weight so a reader moving
   between a policy page and an insight sees one convention, not two.

   ORDER MATTERS: this and .ientry .idate below have the SAME specificity
   (0,2,0), so whichever is written last wins. The general case is declared
   FIRST so the listing's smaller dateline can override it — reversing these
   two blocks silently makes every entry date 15px. */
.policy .idate{font-size:15px; color:var(--muted)}

/* Listing. Rows are separated by a rule rather than boxed into cards: this is
   an index to read down, not a grid to scan across, and at two entries a card
   grid would look like a product page with two products. */
.ilist{margin-top:8px; border-top:1px solid var(--edge)}
.ientry{display:block; padding:28px 0; border-bottom:1px solid var(--edge)}
.ientry h2{font-size:23px; margin:0 0 6px; letter-spacing:-.01em; color:var(--ink)}
.ientry:hover h2,.ientry:focus-visible h2{color:var(--accent)}
.ientry .idate{font-size:13px; font-weight:500; color:var(--muted); letter-spacing:.02em}
.ientry p{margin:8px 0 0; color:var(--muted)}

/* Source line. Deliberately quiet and deliberately present: a figure on this
   site names where it came from, and the same rule that governs the stat
   carousel governs an article that quotes one. */
.isource{
  margin-top:40px; padding-top:16px; border-top:1px solid var(--edge);
  font-size:14px; color:var(--muted);
}
.isource strong{font-weight:600; color:var(--ink)}

/* Follow block. Sits between the article and the site footer, inside the
   reading measure, so it reads as the end of the piece rather than as another
   footer column. */
.follow{
  margin-top:48px; border:1px solid var(--edge); border-left:3px solid var(--accent);
  border-radius:var(--r); padding:20px 22px;
}
.follow p{margin:0; font-size:16px}
.follow a{color:var(--accent); font-weight:600}

@media (max-width:700px){
  .ientry{padding:22px 0}
  .ientry h2{font-size:20px}
}

/* The callout. A left edge in the accent colour — no tint, no shadow, no
   rounded blob: the emphasis comes from the rule, consistent with the blue
   rules used in the Why section. */
.callout{
  border:1px solid var(--edge); border-left:3px solid var(--accent);
  border-radius:var(--r); background:var(--white);
  padding:24px 28px; margin:32px 0;
}
.callout p:last-child{margin-bottom:0}
.callout p{color:var(--ink)}

/* FAQ blocks on the support page reuse the reading measure, not cards. */
.faq{border-top:1px solid var(--edge); margin-top:40px}
.faq .q{border-bottom:1px solid var(--edge); padding:28px 0}
.faq .q h3{margin:0 0 10px}
.faq .q p:last-child{margin-bottom:0}

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer{background:var(--dark); color:#fff; padding:88px 0 48px}
footer a{color:#A7ADBA}
footer a:hover{color:#fff}
.fcols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px}
.fcols h4{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:18px}
.fcols a{display:block; padding:5px 0; font-size:15px}
.faddr{color:#A7ADBA; font-size:15px; max-width:300px; margin-top:18px}
footer .logo{color:#fff}
.fineprint{border-top:1px solid rgba(255,255,255,.12); margin-top:56px; padding-top:28px; color:#8A91A0; font-size:13px; line-height:1.7}
.fineprint p{color:#8A91A0; margin-bottom:12px}
.fineprint p:last-child{margin-bottom:0}

/* ── Reduced motion: the three animations stop; nothing else changes ────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stepnum{animation:none; background:none; -webkit-text-fill-color:var(--accent); color:var(--accent)}
  .inbox-subject{transition:none}
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  h1{font-size:40px}
  h2{font-size:31px}
  section{padding:80px 0}
  .hero{padding:64px 0 80px}
  .hero .wrap{grid-template-columns:1fr; gap:48px}
  .navlinks{display:none}
  .rules{grid-template-columns:1fr; gap:40px}
  .rowlist .row{grid-template-columns:1fr; gap:8px}
  .steps{grid-template-columns:1fr; gap:40px}
  .cards{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr; gap:40px}
  .formgrid{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr 1fr; gap:36px}
  .reportcard{padding:24px}
  .inbox-body{padding:22px}
  .policy h1{font-size:31px}
}
@media (max-width:420px){
  h1{font-size:34px}
  h2{font-size:27px}
  .wrap{padding:0 18px}
  .fcols{grid-template-columns:1fr}
  .hero-actions .btn{width:100%; text-align:center}
  .nav .wrap{gap:12px}
  .policy h1{font-size:27px}
  .callout{padding:20px}
}