/* ============================================================
   AIGONIX — "Dawn Signal" design system
   Shared stylesheet for the aigonix.com homepage and the
   Invoice Intelligence product page.

   Source of truth: Aigonix/Owner Inbox/23-09-2026_elin_homepage-dawn-signal.html
   (Elin's approved prototype/QA build). Tokens, hero mechanics, card and
   footer patterns are carried over from that file. New rules added here
   for the problem-framing section, the production footer legal block, and
   the Invoice Intelligence product page (intro band, five-capability grid,
   how-it-works steps, outcomes grid) extend the same system rather than
   inventing a new one, per Theo's brief (23.09.2026).

   25-09-2026 RESTRUCTURE (Long Story homepage rebuild, Elin's spec
   25-09-2026_elin_homepage-restructure-long-story.md): added
   .nav-link--product (24-09 spec, never previously built into this file);
   .destination / .destination-modes / .destination-mode / .destination-tag
   / .destination-example / .destination-close; .foundation::before
   (spectrum-bar reuse of .site-footer::before) / .pillar-grid /
   .pillar-card + 4 accent modifiers; .hiw-grid taken from 2-up to 3-up with
   a 1024px 2+1 tier; .hiw-card--light--cobalt; .product / .product-panel /
   .product-copy / .product-art / .product-subhead. Removed the now-unused
   .capabilities rule — #capabilities no longer exists as a standalone
   section, its cards relocated into #product (.cap-grid/.card unchanged
   and still reused there). Every addition reuses existing tokens,
   gradients and the accent-cycle mechanism already in this file — no new
   colour values.

   25-09-2026 FOLLOW-UP: Advice demoted from a third #how-it-works card to
   a line folded into the section intro (Magnus's decision). .hiw-grid
   reverted to the pre-restructure 2-up pattern (1fr 1fr, single 768px
   breakpoint to 1fr, matching .destination-modes); the 1024px 2+1 tier
   and .hiw-card--light--cobalt were removed as dead weight.

   26-09-2026 ABOUT PAGE REDESIGN (Elin's spec
   25-09-2026_elin_about-page-redesign.md, Ray's copy
   25-09-2026_ray_about-page-copy.md): added .about-hero/.about-hero-card/
   .about-hero-copy/.about-hero-art (hero-position variant of
   .product-panel's mechanics, same radius/gradient/art motif, no new
   colour values) and .about-values/.prose-blocks/.prose-block (single-
   column flowing prose, deliberately not a card grid). Extended
   .hero h1,.ii-hero h1 to include .about-hero-copy h1 rather than
   duplicating the rule.

   KNOWN OPEN ISSUE (carried over, not fixed here): the homepage hero's
   ridge/mountain parallax has a confirmed cross-browser bug — verifies
   correctly under DOM inspection but doesn't visibly animate for Magnus in
   Chrome/Firefox on his machine, root cause not yet identified. Shipping
   as-is per Magnus's explicit instruction; the sun's parallax works
   correctly and is unaffected. See dawn-signal.js for the transform logic.
   ============================================================ */

:root{
  --paper:#fffaf3;
  --ink:#191a21;
  --dim:#6b6558;
  --line:#ece2d2;

  /* Dawn Signal palette — locked, Brand Foundation Section 4 (23.09.2026) */
  --sky-indigo:#1c1f4d;
  --sky-cobalt:#28418f;
  --sky-coral:#ff7a52;
  --sky-amber:#ffb15e;
  --sky-blush:#ffd9b8;
  --glow:#fff3d6;
  --card-glow:#ffe9c2;

  /* Secondary text on a dark dawn (Indigo/Cobalt) surface. ~9.9:1 against
     Indigo, ~6.0:1 against Cobalt (the lighter gradient endpoint). */
  --on-dark-dim:#d9cdb6;

  --font-head:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-body:"Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maxw:1280px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-weight:400;line-height:1.6;
  font-size:1.0625rem;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.75rem)}
h1,h2,h3,h4{font-family:var(--font-head);margin:0;color:var(--ink)}
p{margin:0}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}

.sub,.cap-lead,.hiw-head p,.card p,.hiw-card p.body,.problem-body,.step-card p,.outcome-card p{text-wrap:pretty}
h1,.cap-head h2,.hiw-head h2,.section-head h2{text-wrap:balance}

:focus-visible{
  outline:3px solid var(--paper);outline-offset:2px;
  box-shadow:0 0 0 5px var(--ink);border-radius:4px;
}

.skip-link{
  position:absolute;left:-9999px;top:1rem;z-index:100;
  background:var(--ink);color:var(--paper);padding:.75rem 1.25rem;border-radius:6px;
  font-family:var(--font-body);font-weight:500;font-size:.9375rem;text-decoration:none;
}
.skip-link:focus{left:1rem}

header{
  position:sticky;top:0;z-index:40;background:rgba(255,250,243,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
header .row{display:flex;align-items:center;justify-content:space-between;padding:1rem clamp(1.25rem,4vw,2.75rem)}
.logo{font-family:var(--font-head);font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
a.logo{text-decoration:none;color:inherit;display:inline-block}
nav{display:flex;align-items:center;gap:2rem}
.nav-links{display:flex;gap:1.75rem;font-size:.9375rem;color:var(--dim)}
.nav-links a{text-decoration:none}

/* ---------- PAGE SUBNAV (25-09-2026) ----------
   The primary header nav is now identical on every page (same items, same
   destinations everywhere) — no more page-specific items swapped in and
   out. Pages with enough of their own sections to need in-page navigation
   (currently: the Invoice Intelligence product page) get this instead: a
   slim sticky bar just under the header, scoped to that page's own
   sections, with a scroll-spy active state. Deliberately NOT hidden at the
   900px nav-links breakpoint — it's the closest thing to a working mobile
   nav this page has for jumping between its own sections. */
.page-subnav{
  position:sticky;top:var(--header-h,68px);z-index:30;
  background:var(--paper);border-bottom:1px solid var(--line);
}
.page-subnav .row{
  display:flex;gap:1.5rem;overflow-x:auto;scrollbar-width:none;
  padding:.6rem clamp(1.25rem,4vw,2.75rem);
}
.page-subnav .row::-webkit-scrollbar{display:none}
.page-subnav a{
  font-family:var(--font-head);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;white-space:nowrap;
  padding-bottom:.15rem;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.page-subnav a:hover{color:var(--ink)}
.page-subnav a.is-active{color:var(--sky-cobalt);border-bottom-color:var(--sky-cobalt)}
.nav-links a:hover{color:var(--ink)}
.nav-link--product{color:var(--sky-cobalt);font-weight:600}
.nav-link--product:hover{color:var(--ink)}
.cta{
  font-family:var(--font-body);font-weight:600;font-size:.92rem;
  background:linear-gradient(135deg,var(--sky-coral),var(--sky-amber));
  color:#241300;padding:.6rem 1.15rem;border-radius:999px;border:none;
  cursor:pointer;text-decoration:none;display:inline-block;
  box-shadow:0 6px 18px -6px rgba(255,122,82,.55);
  transition:filter .2s,transform .1s;
}
.cta:hover{filter:brightness(1.05)}
.cta:active{transform:translateY(1px)}

/* ---------- HERO (homepage only) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-bottom:clamp(4rem,13vh,8rem)}
.hero-svg{position:absolute;inset:0;width:100%;height:100%}
.hero-svg svg{width:100%;height:100%;display:block}

.hero-copy{position:relative;z-index:5;width:100%;padding:clamp(2rem,6vw,4rem) clamp(1.25rem,4vw,2.75rem) clamp(3rem,8vw,5.5rem)}
.hero-copy .inner{max-width:var(--maxw);margin:0 auto}
.eyebrow{
  font-family:var(--font-head);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--glow);background:rgba(28,31,77,.35);border:1px solid rgba(255,243,214,.35);
  display:inline-block;padding:.35rem .75rem;border-radius:999px;margin-bottom:1.25rem;
  backdrop-filter:blur(6px);
}
/* Scoped to the two dark hero sections — a bare `h1` selector here
   previously hit every H1 site-wide (white text + dark-background shadow),
   which only ever looked right because every prior H1 happened to sit in
   a dark hero. The About page's H1 (25-09-2026) is the first on a light
   background and exposed it: ghosted/blurred-looking text. Narrowed
   rather than removed, since .hero/.ii-hero's own H1 styling is signed
   off and still needs this treatment. */
.hero h1,.ii-hero h1,.about-hero-copy h1{
  font-weight:700;letter-spacing:-.02em;
  font-size:clamp(2.25rem,5.4vw,4.25rem);line-height:1.05;margin:0 0 1rem;
  color:#fffaf3;max-width:16ch;
  text-shadow:0 2px 24px rgba(28,20,10,.35);
}
.sub{font-size:clamp(1.05rem,1.6vw,1.2rem);color:#fff1de;max-width:42ch;margin:0 0 2rem;display:block}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.secondary-link{font-weight:600;font-size:.95rem;color:#fff1de;text-decoration:underline;text-underline-offset:3px}

/* ---------- SECTION SCAFFOLDING ---------- */
section.band{padding:clamp(3.5rem,8vw,6rem) 0;border-top:1px solid var(--line)}
.section-head{max-width:60ch;margin-bottom:clamp(2rem,5vw,3.5rem)}
.section-eyebrow{
  font-family:var(--font-head);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sky-cobalt);font-weight:600;margin:0 0 .75rem;
}
.section-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.01em;margin:0 0 .75rem}
.section-head p{color:var(--dim);font-size:1.0625rem;max-width:56ch}

/* ---------- glowing document-card icon motif (shared) ---------- */
.doc-icon{width:42px;height:42px;flex:none}
.doc-icon svg{display:block;width:100%;height:100%;overflow:visible}

/* ---------- CAPABILITY CARDS (shared: homepage #product Part B, II page) ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.card{
  border:1px solid var(--line);border-radius:14px;padding:1.75rem 1.5rem;
  background:linear-gradient(180deg,#fff,#fffaf1);
  display:flex;flex-direction:column;gap:1rem;min-height:200px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 34px -20px rgba(28,31,77,.35);border-color:var(--sky-blush)}
.card h3{font-size:1.02rem;margin:0;letter-spacing:-.01em;font-weight:600}
.card p{margin:0;color:var(--dim);font-size:.92rem}

/* Invoice Intelligence page reuses the same card, 3-up grid (5 cards, wraps 3+2) */
.cap-grid--ii{grid-template-columns:repeat(3,1fr)}

/* ---------- PROBLEM-FRAMING SECTION (homepage, above capabilities) ---------- */
.problem{background:linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--sky-blush) 22%, var(--paper)) 100%)}
.problem-body{color:var(--dim);font-size:1.0625rem;max-width:60ch;margin:0 0 2rem}
.problem-questions{display:flex;flex-direction:column;gap:.9rem;margin:0 0 2rem;max-width:68ch}
.problem-q{
  display:flex;gap:.9rem;align-items:flex-start;
  border-left:3px solid var(--sky-coral);
  background:color-mix(in srgb, var(--sky-blush) 14%, transparent);
  border-radius:8px;padding:.5rem .75rem .5rem 1.1rem;
  font-size:1.0625rem;color:var(--ink);
}
.problem-q .q-mark{
  font-family:var(--font-head);font-weight:700;color:var(--sky-coral);flex:none;
  font-size:.95rem;line-height:1.6;
}
.problem-bridge{
  font-family:var(--font-head);font-weight:600;font-size:1rem;color:var(--sky-cobalt);
  margin-top:.5rem;
}

/* ---------- DESTINATION (homepage, new) ----------
   Full-bleed dark band, the only fully dark passage between hero and
   footer besides Product's panel — the two rhyme via the same gradient.
   No top border (colour break is the divider). */
section.band.destination{border-top:none}
.destination{background:linear-gradient(150deg, var(--sky-indigo) 0%, var(--sky-cobalt) 100%)}
.destination .section-head h2{color:var(--paper)}
.destination .section-head p{color:var(--on-dark-dim)}
.destination-modes{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:2.5rem 0 2rem}
.destination-mode{padding:0 2.25rem}
.destination-mode:first-child{padding-left:0}
.destination-mode:last-child{padding-right:0;border-left:1px solid rgba(255,250,243,.18)}
.destination-mode h3{color:var(--paper);font-size:clamp(1.25rem,2vw,1.5rem);margin:0 0 .5rem}
.destination-mode p{color:var(--on-dark-dim);margin:0}
p.destination-tag{
  font-family:var(--font-head);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;color:var(--sky-amber);margin:0 0 .5rem;
}
.destination-mode .destination-example{
  font-family:var(--font-head);font-size:.9rem;color:var(--glow);
  border-left:2px solid var(--sky-amber);padding-left:1rem;margin-top:1.75rem;
}
.destination-close{
  font-family:var(--font-head);font-weight:600;color:var(--glow);text-align:center;
  border-top:1px solid rgba(255,250,243,.18);padding-top:1.5rem;margin-top:2rem;
}
@media (max-width:768px){
  .destination-modes{grid-template-columns:1fr}
  .destination-mode{padding:0}
  .destination-mode:last-child{border-left:none;border-top:1px solid rgba(255,250,243,.18);padding-top:1.5rem;margin-top:1.5rem}
}

/* ---------- FOUNDATION (homepage, new) ----------
   Cobalt-tint wash (same formula as .steps-band). Spectrum-bar opener
   reuses .site-footer::before's gradient as a page-level bookend. Pillar
   cards reuse the .card family's mechanics (border-top accent, grid) but
   scaled up. Heading colour follows the same accent-cycle-card pattern as
   .card/.outcome-card/.step-card h3 elsewhere in this file: the accent
   carries the border-top, the heading text stays var(--ink) so contrast
   against the white/cream card background never depends on which accent
   is lightest (coral/amber fail WCAG AA as direct text colour on this
   background; fixed 25-09-2026 per Elin's QA). */
.foundation{position:relative;background:linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--sky-cobalt) 6%, var(--paper)) 100%)}
.foundation::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--sky-indigo),var(--sky-cobalt),var(--sky-coral),var(--sky-amber));
}
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.pillar-card{
  border:1px solid var(--line);border-top:3px solid var(--accent, var(--sky-indigo));
  border-radius:14px;padding:2.25rem 2rem;min-height:240px;
  display:flex;flex-direction:column;gap:1rem;
  background:linear-gradient(180deg,#fff,#fffaf1);
}
.pillar-card h3{font-size:1.15rem;margin:0;letter-spacing:-.01em;font-weight:600}
.pillar-card p{margin:0;color:var(--dim);font-size:.95rem}
.pillar-card--indigo{--accent:var(--sky-indigo)}
.pillar-card--cobalt{--accent:var(--sky-cobalt)}
.pillar-card--coral{--accent:var(--sky-coral)}
.pillar-card--amber{--accent:var(--sky-amber)}

/* ---------- HOW WE WORK (homepage) ---------- */
.how-it-works{background:var(--paper)}
.hiw-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
.hiw-card{
  border-radius:16px;padding:clamp(1.75rem,3vw,2.5rem);
  display:flex;flex-direction:column;gap:1.25rem;min-height:320px;
  position:relative;overflow:hidden;
}
.hiw-tag{font-family:var(--font-head);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.hiw-card h3{font-size:clamp(1.25rem,2vw,1.5rem);position:relative;z-index:2}
.hiw-card p.body{font-size:1rem;line-height:1.6;position:relative;z-index:2}

.hiw-card--dark{background:linear-gradient(150deg,var(--sky-indigo) 0%,var(--sky-cobalt) 100%);color:var(--paper)}
.hiw-card--dark h3{color:var(--paper)}
.hiw-card--dark .hiw-tag{color:var(--sky-amber)}
.hiw-card--dark p.body{color:var(--on-dark-dim)}
.hiw-status{
  display:flex;align-items:center;gap:.6rem;margin-top:auto;padding-top:1.25rem;
  border-top:1px solid rgba(255,250,243,.18);font-size:.875rem;color:var(--on-dark-dim);
  position:relative;z-index:2;
}
.hiw-status .dot{width:7px;height:7px;border-radius:50%;background:var(--sky-amber);flex:none;
  box-shadow:0 0 0 3px rgba(255,177,94,.3)}
.mini-stream{position:absolute;right:-6px;bottom:-6px;width:170px;height:170px;opacity:.6;pointer-events:none;z-index:1}
.mini-stream svg{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:no-preference){
  .mini-stream .drift{animation:drift 7s ease-in-out infinite}
  .mini-stream .drift2{animation:drift 9s ease-in-out infinite reverse}
}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:no-preference){
  .about-hero-art .drift{animation:drift 8s ease-in-out infinite}
  .about-hero-art .drift2{animation:drift 10s ease-in-out infinite reverse}
  .about-hero-art .drift3{animation:drift 6.5s ease-in-out infinite}
}

.hiw-card--light{
  background:linear-gradient(160deg, color-mix(in srgb, var(--sky-amber) 16%, var(--paper)) 0%, var(--paper) 65%);
  border:1px solid color-mix(in srgb, var(--sky-amber) 45%, var(--line));
  color:var(--ink);
}
.hiw-card--light .hiw-tag{color:var(--sky-cobalt)}
.hiw-card--light p.body{color:var(--dim)}
.deploy-pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto}
.deploy-pill{
  border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;
  font-size:.8125rem;font-weight:500;color:var(--ink);background:var(--paper);
}
.deploy-pill--highlight{border-color:var(--sky-coral);padding-left:1.6rem;position:relative;font-weight:600}
.deploy-pill--highlight::before{
  content:"";position:absolute;left:.7rem;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--sky-coral);
}

/* ---------- PRODUCT (homepage, replaces #capabilities) ----------
   Part A: dark proof panel, same gradient as .hiw-card--dark/.ii-hero,
   contained (not full-bleed) so the section reads as "dark panel + light
   grid" rather than a second full Destination band. Part B: .cap-grid,
   reused unchanged, under .product-subhead (reuses .section-eyebrow's
   formula as a divider label rather than a second .section-head). */
.product{background:var(--paper)}
.product-panel{
  position:relative;overflow:hidden;border-radius:16px;
  background:linear-gradient(150deg,var(--sky-indigo) 0%,var(--sky-cobalt) 100%);
  padding:clamp(2.5rem,5vw,4rem);
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:2rem;
}
.product-copy{position:relative;z-index:2;max-width:56ch}
.product-copy .eyebrow{margin-bottom:1.25rem}
.product-copy h2{color:var(--paper);font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.01em;margin:0 0 .75rem}
.product-copy p{color:var(--on-dark-dim);font-size:1.0625rem;margin:0 0 1.5rem;max-width:52ch}
.product-copy .secondary-link{color:#fff1de}
.product-art{position:relative;z-index:1;width:clamp(140px,18vw,240px);height:clamp(140px,18vw,240px);opacity:.9;pointer-events:none}
.product-art svg{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:no-preference){
  .product-art .drift{animation:drift 8s ease-in-out infinite}
  .product-art .drift2{animation:drift 10s ease-in-out infinite reverse}
  .product-art .drift3{animation:drift 6.5s ease-in-out infinite}
}
@media (max-width:640px){.product-art{display:none}}
.product-subhead{
  font-family:var(--font-head);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sky-cobalt);font-weight:600;margin:clamp(2.5rem,5vw,3.5rem) 0 1.5rem;
}

/* ---------- INVOICE INTELLIGENCE — intro band ---------- */
.ii-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(110% 130% at 90% 108%, var(--sky-amber) 0%, var(--sky-coral) 22%, rgba(255,122,82,0) 38%),
    linear-gradient(150deg,var(--sky-indigo) 0%,var(--sky-cobalt) 100%);
  padding:clamp(6rem,14vw,9rem) 0 clamp(4rem,9vw,6rem);
  min-height:clamp(420px, 56vh, 640px);
  display:flex;
  align-items:center;
}
.ii-hero > .wrap{width:100%}
.ii-hero .inner{position:relative;z-index:2;max-width:68ch}
.ii-hero h1{color:var(--paper);max-width:20ch}
.ii-hero .sub{color:var(--on-dark-dim);max-width:52ch}
.ii-hero-art{position:absolute;right:clamp(-40px,4vw,40px);top:50%;transform:translateY(-50%);
  width:clamp(140px, 22vw, 340px);height:clamp(140px, 22vw, 340px);opacity:.9;pointer-events:none;z-index:1}
.ii-hero-art svg{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:no-preference){
  .ii-hero-art .drift{animation:drift 8s ease-in-out infinite}
  .ii-hero-art .drift2{animation:drift 10s ease-in-out infinite reverse}
  .ii-hero-art .drift3{animation:drift 6.5s ease-in-out infinite}
}
@media (max-width:640px){.ii-hero-art{display:none}}

/* ---------- INVOICE INTELLIGENCE — five capabilities ---------- */
.model-intro{color:var(--dim);font-size:1.0625rem;max-width:60ch;margin:1.5rem 0 0}
.model-close{
  font-family:var(--font-head);font-size:1.0625rem;color:var(--ink);max-width:56ch;
  margin-top:clamp(2rem,4vw,2.75rem);padding-top:clamp(1.5rem,3vw,2rem);border-top:1px solid var(--line);
}

/* ---------- INVOICE INTELLIGENCE — how it works (numbered steps) ---------- */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.step-card{
  border:1px solid var(--line);border-radius:14px;padding:1.75rem 1.5rem;
  background:var(--paper);display:flex;flex-direction:column;gap:.75rem;
}
.step-num{
  font-family:var(--font-head);font-weight:700;font-size:1.5rem;color:var(--sky-blush);
  -webkit-text-stroke:1.5px var(--sky-coral);
}
.step-card h3{font-size:1.02rem;font-weight:600;letter-spacing:-.01em}
.step-card p{color:var(--dim);font-size:.92rem}

/* ---------- INVOICE INTELLIGENCE — outcomes ---------- */
.outcomes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.outcome-card{
  border:1px solid var(--line);border-radius:14px;padding:1.75rem 1.5rem;
  background:linear-gradient(180deg,#fff,#fffaf1);
  display:flex;flex-direction:column;gap:1rem;min-height:180px;
}
.outcome-card h3{font-size:1.02rem;margin:0;letter-spacing:-.01em;font-weight:600}
.outcome-card p{margin:0;color:var(--dim);font-size:.92rem}
.outcomes-close{
  font-family:var(--font-head);font-weight:600;font-size:1.15rem;color:var(--sky-cobalt);
  text-align:center;margin-top:clamp(2.5rem,5vw,3.5rem);
}

/* ---------- INVOICE INTELLIGENCE — how-it-works section background wash ---------- */
.steps-band{background:linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--sky-cobalt) 6%, var(--paper)) 100%)}

/* ---------- INVOICE INTELLIGENCE — product screenshots, browser-chrome frame ---------- */
.shots-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:clamp(2rem,4vw,3rem)}
.product-shot{
  margin:0;border-radius:14px;overflow:hidden;background:var(--paper);
  border:1px solid var(--line);box-shadow:0 28px 54px -26px rgba(28,31,77,.4);
}
.product-shot-chrome{display:flex;gap:6px;align-items:center;padding:.65rem .85rem;
  background:color-mix(in srgb, var(--ink) 5%, var(--paper));border-bottom:1px solid var(--line)}
.product-shot-chrome .dot{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb, var(--ink) 20%, var(--paper))}
.product-shot img{display:block;width:100%;height:auto}
.product-shot figcaption{padding:.9rem 1.1rem 1.15rem;font-size:.9rem;color:var(--dim)}
@media (max-width:900px){.shots-grid{grid-template-columns:1fr;gap:1.75rem}}

/* ---------- ACCENT-CYCLE CARDS (shared: .card, .outcome-card, .step-card) ----------
   Per Elin's 23-09-2026 colour spec. Base rule gives every card a coloured
   top border to carry; modifier classes set the specific accent per card and,
   for .card/.outcome-card, feed --accent into their tinted background. */
.card, .outcome-card, .step-card{ border-top: 3px solid var(--line); }
.card, .outcome-card{
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--sky-amber)) 10%, #fff) 0%, #fffaf1 100%);
}
.card--indigo,.outcome-card--indigo,.step-card--indigo{ border-top-color: var(--sky-indigo); --accent: var(--sky-indigo); }
.card--cobalt,.outcome-card--cobalt,.step-card--cobalt{ border-top-color: var(--sky-cobalt); --accent: var(--sky-cobalt); }
.card--coral,.outcome-card--coral,.step-card--coral{ border-top-color: var(--sky-coral); --accent: var(--sky-coral); }
.card--amber,.outcome-card--amber,.step-card--amber{ border-top-color: var(--sky-amber); --accent: var(--sky-amber); }
.card--blush,.outcome-card--blush,.step-card--blush{ border-top-color: var(--sky-blush); --accent: var(--sky-blush); }

/* ---------- FOOTER ---------- */
/* Dark navy footer (27.09.2026) — was the bright/paper background, per
   Magnus's request. Reuses --sky-indigo, the same dark tone already used
   across the site's other dark passages (hero, Destination, product
   panels), rather than introducing a new colour. All text/link/border
   colours below are recoloured for a dark background using the same
   on-dark tokens those other sections already use. */
.site-footer{background:var(--sky-indigo);position:relative}
.site-footer::before{
  content:"";display:block;height:3px;width:100%;
  background:linear-gradient(90deg,var(--sky-indigo),var(--sky-cobalt),var(--sky-coral),var(--sky-amber));
}
.footer-inner{padding:clamp(3rem,7vw,5rem) 0 2rem}
.footer-top{display:flex;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,250,243,.18)}
.footer-brand{max-width:32ch;position:relative}
.footer-brand::before{
  content:"";position:absolute;left:-40px;top:-20px;width:220px;height:220px;
  background:radial-gradient(circle, var(--glow) 0%, transparent 70%);
  opacity:.35;pointer-events:none;z-index:0;
}
.footer-logo{font-family:var(--font-head);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;color:var(--paper)}
a.footer-logo{text-decoration:none;display:inline-block}
.footer-tagline{color:var(--on-dark-dim);font-size:.9375rem;margin-top:.85rem;line-height:1.6}
.footer-nav{display:flex;gap:clamp(2rem,5vw,4rem);flex-wrap:wrap}
.footer-col h4{
  font-family:var(--font-head);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-dark-dim);margin:0 0 .9rem;font-weight:600;
}
.footer-col a,.footer-col p{display:block;color:var(--paper);text-decoration:none;font-size:.9375rem;margin-bottom:.6rem}
.footer-col a:hover{color:var(--sky-amber);text-decoration:underline}
.footer-col p{color:var(--on-dark-dim);margin-bottom:.25rem}

.footer-legal{
  margin-top:2.5rem;
  color:var(--on-dark-dim);font-size:.8125rem;line-height:1.7;
}
.footer-legal strong{color:var(--paper);font-weight:600}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  margin-top:2rem;padding-top:1.5rem;font-size:.8125rem;color:var(--on-dark-dim);
}

/* ---------- BREAKPOINTS: 1280 / 1024 / 768 / 376 ---------- */
@media (max-width:1024px){
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .cap-grid--ii{grid-template-columns:repeat(2,1fr)}
  .pillar-grid{grid-template-columns:repeat(2,1fr)}
  .mini-stream{width:130px;height:130px}
  .steps-grid{grid-template-columns:repeat(2,1fr)}
  .outcomes-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .nav-links{display:none}
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .cap-grid--ii{grid-template-columns:repeat(2,1fr)}
  .pillar-grid{grid-template-columns:repeat(2,1fr)}
  .hiw-grid{grid-template-columns:1fr}
  .product-panel{grid-template-columns:1fr}
  .footer-top{flex-direction:column}
  .footer-nav{gap:2.5rem}
}
@media (max-width:376px){
  .cap-grid{grid-template-columns:1fr}
  .cap-grid--ii{grid-template-columns:1fr}
  .pillar-grid{grid-template-columns:1fr}
  h1{max-width:none}
  .hiw-card{min-height:0}
  .steps-grid{grid-template-columns:1fr}
  .outcomes-grid{grid-template-columns:1fr}
  .footer-nav{flex-direction:column;gap:1.75rem}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* ---------- ABOUT PAGE — hero card (26-09-2026, Elin's spec) ----------
   Hero-position variant of .product-panel's mechanics: same 16px radius,
   same dark gradient, reused rather than a new component family. Art
   reuses the floating-card/stream SVG motif already driving .product-art/
   .ii-hero-art. See 25-09-2026_elin_about-page-redesign.md Section 1. */
.about-hero{padding-top:clamp(2rem,5vw,3.5rem)}
.about-hero-card{
  position:relative;overflow:hidden;border-radius:16px;
  background:linear-gradient(150deg,var(--sky-indigo) 0%,var(--sky-cobalt) 100%);
  padding:clamp(3rem,6vw,5rem) clamp(2rem,5vw,3.5rem);
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:2.5rem;
}
.about-hero-copy{position:relative;z-index:2;max-width:52ch}
.about-hero-copy .eyebrow{margin-bottom:1.25rem}
.about-hero-copy .sub{margin-bottom:2rem}
.about-hero-art{position:relative;z-index:1;width:clamp(150px,20vw,260px);height:clamp(150px,20vw,260px);opacity:.9;pointer-events:none}
.about-hero-art svg{width:100%;height:100%;display:block}
@media (max-width:768px){.about-hero-card{grid-template-columns:1fr}}
@media (max-width:640px){.about-hero-art{display:none}}

/* ---------- ABOUT PAGE — "How we work" prose section (26-09-2026) ----------
   Deliberately not a card grid: single-column, prose-width-constrained
   text, the contrast against every other section on the site is the
   point. See spec Section 3. */
.about-values{background:var(--paper)}
.prose-blocks{display:flex;flex-direction:column;gap:clamp(2rem,4vw,2.75rem);max-width:68ch}
.prose-block h3{font-size:1.15rem;margin:0 0 .6rem;letter-spacing:-.01em;font-family:var(--font-head)}
.prose-block p{color:var(--dim);font-size:1.0625rem;line-height:1.65;max-width:64ch}

/* ---------- ABOUT PAGE — contact/demo-booking form (25-09-2026) ----------
   New page, new form pattern — fields/labels/validation carried over from
   the old live site's #about form, restyled to Dawn Signal tokens (paper/
   ink/line for the field chrome, cobalt for focus, coral for error states
   instead of the old site's off-brand red). */
.contact-form{max-width:640px;margin-top:clamp(2rem,4vw,3rem);display:flex;flex-direction:column;gap:1.5rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.form-field{display:flex;flex-direction:column;gap:.4rem}
.form-field label{font-family:var(--font-body);font-weight:600;font-size:.9rem;color:var(--ink)}
.form-field label span{color:var(--dim)}
.form-field input,.form-field textarea{
  font-family:var(--font-body);font-size:1rem;color:var(--ink);
  padding:.75rem 1rem;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);transition:border-color .15s,box-shadow .15s;
}
.form-field textarea{resize:vertical}
.form-field input:focus,.form-field textarea:focus{
  outline:none;border-color:var(--sky-cobalt);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sky-cobalt) 20%, transparent);
}
.form-field input.field-error,.form-field textarea.field-error{border-color:var(--sky-coral)}
.form-error{display:none;font-size:.85rem;color:var(--sky-coral)}
.form-error.is-visible{display:block}
.contact-form .cta{border:none}
.form-actions{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.form-success{
  display:none;font-size:.9rem;padding:1rem 1.15rem;border-radius:10px;border:1px solid var(--line);
  color:var(--ink);background:var(--paper);
}
.form-success a{color:inherit}
.form-success.is-visible{display:block}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}

/* Reveal-on-scroll — scoped to .js so a no-JS visitor, or a browser where the
   IntersectionObserver script fails, always sees full-opacity content by default. */
.js .fade-up{opacity:0;transform:translateY(14px);transition:opacity .7s ease, transform .7s ease}
.js .fade-up.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .fade-up{opacity:1;transform:none;transition:none}
  .mini-stream .drift,.mini-stream .drift2,.ii-hero-art .drift,.ii-hero-art .drift2,.ii-hero-art .drift3,.product-art .drift,.product-art .drift2,.product-art .drift3,.about-hero-art .drift,.about-hero-art .drift2,.about-hero-art .drift3{animation:none}
}