/* ── FILE VERSION ──────────────────────────────────────────────────────────
   file:       static/css/marketing.css
   version:    1.0
   task:       Shared stylesheet for the two PUBLIC marketing surfaces — the
               landing page (Templates/login.html) and the article library
               (Templates/library.html). Rebuilt to design V0.4B; every token,
               keyframe and timing below comes from
               design_handoff_landing_and_library/ and is not to be adjusted
               by eye.

   WHY A FILE, when the design authors styling inline. The handoff puts
   per-element styles inline (deliberate, and preserved in both templates) but
   its :root token block, @keyframes and .acl-* hover classes were always a
   stylesheet — they simply lived in a <style> tag because a prototype is one
   file. Two pages share this shell, so duplicating ~120 lines across both
   templates would guarantee they drift. Per-element inline styling is
   untouched; only the sheet-shaped part moved here.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Fonts ─────────────────────────────────────────────────────────────────
   Self-hosted, already in static/vendor/fonts (byte-identical to the bundle's
   assets/fonts). Hanken Grotesk for all UI text; IBM Plex Mono for EVERY
   number, money value, lane code, date, eyebrow label and status tag.
   Paths are relative to this file (static/css/ → ../vendor/fonts/). */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../vendor/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../vendor/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../vendor/fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../vendor/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../vendor/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}

/* ── Design tokens ────────────────────────────────────────────────────────
   Verbatim from the handoff README's token table. Do not invent values; a
   colour that is not here does not belong on these pages. */
:root{
  --paper:#F4F4F0;--surface:#FFFFFF;--surface2:#FAFAF7;--ink:#16181C;--ink2:#5B626C;--ink3:#9AA0A8;
  --line:#E9E8E2;--line2:#D8D7CF;--grey-soft:#EDEDE7;
  --accent:#0F766E;--accent-press:#0B5A54;--accent-soft:#E4F0EE;--accent-border:#C7E0DC;
  --mint:#2DD4BF;
  --green:#1B8A4B;--green-soft:#E7F4ED;--amber:#B45309;--amber-soft:#FBF0DE;--red:#C2362C;
  --font:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}

/* The `hidden` attribute must actually hide. Both pages style elements inline
   (the design's convention), and an inline `display:flex` BEATS the UA
   stylesheet's `[hidden]{display:none}` on specificity — so `el.hidden = true`
   silently did nothing to any flex/grid element. That shipped a demo form
   which, the moment it opened, showed its "Thanks — request received" success
   panel and an empty error box alongside the empty fields. Every JS visibility
   toggle on these pages goes through the `hidden` property, so this one rule
   is what makes all of them real. */
[hidden]{display:none!important}

html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-press)}

/* ── Keyframes ────────────────────────────────────────────────────────────
   Timings are final per the handoff ("animation timings … are final"). */
@keyframes acl-dash{to{background-position:120px 0}}
@keyframes acl-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes acl-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes acl-blink{0%,49%{opacity:.55}50%,100%{opacity:0}}
@keyframes acl-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes acl-words{0%,16%{transform:translateY(0)}25%,41%{transform:translateY(-1.15em)}50%,66%{transform:translateY(-2.3em)}75%,91%{transform:translateY(-3.45em)}100%{transform:translateY(0)}}
@keyframes acl-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes acl-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes acl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes acl-float2{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ── Article marquee (landing page, "From the library") ────────────────────
   42s linear loop translating -50% across a duplicated track; hover pauses;
   disabled entirely under reduced motion (a marquee cannot be "instant"). */
.acl-marquee-track{animation:acl-marquee 42s linear infinite}
.acl-marquee:hover .acl-marquee-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.acl-marquee-track{animation:none}}

/* ── Hover / focus ─────────────────────────────────────────────────────────
   Per the handoff: rows and nav lighten, primary buttons darken to
   --accent-press, no scale or bounce. Focus is a 3px --accent-soft halo. */
.acl-lift{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .22s ease}
.acl-lift:hover{transform:translateY(-4px);box-shadow:0 20px 40px -22px rgba(15,118,110,.4);border-color:var(--accent-border)}
.acl-underline{position:relative}
.acl-underline::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.acl-underline:hover::after{transform:scaleX(1)}
.acl-topbar-link{color:rgba(255,255,255,.85)!important;transition:color .18s ease}
.acl-topbar-link:hover{color:#fff!important}
.acl-nav-link{color:var(--ink2)!important;transition:color .18s ease}
.acl-nav-link:hover{color:var(--ink)!important}
.acl-demo-nav{transition:background .18s ease}
.acl-demo-nav:hover{background:var(--accent-press)!important}
.acl-white-btn{transition:background .18s ease}
.acl-white-btn:hover{background:#EAF3F1!important}
.acl-accent-btn{transition:background .18s ease}
.acl-accent-btn:hover{background:var(--accent-press)!important}
.acl-ghost-btn{transition:background .18s ease}
.acl-ghost-btn:hover{background:var(--accent-soft)!important}
.acl-foot-link{transition:color .18s ease}
.acl-foot-link:hover{color:var(--accent)!important}
.acl-lang-item{transition:background .12s ease}
.acl-lang-item:hover{background:var(--accent-soft)!important}
.acl-row-hover{transition:background .18s ease}
.acl-row-hover:hover{background:var(--surface2)}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft);border-radius:4px}

/* ── Side switcher (landing page) ──────────────────────────────────────────
   Pill-track segmented control with an animated knob behind the active half.
   The 190ms cross-fade on the audience-aware region is applied by
   marketing_landing.js, which also skips it under reduced motion. */
.acl-side-fade{transition:opacity .19s ease}

/* ── Responsive ────────────────────────────────────────────────────────────
   The handoff is desktop-first at 1160px and explicitly does NOT design
   mobile ("Mobile breakpoints are not designed yet; ask before inventing
   them"). Owner ruling 2026-08-04: carry forward the breakpoints ALREADY
   shipped on this page rather than invent new ones or ship a page that
   horizontally scrolls on a phone. The rules below are exactly the 960px and
   640px sets that were live on Templates/login.html before this rebuild,
   extended only to the library grid — which did not exist then and collapses
   on the same two thresholds as every other multi-column grid here. */
@media (max-width:960px){
  .acl-grid-hero,.acl-grid-proof,.acl-grid-who,.acl-grid-featured{grid-template-columns:1fr!important;gap:36px!important}
  /* The reader page's outline moves ABOVE the prose and stops being sticky —
     a pinned sidebar on a narrow screen is a block of links sitting between
     the reader and the thing they came for. */
  .acl-grid-article{grid-template-columns:1fr!important;gap:28px!important}
  .acl-article-aside{position:static!important;top:auto!important;order:-1}
  .acl-grid-4,.acl-grid-3,.acl-grid-library{grid-template-columns:1fr 1fr!important}
  .acl-flow{grid-template-columns:repeat(2,1fr)!important;gap:26px 8px!important}
  .acl-flow-line{display:none!important}
  .acl-nav-links{display:none!important}
  .acl-hero-mock{display:none!important}
  .acl-grid-featured{gap:0!important}
  .acl-featured-aside{border-left:none!important;border-top:1px solid var(--line)!important}
}
@media (max-width:640px){
  .acl-grid-4,.acl-grid-3,.acl-grid-library,.acl-flow{grid-template-columns:1fr!important}
  .acl-demo-band-inner{padding:28px 22px!important}
  .acl-section-pad{padding-left:20px!important;padding-right:20px!important}
  .acl-topbar-utility{display:none!important}
  .acl-h-xl{font-size:34px!important;line-height:1.08!important}
  .acl-side-btn{font-size:16px!important;padding:14px 12px!important}
}

/* ── Reduced motion ────────────────────────────────────────────────────────
   Every animation above collapses to instant. The JS typewriters and the
   side-switch cross-fade check the same media query themselves — CSS alone
   cannot stop a setTimeout loop. */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}