/* The base stylesheet for the statically-rendered public pages -- /legal today,
   marketing from Task 8 on. It is the SSR counterpart to app.css, which only the
   WASM shell loads; component-specific rules live in scoped .razor.css files and
   reach the page through the host's aggregated styles bundle.

   Light-only, by owner ruling: no @media (prefers-color-scheme: dark), no
   [data-theme] block, no [data-cvd] block anywhere in this file. tokens.css puts
   the light palette bare on :root and MarketingHost sets neither attribute, so the
   light values are simply what resolves. Nothing here redefines a token tokens.css
   owns. */

/* The faces these pages actually use. app.css declares the same @font-face blocks
   for the WASM shell -- deliberately duplicated rather than extracted, because the
   alternative is a second stylesheet request on the app's first-paint path to save
   a handful of declarations nobody edits. If a face is added, add it in both files
   or it silently falls back.

   JetBrains Mono joined this file when marketing arrived: eyebrows, the CDSTK chip,
   the footer's bottom bar and the shared TickerBar are all mono, and the ticker was
   already asking for a face this page never loaded. Only 400 and 700 are self-hosted,
   the same two app.css declares -- a rule asking for 500 resolves to 400, which is
   what the app already does. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter/inter-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-tight/inter-tight-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-tight/inter-tight-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono/jetbrains-mono-latin-700-normal.woff2') format('woff2');
}

/* Page ground. min-height + flex column so a short page still fills the viewport. */
html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* Links and focus, from "Cardstock Legal.dc.html" lines 18-20 (legal.md §4 cites the
   same three rules). --acc rather than --link: the prototype says --acc here and the
   two tokens hold the same value in light, which is the only mode these pages render
   in -- so this is a usage choice, not a colour one, and the frozen source decides it. */
a {
  color: var(--acc);
  text-decoration: none;
}

a:hover {
  color: var(--accH);
  text-decoration: underline;
}

*:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------
   The marketing pages' own palette (marketing.md §2.1 and the footer block
   at "Cardstock Landing.dc.html":247-270).

   Every name here is new. Not one of them redefines a token tokens.css
   owns, and that is load-bearing rather than tidy: ContrastTests computes
   every WCAG ratio by parsing token hexes out of that one file, so a
   second definition of --bg or --acc would be invisible to it and free to
   drift below AA. These are additions, and ContrastTests reads them here.

   Two surfaces need naming because neither exists in the app. The
   marketing ground is warmer and a shade darker than --bg, and the footer
   is a permanently dark band inside a light-only page -- so it cannot take
   the dark-theme tokens, which resolve to their light values here (owner
   ruling 13: marketing has no other themes).
   --------------------------------------------------------------------- */
:root {
  --mk-ground: #F1F1EC;
  --mk-nav-bg: rgba(241, 241, 236, 0.92);
  --mk-dark: #0F0F11;
  --mk-dark-line: #232427;
  --mk-dark-ink: #F2F2EE;
  --mk-dark-mut: #9A9A96;
  --mk-dark-link: #B9B9B4;
  --mk-dark-link-hover: #8C9BF2;
  --mk-dark-mark: #ECECE6;
  --mk-dark-teal: #3FBFAD;

  /* marketing.md §3.5, "colour tokens used by the dark surfaces" -- the device-replica
     palette the shuffle deck's four panels and the methodology section's three panels
     both draw from. Not the same set as the seven tokens above: those paint the
     permanently-dark FOOTER band, these paint the smaller "screenshot" surfaces nested
     inside an otherwise light page, and the two surfaces use different hexes for the
     same role (footer ground #0F0F11 vs a device's own #131316). Four values are
     shared verbatim with the footer set above (chrome bar, inner rule, ink, accent-on-
     dark) and are not re-listed here -- see --mk-dark / --mk-dark-line / --mk-dark-ink /
     --mk-dark-link-hover. tokens.css owns none of these either. */
  --mk-chrome-bg: #131316;
  --mk-chrome-panel: #1B1C1F;
  --mk-chrome-border: #2A2B2E;
  --mk-chrome-ink2: #D6D6D0;
  --mk-chrome-accent-hover: #AAB6F6;
  --mk-chrome-pos: #46C08A;
  --mk-chrome-neg: #D0655E;
  --mk-chrome-warn: #C9A84C;
  --mk-chrome-tier9: #E0A93C;
  --mk-chrome-tier-raw: #A5A5A0;
}

/* The shell paints the ground; this reaches only the overscroll gutter above and below
   it, which would otherwise flash --bg. /legal shares this stylesheet and keeps --bg,
   so the rule is conditioned on the marketing shell actually being on the page. */
body:has(.mk-shell) {
  background: var(--mk-ground);
}

/* ---- primitives shared by the layout and the pages --------------------------------- */

/* marketing.md §2.1: 1080px and 40px gutters, consistent across every section on every
   page. Longhand padding, because sections add their own vertical padding and a shorthand
   here would fight them. */
.mk-container {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 620px) {
  .mk-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* app.css owns `.mono` for the WASM shell and is never loaded here, so marketing carries
   its own. Named differently on purpose: two globals with one name in two stylesheets is
   how they start diverging. */
.mk-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* The eyebrow above every marketing headline: mono, tracked out, accent. 4.65:1 on the
   marketing ground -- comfortably over AA but not by much, so it is one of the pairs
   ContrastTests pins. */
.mk-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--acc);
  margin: 0;
}

/* The same eyebrow, for the methodology section's dark ground -- --acc is a light-surface
   choice, so this repoints colour only, at the exact hex marketing.md §2.2 names for that
   eyebrow (#8C9BF2). Reuses --mk-dark-link-hover rather than adding a second token for the
   same hex: it is already "accent on dark" in every dark surface this stylesheet paints. */
.mk-eyebrow-dark {
  color: var(--mk-dark-link-hover);
}

/* The 30px/700 section heading both Features ("Three ways in.") and Methodology
   ("Trust is a feature.") use (marketing.md §2.2, §6.3). Shared here, not per-page,
   because Task 10's pillar pages carry no section heading of their own (§2.3) but a
   future page that does should reach for this rather than a third hand-rolled h2. */
.mk-section-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.mk-section-title-dark {
  color: var(--mk-dark-ink);
}

/* The filled indigo CTA, at the hero's scale. The nav's copy overrides size and radius.
   White on --btn is 5.27:1; ink on it would be 3.23:1, which is why the rule is a ratio
   and not "always use ink" (ContrastTests.White_on_the_primary_button_clears_AA). */
.mk-btn-primary {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--btn);
  border-radius: 8px;
  padding: 11px 20px;
  text-decoration: none;
}

.mk-btn-primary:hover {
  color: #FFFFFF;
  background: var(--btnH);
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   Task 10: the three pillar pages (marketing.md §2.3). Structurally
   identical to each other -- same hero grid, same replica shell, same
   three-card feature strip -- so the shared shape lives here once
   rather than three times over in per-page scoped files. Each page's
   own scoped .razor.css carries only what actually differs between
   them: the content inside the dark replica.

   Deliberately NOT named .mk-hero-grid / .mk-feature-card / etc.: those
   names already exist, scoped to Landing.razor.css, for the Landing's
   own (differently-proportioned, 1.05fr/0.95fr) hero and its five-slot
   decorative card fan. A bare global rule under the same name would
   still lose every specificity fight to Landing's own scoped one, but
   two definitions of "the same name" in two files is exactly the
   divergence risk .mk-mono's own comment above already flags -- so
   this carries its own name throughout instead.
   --------------------------------------------------------------------- */
.pillar-hero {
  overflow-x: clip;
}

.pillar-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding-top: 52px;
  padding-bottom: 56px;
}

.pillar-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Inter Tight 700, not the spec's 800: only 400/600/700 are self-hosted (Landing.razor.css's
   own note on its 52px headline covers why), and CSS resolves a requested 800 to the
   nearest heavier face actually loaded, which is 700. */
.pillar-hero-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0;
  max-width: 480px;
  text-wrap: pretty;
}

.pillar-hero-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--mut);
  margin: 0;
  max-width: 460px;
  text-wrap: pretty;
}

.pillar-hero-cta {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* The secondary "All of Cardstock ->" link. Colour and hover both come from the global
   `a` / `a:hover` rules above -- this adds only the size and weight marketing.md §2.3
   specifies (14px/600) on top of them. */
.pillar-cta-secondary {
  font-size: 14px;
  font-weight: 600;
}

.pillar-replica-wrap {
  display: flex;
  justify-content: flex-end;
}

/* The 500px dark app replica, marketing.md §2.3 verbatim. --mk-chrome-* is the same
   device-replica palette the Landing's own shuffle deck and methodology panels draw
   from (§3.5) -- one more consumer of an existing set, not a new one. */
.pillar-replica {
  width: 500px;
  max-width: 100%;
  background: var(--mk-chrome-bg);
  border: 1px solid var(--mk-chrome-border);
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(28, 28, 30, 0.25);
  box-sizing: border-box;
  overflow: hidden;
  font-size: 13px;
  color: var(--mk-dark-ink);
}

.pillar-features {
  border-top: 1px solid var(--line);
  padding-top: 36px;
  padding-bottom: 56px;
}

.pillar-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* A plain, non-interactive card throughout -- unlike the Landing's own three feature
   cards (Task 9), which are real links to the three pillar pages. These describe facets
   of the one pillar the visitor is already on; there is no analogous destination for
   them to link to, and marketing.md §5.5 leaves "should these kickers become real links"
   an open question this task does not resolve. */
.pillar-feature-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  color: var(--ink);
}

/* h2, not the prototype's own h3: the pillar pages carry no section heading above this
   grid (§2.3, "no eyebrow and no section heading" for the features strip, unlike the
   Landing's "THE TOOLKIT" / "Three ways in."), so an h3 here would skip a heading level
   with nothing to skip past. The Landing's own h1 -> h2 -> h3 stays intact; there is no
   h2 on these three pages to collide with it. */
.pillar-feature-card h2 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}

.pillar-feature-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mut);
  margin: 0;
}

.pillar-feature-icon {
  width: 64px;
  height: 40px;
}

/* The icon vocabulary, shared by the Landing's .feature-icon and the three pillar pages'
   .pillar-feature-icon so one place defines what each class means.
 
   It was `stroke: var(--acc)` on every shape, single-tone, and the comment here justified
   that by pointing at Landing.razor.css doing the same. Both were wrong the same way: every
   icon in the frozen prototypes is TWO-TONE -- a grey (#E4E4E0) structure with one accent
   (#4A63D0) element carrying the meaning, which is the whole reading of "the third bar is
   the one that matters". A blanket stroke cannot express that, so the icons were redrawn as
   single-tone substitutes instead. Owner found it at UAT 2026-08-29.
 
   The prototype's literals resolve through the tokens they already equal: #E4E4E0 = --line,
   #1C1C1E = --ink, #4A63D0 = --acc, #FFFFFF = --card. No new hex. */
.feature-icon rect,
.feature-icon polyline,
.feature-icon line,
.pillar-feature-icon rect,
.pillar-feature-icon polyline,
.pillar-feature-icon line,
.pillar-feature-icon path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* EVERY helper below is written under both parents on purpose. The reset above is
   `.feature-icon rect` -- specificity (0,1,1) -- so a bare `.fi-line` at (0,1,0) LOSES to it
   and its `fill: none` wins, which renders every filled bar invisible. That is not
   hypothetical: these helpers started life scoped inside Landing.razor.css as
   `.feature-icon .fi-*`, were flattened to bare classes when they moved here, and the
   Screener icons went blank in the deployed build before this was caught (2026-08-29).
   Two class selectors, (0,2,0), is what keeps them ahead of the reset. */

/* Filled structure (bars) vs filled accent (the one bar that carries the reading). */
.feature-icon .fi-line,
.pillar-feature-icon .fi-line { fill: var(--line); stroke: none; }

.feature-icon .fi-acc,
.pillar-feature-icon .fi-acc { fill: var(--acc); stroke: none; }

.feature-icon .fi-fill-card,
.pillar-feature-icon .fi-fill-card { fill: var(--card); }

/* Stroked. --line for structure a reader should not focus on, --ink for a real series,
   --acc for the element the card is actually about. */
.feature-icon .fi-stroke-line,
.pillar-feature-icon .fi-stroke-line { stroke: var(--line); }

.feature-icon .fi-stroke-ink,
.pillar-feature-icon .fi-stroke-ink { stroke: var(--ink); }

.feature-icon .fi-stroke-acc,
.pillar-feature-icon .fi-stroke-acc { stroke: var(--acc); }

/* A baseline is a rule, not a series: butt caps so it does not bulge past its own extent. */
.feature-icon .fi-baseline,
.pillar-feature-icon .fi-baseline { stroke: var(--line); stroke-linecap: butt; }

/* The prototypes use 2.5 for a foreground series against 2 for its grey companion. */
.feature-icon .fi-thick,
.pillar-feature-icon .fi-thick { stroke-width: 2.5; }

.feature-icon .fi-dashed,
.pillar-feature-icon .fi-dashed { stroke-dasharray: 4 4; }

.feature-icon .fi-dashed-tight,
.pillar-feature-icon .fi-dashed-tight { stroke-dasharray: 3 3; }

.pillar-feature-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--acc);
}

/* Same breakpoint as the Landing's own hero and features (Landing.razor.css): one column
   once 1080px + gutters no longer fits. */
@media (max-width: 860px) {
  .pillar-hero-grid {
    grid-template-columns: 1fr;
  }

  .pillar-hero-title {
    font-size: 40px;
  }

  .pillar-feature-grid {
    grid-template-columns: 1fr;
  }
}

/* The replica scroller the Screener and Binder heroes wrap their tables in (D-293). Above
   620px the wrapper is inert and the fade is not drawn; at phone width the tables keep all
   their columns and scroll sideways inside the replica, with a fade on the right edge
   saying there is more. The Charts replica has no scroller: its SVG scales. */
.replica-fade {
  display: none;
}

/* Phone width (D-293; the handoff's artboards 1a-1e at 390px). 44px-and-up tap targets,
   tighter vertical rhythm, and the pillar hero sized for one column. */
@media (max-width: 620px) {
  .mk-btn-primary {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 48px;
    padding: 0 20px;
  }

  .mk-section-title {
    font-size: 28px;
  }

  .pillar-hero-grid {
    gap: 32px;
    padding-top: 28px;
    padding-bottom: 44px;
  }

  .pillar-hero-title {
    font-size: 36px;
  }

  .pillar-hero-body {
    font-size: 16px;
  }

  .pillar-hero-copy {
    gap: 18px;
  }

  /* The "Illustrative preview" caption inherits the body's 15px and the UA's paragraph
     margins at every width; at phone width it takes caption size and loses both. */
  .pillar-hero-copy .mk-mono {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
  }

  .pillar-hero-cta {
    flex-wrap: wrap;
  }

  .pillar-cta-secondary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* min-width: 0, because a grid item's automatic minimum is its content's: the 480px
     scroller inside would otherwise widen the one column past the viewport, and the
     hero's overflow-x: clip would silently cut the headline and body off on the right. */
  .pillar-replica-wrap {
    justify-content: stretch;
    min-width: 0;
  }

  .pillar-replica {
    width: 100%;
    position: relative;
  }

  .replica-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .replica-scroll > * {
    min-width: 480px;
  }

  .pillar-replica .replica-fade {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(19, 19, 22, 0), var(--mk-chrome-bg));
  }

  .pillar-features {
    padding-top: 32px;
    padding-bottom: 48px;
  }

  .pillar-feature-grid {
    gap: 14px;
  }

  .pillar-feature-card {
    padding: 20px;
  }
}

/* The Binder keeps its stats and foot outside the scroller, so its fade rides a wrapper
   around the table alone rather than the whole replica. */
.replica-scroll-wrap {
  position: relative;
}