/* shared.css — the app's styles for the company page, ported by port-css.py from app origin/main (cbe4982).
   Do not edit by hand: re-run the script. Proposal changes live in proposal.css. */
/* ==== packages/tokens/src/tokens.css */
/* KidStock design tokens — styleguide v0.7 (5 Oct 2026); earlier blocks kept unchanged below. Home tokens (v0.4 §7) stay provisional until Karan approves
 * Home; the v0.5 block at the end is measured from Aaira's approved frames through the Figma MCP (plan tasks F1/A8).
 * Rule: components read tokens, never literals. Changing a value here restyles everything.
 * Breakpoints (styleguide §8.3): mobile 393 · tablet 834 · desktop 1440 — see index.ts. */
/* Fonts are self-hosted (no third-party font CDN in a children's app). Manrope from Aaira, 21 Sep 2026,
   served from the app's own /fonts. TTF for now; woff2 conversion is a size optimisation for later. */
@font-face {
  font-family: 'Manrope';
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Manrope-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Manrope-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Manrope-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Manrope-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/Manrope-ExtraBold.ttf') format('truetype');
}

:root {
  /* Colour — ground & ink */
  --ks-ground: #f1f1f1;
  --ks-ground-2: #f2f2f2;
  --ks-surface: #ffffff;
  --ks-ink: #000000;
  --ks-ink-heading: #212121;
  --ks-ink-60: rgba(0, 0, 0, 0.6);
  --ks-ink-muted: #bdbdbd;
  --ks-line: #ececec;
  --ks-nav: #000000;
  --ks-panel-overlay: rgba(255, 255, 255, 0.1);

  /* Colour — brand & accents */
  --ks-cyan: #5ce7ff;
  --ks-grad-top: #4cd8f0;
  --ks-grad-bottom: #1050a1;
  --ks-purple: #8b5cf6;
  --ks-purple-shade: #6535d3;
  --ks-orange: #e86900;
  --ks-orange-shade: #bf5600;
  --ks-lime: #c3ff22;
  --ks-lavender: #b493ff;
  --ks-gold: #fcc900;
  --ks-gold-2: #ffc82c;
  --ks-gold-3: #efa31d;
  --ks-red-dot: #e23333;
  --ks-xp-a: #00ffe1;
  --ks-xp-b: #c3ff22;
  --ks-gain: #17b26a;
  --ks-loss: #ee3b2b;

  /* Colour — company tints (provisional; per-company tint comes from content) */
  --ks-tint-netflix-0: #bc131a;
  --ks-tint-netflix-1: #5b0105;
  --ks-tint-netflix-2: #2f0002;
  --ks-tint-dark-0: #494949;
  --ks-tint-dark-1: #181717;
  --ks-tint-dark-2: #000000;
  --ks-tint-disney-0: #a213bc;
  --ks-tint-disney-1: #26015b;
  --ks-tint-disney-2: #0c002f;
  --ks-desc-on-netflix: #d48e8e;
  --ks-desc-on-dark: #b1b1b1;
  --ks-desc-on-disney: #d29ff2;
  --ks-tint-netflix: #bc131a #5b0105 #2f0002;
  --ks-tint-dark: #494949 #181717 #000000;
  --ks-tint-disney: #a213bc #26015b #0c002f;

  /* Typography */
  --ks-font: 'Manrope', 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --ks-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --ks-t-24: 24px/33.6px;
  --ks-t-20: 20px/28px;
  --ks-t-16: 16px/22.4px;
  --ks-t-14: 14px/22.4px;
  --ks-t-12: 12px/19.2px;
  --ks-t-10: 10px/16px;
  --ks-t-8: 8px/12px;
  --ks-t-pill: 14px/21.7px;
  --ks-t-button: 14px/19.12px;
  --ks-t-tab: 10px/15px;
  --ks-t-section: 16px/25.6px;

  /* Radii, spacing, layout */
  --ks-r-bar: 12px;
  --ks-r-card: 15px;
  --ks-r-pill: 100px;
  --ks-margin: 20px;
  --ks-margin-grid: 24px;
  --ks-gutter-cards: 10px;
  --ks-gutter-tiles: 13px;
  --ks-row-gap: 17px;
  --ks-pad-card: 12px;
  --ks-pad-pill: 6px 12px;
  --ks-pad-button: 16px;

  /* Component geometry */
  --ks-h-bar: 27px;
  --ks-h-pill: 34px;
  --ks-h-button: 51px;
  --ks-h-tile: 62px;
  --ks-h-mission: 70px;
  --ks-h-mystery: 120px;
  --ks-h-tabbar: 100px;
  --ks-fab: 53px 55px;
  --ks-fab-ring: 4.4px;
  --ks-card-w: 168px;
  --ks-card-h: 236px;
  --ks-card-group-h: 245px;
  --ks-logo-well: 49px 39px;
  --ks-badge: 70px 19px;
  --ks-chip-h: 18px;

  /* Effects */
  --ks-fx-card-hairline: inset 0 0 0 1px #ececec;
  --ks-fx-bar-inset: inset 0 3px 3px rgba(0, 0, 0, 0.25);
  --ks-fx-bar-blob: inset 0 3px 4px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.25);
  --ks-fx-tile-purple: inset 0 3px 3px #6535d3;
  --ks-fx-tile-orange: inset 0 3px 3px #bf5600;
  --ks-fx-fab: 0 5.46px 10.24px rgba(63, 144, 252, 0.15);
  --ks-fx-bar-glow-blur: 6px;
  --ks-fx-badge-blur: 4px;

  /* ---- v0.5 additions — Aaira's approved screens (page "Clean Up / Approved"), read through the Figma MCP on
     22 Sep 2026: Discover, Discover – Categories, My Companies, Choose Your Hero, Set Details, Starting Money.
     Additions only; nothing from v0.4 is renamed. Home tokens above stay provisional until Karan approves Home.
     Source: styleguide v0.5 §9 and styleguide/v0.5-findings-2026-09-21.md (MCP read section). */

  /* Colour — onboarding (dark, over hero art) */
  --ks-ink-midnight: #041024;
  --ks-midnight-80: rgba(4, 16, 36, 0.8); /* onboarding card */
  --ks-midnight-20: rgba(4, 16, 36, 0.2); /* quote panel */
  --ks-line-onboarding: #325774; /* card, input and quote hairline */
  --ks-line-cta: #150651; /* black CTA hairline */
  --ks-input-dark: #0e0e0e;
  --ks-ink-placeholder: #999999;
  --ks-ink-soft: #c5c5c5; /* eyebrow and sub-copy on midnight */
  --ks-grad-cta-a: #7af6ff; /* accent TEXT gradient (one word of a title), not the button */
  --ks-grad-cta-b: #2440df; /* Choose Your Hero; Set Details + Starting Money use --ks-grad-cta-b-alt — Aaira to pick one */
  --ks-grad-cta-b-alt: #3d5aff;
  --ks-select: #fffb00; /* selected avatar tile ring */
  --ks-select-2: #fffc40; /* selected avatar tile inner border */

  /* Colour — light screens (Discover, My Companies) */
  --ks-ink-secondary: #666666; /* inactive filter pill */
  --ks-ink-nav-inactive: #525252; /* navbar label, active page dot */
  --ks-ink-soft-400: #99a0ae; /* search placeholder (Figma text/soft-400) */
  --ks-ink-disabled: #dadada; /* stat values */
  --ks-line-2: #d9d9d9; /* inactive filter border, page dots */
  --ks-line-10: rgba(0, 0, 0, 0.1); /* category tile border */
  --ks-glass-10: rgba(255, 255, 255, 0.1); /* passport info panel (same as --ks-panel-overlay) */
  --ks-glass-04: rgba(255, 255, 255, 0.04); /* category tile fill */
  --ks-lock-overlay: rgba(0, 0, 0, 0.7);
  --ks-tint-gold-0: #ffe854;
  --ks-tint-gold-1: #caa40f;
  --ks-tint-gold-2: #bc9702;
  --ks-desc-on-gold: #ffefad;
  --ks-desc-on-target: #de7d81; /* netflix radial, Target's description ink */
  --ks-tint-gold: #ffe854 #caa40f #bc9702;
  --ks-cotw-0: #84bc00; /* Company of the Week + collection banner radial */
  --ks-cotw-1: #5c8400;
  --ks-cotw-2: #466303;
  --ks-cotw-line: #f6ce56; /* the card's 1-px edge to 35 %, then --ks-cotw-line-b at the bottom (1301:5670) */
  --ks-cotw-line-b: #f2b90e;
  --ks-tagline-on-cotw: #d2ff6a;
  --ks-gold-tag-a: #f2b90d;
  --ks-gold-tag-b: #f6ce55;
  --ks-gold-tag-line: rgba(
    254,
    250,
    231,
    0.4
  ); /* tag's inside stroke: #FEFAE7 at the top at 40 % (1299:10106) */
  --ks-gold-tag-line-b: rgba(170, 143, 9, 0.4); /* … to #AA8F09 at the bottom at 40 % */
  --ks-gold-tag-ink: #433709;
  --ks-nav-dark: #171717; /* Dynamic Island only (Figma variable background/100); the navbar itself is --ks-nav */
  --ks-alert: #ff3b30; /* status-bar "Silent" — not used by app components */
  --ks-success-deep: #3f6d34; /* status-bar battery — not used by app components */
  --ks-success-mid: #4a6940;
  --ks-success-light: #8deb92;
  --ks-grad-success-a: #8dfc63;
  --ks-grad-success-b: #97f5b4;

  /* Typography — v0.5 sets line-height = size on single-line labels; tracking −2% unless noted */
  --ks-t-40: 40px/40px;
  --ks-t-32: 32px/32px;
  --ks-t-24-tight: 24px/24px;
  --ks-t-20-tight: 20px/20px;
  --ks-t-16-tight: 16px/16px;
  --ks-t-14-tight: 14px/14px;
  --ks-t-14-eyebrow: 14px/14px; /* uppercase, tracking +1.12px */
  --ks-t-12-tight: 12px/12px;
  --ks-t-12-17: 12px/17px;
  --ks-t-10-tight: 10px/10px;
  --ks-t-10-12: 10px/12px;
  --ks-t-10-14: 10px/14px;
  --ks-t-10-15: 10px/15px;
  --ks-t-8-tight: 8px/8px;
  --ks-t-cta: 14px/normal; /* tracking 0 */
  --ks-t-nav: 10px/16px; /* Figma text style "Nav Label", tracking 0 */

  /* Radii */
  --ks-r-card-16: 16px; /* passport card, onboarding card, progress card, CotW, banner */
  --ks-r-tile: 10px; /* category, stat and avatar tiles; progress bars */
  --ks-r-input: 18px;
  --ks-r-pill-40: 40px; /* filter, movement and category-chip pills, search */
  --ks-r-cta: 100px;
  --ks-r-frame: 24px; /* device frame corner only — never a component radius */

  /* Geometry */
  --ks-margin-screen: 24px; /* every approved screen uses 24, content width 345 */
  --ks-content-w: 345px;
  --ks-w-onboard-input: 313px;
  --ks-h-onboard-input: 40px;
  --ks-h-onboard-field: 50px; /* v3 copy: Set Details inputs 313 × 50 (1409:4588 / 4593), 8 apart, the CTA 20 below */
  --ks-pad-onboard-input: 14px 16px;
  --ks-h-cta: 51px;
  --ks-h-search: 44px;
  --ks-cat-tile: 105px 50px;
  --ks-cat-art: 50px;
  --ks-cat-art-rise: 32px; /* render overhangs the tile top */
  --ks-cat-gap: 15px;
  --ks-cat-row: 104px;
  --ks-avatar-tile: 110px;
  --ks-avatar-gap: 8px;
  --ks-hero-col-x: 207px;
  --ks-hero-col-w: 162px;
  --ks-h-cotw: 140px;
  --ks-gold-tag: 131px 30px;
  --ks-card-gap-v05: 9px; /* two passport cards across 345 */
  --ks-card-row-gap: 28px;
  --ks-card-panel-y: 111px;
  --ks-logo-well-v05: 50px 40px;
  --ks-h-progress-card: 148px;
  --ks-stat-tile: 168px 60px;
  --ks-h-banner: 174px;
  --ks-h-navbar: 98px;
  --ks-h-navbar-bar: 68px;
  --ks-nav-raise: 50px; /* active item circle */
  --ks-nav-pitch: 76px;
  --ks-nav-item-w: 50px;
  --ks-nav-icon: 20px;
  --ks-nav-icon-active: 24px;
  --ks-h-xp-mini: 10px;
  --ks-w-xp-mini: 83px;
  --ks-header-h: 213px; /* Discover identity gradient, starts 12px above the frame */
  --ks-scroll-thumb: 4px 80px;

  /* Effects */
  --ks-fx-cta-hairline: inset 0 0 0 1px #150651;
  --ks-fx-onboarding-hairline: inset 0 0 0 1px #325774;
  --ks-fx-select-ring: 0 0 0 2px #fffb00;
  --ks-fx-select-glow-blur: 1px;
  --ks-fx-lock-blur: 1px;
  --ks-fx-gold-tag:
    0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 2px rgba(0, 0, 0, 0.06), 0 7px 3px rgba(0, 0, 0, 0.02),
    0 0 1px rgba(0, 0, 0, 0.12);
  --ks-scrim-tile: linear-gradient(180deg, rgba(0, 0, 0, 0) 65.5%, #000 82.6%); /* avatar tile bottom scrim */
  --ks-scrim-bottom: linear-gradient(180deg, rgba(4, 16, 36, 0) 0%, #041024 15%); /* hero screen lower fade */
  --ks-scrim-right: linear-gradient(
    270deg,
    rgba(0, 0, 0, 0.65) 1.3%,
    rgba(0, 0, 0, 0.35) 50.4%,
    rgba(0, 0, 0, 0) 76.8%
  );

  /* ---- v0.6 additions — Aaira's colour revision of the Approved page (23 Sep email, 25 Sep call), read on
     26 Sep 2026 from the MCP 1× render of Discover 1299-10016 (the MCP monthly call budget ended mid-read; the
     REST node read is queued). Additions only; v0.4 --ks-grad-top/--ks-grad-bottom stay for Home (provisional).
     Source: styleguide v0.6 §1.0 and styleguide/v0.6-findings-2026-09-26.md. */

  /* Brand — MAIN COLOURS block on the Approved page (node 1443-5176); Blue and Bright Mint are the logo colours
     and, on Discover, the app's identity gradient. Whether they are the app primaries everywhere is BR2 (open). */
  --ks-brand-blue: #3e28e0;
  --ks-brand-mint: #23f8b5;

  /* Identity gradient v0.6 — Discover header (393 × 213, 180deg), navbar active circle, progress card.
     Fitted from the render at 1.3 levels max residual: top #23f7b5, bottom #3e27df = the MAIN COLOURS pair. */
  --ks-grad-identity-a: #23f8b5; /* top */
  --ks-grad-identity-b: #3e28e0; /* bottom */
  --ks-nav-active-mint: #23f8b5; /* navbar active label (was --ks-nav-active #5ce7ff on the 22 Sep frame) */
  --ks-grad-identity: linear-gradient(180deg, var(--ks-grad-identity-a), var(--ks-grad-identity-b));

  /* v0.6b — read from the node values of the ColdPress copy of the file (D59BiJtA6AqUC0iHmmniOe, 26 Sep):
     Mint replaces Cyan on the active filter pill, the progress bars and the hero-screen icon strokes; the
     onboarding CTAs carry a Blue hairline (the Discover collection CTA keeps #150651); the accent word
     gradient is Mint → Blue with the mint stop at 20%. --ks-cyan and --ks-grad-cta-* stay for Home/focus. */
  --ks-accent-mint: #23f8b5; /* active filter pill, progress bars, hero trait/quote/role-strategist strokes */
  --ks-line-cta-onboarding: #3e28e0; /* Set Details, Choose Your Hero, Starting Money CTA hairline */
  --ks-fx-cta-hairline-onboarding: inset 0 0 0 1px #3e28e0;
  /* The black buttons' outline as Aaira draws it (SVG exports of 1622:9752, 1658:13332, 1409:4312, 8 Oct): a 1-px
     vertical gradient, violet at the bottom to mint at the top; Discover's collection CTA (1299:10176) navy → magenta.
     Used as a border-box background behind a transparent 1-px border. */
  --ks-stroke-cta: linear-gradient(0deg, #3e28e0, #23f8b5);
  --ks-stroke-cta-collection: linear-gradient(0deg, #150651, #b926c0);
  --ks-grad-accent-a: #23f8b5;
  --ks-grad-accent-b: #3e28e0;
  --ks-grad-accent: linear-gradient(
    180deg,
    var(--ks-grad-accent-a) 20%,
    var(--ks-grad-accent-b)
  ); /* accent word text fill */

  /* ---- v0.7 additions — Navbar Dark Mode columns, read from the component on the v2 copy (5 Oct 2026).
     Corrects the v0.5 note that put the active label at y 79: it is at 66. */
  --ks-nav-col-active-y: 18px; /* active column top: 24-px icon, 24-px gap, label top 66 */
  --ks-nav-gap-active: 24px;
  --ks-nav-col-inactive-y: 45px; /* inactive column top: 20-px icon, 4-px gap, label top 69 */
  --ks-nav-gap-inactive: 4px;
  --ks-nav-raise-y: 5px; /* the 50-px circle's top in the 98-px component */
  --ks-canvas-w: 393px; /* the app canvas above 834: the mobile composition, centred (one shell at every width) */
  --ks-dial-pitch: 118px; /* Choose Your Hero: rows 118 apart; the focus row sits one pitch below the dial's top (y 634) */
  --ks-scrim-dial-top: linear-gradient(
    180deg,
    rgba(4, 16, 36, 0.9) 0%,
    rgba(4, 16, 36, 0) 100%
  ); /* 54-px fade over the row above */

  /* ---- v0.7 additions — read from "KidStock (Copy) v2" (Xi8QxiSUV039e4Ke4cnCSO) on 5 Oct 2026: the COLOUR
     PALETTE block (nodes 1639:6685–6697), Home 1549-5103, the company page family and Profile. Additions only.
     Source: styleguide v0.7 §1.0 / §7 and styleguide/v0.7-findings-2026-10-05.md. */

  /* Palette */
  --ks-field-fill: #f9f9f9; /* Company ID fields */
  --ks-success: #00a434; /* correct answer, Discover step tile border, news chip, the gain ink on movement pills */
  --ks-success-tint: #e8ffe7; /* correct feedback panel, Discovered tile fill */
  --ks-loss-tint: #ffefee; /* wrong feedback panel (ink stays --ks-loss #ee3b2b) */
  --ks-action-blue: #007df3; /* active filter pill and Home "Trending" tab (white ink) */
  --ks-yellow: #ffcc00; /* "Why:" / "Lesson:" ink on news, product chips */
  --ks-gain-pill: #00a434; /* movement pill gain ink on the approved frames (Discover node 1301:6139); --ks-gain stays for v0.4 Home */
  --ks-pill-active-fill: #007df3; /* My Companies "All" (1347:3329), Home "Trending" (1549:5188) */
  --ks-pill-active-ink: #ffffff;

  /* Home 1549-5103 */
  --ks-tile-portfolio-a: #a983ff;
  --ks-tile-portfolio-b: #7351c3;
  --ks-tile-portfolio-line: #d4c2ff;
  --ks-tile-portfolio-shade: #3c0ea8;
  --ks-tile-cash-a: #fd9641;
  --ks-tile-cash-b: #e86900;
  --ks-tile-cash-line: #ffc99d;
  --ks-tile-cash-shade: #9c4700;
  --ks-tile-level-line: #23f8b5; /* Level / XP / Badges tile: identity gradient fill */
  --ks-tile-level-shade: #04233e;
  --ks-streak-line: #f17d1d; /* streak chip border */
  --ks-bell-dot: #ec5c42;
  --ks-h-money-tile: 62px; /* Home money tiles 168 × 62, radius 16 */
  --ks-h-level-bar: 28px; /* LEVEL bar 345 × 28, radius 12 */
  --ks-h-tab-pill: 36px; /* Trending / Recommended 168 × 36, radius 100 */
  --ks-h-mission-card: 70px;
  --ks-h-mystery-card: 123px;
  --ks-fx-tile-inset-light: inset 0 2px 4px rgba(255, 255, 255, 0.25); /* pair with inset 0 -2px 4px <shade> */

  /* Company page family (01–16) */
  --ks-r-step-tile: 5px; /* passport step tiles 56 × 47 */
  --ks-step-discover: #00a434;
  --ks-step-learn: #065cd3;
  --ks-step-quiz: #9672fc;
  --ks-step-invest-off: #dadada;
  --ks-step-mission: #f43359;
  --ks-h-action-row: 63px; /* Learn / Quiz / Invest / Missions rows 345 × 63, radius 16, 16-px gap */
  --ks-row-learn-a: #5199fa;
  --ks-row-learn-b: #2174e4;
  --ks-row-learn-line: #acd0ff;
  --ks-row-learn-shade: #0d59bf;
  --ks-quiz-picked: #3582ff; /* the chosen answer before Check Answer (frame 04, node 1622:8677, colors/blue/blue-100) */
  --ks-row-quiz-a: #a983ff;
  --ks-row-quiz-b: #7351c3;
  --ks-row-quiz-line: #d4c2ff;
  --ks-row-quiz-shade: #3c0ea8;
  --ks-row-off-fill: #dadada; /* Invest before the quick quiz */
  --ks-row-off-shade: #4e4e4e;
  --ks-row-missions-a: #fb7f9c;
  --ks-row-missions-b: #e94a6f;
  --ks-row-missions-line: #ffa8bc;
  --ks-row-missions-shade: #b02344;
  --ks-h-block-card: 97px; /* What They Do / Why It Matters / Fun Fact / How They Make Money */
  --ks-h-id-field: 55px; /* Company ID fields, radius 10 */
  --ks-h-list-row: 72px; /* Profile list rows 345 × 72, radius 16, 12-px gap */
  --ks-overlay-sheet: rgba(0, 0, 0, 0.89); /* quiz and settings sheets */
  --ks-overlay-blur: rgba(0, 0, 0, 0.6); /* Settings slide-up: Profile shows blurred behind (Aaira, 6 Oct) */
  /* The surround behind the 393 canvas on wide screens (one shell at every width). Neutral near-black: the midnight
     blue competed with the app (Aastha, 5 Oct); pure black would swallow the navbar, which is #000. */
  --ks-surround: #0e0e0e;
  --ks-status-zone: 60px; /* the frames' status-bar band: every screen's content is drawn below it */
  /* v0.7 Settings pop-up (1562-5545 / 1562-5769) */
  --ks-settings-panel: rgba(4, 16, 36, 0.8);
  --ks-settings-line: #325774;
  --ks-settings-field: #0e0e0e;
  --ks-toggle-off: #eceded;
  --ks-toggle-on: #00ce9c; /* Toggle Background/On, a toggle the child can switch (Settings 1562:5989 SVG export) */
  --ks-toggle-on-locked: rgba(
    35,
    248,
    181,
    0.5
  ); /* #23F8B5 at 50 %: on and locked by the adult (1562:5990) */
  --ks-t-12-14: 12px/14px; /* news headline (drawn 11/13 → ladder, R7) */
  --ks-grad-identity-h: linear-gradient(
    90deg,
    var(--ks-grad-identity-a),
    var(--ks-grad-identity-b)
  ); /* quiz progress bar */
  /* ---- v0.8 additions — the child-readable type scale (decision 113; the brief §8 and decision 100; agreed with Aastha 13 Oct 2026).
     Body 16, smallest text 14, headings 24–32, buttons 52, targets 44; line-height 1.4 where text wraps, 1.2 on single lines.
     The --ks-t-* scale above stays for history and is no longer used by the student screens. */
  /* Type — kid scale */
  --ks-k-h1: 28px/34px; /* screen titles (was --ks-t-24-tight) */
  --ks-k-h2: 24px/29px; /* section titles (was --ks-t-20-tight) */
  --ks-k-h3: 18px/22px; /* card titles, names (was --ks-t-16-tight) */
  --ks-k-title: 16px/19px; /* row and tile titles, single line (was --ks-t-14-tight) */
  --ks-k-body: 16px/22px; /* every paragraph a child reads (was 12–14 px) */
  --ks-k-input: 16px/22px; /* text fields; 16 also stops iOS zooming on focus */
  --ks-k-small: 14px/20px; /* captions and labels that wrap (was 8–12 px) */
  --ks-k-small-tight: 14px/17px; /* chips, labels, metadata on one line (was 8–12 px) */
  --ks-k-button: 16px/19px; /* CTA label (was 14) */
  --ks-k-pill: 14px/17px; /* filter, movement and product pills */
  --ks-k-nav: 14px/17px; /* navbar labels (was 10) */
  --ks-k-nav-r4: 13px/16px; /* navbar labels one point smaller (Aastha, 16 Oct: 14 looked big on the floating pill) */
  --ks-nav-label-y: 69px; /* every label's top in the 98-px component, active or not (Aastha, 16 Oct: the label stays put) */
  --ks-k-stamp: 12px/14px; /* the operator's build stamp only: not child content, the one text below 14 */
  --ks-h-button-k: 52px; /* CTA height at the kid scale (was 51) */
  --ks-target-min: 44px; /* smallest tap target */
  --ks-card-h-k: 287px; /* passport card as "Company Card - 15 Oct" (3055:7106): price top-left, picture, panel from 123, name 20, two-line tagline, chip at 237, the pill half over the bottom (was 240) */
  --ks-k-chip: 12px/15px; /* the passport card's category chip only: Aastha's call of 13 Oct (14 read too big on the card); every other text keeps the 14 floor */
  --ks-h-level-bar-k: 44px; /* the LEVEL bar: a 2-px light gradient outline, 3 px of white track, the fill inside (13 Oct, second pass: the track was too wide) */
  --ks-xp-k-a: #5ce7ff; /* the bar's fill, cyan → mint → lime as on Karan's frame */
  --ks-xp-k-b: #23f8b5;
  --ks-xp-k-c: #d2f53c;
  --ks-xp-k-line-a: #74e4ff; /* the outline's light gradient, cyan → lilac */
  --ks-xp-k-line-b: #bfa9ff;
  --ks-h-level-tile-k: 70px; /* Level / XP / Badges tile: icons overhang 18, label, value close under it (13 Oct, second pass; was 84, the frame's 64) */
  --ks-h-mission-card-k: 88px; /* the mission card at the kid scale: 16-px padding round a 16/19 title and two 14/20 lines (was 70) */
  --ks-hero-col-x-k: 180px; /* Choose Your Hero text column at the kid scale: 27 further left, 189 wide (was 207 / 162) */
  --ks-hero-col-w-k: 189px;
  --ks-h-money-tile-k: 72px; /* Home money tiles: the label and the 28-px amount as one centred block, the icon centred on it (13 Oct, second pass) */
  --ks-tile-portfolio-k-a: #7350dc; /* the Portfolio tile deepened (13 Oct) so the green and red amounts read on it: white 5.4:1 at the top */
  --ks-tile-portfolio-k-b: #4a2ea6;
  --ks-gain-on-purple: #6dffa8; /* the Portfolio amount when up: 4.2:1 or better across the tile */
  --ks-loss-on-purple: #ffb0a8; /* the Portfolio amount when down: 3.1:1 or better (28-px bold, large-text AA) */
  --ks-cat-selected: var(
    --ks-pill-active-fill
  ); /* a selected category: the Trending / Recommended pill's solid fill (13 Oct) */
  --ks-h-cotw-k: 164px; /* Company of the Week with the tagline under the name (13 Oct; the frame's 140) */
  --ks-h-pf-stat-k: 72px; /* Profile stat tile: a 44-px tinted icon box, label over the coloured value (Karan's Profile frame, 13 Oct) */
  --ks-stat-xp: #1e66f5; /* (superseded 16 Oct by --ks-pf-*; kept until a scan proves zero use) stat value inks, each the colour of its icon; all ≥ 3:1 on white for 24-px bold */
  --ks-stat-xp-tint: #e8f0ff;
  --ks-stat-streak: #e5531a;
  --ks-stat-streak-tint: #ffede4;
  --ks-stat-badges: #7c3aed;
  --ks-stat-badges-tint: #f1e8ff;
  --ks-stat-companies: #0d9488;
  --ks-stat-companies-tint: #def5f2;
  --ks-stat-portfolio: #1e66f5;
  --ks-stat-portfolio-tint: #e8f0ff;
  --ks-stat-cash: #b86e00;
  --ks-stat-cash-tint: #fff3dc;
  /* v0.9 additions (16 Oct 2026): "Profile-Main - 15 Oct" (3055:7128) and "Company Card - 15 Oct" (3055:7106) */
  --ks-k-pf-name: 29px/30px; /* Profile name, as drawn (29.14) */
  --ks-k-pf-rank: 17px/20px; /* Profile "Young Investor" */
  --ks-k-pf-money: 36px/40px; /* Profile money cards' amounts */
  --ks-k-card-name: 20px/24px; /* passport card name */
  --ks-k-card-price: 15px/20px; /* passport card share price, top-left */
  --ks-pf-xp: #b98000; /* the frame's #FDC949 is 1.5:1 on white; this gold is 3.4:1 (24-px bold, large-text AA) */
  --ks-pf-xp-tint: #fefada;
  --ks-pf-xp-bright: #f5a300; /* Aastha, 16 Oct: the #b98000 gold read dark beside the bright orange, green and teal; 2.1:1 on white, below large-text AA */
  --ks-pf-streak: #fc6503;
  --ks-pf-streak-tint: #ffede5;
  --ks-pf-badges: #19a734;
  --ks-pf-badges-tint: #d3ffd6;
  --ks-pf-companies: #0f9488; /* the frame's note: Companies' icon and box to change (it reused the XP gem): teal */
  --ks-pf-companies-tint: #d3f5f1;
  --ks-nav-float-inset: 16px; /* the floating navbar's gap to each side (16 Oct) */
  --ks-nav-float-gap: 12px; /* … and above the bottom edge, plus the safe area */
  --ks-h-id-field-k: 60px; /* Company ID tile minimum at the kid scale; the tile grows when a value wraps (was fixed) */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ks-motion-scale: 0;
  }
}

/* ==== apps/web/src/app/shell.css */
/* Provisional styling: every value is a token; geometry follows styleguide §8.3. Look is replaced per component when Aaira's screens land. */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: var(--ks-font);
  background: var(--ks-ground);
  color: var(--ks-ink);
}
.ks-skip {
  position: absolute;
  left: -999px;
}
.ks-skip:focus {
  left: 8px;
  top: 8px;
  background: #fff;
  padding: 8px;
  z-index: 10;
}
.ks-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
}
.ks-main {
  padding: var(--ks-margin);
  padding-bottom: calc(var(--ks-h-navbar) + var(--ks-margin));
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.ks-page {
  display: grid;
  gap: var(--ks-row-gap);
}
.ks-h1 {
  font: 700 var(--ks-k-h1) var(--ks-font);
  color: var(--ks-ink-heading);
  margin: 0;
}
.ks-section {
  font: 700 var(--ks-k-h3) var(--ks-font);
  margin: 0;
}
.ks-muted {
  color: var(--ks-ink-60);
  font: var(--ks-k-body) var(--ks-font);
}
.ks-error {
  color: var(--ks-loss);
  font: var(--ks-k-body) var(--ks-font);
}
.ks-form {
  display: grid;
  gap: var(--ks-space-3);
  max-width: 420px;
}
.ks-form label {
  display: grid;
  gap: var(--ks-space-1);
  font: 600 var(--ks-k-body) var(--ks-font);
}
.ks-form input {
  height: var(--ks-h-button);
  padding: 0 var(--ks-pad-button);
  border-radius: var(--ks-r-card);
  border: 1px solid var(--ks-line);
  font: var(--ks-k-input) var(--ks-font);
}
.ks-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ks-h-button);
  padding: 0 var(--ks-pad-button);
  border-radius: var(--ks-r-pill);
  background: var(--ks-purple);
  color: #fff;
  font: 700 var(--ks-k-button) var(--ks-font);
  border: 0;
  text-decoration: none;
  box-shadow: var(--ks-fx-tile-purple);
  cursor: pointer;
}
.ks-btn-secondary {
  background: var(--ks-surface);
  color: var(--ks-ink);
  box-shadow: var(--ks-fx-card-hairline);
}
.ks-btn:focus-visible,
.ks-form input:focus-visible {
  outline: 3px solid var(--ks-cyan);
  outline-offset: 2px;
}
.ks-actions {
  display: flex;
  gap: var(--ks-gutter-tiles);
  flex-wrap: wrap;
}
.ks-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ks-gutter-tiles);
}
.ks-tile {
  height: var(--ks-h-tile);
  border-radius: var(--ks-r-card);
  padding: var(--ks-pad-card);
  color: #fff;
  display: grid;
  align-content: center;
}
.ks-tile-purple {
  background: var(--ks-purple);
  box-shadow: var(--ks-fx-tile-purple);
}
.ks-tile-orange {
  background: var(--ks-orange);
  box-shadow: var(--ks-fx-tile-orange);
}
.ks-tile-label {
  font: var(--ks-k-small) var(--ks-font);
  opacity: 0.9;
}
.ks-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ks-gutter-cards);
}
.ks-card a {
  display: grid;
  gap: var(--ks-space-1);
  min-height: 110px;
  padding: var(--ks-pad-card);
  border-radius: var(--ks-r-card);
  color: #fff;
  text-decoration: none;
  background: var(--ks-tint-dark-1);
}
.ks-card[data-tint='netflix'] a {
  background: var(--ks-tint-netflix-1);
}
.ks-card[data-tint='disney'] a {
  background: var(--ks-tint-disney-1);
}
.ks-card-name {
  font: 700 var(--ks-k-h3) var(--ks-font);
}
.ks-card-price {
  font: 700 var(--ks-k-h2) var(--ks-font);
}
.ks-badge {
  justify-self: start;
  font: 700 var(--ks-k-small) var(--ks-font);
  padding: 2px 8px;
  border-radius: var(--ks-r-pill);
  background: rgba(255, 255, 255, 0.15);
}
.ks-badge.gain {
  color: var(--ks-lime);
}
.ks-badge.loss {
  color: #ffb4ab;
}
.ks-passport {
  display: flex;
  gap: var(--ks-space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.ks-passport li {
  padding: var(--ks-pad-pill);
  border-radius: var(--ks-r-pill);
  background: var(--ks-surface);
  box-shadow: var(--ks-fx-card-hairline);
  font: var(--ks-k-pill) var(--ks-font);
}
.ks-passport li.done {
  background: var(--ks-lime);
}
.ks-block {
  background: var(--ks-surface);
  border-radius: var(--ks-r-card);
  padding: var(--ks-pad-card);
  box-shadow: var(--ks-fx-card-hairline);
}
/* ---- One shell at every width (Aastha, 26 Sep; styleguide v0.7 §8.3): the app is the 393-wide mobile composition,
   centred as a canvas on the midnight ground above 834, with the Navbar Dark Mode at its bottom. There is no rail
   or sidebar: nothing above 393 has a frame, and the navigation is the same component at the same size everywhere.
   PROPOSED for Aaira's approval (decision row 23). */
@media (min-width: 834px) {
  html,
  body {
    background: var(--ks-surround);
  }
  .ks-shell {
    width: var(--ks-canvas-w);
    margin: 0 auto;
    background: var(--ks-ground);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
}

/* Screen change: the incoming screen fades in over 220 ms while the navbar's notch slides (navbar.css). */
@keyframes ks-page-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ks-page-in {
  /* No fill mode: a held animation keeps the page in its own stacking context, and the fixed pop-ups inside
     it (Settings, quiz, reading; z-index 20) would then sit under the navbar (z-index 5). */
  animation: ks-page-in 220ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .ks-page-in {
    animation: none;
  }
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Company page head (S9, PROVISIONAL until Aaira's frame): title with the bookmark/watch control top-right
   (call point CP9: the top-right icon is bookmark/watchlist). */
.ks-company-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ks-space-2);
}
.ks-btn-quiet {
  background: var(--ks-surface);
  color: var(--ks-ink);
  box-shadow: var(--ks-fx-card-hairline);
}
.ks-btn-quiet[aria-pressed='true'] {
  background: var(--ks-lime);
}
.ks-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Build stamp (staging and development only; main.tsx): reads out which build a browser is showing. */
.ks-build-stamp {
  position: fixed;
  left: 50%;
  top: calc(
    env(safe-area-inset-top, 0px) + 2px
  ); /* below the clock when the page draws under the status bar */
  transform: translateX(-50%);
  z-index: 50;
  padding: 1px 8px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: 600 var(--ks-k-stamp) var(--ks-font);
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

/* Standalone (home-screen shortcut): the frames' status band (--ks-status-zone, the 60 px every approved screen is
   drawn below) gives way to the phone's real one. On iOS the page draws under the status bar (viewport-fit=cover,
   black-translucent; run of 8 Oct, item 1): the band is replaced by the safe-area inset, so each header's gradient
   runs behind the clock to the top edge and the content starts just below it. On Android the bar sits above the page
   (inset 0) and the band is pulled up whole, as before. In a browser tab nothing changes. (Aaira's second review,
   item 20) */
.ks-standalone .ks-main:has(.ks-approved) {
  margin-top: calc(env(safe-area-inset-top, 0px) - var(--ks-status-zone));
}
/* screens without a drawn header (placeholders, the adult pages) keep their content clear of the clock */
.ks-standalone .ks-main:not(:has(.ks-approved)) {
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--ks-margin));
}

/* ---- One calm screen for a read that did not come back (LoadProblem): not found / can't reach, no red */
.ks-problem {
  margin: 32px var(--ks-margin-screen) 0;
  padding: 24px 20px;
  border-radius: var(--ks-r-card-16);
  background: #fff;
  text-align: center;
}
.ks-problem h2 {
  margin: 0;
  font: 800 var(--ks-k-h3) var(--ks-font);
  letter-spacing: -0.32px;
  color: var(--ks-ink);
}
.ks-problem p {
  margin: 8px 0 0;
  font: 500 var(--ks-k-body) var(--ks-font);
  line-height: 17px;
  color: var(--ks-ink-secondary);
}
.ks-problem-go {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 24px;
  border: 0;
  border-radius: 100px;
  background: #000;
  color: #fff;
  font: 600 var(--ks-k-title) var(--ks-font);
  text-decoration: none;
  cursor: pointer;
}
.ks-problem-go:disabled {
  opacity: 0.6;
  cursor: default;
}
.cp .ks-problem {
  margin: -31px 0 0; /* where the passport card sits, on the sheet's edge */
  position: relative;
}

/* Standalone on iOS: the status bar's clock and battery are white over the page (black-translucent). On a light top
   (the #F1F1F1 ground, the mint-to-blue gradient) a soft dark scrim as tall as the status bar keeps them readable;
   the screens with a dark top (Home's art, the company page's tint, Welcome and Sign-in) need none (Aastha, 9 Oct,
   run item 1). The safe-area inset is 0 in a browser tab and on Android, so the scrim has no height there. */
.ks-standalone body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 45;
  height: env(safe-area-inset-top, 0px);
  background: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.ks-standalone
  body:has([data-screen='S7'], [data-screen='S9'], [data-screen='S1'], [data-screen='S3'])::before {
  display: none;
}

/* ==== apps/web/src/app/navbar.css */
/* Navbar Dark Mode — the approved tab bar (styleguide v0.7 §9.0; component read from the v2 copy on 5 Oct 2026),
   393 × 98 pinned to the bottom. Bar: Figma's Subtract path, 393 × 68 at y 30 (the notch is in the path).
   Active column at y 18: 24-px icon, 24-px gap, label top 66, inside a 50-px identity-gradient circle at y 5
   with the FAB shadow. Inactive columns at y 45: 20-px icon, 4-px gap, label top 69. */
/* Floating since 16 Oct (Aastha): the same bar and movement as a pill 16 in from each side and 12 above the bottom
   (plus the safe area), the page scrolling behind it. */
.ks-navbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--ks-nav-float-gap) + env(safe-area-inset-bottom, 0px));
  height: var(--ks-h-navbar);
  z-index: 5;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.ks-navbar-inner {
  position: relative;
  width: calc(100% - 2 * var(--ks-nav-float-inset));
  max-width: calc(393px - 2 * var(--ks-nav-float-inset));
  height: var(--ks-h-navbar);
  pointer-events: auto;
}
.ks-navbar-bar {
  position: absolute;
  left: 0;
  top: 30px;
  width: 100%;
  height: var(--ks-h-navbar-bar);
  color: var(--ks-nav);
  display: block;
  overflow: visible;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28)); /* lifts the pill off the page */
}
.ks-navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}
.ks-navbar li {
  position: absolute;
  top: var(--ks-nav-col-inactive-y);
  width: var(--ks-nav-item-w);
  left: calc(
    var(--x0, 16px) + var(--i) * var(--pitch, 69.75px)
  ); /* spread across the pill's width (NavBar.tsx) */
  transition: top 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ks-navbar a {
  position: relative;
  display: block;
  height: 44px;
  color: var(--ks-ink-nav-inactive);
  text-decoration: none;
  font: 600 var(--ks-k-nav-r4) var(--ks-font);
  letter-spacing: 0;
  width: var(--ks-nav-item-w);
  transition: color 200ms ease;
}
/* The label sits at one height for every tab (Aastha, 16 Oct): it is placed against the column, which rises for the
   active tab, so its offset grows by exactly what the column rises, on the same curve, and the two cancel. It is
   centred on the column without widening it, so the icon stays centred in the circle (Portfolio and Discover sat
   about 6 px right when the wide label widened the column). */
.ks-navbar .ks-nav-label {
  position: absolute;
  left: 50%;
  top: calc(var(--ks-nav-label-y) - var(--ks-nav-col-inactive-y));
  transform: translateX(-50%);
  white-space: nowrap;
  transition: top 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ks-navbar li.active .ks-nav-label {
  top: calc(var(--ks-nav-label-y) - var(--ks-nav-col-active-y));
}
.ks-navbar a img {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto;
  width: var(--ks-nav-icon);
  height: var(--ks-nav-icon);
  filter: invert(31%); /* Aaira's icons are #525252 on the frame */
  transition:
    width 320ms cubic-bezier(0.22, 1, 0.36, 1),
    height 320ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 200ms ease;
}
.ks-navbar li.active {
  top: var(--ks-nav-col-active-y);
}
.ks-navbar li.active a {
  color: var(--ks-nav-active-mint);
  font-weight: 700;
}
.ks-navbar li.active a img {
  width: var(--ks-nav-icon-active);
  height: var(--ks-nav-icon-active);
  /* white inside the circle on every tab (frames; Aaira, 6 Oct): invert(100%) of the #525252 icon gave #ADADAD */
  filter: brightness(0) invert(1);
}
/* The raised circle is one element that slides with the notch (NavBar.tsx moves both from the same number). */
.ks-navbar .ks-nav-raise {
  position: absolute;
  left: 0;
  top: var(--ks-nav-raise-y); /* circle at y 5 of the component */
  width: var(--ks-nav-raise);
  height: var(--ks-nav-raise);
  border-radius: 999px;
  background: var(--ks-grad-identity);
  box-shadow: var(--ks-fx-fab);
  will-change: transform;
}
.ks-navbar a:focus-visible {
  outline: 3px solid var(--ks-cyan);
  outline-offset: 2px;
  border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .ks-navbar li,
  .ks-navbar a,
  .ks-navbar a img,
  .ks-navbar .ks-nav-label {
    transition: none;
  }
}

/* ==== apps/web/src/app/discover.css (the .ks-approved block only) */
/* Discover (S8) and My Companies (S28) — styleguide v0.5 §9.4–9.6, exact at 393; every value is a token.
   Approved screens own their margins (24) and full-bleed header, so the shell's main padding is switched off
   for them (.ks-main:has(.ks-approved)). ≥ 834 follows §8.3 / §9.7 and is PROPOSED (no frames exist). */
.ks-main:has(.ks-approved) {
  padding: 0;
  max-width: none;
}
.ks-approved {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 393px;
  min-height: 100dvh;
  padding-bottom: calc(var(--ks-h-navbar) + 24px);
  font-family: var(--ks-font);
  color: var(--ks-ink);
  --ks-safe-top: env(safe-area-inset-top, 0px);
}
.ks-approved .ks-error,
.ks-approved .ks-muted {
  margin: 12px var(--ks-margin-screen);
}


/* ==== apps/web/src/app/company.css */
/* Company page (S9) — styleguide v0.7 §9.10, built to frame "01-Company Page" 1614-35209 (393 × 1977) on the v2
   copy, 5 Oct 2026, with the normalisations of spacing-rules-2026-10-05.md §2 (type on the ladder, −2 % tracking,
   line-height = size, whole pixels, 51-px CTA, chip family). Node values are quoted beside each rule. */
.cp {
  background: var(--ks-ground);
  padding-bottom: calc(var(--ks-h-navbar) + 24px);
}
/* ---- Header: the company's radial tint 404 × 436 from (−5, −74); the sheet starts at y 323 */
.cp-head {
  position: relative;
  min-height: 323px; /* the frame's 323; grows when the chips wrap at the kid scale (U26) */
  box-sizing: border-box;
  padding: 142px var(--ks-margin-screen) 47px 193px; /* the right column starts at the name's (193, 142); the passport card straddles the edge by 31, so 47 leaves the move pill 16 clear of it (Aastha, 16 Oct: it touched) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
  background: radial-gradient(
    ellipse 98px 130px at 109px 223px,
    var(--t0) 0%,
    var(--t1) 69%,
    var(--t2) 100%
  ); /* node 1614:35211: 404 × 436 from (−5, −74), centre (114, 297) */
  --t0: var(--ks-tint-dark-0);
  --t1: var(--ks-tint-dark-1);
  --t2: var(--ks-tint-dark-2);
  --desc: var(--ks-desc-on-dark, #b1b1b1);
}
.cp[data-tint='netflix'] .cp-head {
  --t0: var(--ks-tint-netflix-0);
  --t1: var(--ks-tint-netflix-1);
  --t2: var(--ks-tint-netflix-2);
  --desc: var(--ks-desc-on-netflix);
}
.cp[data-tint='disney'] .cp-head {
  --t0: var(--ks-tint-disney-0);
  --t1: var(--ks-tint-disney-1);
  --t2: var(--ks-tint-disney-2);
  --desc: var(--ks-desc-on-disney);
}
.cp[data-tint='gold'] .cp-head {
  --t0: var(--ks-tint-gold-0);
  --t1: var(--ks-tint-gold-1);
  --t2: var(--ks-tint-gold-2);
  --desc: var(--ks-desc-on-gold);
}
.cp[data-tint='target'] .cp-head {
  --t0: var(--ks-tint-netflix-0);
  --t1: var(--ks-tint-netflix-1);
  --t2: var(--ks-tint-netflix-2);
  --desc: var(--ks-desc-on-target);
}
.cp-back {
  position: absolute;
  left: 21px;
  top: 75px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.cp-back img {
  width: 24px;
  height: 24px;
  filter: invert(100%);
}
.cp-title {
  position: absolute;
  left: 60px;
  top: 75px;
  margin: 0;
  font: 800 var(--ks-k-h1) var(--ks-font);
  letter-spacing: -0.48px;
}
.cp-bookmark {
  position: absolute;
  left: 333px;
  top: 67px;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 999px;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.cp-bookmark img {
  width: 20px;
  height: 20px;
}
/* Watchlist view (frame 16, 1622-10462): the ring stays white; only the glyph fills. */
.cp-bookmark[aria-pressed='true'] img {
  filter: invert(100%);
}
.cp-render {
  /* Drawn: "mcd-1 1" 121 × 159 at (51, 123), a tall picture that fills its width. The company pictures are square
     with their own margin (content lane, 768 × 768), so at 121 they read about 15 % smaller than the frame's.
     The box is scaled to 142 on the same centre (111.5, 202.5) so the subject matches the frame's size. */
  position: absolute;
  left: 41px;
  top: 110px;
  width: 142px;
  height: 186px;
  display: grid;
  place-items: center;
}
.cp-render img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.cp-logo {
  position: absolute;
  left: 193px;
  top: 147px;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.cp-logo img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.cp-name {
  position: relative; /* in flow since U26; the logo stays at (193, 147) beside it */
  margin: 0 0 0 36px; /* frame "Card Symbol" at (229, 142), 36 right of the logo */
  width: 140px; /* to the right margin (393 − 24 − 229); "Warner Bros Discovery" ran off the canvas */
  font: 600 var(--ks-k-title) var(--ks-font);
  letter-spacing: -0.3px;
  /* two lines at most: the drawn legal-name line (y 168) is not served, so a long name takes its place */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* room under the line for descenders (g, j, p, q, y) inside the clip, text unmoved (run of 8 Oct, item 3) */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}
/* With a served legal name (#112) the name keeps one line and the legal name sits on the frame's line: 10/500 at y 168,
   tracking 0 (rule R10, legal-name lines) */
.cp-name.has-legal {
  -webkit-line-clamp: 1;
  line-height: 24px; /* one line, centred in the frame's 24 box above the legal name at y 168 */
}
.cp-legal {
  position: relative;
  margin: 2px 0 0 36px; /* the frame's line at y 168 */
  width: 140px;
  font: 500 var(--ks-k-small-tight) var(--ks-font);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* room under the line for descenders (g, j, p, q, y) inside the clip, text unmoved (run of 8 Oct, item 3) */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}
.cp-tagline {
  position: relative;
  margin: 8px 0 0;
  width: 176px; /* to the right margin at the kid scale (was the frame's 146) */
  font: 500 var(--ks-k-small) var(--ks-font);
  letter-spacing: -0.2px;
  color: var(--desc);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* two lines of 14/20; the chips follow in flow */
  overflow: hidden;
  /* room under the line for descenders (g, j, p, q, y) inside the clip, text unmoved (run of 8 Oct, item 3) */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}
/* Chips flow in one row 8 apart (drawn 193 and 260: Food 59 wide + 8); placed one by one, "Entertainment" ran under
   "Discovered". */
.cp-chips {
  position: relative;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap; /* "Entertainment" + "Invested" at 14 px do not fit 176; the second chip wraps and the header grows (U26) */
  gap: 6px 8px;
  max-width: 176px;
}
.cp-chip {
  /* frame "Frame 2147259783": 61 × 20 for "Food" (text centred), "Discovered" about 80, radius 15. At least 61
     wide with 12 either side, so "Entertainment" + "Discovered" stays inside the right margin (369) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 61px;
  height: 20px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 15px;
  box-shadow: inset 0 0 0 0.5px #fff;
  font: 500 var(--ks-k-small-tight) var(--ks-font);
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.cp-move {
  position: relative;
  margin-top: 10px; /* the frame's (193, 251): 12 under one row of chips */
  display: inline-flex;
  align-items: center;
  gap: 2px;
  /* frame "Rectangle 5" 61 × 19 radius 15 at (193, 251); the arrow at x 207, the figure at 217 */
  height: 19px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 15px;
  background: #fff;
  font: 500 var(--ks-k-small-tight) var(--ks-font);
  letter-spacing: -0.2px;
  color: var(--ks-gain-pill);
}
.cp-move img {
  width: 8px;
  height: 8px;
}
.cp-move.loss {
  color: var(--ks-loss);
}
/* ---- The sheet (#F1F1F1, top corners 16, from y 323); the passport card straddles its edge at y 292 */
.cp-sheet {
  position: relative;
  display: flow-root; /* keeps the passport card's −31 margin inside the sheet (sheet 323, card 292) */
  padding: 0 var(--ks-margin-screen);
  border-radius: var(--ks-r-card-16) var(--ks-r-card-16) 0 0;
  background: var(--ks-ground);
}
.cp-card {
  position: relative;
  background: #fff;
  border-radius: var(--ks-r-card-16);
  padding: 14px 16px 16px; /* title at (40, +14) */
}
.cp-card h2,
.cp-sec {
  margin: 0;
  font: 800 var(--ks-k-title) var(--ks-font); /* 14/800 lh 20 as drawn → lh 14 (R9) */
  letter-spacing: -0.28px;
  color: var(--ks-ink);
}
.cp-passport {
  margin-top: -31px; /* y 292 */
  height: 128px;
  box-sizing: border-box;
}
.cp-count {
  position: absolute;
  right: 17px;
  top: 17px;
  font: 500 var(--ks-k-small-tight) var(--ks-font);
  letter-spacing: -0.24px;
}
/* Five step tiles 56 × 47 radius 5 at x 41 · 104 · 168 · 232 · 296 (y 355), icons ≈ 31 overhanging at y 339,
   labels 10/600 at y 381 (tr −0.2 per R10; drawn −0.4) */
.cp-steps {
  position: absolute;
  left: 17px;
  top: 63px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 8px;
  counter-reset: step;
}
.cp-steps li {
  position: relative;
  width: 56px;
  height: 47px;
  box-sizing: border-box;
  border: 1px solid var(--ks-line-2);
  border-radius: var(--ks-r-step-tile);
  background: #fff;
  display: grid;
  align-content: end;
  justify-items: center;
  padding-bottom: 6px;
  font: 600 var(--ks-k-chip) var(--ks-font); /* 12 (Aastha, 16 Oct: 14 was too big for the 56-px tiles) */
  letter-spacing: -0.2px;
}
.cp-steps li .ic {
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
  width: 32px;
  height: 31px;
  object-fit: contain;
}
.cp-steps .step-discover {
  border-color: var(--ks-step-discover);
}
.cp-steps .step-discover.done {
  background: var(--ks-success-tint);
}
.cp-steps .step-learn {
  border-color: var(--ks-step-learn);
}
.cp-steps .step-quiz {
  border-color: var(--ks-step-quiz);
}
.cp-steps .step-invest {
  border-color: var(--ks-step-invest-off);
  color: var(--ks-ink-disabled);
}
.cp-steps .step-invest.done,
.cp-steps .step-invest:not(.off) {
  border-color: var(--ks-tile-cash-b);
  color: var(--ks-ink);
}
.cp-steps .step-invest.off .ic {
  filter: grayscale(1) opacity(0.6);
}
.cp-steps .step-mission {
  border-color: var(--ks-step-mission);
}
/* Company ID: 345 × 249 at y 433; fields 151 × 55 #F9F9F9 radius 10 at (41 | 201, 480 / 545), founders 311 wide at 609;
   icon 28 at +5; label 10/600 #DADADA at (+38, +13); value 12/600 at (+38, +30) (drawn 11 → 12, R7) */
.cp-id {
  margin-top: 13px; /* 292 + 128 + 13 = 433 */
  min-height: 249px; /* the frame's 249; grows when a value wraps at the kid scale (U26) */
  box-sizing: border-box;
}
.cp-id ul {
  list-style: none;
  margin: 19px 0 0 1px; /* fields from y 480 */
  padding: 0;
  display: grid;
  grid-template-columns: 151px 151px;
  column-gap: 9px;
  row-gap: 10px;
}
.cp-id li {
  position: relative;
  min-height: var(
    --ks-h-id-field-k
  ); /* grows when a value wraps at the kid scale (U26); was the frame's fixed height */
  box-sizing: border-box;
  padding: 11px 8px 11px 38px;
  border-radius: var(--ks-r-tile);
  background: var(--ks-field-fill);
}
.cp-id li.wide {
  grid-column: 1 / -1;
}
.cp-id li img {
  position: absolute;
  left: 5px;
  top: 14px;
  width: 28px;
  height: 28px;
}
.cp-id .lb {
  display: block;
  font: 600 var(--ks-k-small-tight) var(--ks-font);
  letter-spacing: -0.2px;
  color: var(--ks-ink-secondary); /* #666666: no text in the lightest grey (decision 60) */
}
.cp-id .vl {
  display: block;
  margin-top: 1px;
  font: 600 var(--ks-k-small-tight) var(--ks-font);
  letter-spacing: -0.24px;
  overflow-wrap: anywhere; /* founders wrap instead of ending in an ellipsis (U26) */
  /* room under the line for descenders (g, j, p, q, y) inside the clip, text unmoved (run of 8 Oct, item 3) */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}
/* Question cards (Aastha, 16 Oct, after Karan's passport): a standard picture in a soft bubble at the left, the title
   18/800 and the body 16/500 beside it; one bubble colour per question. The four pictures are the same on every
   company page (Company.tsx BLOCK_ICON). */
.cp-block {
  margin-top: 13px;
  min-height: 112px;
  box-sizing: border-box;
  padding: 20px 16px 20px 112px; /* 20 above and below the text, as the cards always kept */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  --bubble: #e7f8ec;
}
.cp-id + .cp-block {
  margin-top: 13px;
}
.cp-block[data-kind='WHY_IT_MATTERS'] {
  --bubble: #fff3c4;
}
.cp-block[data-kind='DID_YOU_KNOW'],
.cp-block[data-kind='FUN_FACT'] {
  --bubble: #efe6ff;
}
.cp-block[data-kind='HOW_THEY_MAKE_MONEY'] {
  --bubble: #e3f6ea;
}
.cp-block .bubble {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 84px;
  height: 84px;
  margin-top: -42px;
  border-radius: 50%;
  background: var(--bubble);
}
.cp-block img {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 88px;
  height: 88px;
  margin-top: -44px;
  object-fit: contain;
}
.cp-block h2 {
  position: static;
  margin: 0;
  font: 800 var(--ks-k-h3) var(--ks-font);
  letter-spacing: -0.36px;
}
.cp-block p {
  margin: 0;
  font: 500 var(--ks-k-body) var(--ks-font);
  letter-spacing: -0.2px;
}
.cp-sec {
  display: block;
  margin-top: 20px; /* after the last block when the company serves no numbers */
}
/* Stat tiles (frame 01, 1614-35377…35382): 168 × 67 drawn → 168 × 60 radius 10 (R6, R15); two-up 9 apart, 13 below the
   last block (y 1135); value 20/800 tr −0.4, label 10/600 #DADADA, both centred. Real labels are phrases
   ("restaurants around the world"), so a tile grows to two label lines and a third number starts a new row. */
.cp-numbers {
  list-style: none;
  margin: 13px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, var(--ks-card-w));
  gap: 9px;
}
.cp-numbers li {
  /* Karan's stat cards: a picture at the left, the number and its words beside it, on a soft tint */
  position: relative;
  min-height: 72px;
  box-sizing: border-box;
  padding: 12px 10px 12px 58px;
  border-radius: var(--ks-r-tile);
  background: #f1fbf3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  text-align: left;
}
.cp-numbers li:nth-child(even) {
  background: #effafb;
}
.cp-numbers .ic {
  position: absolute;
  left: 8px;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  object-fit: contain;
}
.cp-numbers .vl {
  font: 800 var(--ks-k-h2) var(--ks-font);
  letter-spacing: -0.4px;
  color: var(--ks-ink);
}
.cp-numbers .lb {
  font: 600 var(--ks-k-small) var(--ks-font);
  letter-spacing: -0.2px;
  color: var(--ks-ink-secondary); /* #666666: no text in the lightest grey (decision 60) */
}
.cp-numbers + .cp-sec {
  margin-top: 24px; /* Products You Know at y 1219: tiles 1135 + 60 + 24 */
}
.cp-products {
  list-style: none;
  margin: 13px 0 0; /* chips at y 1252 */
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cp-products li {
  /* Karan's "You've seen these": a fuller pill with the picture in a white disc at the left */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  box-sizing: border-box;
  padding: 3px 14px 3px 3px;
  border-radius: var(--ks-r-pill-40);
  background: var(--ks-yellow);
  font: 600 var(--ks-k-small-tight) var(--ks-font);
  letter-spacing: -0.2px;
}
.cp-products .pic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  flex: none;
}
.cp-products .pic img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
/* News 345 × 211 at y 1288: image 123 × 91 at (14, 54); headline 12/800 lh 14 at (153, 54) w 172; Why 10/500 lh 15 at
   (153, 89); Lesson at (17, 160) w 310; chip #00A434 centred at y 201 */
.cp-news {
  margin-top: 24px;
  min-height: 211px;
  box-sizing: border-box;
}
.cp-news .art {
  position: absolute;
  left: 14px;
  top: 54px;
  width: 123px;
  height: 91px;
  object-fit: contain;
}
.cp-news .hl {
  margin: 40px 0 0 137px;
  width: 172px;
  font: 800 var(--ks-k-title) var(--ks-font);
  letter-spacing: -0.24px;
}
.cp-news .why {
  margin: 8px 0 0 137px;
  width: 176px;
  font: 500 var(--ks-k-small) var(--ks-font);
  letter-spacing: -0.2px;
}
.cp-news .lesson {
  margin: 16px 0 0 1px;
  width: 310px;
  font: 500 var(--ks-k-small) var(--ks-font);
  letter-spacing: -0.2px;
}
.cp-news b {
  font-weight: 800;
  color: var(--ks-yellow);
}
/* R18, half on, half off: the chip is centred on the news card's bottom edge (drawn 1490–1506 on a card ending 1499) */
.cp-news-chip {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: var(--ks-r-pill-40);
  background: var(--ks-success);
  color: #fff;
  font: 600 var(--ks-k-small-tight) var(--ks-font);
  letter-spacing: -0.2px;
}
/* Action rows 345 × 63, radius 16, 16-px gap (drawn 17, R4): icon ≈ 32 at (15, 16); title 14/800 at (73, 10);
   sub 10/500 at (74, 24) (drawn 10/600 lh 12 → 10/500 lh 10); right icon 28 at (300, 16) */
.cp-rows {
  display: grid;
  gap: 16px;
  margin-top: 26px; /* 1288 + 211 + 26 = 1525 */
}
.cp-row {
  position: relative;
  display: block;
  height: var(--ks-h-action-row);
  border-radius: var(--ks-r-card-16);
  color: #fff;
  text-decoration: none;
}
.cp-row .ic {
  position: absolute;
  left: 15px;
  top: 16px;
  width: 36px;
  height: 32px;
  object-fit: contain;
}
.cp-row .tt {
  position: absolute;
  left: 73px;
  top: 12px;
  font: 800 var(--ks-k-title) var(--ks-font);
  letter-spacing: -0.28px;
  white-space: nowrap;
}
.cp-row .st {
  position: absolute;
  left: 74px;
  top: 36px;
  right: 60px;
  font: 500 var(--ks-k-small) var(--ks-font);
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* room under the line for descenders (g, j, p, q, y) inside the clip, text unmoved (run of 8 Oct, item 3) */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}
.cp-row .ac {
  position: absolute;
  left: 300px;
  top: 17px;
  width: 28px;
  height: 28px;
}
.cp-row.learn {
  background: linear-gradient(180deg, var(--ks-row-learn-a), var(--ks-row-learn-b));
  box-shadow:
    inset 0 0 0 1px var(--ks-row-learn-line),
    inset 0 -2px 4px var(--ks-row-learn-shade),
    var(--ks-fx-tile-inset-light);
}
.cp-row.quiz {
  background: linear-gradient(180deg, var(--ks-row-quiz-a), var(--ks-row-quiz-b));
  box-shadow:
    inset 0 0 0 1px var(--ks-row-quiz-line),
    inset 0 -2px 4px var(--ks-row-quiz-shade),
    var(--ks-fx-tile-inset-light);
}
.cp-row.invest.off {
  background: var(--ks-row-off-fill);
  box-shadow:
    inset 0 0 0 1px var(--ks-row-off-fill),
    inset 0 -2px 4px var(--ks-row-off-shade),
    var(--ks-fx-tile-inset-light);
  color: var(--ks-ink-secondary);
  cursor: not-allowed;
}
.cp-row.invest.off .ic {
  filter: grayscale(1) opacity(0.7);
}
.cp-row.invest.on {
  background: linear-gradient(180deg, var(--ks-tile-cash-a), var(--ks-tile-cash-b));
  box-shadow:
    inset 0 0 0 1px var(--ks-tile-cash-line),
    inset 0 -2px 4px var(--ks-tile-cash-shade),
    var(--ks-fx-tile-inset-light);
}
.cp-row.missions {
  background: linear-gradient(180deg, var(--ks-row-missions-a), var(--ks-row-missions-b));
  box-shadow:
    inset 0 0 0 1px var(--ks-row-missions-line),
    inset 0 -2px 4px var(--ks-row-missions-shade),
    var(--ks-fx-tile-inset-light);
}
.cp-row[aria-disabled='true']:not(.invest) {
  opacity: 0.6;
}
/* Watchlist CTA: black pill, Blue hairline, bookmark 20 + 14/600 (drawn 39 tall → 51, R12); Watching = mint fill */
.cp-watch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: var(--ks-h-cta);
  margin-top: 16px;
  border: 0;
  border-radius: var(--ks-r-cta);
  background: var(--ks-ink);
  box-shadow: var(--ks-fx-cta-hairline-onboarding);
  color: #fff;
  font: 600 var(--ks-k-button) var(--ks-font);
  cursor: pointer;
}
.cp-watch img {
  width: 20px;
  height: 20px;
}
.cp-watch.on {
  background: var(--ks-brand-mint);
  color: var(--ks-ink);
}
.cp-watch:focus-visible,
.cp-bookmark:focus-visible,
.cp-row:focus-visible {
  outline: 3px solid var(--ks-cyan);
  outline-offset: 2px;
}

/* ---- Learn More (frame 02, 1614-35434): a white card 345 × 420 tucked 29 px under the Learn row (y 1554 under the
   row at 1525); title at (16, 47); nine chapter tiles 95 × 99 radius 10 at x 17 / 125 / 233 (pitch 108), rows 112
   apart from y 80; number icon 35 at (30, 12); "Chapter n" 10/600 at +57 (tr −0.2, drawn −0.4); state 8/600 at +77;
   explored = #E8FFE7 fill, #00A434 border and ink; else #DADADA border, #666 state ink. */
.cp-row.learn,
.cp-row.quiz,
.cp-row.missions {
  width: 100%;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  z-index: 1;
}
.cp-row .ac.minus::before {
  /* an expanded row shows a − in place of the + (frames 14 / 15): a 16 × 2 white bar centred in the 28-px slot */
  content: '';
  position: absolute;
  left: 6px;
  top: 13px;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
}
.cp-row .ac.minus {
  display: block;
}
/* An active bar's arrow is white (Aaira's second review, item 11); the drawn icon is #666666. A bar that is not
   active yet (Invest before the quick quiz) keeps the grey. */
.cp-row:not(.off):not([aria-disabled='true']) .ac.go {
  filter: brightness(0) invert(1);
}
.cp-learn-more {
  margin-top: -50px; /* card top 29 px below the row top: 29 − 63 − the 16-px row gap */
  padding: 47px 16px 17px; /* sized by its rows (3 × 3 = the drawn 420); one chapter left 250 px empty under a fixed 420 */
  box-sizing: border-box;
}
.cp-chapters {
  list-style: none;
  margin: 19px 0 0 1px; /* tiles from y +80 */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 95px);
  column-gap: 13px;
  row-gap: 13px;
}
.cp-chapters li a,
.cp-chapters li button {
  width: 100%;
  padding: 0;
  font: inherit;
  cursor: pointer;
  position: relative;
  display: block;
  height: 99px;
  box-sizing: border-box;
  border: 1px solid var(--ks-line-2);
  border-radius: var(--ks-r-tile);
  background: #fff;
  color: var(--ks-ink);
  text-decoration: none;
}
.cp-chapters li.on a,
.cp-chapters li.on button {
  background: var(--ks-success-tint);
  border-color: var(--ks-success);
  color: var(--ks-success);
}
.cp-chapters img {
  position: absolute;
  left: 29px;
  top: 11px;
  width: 35px;
  height: 35px;
}
.cp-chapters .tt {
  position: absolute;
  left: 0;
  right: 0;
  top: 56px;
  text-align: center;
  font: 600 var(--ks-k-small-tight) var(--ks-font);
  letter-spacing: -0.2px;
}
.cp-chapters .st {
  position: absolute;
  left: 0;
  right: 0;
  top: 76px;
  text-align: center;
  font: 600 var(--ks-k-small) var(--ks-font);
  letter-spacing: -0.16px;
  color: var(--ks-ink-secondary);
}
.cp-chapters li.on .st {
  color: var(--ks-success);
}

/* ---- Invested (frame 14, 1614-36565; loss view 1616-5581): the Invest row becomes "Invested" (cash gradient) and
   expands a white card 345 × 415 tucked 29 px under it; "Investment History" at (16, 47) with "n trades" 10/600 #666
   right; three tiles 95 × 99 radius 10 (same grid as the chapters) at +80: icon 39 × 32 at +13, value 20/600 at +55
   (tr −0.4; drawn −0.8), label 10/600 #666 at +80; the Profit tile in #00A434 (or #EE3B2B for a loss). Trade rows
   311 × 89 radius 10, 1-px #DADADA, from +201, 20 apart: date 10/400 at (17, 20); headline 16/600 at (17, 39)
   (tr −0.32; drawn −0.64); detail 10/400 lh 15 at (17, 59); right column 10/400 with bold figures at +42 / +59;
   a movement pill straddles the top-right edge. Bottom: Watchlist and Invest Again as a 168 two-up. */
.cp-row.invest.on[aria-expanded] {
  width: 100%;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  z-index: 1;
}
.cp-invested {
  margin-top: -50px;
  padding: 47px 16px 16px;
  min-height: 415px;
  box-sizing: border-box;
}
.cp-trades-count {
  position: absolute;
  right: 17px;
  top: 52px;
  font: 600 var(--ks-k-small-tight) var(--ks-font);
  letter-spacing: -0.2px;
  color: var(--ks-ink-secondary);
}
.cp-inv-stats {
  list-style: none;
  margin: 19px 0 0 1px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 95px);
  column-gap: 13px;
}
.cp-inv-stats li {
  position: relative;
  height: 99px;
  box-sizing: border-box;
  border: 1px solid var(--ks-line-2);
  border-radius: var(--ks-r-tile);
  background: #fff;
  color: var(--ks-ink);
}
.cp-inv-stats li.gain {
  border-color: var(--ks-success);
  color: var(--ks-success);
}
.cp-inv-stats li.loss {
  border-color: var(--ks-loss);
  color: var(--ks-loss);
}
.cp-inv-stats img {
  position: absolute;
  left: 50%;
  top: 13px;
  transform: translateX(-50%);
  width: 39px;
  height: 32px;
  object-fit: contain;
}
.cp-inv-stats .vl {
  position: absolute;
  left: 0;
  right: 0;
  top: 55px;
  text-align: center;
  font: 600 var(--ks-k-h2) var(--ks-font);
  letter-spacing: -0.4px;
}
.cp-inv-stats .lb {
  position: absolute;
  left: 0;
  right: 0;
  top: 80px;
  text-align: center;
  font: 600 var(--ks-k-small-tight) var(--ks-font);
  letter-spacing: -0.2px;
  color: var(--ks-ink-secondary);
}
.cp-inv-stats li.gain .lb {
  color: var(--ks-success);
}
.cp-inv-stats li.loss .lb {
  color: var(--ks-loss);
}
.cp-trades {
  list-style: none;
  margin: 22px 1px 0; /* rows from +201, 311 wide at x 17 */
  padding: 0;
  display: grid;
  gap: 20px;
}
.cp-trades li {
  position: relative;
  height: 89px;
  box-sizing: border-box;
  border: 1px solid var(--ks-line-2);
  border-radius: var(--ks-r-tile);
  background: #fff;
}
.cp-trade-move {
  position: absolute;
  right: 15px;
  top: -9px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px 10px;
  border-radius: var(--ks-r-pill-40);
  background: #fff;
  border: 1px solid var(--ks-line-2);
  font: 500 var(--ks-k-small-tight) var(--ks-font);
  letter-spacing: -0.2px;
  color: var(--ks-success);
}
.cp-trade-move img {
  width: 8px;
  height: 8px;
}
.cp-trade-move.loss {
  color: var(--ks-loss);
}
.cp-trades .dt,
.cp-trades .ds,
.cp-trades .r1,
.cp-trades .r2 {
  position: absolute;
  font: 400 var(--ks-k-small) var(--ks-font);
  letter-spacing: -0.2px;
}
.cp-trades .dt {
  left: 17px;
  top: 17px;
}
.cp-trades .hl {
  position: absolute;
  left: 17px;
  top: 37px;
  font: 600 var(--ks-k-h3) var(--ks-font);
  letter-spacing: -0.32px;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* room under the line for descenders (g, j, p, q, y) inside the clip, text unmoved (run of 8 Oct, item 3) */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}
.cp-trades .ds {
  left: 17px;
  top: 56px;
  width: 190px;
}
.cp-trades .r1,
.cp-trades .r2 {
  right: 17px;
  text-align: right;
}
.cp-trades .r1 {
  top: 39px;
}
.cp-trades .r2 {
  top: 56px;
}
.cp-trades b {
  font-weight: 700;
}
.cp-bottom {
  margin-top: 16px;
}
.cp-bottom .cp-watch {
  margin-top: 0;
}
.cp-bottom.two {
  display: grid;
  grid-template-columns: repeat(2, var(--ks-card-w));
  column-gap: var(--ks-card-gap-v05);
}
.cp-watch.again {
  text-decoration: none;
}

/* ---- Optional Missions (frame 15, 1614-36835): the Missions row expands a white card 345 × 420 tucked 29 px under
   it; "Optional Missions" at (16, 47); a 3 × 3 grid of 95 × 99 radius-10 tiles on the chapter grid (x 17 / 125 / 233,
   rows 112 apart from +80): icon 35 at (30, 12) in the mission's own ink, name 10/600 at +57 (tr −0.2, drawn −0.4),
   "+n XP" 8/600 #666 at +77; completed = #E8FFE7 fill, #00A434 border, ink and icon. Icons are masks so the ink
   follows the state. */
.cp-missions {
  margin-top: -50px;
  padding: 47px 16px 17px; /* sized by its rows, as Learn More */
  box-sizing: border-box;
}
.cp-mission-grid {
  list-style: none;
  margin: 19px 0 0 1px; /* tiles from y +80 */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 95px);
  column-gap: 13px;
  row-gap: 13px;
}
.cp-mission-grid li a,
.cp-mission-grid li button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  font: inherit;
  cursor: pointer;
  height: 99px;
  box-sizing: border-box;
  border: 1px solid var(--ks-line-2);
  border-radius: var(--ks-r-tile);
  background: #fff;
  color: var(--ks-ink);
  text-decoration: none;
}
.cp-mission-grid li.on a,
.cp-mission-grid li.on button {
  background: var(--ks-success-tint);
  border-color: var(--ks-success);
  color: var(--ks-success);
}
.cp-mission-grid a[aria-disabled],
.cp-mission-grid button:disabled {
  pointer-events: none;
  opacity: 0.5;
}
.cp-mission-grid .ic {
  position: absolute;
  left: 29px;
  top: 11px;
  width: 35px;
  height: 35px;
  background: var(--tile-ink, var(--ks-ink));
  mask-size: 35px 35px;
  mask-repeat: no-repeat;
}
.cp-mission-grid li.on .ic {
  background: var(--ks-success);
}
.cp-mission-grid .tt {
  position: absolute;
  left: 0;
  right: 0;
  top: 56px;
  text-align: center;
  font: 600 var(--ks-k-small-tight) var(--ks-font);
  letter-spacing: -0.2px;
}
.cp-mission-grid .st {
  position: absolute;
  left: 0;
  right: 0;
  top: 76px;
  text-align: center;
  font: 600 var(--ks-k-small) var(--ks-font);
  letter-spacing: -0.16px;
  color: var(--ks-ink-secondary);
}
.cp-mission-grid li.on .st {
  color: var(--ks-success);
}

/* ---- More Quiz (frame 10, 1614-36108): after the quick quiz the Quiz row expands the same 3 × 3 tile card as
   Optional Missions, titled "More Quiz": a circled question mark (#DADADA, green once explored), the quiz name
   and Explored / To be Explored. The card grows with its rows (three rows = 415 in the frame). */
.cp-more-quiz {
  min-height: 0;
}
.cp-chapters a[aria-disabled],
.cp-chapters button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---- Locked company (409 COMPANY_LOCKED, decision 32). Not drawn by Aaira yet: the page header on the dark tint,
   then a white card 345 wide (radius 16) on the sheet with the lock, a 14/800 title, the authored hint 12/17, the
   51 CTA to the missions list and a text link back to Discover. */
.cp-locked .cp-head {
  height: 160px;
}
.cp-locked-card {
  position: relative;
  margin: -37px var(--ks-margin-screen) 0;
  padding: 32px 16px 20px;
  border-radius: var(--ks-r-card-16);
  background: #fff;
  text-align: center;
  color: var(--ks-ink);
}
.cp-locked-card > img {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: 12px;
  border-radius: 50%;
  background: var(--ks-ink);
}
.cp-locked-card h2 {
  margin: 16px 0 0;
  font: 800 var(--ks-k-title) var(--ks-font);
  letter-spacing: -0.28px;
}
.cp-locked-card p {
  margin: 8px 0 0;
  font: 400 var(--ks-k-body) var(--ks-font);
  letter-spacing: -0.24px;
}
.cp-locked-card .cp-watch {
  margin-top: 24px;
  text-decoration: none;
}
.cp-locked-back {
  display: inline-block;
  margin-top: 16px;
  font: 600 var(--ks-k-small-tight) var(--ks-font);
  color: var(--ks-ink);
}
.cp-news-chip.loss {
  background: var(--ks-loss);
}
/* The chip's lower half hangs below the card: keep the card's text clear of its upper half */
.cp-news:has(.cp-news-chip) {
  padding-bottom: 26px;
}

/* ---- Placeholders while /open is on its way (engineering's loading note, 7 Oct): the frame's shapes, a soft pulse,
   no spinner; the head is drawn from the Discover row at once */
.cp-skel {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.cp-skel::after,
.cp-skel-line,
.cp-skel-chip {
  animation: cp-pulse 1.4s ease-in-out infinite;
}
.cp-skel::after {
  content: '';
  position: absolute;
  inset: 16px;
  border-radius: 10px;
  background: #f1f1f1;
}
.cp-skel-id {
  margin-top: 13px; /* as the Company ID card: 433 = 292 + 128 + 13 */
  height: 249px;
}
.cp-skel-block {
  margin-top: 16px;
  height: 97px;
}
.cp-skel-line {
  display: block;
  height: 14px;
  border-radius: 7px;
  background: rgb(255 255 255 / 25%);
}
.cp-skel-name {
  position: absolute;
  left: 229px;
  top: 147px;
  width: 110px;
}
.cp-skel-tag {
  position: absolute;
  left: 193px;
  top: 185px;
  width: 140px;
  height: 10px;
}
.cp-skel-chip {
  min-width: 70px;
  background: rgb(255 255 255 / 20%);
}
.cp-slow {
  margin: 16px 0 0;
  text-align: center;
}
@keyframes cp-pulse {
  50% {
    opacity: 0.55;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cp-skel::after,
  .cp-skel-line,
  .cp-skel-chip {
    animation: none;
  }
}

/* ---- Decision 59: a company's brand colour, when content has set it (inline vars from brandVars() on .cp).
   The tint rules set --t0..--desc on .cp-head, so the head reads the brand's own copies first. */
.cp[style*='--brand'] .cp-head {
  --t0: inherit;
  --t1: inherit;
  --t2: inherit;
  --desc: inherit;
}
.cp-products li {
  background: var(--brand, var(--ks-yellow));
  color: var(--brand-ink, inherit);
}
.cp-news b {
  color: var(--brand-text, var(--ks-yellow));
}

/* Journey steps that are not complete yet open their section (item 10): an invisible button over the drawn tile */
.cp-steps li {
  position: relative;
}
.cp-steps .go {
  position: absolute;
  inset: -16px 0 0; /* the tile and the icon that overhangs it */
  z-index: 2; /* above the step's icon, which is drawn after it */
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 5px;
}
.cp-steps .go:focus-visible {
  outline: 2px solid var(--ks-ink);
}

/* ==== apps/web/src/app/buttons.css (loaded last in the app) */
/* The black buttons' outline, exactly as Aaira's frames draw it (Aastha, 8 Oct: "the outline has a gradient").
   Read from Figma SVG exports (8 Oct): quiz results 1622:9752, Portfolio Buy More 1658:13332, Choose Your Hero CTA
   1409:4312 all stroke 1 px with a vertical linear gradient #3E28E0 (bottom) → #23F8B5 (top); Discover's collection
   CTA 1299:10176 strokes #150651 → #B926C0. It replaces the flat #150651 / #3E28E0 hairlines. Loaded last, so it
   wins over each screen's own button rule; states that change the fill (Watching in mint, Check Answer before a
   pick in white) keep their own look. */
.cp-watch:not(.on),
.ob-cta,
.st-btn,
.qz-btn:not([aria-pressed='true']):not(.qz-sheet:not(.qz-results) .qz-btn.wide:disabled),
.pfo-btn,
.qz-go.dark:not([aria-pressed='true']),
.ks-problem-go {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ks-ink), var(--ks-ink)) padding-box,
    var(--ks-stroke-cta) border-box;
  box-shadow: none;
}
.banner-cta .ob-cta {
  box-shadow: none; /* discover.css's flat hairline for this CTA */
  background:
    linear-gradient(var(--ks-ink), var(--ks-ink)) padding-box,
    var(--ks-stroke-cta-collection) border-box;
}

/* The mint buttons are stroked with the same gradient (run of 8 Oct, item 2; audit of 9 Oct): Watching on the
   company page (1622:10570) and on the quiz results, and the Mystery card's Tap to Reveal / See Company
   (1549:5171): fill #23F8B5, 1 px #3E28E0 (bottom) → #23F8B5 (top). They had a flat Blue or mint line. */
.cp-watch.on,
.qz-btn[aria-pressed='true'],
.qz-go.dark[aria-pressed='true'],
.hm-mystery .cta {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ks-brand-mint), var(--ks-brand-mint)) padding-box,
    var(--ks-stroke-cta) border-box;
  box-shadow: none;
}