/* ---------------------------------------------------------------------------
   Keny brand kit for the marketing site (#235): keny.io, the legal pages, the 404 and every
   future sub-page link this one file before their own styles:

     <link rel="stylesheet" href="/brand.css" />

   It holds the self-hosted fonts, the colour and glass tokens, the wordmark, the glass
   controls and the paper backdrop. The app is the single source: the tokens and the wordmark
   blocks below are generated from tailwind.config.js, src/index.css,
   src/components/AuroraGradient.tsx and src/components/KenyWordmark.tsx by
   `npm run brand:sync`, and `npm run check:brand` fails in CI while they are out of date or a
   page draws its own version. Guidance: product/design.md § Brand, .claude/rules/brand.md.
   --------------------------------------------------------------------------- */

/* ------------------------------------------------------------------ fonts
   Self-hosted from /fonts. Never load a font from another origin (fonts.googleapis.com,
   fonts.gstatic.com or any CDN): a remote font request hands the visitor's IP address to a
   third party before they have agreed to anything, which is the exposure a German court found
   unlawful in LG Munchen I 3 O 17493/20. The .woff2 files are copied from the same @fontsource
   packages the app uses (landing/README.md), so the two surfaces render identically. Only the
   latin and latin-ext subsets ship, which covers every EU and UK language the site is written
   in. */

/* Bricolage Grotesque, variable weight axis (200-800). */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter 400 / 500 / 600. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/inter-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/inter-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/inter-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/inter-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/inter-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/inter-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 500 (the only weight this page uses). */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* brand:tokens:start
   Generated by `npm run brand:sync` from tailwind.config.js, src/index.css and
   src/components/AuroraGradient.tsx. Do not edit by hand: change the app, then run the
   sync. `npm run check:brand` fails in CI while this block is out of date. */
:root {
  /* Colours (tailwind.config.js), each with its r g b channels for rgb(... / alpha). */
  --paper: #F6F7F4;
  --paper-rgb: 246 247 244;
  --surface: #FFFFFF;
  --surface-rgb: 255 255 255;
  --border: #E4E6E0;
  --border-rgb: 228 230 224;
  --ink: #16181D;
  --ink-rgb: 22 24 29;
  --ink-soft: #5C6068;
  --ink-soft-rgb: 92 96 104;
  --ink-tick: #3A3D44;
  --ink-tick-rgb: 58 61 68;
  --flare: #FF4F00;
  --flare-rgb: 255 79 0;
  --flare-soft: #FF7A3C;
  --flare-soft-rgb: 255 122 60;
  --flare-wash: #FFF3EC;
  --flare-wash-rgb: 255 243 236;
  --flare-wash-deep: #FFE2D2;
  --flare-wash-deep-rgb: 255 226 210;
  --flare-ink: #BB4B1D;
  --flare-ink-rgb: 187 75 29;
  --confirmed: #1E9E6A;
  --confirmed-rgb: 30 158 106;
  --pending: #E8A13C;
  --pending-rgb: 232 161 60;
  --at-risk: #D64545;
  --at-risk-rgb: 214 69 69;
  --superseded: #8B8FA3;
  --superseded-rgb: 139 143 163;
  --confirmed-ink: #146B48;
  --confirmed-ink-rgb: 20 107 72;
  --pending-ink: #9A6A16;
  --pending-ink-rgb: 154 106 22;
  --at-risk-ink: #B23A3A;
  --at-risk-ink-rgb: 178 58 58;

  /* Type and shape (tailwind.config.js). */
  --font-display: "Bricolage Grotesque Variable", "Bricolage Grotesque", system-ui, sans-serif;
  --font-sans: Inter, system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --radius-card: 8px;
  --radius-control: 6px;
  --shadow-subtle: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.03);
  --shadow-panel: 0 8px 24px rgba(16, 24, 40, 0.08);

  /* Glass, focus and editing (src/index.css). */
  --glass: rgba(255, 255, 255, 0.56);
  --glass-strong: rgba(255, 255, 255, 0.8);
  --glass-field: rgba(255, 255, 255, 0.62);
  --glass-menu: rgba(255, 255, 255, 0.82);
  --glass-card: rgba(255, 255, 255, 0.84);
  --glass-section: rgba(255, 255, 255, 0.72);
  --glass-window: rgba(246, 247, 244, 0.7);
  --glass-docked: rgba(246, 247, 244, 0.62);
  --glass-bar: linear-gradient(rgba(255, 255, 255, 0.5), rgba(246, 247, 244, 0.48));
  --glass-bar-open: rgba(255, 255, 255, 0.7);
  --glass-edge: rgba(22, 24, 29, 0.07);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --glass-drop: 0 1px 2px rgba(16, 24, 40, 0.06);
  --glass-menu-shadow: 0 12px 32px -8px rgba(16, 24, 40, 0.18);
  --glass-window-shadow: 0 24px 60px -16px rgba(16, 24, 40, 0.24);
  --glass-blur: blur(16px) saturate(1.4);
  --glass-blur-menu: blur(22px) saturate(1.5);
  --glass-blur-window: blur(28px) saturate(1.5);
  --glass-hover: rgba(236, 237, 232, 0.85);
  --glass-hover-edge: rgba(22, 24, 29, 0.1);
  --glass-row-hover: rgba(22, 24, 29, 0.05);
  --glass-selected: rgba(255, 240, 230, 0.72);
  --glass-pill: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px var(--glass-edge), 0 1px 3px rgba(22, 24, 29, 0.06);
  --focus-ring: 0 0 0 2px rgba(22, 24, 29, 0.28);
  --edit-edge: rgba(22, 24, 29, 0.16);
  --edit-ring: 0 0 0 3px rgba(22, 24, 29, 0.06);

  /* The paper backdrop (AuroraGradient.tsx and the grain tiles in src/index.css). */
  --backdrop-field: radial-gradient(70% 45% at 18% 52%, rgba(120,160,255,.16), rgba(120,160,255,0) 70%), radial-gradient(60% 45% at 82% 46%, rgba(110,205,170,.12), rgba(110,205,170,0) 70%), radial-gradient(90% 30% at 50% 108%, rgba(255,122,60,.10), rgba(255,122,60,0) 70%);
  --backdrop-glow: radial-gradient(900px 440px at 6% -10%, rgba(255,122,60,.36), rgba(255,79,0,.12) 42%, rgba(255,79,0,0) 72%), radial-gradient(760px 400px at 92% -14%, rgba(120,160,255,.30), rgba(120,160,255,0) 70%);
  --backdrop-glow-mask: linear-gradient(#000 45%, transparent);
  --backdrop-glow-corner: radial-gradient(820px 520px at 104% calc(100% + 90px), rgba(255,122,60,.42), rgba(255,79,0,.14) 44%, rgba(255,79,0,0) 72%);
  --backdrop-grain-mask: radial-gradient(760px 380px at 6% -76px, #000, transparent 70%), radial-gradient(760px 480px at 104% calc(100% + 90px), #000, transparent 70%);
  --grain-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.086 0 0 0 0 0.094 0 0 0 0 0.114 3 0 0 0 -1.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-glow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.31 0 0 0 0 0 3 0 0 0 -1.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* brand:tokens:end */

/* brand:wordmark:start
   Generated by `npm run brand:sync` from src/components/KenyWordmark.tsx (the #228 icon
   spec). Markup: <a class="keny-wordmark" href="/">Keny</a>, sized by its font-size. Add
   keny-wordmark--light on the flare panel. Never restyle it outside this block. */
.keny-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.058em;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.keny-wordmark::before {
  content: '';
  position: relative;
  top: 0.072em;
  display: inline-block;
  width: 0.179em;
  height: 0.807em;
  border-radius: 0.031em;
  background: var(--flare);
}
.keny-wordmark--light {
  color: var(--surface);
}
.keny-wordmark--light::before {
  background: currentColor;
}
/* brand:wordmark:end */

/* --------------------------------------------------------- glass controls
   The sign-in screen's controls (#228, glass guidelines), for any lander page that wants them.
   Colour, edge and state only: size, padding, radius and type stay with the page. Hover is grey
   glass, never orange; focus is the neutral ring; orange is kept for the main action's ink. */

/* The main action: peach fill, orange ink, no border. Neutral grey while it can't submit. */
.btn-peach {
  border: 0;
  background-color: var(--flare-wash);
  color: var(--flare-ink);
  box-shadow: var(--glass-hi);
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
.btn-peach:hover:not(:disabled) {
  background-color: var(--flare-wash-deep);
}
.btn-peach:disabled {
  color: rgb(var(--ink-soft-rgb) / 0.75);
  background-color: rgb(var(--ink-rgb) / 0.04);
  box-shadow: none;
}
.btn-peach:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* A floating glass control: light glass at rest, grey on hover. */
.btn-glass {
  border: 1px solid var(--glass-edge);
  background-color: var(--glass);
  color: var(--ink);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-hi), var(--glass-drop);
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.btn-glass:hover {
  border-color: var(--glass-hover-edge);
  background-color: var(--glass-hover);
  box-shadow: var(--glass-hi);
}
.btn-glass:focus-visible {
  outline: none;
  box-shadow: var(--glass-hi), var(--focus-ring);
}

/* A ghost button: just its label at rest, a grey glass pill on hover. */
.btn-ghost {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  transition: background-color 150ms ease, color 150ms ease;
}
.btn-ghost:hover {
  color: var(--ink);
  background-color: var(--glass-hover);
}
.btn-ghost:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --------------------------------------------------------------- backdrop
   The app's paper backdrop (AppBackdrop in src/components/AuroraGradient.tsx): the sky, mint
   and bottom washes, the warm top glow fading out over 560px, the warm bottom-right glow, the
   ink speck grain across the paper and the orange grain where the glows are. Fixed to the
   window, behind everything. Put it first in <body>, on a page whose background is paper:

     <div class="keny-backdrop" aria-hidden="true"><div class="keny-grain"></div></div>  */
.keny-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--backdrop-glow-corner), var(--backdrop-field);
}
.keny-backdrop::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 560px;
  background: var(--backdrop-glow);
  -webkit-mask-image: var(--backdrop-glow-mask);
  mask-image: var(--backdrop-glow-mask);
}
.keny-grain,
.keny-grain::before,
.keny-grain::after {
  position: absolute;
  inset: 0;
}
.keny-grain::before,
.keny-grain::after {
  content: '';
}
.keny-grain::before {
  background-image: var(--grain-paper);
  opacity: 0.1;
}
.keny-grain::after {
  background-image: var(--grain-glow);
  opacity: 0.14;
  -webkit-mask-image: var(--backdrop-grain-mask);
  mask-image: var(--backdrop-grain-mask);
}