/* India Essentials v2. Register B. Built by engine/build.mjs from engine/assets: fonts, compass tokens, site. */
/* Compass fonts. Self hosted, variable, OFL (licences beside this file).
 *
 * Fraunces      the voice: headlines, the one italic phrase, a family's name.
 *               Built from google/fonts with SOFT and WONK pinned to 0, so the
 *               shapes stay calm and upright. Optical size 9 to 144, weight 300 to 700.
 * Lexend Deca   every sentence and control. Weight 200 to 700.
 * Space Grotesk every number, time, rupee figure, case number and id. Weight 300 to 700.
 *
 * Each face covers Latin, Latin Extended A and B, Vietnamese and the rupee sign.
 * The "... Fallback" faces are local system fonts stretched to the same width,
 * so text does not jump when the real face arrives. Rebuild with tools/build-fonts.py.
 */

@font-face {
  font-family: "Compass Fraunces";
  src: url("/assets/v2/fonts/fraunces-roman.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Compass Fraunces";
  src: url("/assets/v2/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Compass Lexend";
  src: url("/assets/v2/fonts/lexend-deca.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Compass Grotesk";
  src: url("/assets/v2/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Fallbacks measured against the real faces (tools/build-fonts.py prints these). */
@font-face {
  font-family: "Compass Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 112.94%;
  ascent-override: 86.6%;
  descent-override: 22.58%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Compass Lexend Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 110.59%;
  ascent-override: 90.42%;
  descent-override: 22.61%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Compass Grotesk Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 110.93%;
  ascent-override: 88.7%;
  descent-override: 26.32%;
  line-gap-override: 0%;
}

/* ==========================================================================
 * Compass tokens. The one source for iTour, the companion, i-Navigate,
 * move.report and the city guides.
 *
 * Colours come from the IKAN brand book (Nov 2023, pages 33 to 36). One change
 * from the book, by the owner's later word: paper is white and the ground is a
 * faint sky tint. Never cream.
 *
 * Every text pair below is measured with the WCAG 2 formula by
 * tools/check-contrast.mjs, which reads this file. Numbers in the comments are
 * that tool's output. Nothing under 4.5:1 is allowed as text, except raw coral
 * at 24px or larger (large text, 3:1).
 *
 * Registers: set data-register on <html> or any wrapper.
 *   home   (default) the family: i-Navigate, the city guides, every share page
 *   field  the consultant: iTour desk and the companion. data-theme="dark" or
 *          "system" for night, data-contrast="more" for outdoor sun
 *   record documents: itinerary PDF, arrival pack, condition report
 * All names start with --cp- so nothing clashes with an app's older tokens
 * while it moves across.
 * ========================================================================== */

:root {
  color-scheme: light;

  /* ── brand, from the book ─────────────────────────────────────────────── */
  --cp-midnight: #134550;        /* chrome, headings, covers. white on it 10.53 */
  --cp-midnight-deep: #0c323a;   /* the darkest band. white on it 13.3 */
  --cp-sky: #acd8d5;             /* calm fills, selection. ink on it 11.89 */
  --cp-sky-soft: #d6ecea;        /* selected rows, chips */
  --cp-sky-wash: #eaf4f3;        /* section bands */
  --cp-coral: #f1593f;           /* the brand coral: focus ring, dots, active marker,
                                    the italic phrase at 24px and up. 3.36 on paper */
  --cp-coral-action: #c63822;    /* the one action. white text on it 5.26 */
  --cp-coral-action-hover: #b03418;
  --cp-coral-action-press: #9a2c14;
  --cp-coral-text: #b03418;      /* coral as small text. 6.27 on paper, 5.75 on ground */
  --cp-coral-soft: #fdebe7;

  /* ── paper and ink ────────────────────────────────────────────────────── */
  --cp-paper: #ffffff;           /* anything you read */
  --cp-ground: #f1f6f6;          /* the app ground, a breath of sky */
  --cp-sunken: #e6efef;          /* wells, tracks, skeletons */
  --cp-line: #dce6e6;            /* hairlines between rows */
  --cp-line-strong: #c3d2d3;     /* card edges */
  --cp-line-control: #6f8488;    /* input edges, 3.94 on paper (3:1 needed) */
  --cp-ink: #10141c;             /* the book's ink. 18.44 on paper, 16.91 on ground */
  --cp-ink-2: #3d4f55;           /* secondary text. 7.86 on ground */
  --cp-ink-3: #5b6d73;           /* meta and captions. 5.41 paper, 4.96 ground, 4.93 sky wash */
  --cp-steel: #809dac;           /* decoration only, 2.86. never text */
  --cp-heading-color: var(--cp-midnight); /* headlines and big figures. 9.84 on ground */
  --cp-on-dark: #ffffff;
  --cp-on-dark-2: #cfe2e0;       /* secondary text on midnight. 7.9 */
  --cp-scrim: rgb(12 50 58 / 0.44); /* behind a sheet, never on a photograph */

  /* ── status, from the book's secondaries. fill, text shade, soft tint ── */
  --cp-ok: #109648;      --cp-ok-text: #0c7136;     --cp-ok-soft: #e3f3e9;     /* 5.32 on soft */
  --cp-wait: #ffc40b;    --cp-wait-text: #7a5800;   --cp-wait-soft: #fff4d1;   /* 5.93 */
  --cp-stop: #e02b3d;    --cp-stop-text: #a8202e;   --cp-stop-soft: #fce7e9;   /* 6.10 */
  --cp-info: #15aa98;    --cp-info-text: #0e6b60;   --cp-info-soft: #e1f3f0;   /* 5.56 */
  --cp-sealed: #910c48;  --cp-sealed-text: #910c48; --cp-sealed-soft: #f6e4ec; /* 8.94 on paper */
  --cp-olive: #bcc906;   /* charts only */
  --cp-plum: #910c48;

  /* ── the one action and the focus ring ───────────────────────────────── */
  --cp-action: var(--cp-coral-action);
  --cp-action-hover: var(--cp-coral-action-hover);
  --cp-action-press: var(--cp-coral-action-press);
  --cp-on-action: #ffffff;
  --cp-focus-color: var(--cp-coral);
  --cp-focus-width: 2px;
  --cp-focus-offset: 2px;
  --cp-focus-ring: 0 0 0 var(--cp-focus-offset) var(--cp-paper),
    0 0 0 calc(var(--cp-focus-offset) + var(--cp-focus-width)) var(--cp-focus-color);

  /* ── type ──────────────────────────────────────────────────────────────── */
  --cp-font-voice: "Compass Fraunces", "Compass Fraunces Fallback", Georgia, "Times New Roman", serif;
  --cp-font-body: "Compass Lexend", "Compass Lexend Fallback", system-ui, -apple-system,
    "Segoe UI", Roboto, Arial, sans-serif;
  --cp-font-figure: "Compass Grotesk", "Compass Grotesk Fallback", system-ui, -apple-system,
    "Segoe UI", Roboto, Arial, sans-serif;
  --cp-figure-features: "tnum" 1, "lnum" 1;           /* money, counts, times */
  --cp-id-features: "tnum" 1, "lnum" 1, "zero" 1;     /* case numbers and codes: slashed zero */

  /* fluid scale, 360px to 1440px wide */
  --cp-step--2: clamp(0.75rem, 0.7396rem + 0.0463vw, 0.7813rem);   /* 12 to 12.5 */
  --cp-step--1: clamp(0.8438rem, 0.8333rem + 0.0463vw, 0.875rem);  /* 13.5 to 14 */
  --cp-step-0: clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);       /* 16 to 17 */
  --cp-step-1: clamp(1.125rem, 1.0833rem + 0.1852vw, 1.25rem);     /* 18 to 20 */
  --cp-step-2: clamp(1.25rem, 1.1667rem + 0.3704vw, 1.5rem);       /* 20 to 24 */
  --cp-step-3: clamp(1.5rem, 1.375rem + 0.5556vw, 1.875rem);       /* 24 to 30 */
  --cp-step-4: clamp(1.75rem, 1.5417rem + 0.9259vw, 2.375rem);     /* 28 to 38 */
  --cp-step-5: clamp(2.125rem, 1.8333rem + 1.2963vw, 3rem);        /* 34 to 48 */
  --cp-step-6: clamp(2.5rem, 2rem + 2.2222vw, 4rem);               /* 40 to 64 */
  --cp-step-7: clamp(3.25rem, 2.3333rem + 4.0741vw, 6rem);         /* 52 to 96, the big stat */

  /* roles. Each register decides which face leads. Home is the default. */
  --cp-display-font: var(--cp-font-voice);
  --cp-display-weight: 460;
  --cp-display-size: var(--cp-step-6);
  --cp-display-leading: 1.04;
  --cp-display-tracking: -0.02em;
  --cp-heading-font: var(--cp-font-voice);
  --cp-heading-weight: 500;
  --cp-heading-size: var(--cp-step-3);
  --cp-heading-leading: 1.15;
  --cp-heading-tracking: -0.01em;
  --cp-body-size: 1.0625rem;     /* 17px, families read in a second language */
  --cp-body-weight: 350;
  --cp-body-leading: 1.6;
  --cp-small-size: 0.9375rem;    /* 15px */
  --cp-label-font: var(--cp-font-body);
  --cp-label-size: 0.8125rem;    /* 13px, sentence case */
  --cp-label-weight: 500;
  --cp-measure: 62ch;

  /* ── space, a 4px base ─────────────────────────────────────────────────── */
  --cp-space-1: 4px;
  --cp-space-2: 8px;
  --cp-space-3: 12px;
  --cp-space-4: 16px;
  --cp-space-5: 20px;
  --cp-space-6: 24px;
  --cp-space-7: 32px;
  --cp-space-8: 40px;
  --cp-space-9: 56px;
  --cp-space-10: 80px;
  --cp-gutter: clamp(16px, 3.2vw, 40px);        /* page side margin, 16 on a phone */
  --cp-section: clamp(40px, 6vw, 96px);         /* between sections */
  --cp-row-height: 56px;                        /* list row on a phone */
  --cp-target: 44px;                            /* the smallest thing a finger presses */

  /* ── shape ─────────────────────────────────────────────────────────────── */
  --cp-radius-xs: 4px;           /* chips inside a figure, map keys */
  --cp-radius-control: 10px;     /* buttons, inputs */
  --cp-radius-card: 14px;        /* cards and plates, the ceiling is 16 */
  --cp-radius-sheet: 22px;       /* the top corners of a bottom sheet */
  --cp-radius-pill: 999px;       /* status chips and the sync pill only */
  /* the book's signature: one large quarter round corner on an otherwise
     square block. Covers, the move pass, the empty state tile. Nowhere else. */
  --cp-radius-quarter: 4px 44px 4px 4px;
  --cp-radius-quarter-lg: 4px 88px 4px 4px;
  /* portraits sit in an arch, from "Meet your captains" in the book */
  --cp-radius-arch: 999px 999px 12px 12px;

  /* ── elevation. A border or a shadow, never both at full strength ─────── */
  --cp-shadow-1: 0 1px 2px rgb(19 69 80 / 0.07);
  --cp-shadow-2: 0 1px 2px rgb(19 69 80 / 0.06), 0 8px 24px -8px rgb(19 69 80 / 0.18);
  --cp-shadow-3: 0 2px 6px rgb(16 20 28 / 0.08), 0 24px 56px -20px rgb(16 20 28 / 0.32);
  --cp-shadow-action: 0 1px 0 rgb(255 255 255 / 0.18) inset, 0 1px 2px rgb(154 44 20 / 0.28);

  /* ── motion ────────────────────────────────────────────────────────────── */
  --cp-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);     /* things arriving, ease out expo */
  --cp-ease-exit: cubic-bezier(0.4, 0, 1, 1);         /* things leaving, quicker */
  --cp-ease-move: cubic-bezier(0.2, 0, 0, 1);         /* things changing place */
  --cp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* arrival and success only */
  --cp-dur-instant: 100ms;
  --cp-dur-quick: 160ms;       /* press, hover, a chip changing */
  --cp-dur-base: 280ms;        /* a sheet, a toast, a card opening */
  --cp-dur-slow: 480ms;        /* the pass arriving, a stamp */
  --cp-dur-count: 900ms;       /* a number counting up */
  --cp-motion-distance: 1;     /* multiplies every travel. 0 under reduced motion */
  --cp-press-scale: 0.97;

  /* ── layers ────────────────────────────────────────────────────────────── */
  --cp-z-sticky: 20;
  --cp-z-sheet: 50;
  --cp-z-toast: 60;
}

/* ── Field: the consultant's tool. Light by default, dense, Space Grotesk leads ─ */
[data-register="field"] {
  --cp-display-font: var(--cp-font-figure);
  --cp-display-weight: 500;
  --cp-display-size: var(--cp-step-5);
  --cp-display-leading: 1.08;
  --cp-display-tracking: -0.015em;
  --cp-heading-font: var(--cp-font-figure);
  --cp-heading-weight: 600;
  --cp-heading-size: var(--cp-step-1);
  --cp-heading-leading: 1.25;
  --cp-heading-tracking: -0.005em;
  --cp-body-size: 1rem;          /* 16 on phones, never smaller on a control */
  --cp-body-weight: 400;
  --cp-body-leading: 1.5;
  --cp-small-size: 0.875rem;
  --cp-label-font: var(--cp-font-figure);
  --cp-label-size: 0.8125rem;
  --cp-row-height: 52px;
  --cp-measure: 70ch;
}

/* Field at night: near black, never the teal field the owner rejected. */
[data-register="field"][data-theme="dark"] {
  color-scheme: dark;
  --cp-paper: #151c1f;
  --cp-ground: #0d1214;
  --cp-sunken: #0a0e10;
  --cp-line: rgb(255 255 255 / 0.08);
  --cp-line-strong: rgb(255 255 255 / 0.14);
  --cp-line-control: #6b7c7e;    /* 3.6 on paper */
  --cp-ink: #f2f4f3;             /* 17.07 */
  --cp-ink-2: #b3c0c0;           /* 9.21 on paper */
  --cp-ink-3: #8c9c9d;           /* 6.04 on paper */
  --cp-heading-color: #f2f4f3;
  --cp-sky-soft: #1d3236;
  --cp-sky-wash: #142326;
  --cp-coral-text: #f56e56;      /* 6.51 on ground */
  --cp-coral-soft: #3a1b15;
  --cp-ok-text: #4cc47f;   --cp-ok-soft: #10281b;
  --cp-wait-text: #ffd257; --cp-wait-soft: #2d2408;
  --cp-stop-text: #ff7a86; --cp-stop-soft: #34151a;
  --cp-info-text: #4fd1bf; --cp-info-soft: #0f2a27;
  --cp-sealed-text: #f08cb8; --cp-sealed-soft: #2e1220;
  --cp-scrim: rgb(0 0 0 / 0.6);
  --cp-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --cp-shadow-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -8px rgb(0 0 0 / 0.6);
  --cp-shadow-3: 0 24px 56px -20px rgb(0 0 0 / 0.8);
  /* the usual coral, even when the phone asks for more contrast: the darker
     one sinks into the night ground (2.69) */
  --cp-action: var(--cp-coral-action);   /* 3.58 on the night ground */
  --cp-action-hover: var(--cp-coral-action-hover);
  --cp-action-press: var(--cp-coral-action-press);
}
@media (prefers-color-scheme: dark) {
  [data-register="field"][data-theme="system"] {
    color-scheme: dark;
    --cp-paper: #151c1f;
    --cp-ground: #0d1214;
    --cp-sunken: #0a0e10;
    --cp-line: rgb(255 255 255 / 0.08);
    --cp-line-strong: rgb(255 255 255 / 0.14);
    --cp-line-control: #6b7c7e;
    --cp-ink: #f2f4f3;
    --cp-ink-2: #b3c0c0;
    --cp-ink-3: #8c9c9d;
    --cp-heading-color: #f2f4f3;
    --cp-sky-soft: #1d3236;
    --cp-sky-wash: #142326;
    --cp-coral-text: #f56e56;
    --cp-coral-soft: #3a1b15;
    --cp-ok-text: #4cc47f;   --cp-ok-soft: #10281b;
    --cp-wait-text: #ffd257; --cp-wait-soft: #2d2408;
    --cp-stop-text: #ff7a86; --cp-stop-soft: #34151a;
    --cp-info-text: #4fd1bf; --cp-info-soft: #0f2a27;
    --cp-sealed-text: #f08cb8; --cp-sealed-soft: #2e1220;
    --cp-scrim: rgb(0 0 0 / 0.6);
    --cp-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --cp-shadow-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -8px rgb(0 0 0 / 0.6);
    --cp-shadow-3: 0 24px 56px -20px rgb(0 0 0 / 0.8);
    --cp-action: var(--cp-coral-action);
    --cp-action-hover: var(--cp-coral-action-hover);
    --cp-action-press: var(--cp-coral-action-press);
  }
}

/* Field outdoors, in Indian sun: solid everything, black ink, heavier lines,
   no glass, a darker action. Outdoor always wins over night: it is a full
   light theme, so a phone in dark mode that turns on outdoor gets white paper
   and black ink, never black ink on the night paper. It sets every colour the
   night theme sets (tools/check-contrast.mjs checks that). A phone that asks
   for more contrast gets the milder block after this one. */
[data-register="field"][data-contrast="more"] {
  color-scheme: light;
  --cp-paper: #ffffff;
  --cp-ground: #ffffff;
  --cp-sunken: #e6efef;
  --cp-sky-soft: #d6ecea;
  --cp-sky-wash: #eaf4f3;
  --cp-coral-text: #b03418;
  --cp-coral-soft: #fdebe7;
  --cp-ok-text: #0c7136;   --cp-ok-soft: #e3f3e9;
  --cp-wait-text: #7a5800; --cp-wait-soft: #fff4d1;
  --cp-stop-text: #a8202e; --cp-stop-soft: #fce7e9;
  --cp-info-text: #0e6b60; --cp-info-soft: #e1f3f0;
  --cp-sealed-text: #910c48; --cp-sealed-soft: #f6e4ec;
  --cp-scrim: rgb(12 50 58 / 0.44);
  --cp-shadow-3: 0 0 0 1px #10141c;
  --cp-ink: #000000;
  --cp-ink-2: #1a2022;           /* 16.49 */
  --cp-ink-3: #3a4448;           /* 10.0 */
  --cp-heading-color: #000000;
  --cp-line: #9aa9ab;
  --cp-line-strong: #6f8488;
  --cp-line-control: #10141c;
  --cp-action: #a52d1b;          /* white on it 7.02 */
  --cp-action-hover: #8e2616;
  --cp-action-press: #7a2012;
  --cp-focus-width: 3px;
  --cp-shadow-1: none;
  --cp-shadow-2: 0 0 0 1px #10141c;
  --cp-body-weight: 450;
}
@media (prefers-contrast: more) {
  :root {
    --cp-ink-2: #1a2022;
    --cp-ink-3: #3a4448;
    --cp-line: #9aa9ab;
    --cp-line-strong: #6f8488;
    --cp-line-control: #10141c;
    --cp-action: #a52d1b;
    --cp-focus-width: 3px;
  }
}

/* ── Record: documents. Print sizes, Fraunces covers, Space Grotesk figures ─ */
[data-register="record"] {
  --cp-ground: #ffffff;
  --cp-display-font: var(--cp-font-voice);
  --cp-display-weight: 560;
  --cp-display-size: 40pt;
  --cp-display-leading: 1.04;
  --cp-heading-font: var(--cp-font-voice);
  --cp-heading-weight: 600;
  --cp-heading-size: 15pt;
  --cp-body-size: 10.5pt;
  --cp-body-weight: 330;
  --cp-body-leading: 1.55;
  --cp-small-size: 8.5pt;
  --cp-label-font: var(--cp-font-figure);
  --cp-label-size: 8pt;
  --cp-measure: 68ch;
}

/* ── Reduced motion: things fade instead of travel, nothing bounces ────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cp-motion-distance: 0;
    --cp-press-scale: 1;
    --cp-ease-spring: var(--cp-ease-enter);
    --cp-dur-base: 180ms;
    --cp-dur-slow: 200ms;
    --cp-dur-count: 0ms;
  }
}
/* the in app switch, for when the phone setting is off but the person wants calm */
[data-motion="reduce"] {
  --cp-motion-distance: 0;
  --cp-press-scale: 1;
  --cp-ease-spring: var(--cp-ease-enter);
  --cp-dur-base: 180ms;
  --cp-dur-slow: 200ms;
  --cp-dur-count: 0ms;
}

/* ==========================================================================
 * India Essentials v2. Register B: light, calm, editorial. Never a dark hero,
 * never type over a photograph. Compass tokens (tokens.css) and fonts, the city
 * guides' sibling. Phone first at 390; every control a finger meets is 44px.
 * ========================================================================== */

:root {
  --e-max: 1200px;
  --e-read: 720px;
  --e-label: 0.8125rem;
  --e-muted: var(--cp-ink-3);
  --e-wash: var(--cp-sky-wash);
  --e-h1: clamp(2.375rem, 1.6rem + 3.3vw, 4.25rem);
  --e-h2: clamp(1.625rem, 1.25rem + 1.3vw, 2.375rem);
  --e-h3: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem);
  --e-fig: clamp(1.75rem, 1.4rem + 1.1vw, 2.5rem);
  --e-top: 60px;
  --e-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* the names the old page scoped styles use (emergency card, tenancy), mapped to the new tokens */
  --ink: var(--cp-ink); --ink2: var(--cp-ink-2); --muted: var(--cp-ink-3); --faint: var(--cp-ink-3);
  --line: var(--cp-line); --line-2: var(--cp-sunken); --paper: #fff; --cream: var(--cp-ground);
  --wash-green: var(--cp-sky-wash); --green: var(--cp-midnight); --green-deep: var(--cp-midnight-deep);
  --gold: var(--cp-coral); --gold-ink: var(--cp-coral-text); --serif: var(--cp-font-voice); --sans: var(--cp-font-body);
  --radius: 14px; --radius-s: 10px; --radius-pill: 999px; --shadow-soft: var(--cp-shadow-1);
  --t-eyebrow: var(--e-label); --t-h3: var(--e-h3); --ease: var(--e-ease);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--e-top) + 16px); }
body {
  margin: 0; background: var(--cp-paper); color: var(--cp-ink);
  font-family: var(--cp-font-body); font-size: var(--cp-body-size); font-weight: var(--cp-body-weight);
  line-height: var(--cp-body-leading); font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--cp-font-voice); font-weight: 500; color: var(--cp-midnight); letter-spacing: -0.01em; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0 0 1rem; }
b, strong { font-weight: 600; color: var(--cp-ink); }
a { color: var(--cp-midnight); text-decoration-color: var(--cp-sky); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--cp-coral); }
:focus-visible { outline: var(--cp-focus-width) solid var(--cp-focus-color); outline-offset: var(--cp-focus-offset); border-radius: 4px; }
a, button, summary, input, label { touch-action: manipulation; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--cp-paper); padding: 12px 16px; border-radius: 10px; box-shadow: var(--cp-shadow-2); }
.skip:focus { top: 12px; }
.eyebrow, .label { font-family: var(--cp-font-figure); font-size: var(--e-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-muted); line-height: 1.35; }

/* ── the header: light, sticky, the way back always one tap away ─────────── */
.hdr { position: sticky; top: 0; z-index: var(--cp-z-sticky); background: rgb(255 255 255 / 0.96); border-bottom: 1px solid var(--cp-line); backdrop-filter: saturate(1.3) blur(8px); -webkit-backdrop-filter: saturate(1.3) blur(8px); }
.top__in { max-width: var(--e-max); margin: 0 auto; padding: 0 max(var(--cp-gutter), env(safe-area-inset-left)); display: flex; align-items: center; gap: 8px; min-height: var(--e-top); }
.lockup { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--cp-midnight); }
.lockup .wm { width: 52px; height: auto; display: block; fill: currentColor; }
.lockup__name { font-family: var(--cp-font-voice); font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; padding-left: 10px; border-left: 1px solid var(--cp-line-strong); line-height: 1.1; }
.top__nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.top__nav a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 10px; color: var(--cp-ink-2); text-decoration: none; font-size: 0.9375rem; font-weight: 450; white-space: nowrap; }
.top__nav a:hover { background: var(--e-wash); color: var(--cp-midnight); }
.top__nav .top__pdf { color: var(--cp-midnight); border: 1px solid var(--cp-line-strong); }
@media (max-width: 359px) { .lockup__name { font-size: 1rem; } .top__nav a { padding: 0 8px; } }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--cp-radius-control); font: inherit; font-size: 1rem; font-weight: 500; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color var(--cp-dur-quick) var(--e-ease), transform var(--cp-dur-quick) var(--e-ease); }
.btn:active { transform: scale(var(--cp-press-scale)); }
.btn--go { background: var(--cp-action); color: var(--cp-on-action); box-shadow: var(--cp-shadow-action); }
.btn--go:hover { background: var(--cp-action-hover); }
.btn--line { background: var(--cp-paper); color: var(--cp-midnight); border-color: var(--cp-line-strong); }
.btn--line:hover { background: var(--e-wash); }
/* the old pages' own buttons (the emergency card's print and reset) */
.prose .btn-gold { background: var(--cp-action); color: var(--cp-on-action); }
.prose .btn-gold:hover { background: var(--cp-action-hover); }
.prose .btn-ghost { background: var(--cp-paper); color: var(--cp-midnight); border-color: var(--cp-line-strong); }
.prose .btn-ghost:hover { background: var(--e-wash); }
.prose .btn .ico { width: 18px; height: 18px; }

/* ── a guide: the head ──────────────────────────────────────────────────── */
.g__head, .g__body, .pn { max-width: var(--e-max); margin: 0 auto; padding-left: max(var(--cp-gutter), env(safe-area-inset-left)); padding-right: max(var(--cp-gutter), env(safe-area-inset-right)); }
.g__head { display: grid; gap: 24px; padding-top: 20px; padding-bottom: 8px; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 0.9375rem; color: var(--e-muted); margin: 0 0 4px; }
.crumb a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--cp-ink-2); text-decoration: none; }
.crumb a:hover { color: var(--cp-midnight); text-decoration: underline; text-decoration-color: var(--cp-coral); }
.g__kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 14px; font-family: var(--cp-font-figure); font-size: var(--e-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-muted); }
.g__tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--cp-sky-soft); color: var(--cp-midnight); font-weight: 600; }
.g__tag--deep { background: var(--cp-midnight); color: #fff; }
.g__title { font-size: var(--e-h1); font-weight: 460; line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 16px; }
.g__title br { display: none; }
.g__title em, .hub__title em { font-style: italic; color: var(--cp-coral-text); font-weight: 420; }
.g__sub { font-size: 1.125rem; line-height: 1.55; color: var(--cp-ink-2); max-width: 58ch; margin: 0; }
.g__side { display: grid; gap: 18px; align-content: start; }
.keyfigs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.keyfigs li { display: grid; gap: 4px; align-content: start; padding: 12px 0 14px; border-top: 2px solid var(--cp-midnight); min-width: 0; }
.keyfigs .n { font-family: var(--cp-font-figure); font-feature-settings: var(--cp-figure-features); font-size: var(--e-fig); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--cp-midnight); overflow-wrap: anywhere; }
.keyfigs .l { font-size: 0.9375rem; line-height: 1.4; color: var(--cp-ink-2); }
.keyfigs li:only-child { grid-column: 1 / -1; }
.g__acts { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 520px) { .g__acts .btn { flex: 1 1 100%; } }
@media (min-width: 1000px) {
  .g__head { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; padding-top: 40px; padding-bottom: 24px; align-items: end; }
  .keyfigs { grid-template-columns: minmax(0, 1fr); }
  .keyfigs li { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 14px; }
  .keyfigs li:only-child { grid-column: auto; }
}

/* ── a guide: the body and its rail ─────────────────────────────────────── */
.g__body { display: block; padding-top: 8px; padding-bottom: 24px; }
.rail { display: none; }
.g__article { max-width: var(--e-read); min-width: 0; }
@media (min-width: 1100px) {
  .g__body { display: grid; grid-template-columns: 236px minmax(0, var(--e-read)); gap: 72px; justify-content: start; }
  .rail { display: block; position: sticky; top: calc(var(--e-top) + 24px); align-self: start; max-height: calc(100vh - var(--e-top) - 40px); overflow-y: auto; padding: 4px 4px 16px 0; }
  .rail__h { font-family: var(--cp-font-figure); font-size: var(--e-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-muted); margin: 0 0 8px; }
  .rail__list { list-style: none; margin: 0 0 20px; padding: 0; border-left: 2px solid var(--cp-line); }
  .rail__list a { display: flex; align-items: center; min-height: 44px; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--cp-ink-2); text-decoration: none; font-size: 0.9375rem; line-height: 1.3; }
  .rail__list a:hover { color: var(--cp-midnight); border-left-color: var(--cp-line-strong); }
  .rail__list a[aria-current="true"] { color: var(--cp-midnight); font-weight: 500; border-left-color: var(--cp-coral); }
  .rail__pdf { width: 100%; margin: 0 0 16px; }
  .rail__help { font-size: 0.9375rem; color: var(--cp-ink-2); line-height: 1.5; margin: 0 0 2px; }
  .rail__mail { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; }
  .secidx { display: none; }
}

/* ── In short: the answer first ─────────────────────────────────────────── */
.inshort { margin: 8px 0 28px; padding: 18px 20px 16px; border-radius: var(--cp-radius-card); background: var(--e-wash); border-left: 4px solid var(--cp-midnight); }
.inshort__h { font-family: var(--cp-font-figure); font-size: var(--e-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-midnight); margin: 0 0 10px; }
.inshort ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.inshort li { position: relative; padding-left: 22px; font-size: 1.0625rem; line-height: 1.5; color: var(--cp-ink); }
.inshort li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 9px; height: 9px; border-radius: 3px; background: var(--cp-midnight); }
.inshort .fig { font-family: var(--cp-font-figure); font-feature-settings: var(--cp-figure-features); font-weight: 600; color: var(--cp-midnight); }

/* ── the section index on a phone: every section a chip ─────────────────── */
.secidx { margin: 0 0 8px; }
.secidx__h { font-family: var(--cp-font-figure); font-size: var(--e-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-muted); margin: 0 0 10px; }
.secidx ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.secidx li { max-width: 100%; }
.secidx a { display: inline-flex; align-items: center; max-width: 100%; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--cp-line-strong); background: var(--cp-paper); color: var(--cp-midnight); text-decoration: none; font-size: 0.9375rem; font-weight: 450; line-height: 1.25; }
.secidx a:hover { background: var(--e-wash); }

/* ── sections ───────────────────────────────────────────────────────────── */
.gintro { padding-top: 24px; }
.gs { padding-top: clamp(48px, 3vw + 36px, 80px); scroll-margin-top: calc(var(--e-top) + 8px); }
.gs__part { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; padding-top: 14px; border-top: 1px solid var(--cp-line-strong); font-family: var(--cp-font-figure); font-size: var(--e-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-ink-2); }
.gs__part::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--cp-coral); flex: none; }
.gs__part span { display: inline; }
.gs__head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; margin: 0 0 18px; }
.gs__n { font-family: var(--cp-font-figure); font-feature-settings: var(--cp-figure-features); font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--cp-midnight); }
.gs__head .k { font-family: var(--cp-font-figure); font-size: var(--e-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-muted); line-height: 1.3; }
.gs__head h2 { font-size: var(--e-h2); line-height: 1.12; margin-top: 8px; grid-column: 1 / -1; }
.prose .sublabel { font-family: var(--cp-font-figure); font-size: var(--e-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-ink-2); margin: 28px 0 10px; line-height: 1.35; }
.prose h3 { font-size: var(--e-h3); margin: 28px 0 10px; }
.prose p { max-width: 64ch; }
.prose p.lead { font-size: 1.1875rem; line-height: 1.55; color: var(--cp-ink); }
.prose p.body { color: var(--cp-ink); }
.prose p.fine { font-size: 0.9375rem; color: var(--cp-ink-2); }
.prose ol, .prose ul { padding-left: 1.25rem; }
.prose li { margin: 0 0 6px; }
/* an inline link inside the words keeps its line and gets a 44px tall hit area */
.prose p a:not([class]), .prose li a:not([class]), .prose td a:not([class]), .prose span a:not([class]), .prose div > a:not([class]), .g__sub a { padding-block: 13px; }
/* a link of a word or two ("Vi", "Jio") also gets a 44px wide hit area, without moving the words */
.prose a[data-short] { padding-inline: 14px; margin-inline: -14px; }
.nets .nm a { min-width: 44px; }

/* ── the fold: the first sentence, then More (site.js adds the button) ──── */
.fold--on > .fold__rest { display: none; }
.fold__figs { display: none; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fold--on > .fold__figs { display: flex; }
.fold__fig { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: 6px; background: var(--e-wash); font-family: var(--cp-font-figure); font-feature-settings: var(--cp-figure-features); font-size: 0.9375rem; font-weight: 500; color: var(--cp-midnight); line-height: 1.25; }
.fold-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 2px; margin: -12px 0 -12px 0.35em; border: 0; background: none; color: var(--cp-midnight); font: inherit; font-size: 0.9375rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--cp-sky); text-decoration-thickness: 2px; text-underline-offset: 0.18em; cursor: pointer; vertical-align: baseline; white-space: nowrap; }
.fold-btn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--e-ease); }
.fold-btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
.fold-btn:hover { text-decoration-color: var(--cp-coral); }
.fold__figs + .fold-btn, .fold-btn--block { display: flex; margin: 2px 0 -6px; }
@media (min-width: 1000px) {
  .fold--short.fold--on > .fold__rest { display: inline; }
  .fold--short > .fold__figs, .fold--short > .fold-btn { display: none !important; }
}

/* ── key figures: a quiet ledger ────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 24px 0 28px; border-top: 2px solid var(--cp-midnight); }
.stats .st { padding: 14px 0 14px; border-bottom: 1px solid var(--cp-line); min-width: 0; }
.stats .v { font-family: var(--cp-font-figure); font-feature-settings: var(--cp-figure-features); font-size: var(--e-fig); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; color: var(--cp-midnight); overflow-wrap: anywhere; }
.stats .v small { font-size: 0.5em; letter-spacing: 0; font-weight: 500; }
.stats .st--word .v { font-family: var(--cp-font-voice); font-size: 1.375rem; letter-spacing: -0.01em; line-height: 1.2; }
.stats .l { margin-top: 4px; font-size: 0.9375rem; line-height: 1.4; color: var(--cp-ink-2); }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── do this first, and the warnings: one ruled note ───────────────────── */
.startbox { margin: 8px 0 28px; padding: 4px 0 4px 18px; border-left: 4px solid var(--cp-coral); }
.startbox .lab { font-family: var(--cp-font-figure); font-size: var(--e-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-coral-text); margin: 0 0 6px; }
.startbox .t { color: var(--cp-ink); max-width: 64ch; }
.note { display: block; margin: 8px 0 28px; padding: 4px 0 4px 18px; border-left: 3px solid var(--cp-sky); max-width: 66ch; color: var(--cp-ink); }
.note.warn { border-left: 4px solid var(--cp-coral); }
.note.warn::before { content: "Important"; display: block; font-family: var(--cp-font-figure); font-size: var(--e-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-coral-text); margin: 0 0 6px; }
.note.info { border-left-color: var(--cp-midnight); }
.note > span > strong:first-child, .note > span > .fold__lead > strong:first-child, .startbox .t > .fold__lead > strong:first-child { color: var(--cp-midnight); }
.reddl { margin: 0 0 16px; padding: 4px 0 4px 16px; border-left: 4px solid var(--cp-coral); }
.reddl .t { font-family: var(--cp-font-voice); font-size: 1.125rem; color: var(--cp-midnight); margin: 0 0 4px; }

/* ── steps: numbered rows, a deadline tile, an owner pill ───────────────── */
.steps { margin: 8px 0 28px; border-top: 1px solid var(--cp-line-strong); counter-reset: none; }
.steps .s { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 16px 0 16px; border-bottom: 1px solid var(--cp-line); }
.steps .s::before { display: none; }
.steps .n { font-family: var(--cp-font-figure); font-feature-settings: var(--cp-figure-features); font-size: 1.5rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--cp-midnight); padding-top: 1px; overflow-wrap: anywhere; }
.steps .c { min-width: 0; }
.steps .c > b { display: block; font-family: var(--cp-font-voice); font-size: 1.1875rem; font-weight: 500; line-height: 1.25; color: var(--cp-midnight); margin: 0 0 4px; }
.steps .c > span:not(.who) { display: block; color: var(--cp-ink-2); font-size: 1rem; line-height: 1.55; }
.steps .s:not(.s--when) { grid-template-columns: 40px minmax(0, 1fr); }
.who { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; margin: 0 0 6px; border-radius: 999px; font-family: var(--cp-font-figure); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; background: var(--cp-sky-soft); color: var(--cp-midnight); }
.who--ikan { background: var(--cp-midnight); color: #fff; }
.who--host, .who--employer { background: var(--cp-paper); border: 1px solid var(--cp-line-strong); color: var(--cp-ink-2); }
.when { display: grid; justify-items: center; align-content: center; gap: 1px; min-width: 70px; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--cp-line-strong); background: var(--cp-paper); text-align: center; }
.when__l { font-family: var(--cp-font-figure); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--e-muted); line-height: 1.2; }
.when__n { font-family: var(--cp-font-figure); font-feature-settings: var(--cp-figure-features); font-size: 1.0625rem; font-weight: 600; color: var(--cp-midnight); line-height: 1.15; white-space: nowrap; }

/* ── checklists: ticks kept on this phone ───────────────────────────────── */
.clist { margin: 32px 0 28px; }
.clist > h3 { margin: 0 0 4px; }
.ck__count { font-family: var(--cp-font-figure); font-size: var(--e-label); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-muted); margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.ck__count [data-ck-done] { color: var(--cp-midnight); font-weight: 700; }
.ck__hint { text-transform: none; letter-spacing: 0; font-family: var(--cp-font-body); font-size: 0.9375rem; }
.ck__clear { min-height: 44px; min-width: 44px; padding: 0 4px; margin-left: auto; border: 0; background: none; color: var(--cp-midnight); font: inherit; font-family: var(--cp-font-body); font-size: 0.9375rem; text-transform: none; letter-spacing: 0; text-decoration: underline; text-decoration-color: var(--cp-sky); text-decoration-thickness: 2px; text-underline-offset: 0.18em; cursor: pointer; }
.clist .row, .ck__row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 10px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--cp-line); cursor: pointer; }
.clist .row:first-of-type, .ck__count + .ck__row { border-top: 1px solid var(--cp-line-strong); }
.tick { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; }
.tick__in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 16px; z-index: 1; }
.ck__row .tick__in { position: absolute; inset: 0; width: auto; height: auto; }
.ck__row > .tick { position: static; }
.tick__mark { width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--cp-line-control); background: var(--cp-paper); display: grid; place-items: center; transition: background-color var(--cp-dur-quick) var(--e-ease), border-color var(--cp-dur-quick) var(--e-ease); }
.tick__mark::after { content: ""; width: 6px; height: 11px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translateY(-1px) rotate(45deg) scale(0); transition: transform var(--cp-dur-quick) var(--cp-ease-spring); }
.tick__in:checked + .tick__mark { background: var(--cp-midnight); border-color: var(--cp-midnight); }
.tick__in:checked + .tick__mark::after { transform: translateY(-1px) rotate(45deg) scale(1); }
.tick__in:focus-visible + .tick__mark { outline: var(--cp-focus-width) solid var(--cp-focus-color); outline-offset: 2px; }
.ck__row:has(.tick__in:checked) > span:last-child { color: var(--cp-ink-3); }
.ck__row a { position: relative; z-index: 2; }
.tbl--check .tcol-key { display: flex; align-items: center; gap: 8px; }

/* ── tables: a ledger on a desk, rows on a phone ────────────────────────── */
.tbl-scroll { margin: 8px 0 28px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.prose thead th { text-align: left; vertical-align: bottom; padding: 0 16px 8px 0; font-family: var(--cp-font-figure); font-size: var(--e-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-muted); border-bottom: 2px solid var(--cp-midnight); }
.prose tbody td, .prose tbody th { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--cp-line); color: var(--cp-ink); }
.prose td.tcol-key, .prose td.name, .prose tbody th.rk { font-weight: 500; color: var(--cp-midnight); }
@media screen and (max-width: 699px) {
  .prose table.tbl--stack, .prose table.tbl--stack tbody, .prose table.tbl--stack tr, .prose table.tbl--stack td, .prose table.tbl--stack th { display: block; width: auto; }
  .prose table.tbl--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .prose table.tbl--stack tbody { border-top: 2px solid var(--cp-midnight); }
  .prose table.tbl--stack tr { padding: 12px 0 14px; border-bottom: 1px solid var(--cp-line); }
  .prose table.tbl--stack td { padding: 2px 0; border: 0; }
  .prose table.tbl--stack td.tcol-key { font-family: var(--cp-font-voice); font-size: 1.125rem; line-height: 1.3; padding-bottom: 4px; }
  .prose table.tbl--labels td[data-label]::before { content: attr(data-label); display: block; margin-top: 6px; font-family: var(--cp-font-figure); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-muted); }
  .prose table.tbl--labels td.td--short[data-label]::before { display: inline; margin: 0 8px 0 0; }
}
.tbl-scroll, .tbl-wrap--grid { position: relative; }
.tbl-wrap--grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table.tbl--grid thead th, .prose table.tbl--grid tbody td, .prose table.tbl--grid tbody th { padding: 10px 6px; }
.prose table.tbl--grid thead th:first-child, .prose table.tbl--grid tbody td:first-child, .prose table.tbl--grid tbody th:first-child { padding-left: 0; }
.prose table.tbl--grid td { text-align: center; }
.prose table.tbl--grid td:first-child, .prose table.tbl--grid th:first-child { text-align: left; }
.prose table.tbl--grid td.y { color: var(--cp-ok-text); font-weight: 700; }
.prose table.tbl--grid td.n { color: var(--cp-steel); }

/* ── rows that used to be card grids: a rule between, never a box ───────── */
.gtk, .grid, .reslist, .helps, .nets, .glos { margin: 8px 0 28px; border-top: 1px solid var(--cp-line-strong); }
.gtk .t, .grid .card, .reslist .r, .helps .row, .nets .net, .glos .gdef { padding: 14px 0; border-bottom: 1px solid var(--cp-line); }
.gtk .h { font-family: var(--cp-font-voice); font-size: 1.125rem; font-weight: 500; color: var(--cp-midnight); margin: 0 0 4px; line-height: 1.3; }
.gtk .p { color: var(--cp-ink-2); }
.grid .card b { display: block; font-family: var(--cp-font-voice); font-size: 1.125rem; font-weight: 500; color: var(--cp-midnight); }
.grid .card .x { display: block; color: var(--cp-ink-2); }
.reslist .r { display: grid; gap: 2px; }
.reslist .nm { font-weight: 500; color: var(--cp-midnight); }
.reslist .nm a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
.reslist .nt { color: var(--cp-ink-2); font-size: 0.9375rem; }
.helps .row { position: relative; padding-left: 30px; }
.helps .row::before { content: ""; position: absolute; left: 4px; top: 21px; width: 7px; height: 13px; border-right: 2.5px solid var(--cp-midnight); border-bottom: 2.5px solid var(--cp-midnight); transform: rotate(45deg); }
.nets .net { display: grid; gap: 2px; }
.nets .nm a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; padding-block: 0; }
.nets .ds { color: var(--cp-ink); }
.nets .pl { font-size: 0.9375rem; color: var(--cp-ink-2); }
.glos .gdef { display: grid; gap: 2px; }
.glos .term { font-family: var(--cp-font-voice); font-size: 1.1875rem; font-weight: 500; color: var(--cp-midnight); }
.glos .def { color: var(--cp-ink); }
@media (min-width: 700px) {
  .glos .gdef, .reslist .r { grid-template-columns: 12rem minmax(0, 1fr); column-gap: 24px; align-items: baseline; }
}

/* quick reference rows, the year at a glance */
.qref { margin: 8px 0 28px; border-top: 2px solid var(--cp-midnight); }
.qref .h { font-family: var(--cp-font-figure); font-size: var(--e-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-muted); padding: 10px 0; border-bottom: 1px solid var(--cp-line); }
.qref .row { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--cp-line); }
.qref .k { font-family: var(--cp-font-figure); font-weight: 600; color: var(--cp-midnight); }
@media (min-width: 700px) { .qref .row { grid-template-columns: 10rem minmax(0, 1fr); column-gap: 24px; align-items: baseline; } }

/* the quick reference card */
.refgrid { display: grid; gap: 28px; margin: 8px 0 28px; }
.refblock .rh { display: flex; align-items: center; gap: 8px; font-family: var(--cp-font-figure); font-size: var(--e-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-midnight); padding-bottom: 8px; border-bottom: 2px solid var(--cp-midnight); margin: 0 0 4px; }
.refblock .enum { display: grid; }
.refblock .e { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; column-gap: 14px; min-height: 52px; border-bottom: 1px solid var(--cp-line); }
.refblock .num { font-family: var(--cp-font-figure); font-feature-settings: var(--cp-figure-features); font-size: 1.75rem; font-weight: 500; color: var(--cp-coral-text); letter-spacing: -0.02em; }
.refblock .num a.tel, .ecard .n a.tel { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.refblock .refseq { padding-left: 1.4rem; margin: 10px 0 0; }
.refblock .refseq li { margin: 0 0 8px; }
.refblock .kv { padding: 10px 0; line-height: 1.7; }
@media (min-width: 900px) { .refgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } .refblock.span { grid-column: 1 / -1; } }

/* drawn figures: the cost bars, the write-in box */
.costbars { margin: 8px 0 28px; border-top: 1px solid var(--cp-line-strong); }
.costbars .cb { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--cp-line); align-items: center; }
.costbars .lbl { color: var(--cp-ink); }
.costbars .amt { font-family: var(--cp-font-figure); font-feature-settings: var(--cp-figure-features); font-weight: 600; color: var(--cp-midnight); }
.costbars .bar { grid-column: 1 / -1; grid-row: 2; height: 8px; border-radius: 4px; background: var(--cp-sunken); overflow: hidden; }
.costbars .bar i { display: block; height: 100%; border-radius: 4px; background: var(--cp-midnight); }
.dbox { margin: 8px 0 28px; border-top: 2px solid var(--cp-midnight); }
.dbox .drow { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 12px; align-items: end; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--cp-line); }
.dbox .dl { color: var(--cp-ink-2); font-size: 0.9375rem; }
.dbox .dv { min-height: 28px; border-bottom: 1px dashed var(--cp-line-control); }

/* the scenario and story cards: one card a screen, a rule on top */
.scenario-grid { display: grid; gap: 0; margin: 8px 0 28px; }
.scenario-card { padding: 28px 0 24px; border-top: 3px solid var(--cp-midnight); scroll-margin-top: calc(var(--e-top) + 8px); }
.scenario-card.scenario-amber { border-top-color: var(--cp-coral); }
.scenario-top { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.scenario-num { font-family: var(--cp-font-figure); font-size: 1.75rem; font-weight: 500; color: var(--cp-midnight); line-height: 1; }
.scenario-tag { font-family: var(--cp-font-figure); font-size: var(--e-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-muted); }
.scenario-card h2 { font-size: var(--e-h3); margin: 0 0 12px; }
.scenario-card h3 { font-family: var(--cp-font-figure); font-size: var(--e-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-ink-2); margin: 16px 0 6px; }
.scenario-avoid { padding-left: 16px; border-left: 4px solid var(--cp-coral); margin: 14px 0; }
.scenario-route, .kids-note { padding-left: 16px; border-left: 3px solid var(--cp-midnight); margin: 14px 0; }
.scenario-card blockquote { margin: 16px 0; padding: 14px 18px; border-radius: 12px; background: var(--e-wash); font-family: var(--cp-font-voice); font-size: 1.125rem; color: var(--cp-midnight); }
.scenario-links { display: flex; flex-wrap: wrap; gap: 8px; }
.scenario-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cp-line-strong); text-decoration: none; font-size: 0.9375rem; }

/* the PAN specimen, kept as a drawing of the real card */
.panfig { margin: 1.5rem 0 1.75rem; }
.panfig .cap { font-size: 0.9375rem; color: var(--cp-ink-2); margin-top: 0.9rem; }
.panwrap { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.pancard { position: relative; flex: 1 1 300px; min-width: 0; max-width: 430px; border-radius: 14px; overflow: hidden; color: #143a5f; background: linear-gradient(135deg, #e7f0fb, #d7e6f7 60%, #cfe0f3); border: 1px solid #b9cae0; padding: 0.9rem 1rem; }
.pancard::after { content: "SPECIMEN"; position: absolute; right: 1.1rem; top: 3.4rem; transform: rotate(-16deg); font-weight: 700; font-size: 0.8rem; letter-spacing: 3px; color: rgb(198 56 34 / 0.55); border: 2px solid rgb(198 56 34 / 0.45); padding: 2px 8px; border-radius: 4px; }
.pc-top { display: flex; justify-content: space-between; align-items: center; }
.pc-top .u { font-size: 0.55rem; font-weight: 700; line-height: 1.25; }
.pc-top .u.r { text-align: right; }
.pc-emb { width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%; border: 1px solid #7793b8; color: #3a5d86; display: flex; align-items: center; justify-content: center; }
.pc-emb svg { width: 1rem; height: 1rem; }
.pc-rule { border-top: 1px solid #9fb6d4; margin: 0.5rem 0 0.4rem; }
.pc-lab { font-size: 0.55rem; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.6px; color: #4f6c93; }
.pc-pan { font-family: var(--cp-font-figure); font-weight: 700; font-size: 1.5rem; line-height: 1.1; letter-spacing: 2.4px; color: #0e2f50; margin: 3px 0 2px; }
.pc-grid { display: flex; gap: 0.9rem; margin-top: 0.5rem; }
.pc-fields { flex: 1; min-width: 0; }
.pc-fields .f { margin-bottom: 0.4rem; }
.pc-fields .v { font-size: 0.85rem; font-weight: 700; color: #10243a; }
.pc-sign { font-family: var(--cp-font-voice); font-style: italic; font-size: 0.85rem; color: #34557c; border-top: 1px solid #b9cae0; padding-top: 0.25rem; margin-top: 0.25rem; }
.pc-side { flex: none; width: 4.2rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.pc-photo { width: 3.8rem; height: 4.5rem; border: 1px solid #8aa4c6; border-radius: 4px; background: #eef4fb; display: flex; align-items: flex-end; justify-content: center; color: #9db4d2; overflow: hidden; }
.pc-photo svg, .pc-side > svg { width: 3.1rem; height: 3.1rem; }
.pcnote { flex: 1 1 260px; min-width: 0; }
.pcnote .pt { display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: 0.8rem; }
.pcnote .d { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--cp-midnight); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--cp-font-figure); font-size: 0.85rem; font-weight: 600; }
.pcnote .tx { font-size: 1rem; line-height: 1.5; color: var(--cp-ink-2); }

/* the emergency card: the old wallet card, in the brand midnight */
.ecard { background: var(--cp-midnight) !important; }
.ecard .num .n { font-family: var(--cp-font-figure) !important; letter-spacing: -0.02em; }
.ecard-note { font-size: 0.9375rem !important; color: var(--cp-ink-2) !important; }
.ecard-actions .btn { min-height: 48px; }
.ecard .f .v { min-height: 1.6rem !important; }

/* the tenancy page's own pieces */
.prose .tcr-btn { min-height: 44px; }
.prose .tcr-copy { background: var(--cp-ground) !important; box-shadow: none !important; border-left-color: var(--cp-coral) !important; }
.prose .tcr-swipe { font-size: 0.9375rem !important; }

/* ── the close: the sign off and the accuracy line ──────────────────────── */
.gclose { margin-top: clamp(48px, 4vw + 32px, 80px); padding-top: 24px; border-top: 2px solid var(--cp-midnight); }
.signoff p { font-family: var(--cp-font-voice); font-size: 1.25rem; line-height: 1.45; color: var(--cp-midnight); max-width: 56ch; }
.signoff .nm { font-family: var(--cp-font-figure); font-size: var(--e-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-ink-2); margin: 0 0 6px; }
.signoff .meta { color: var(--e-muted); line-height: 2.75; }
.signoff .meta a { display: inline-block; padding-block: 10px; margin-block: -10px; line-height: 1.5; }
.endbar { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--cp-line); }
.endbar .t { font-size: 0.9375rem; line-height: 1.55; color: var(--cp-ink-2); max-width: 70ch; }

/* ── previous and next ──────────────────────────────────────────────────── */
.pn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 8px; padding-bottom: 32px; }
.pn__link { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 0; border-top: 1px solid var(--cp-line); color: var(--cp-midnight); text-decoration: none; }
.pn__link:hover .pn__t { text-decoration: underline; text-decoration-color: var(--cp-coral); text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
.pn__txt { display: grid; gap: 2px; min-width: 0; }
.pn__k { font-family: var(--cp-font-figure); font-size: var(--e-label); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-muted); }
.pn__t { font-family: var(--cp-font-voice); font-size: 1.25rem; line-height: 1.25; }
.pn__next { justify-content: space-between; }
.pn__none { display: none; }
.pn__all { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 8px; border-radius: var(--cp-radius-control); border: 1px solid var(--cp-line-strong); color: var(--cp-midnight); text-decoration: none; font-weight: 500; }
.pn__all:hover { background: var(--e-wash); }
@media (min-width: 760px) {
  .pn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
  .pn__none { display: block; border-top: 1px solid var(--cp-line); }
  .pn__next { text-align: right; }
  .pn__next .pn__txt { justify-items: end; margin-left: auto; }
  .pn__all { grid-column: 1 / -1; justify-self: center; padding: 0 28px; }
}

/* ── the footer ─────────────────────────────────────────────────────────── */
.foot { margin-top: 24px; border-top: 1px solid var(--cp-line); background: var(--cp-ground); color: var(--cp-ink-2); }
.foot__in { max-width: var(--e-max); margin: 0 auto; padding: 32px max(var(--cp-gutter), env(safe-area-inset-left)) max(40px, env(safe-area-inset-bottom)); display: grid; gap: 18px; }
.foot__brand p { margin: 8px 0 0; max-width: 64ch; font-size: 0.9375rem; line-height: 1.6; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot__nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cp-midnight); font-size: 0.9375rem; }
.foot__c { margin: 0; font-size: 0.9375rem; color: var(--cp-ink-3); }

/* ── back to the top, after one screen ──────────────────────────────────── */
.totop { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: calc(var(--cp-z-sticky) + 1); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--cp-line-strong); background: rgb(255 255 255 / 0.97); color: var(--cp-midnight); font: inherit; font-size: 0.9375rem; font-weight: 500; box-shadow: 0 6px 20px rgb(13 54 64 / 0.18); cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; transition: opacity 200ms var(--e-ease), transform 200ms var(--e-ease), visibility 0s linear 200ms; }
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.totop:hover { background: var(--e-wash); }
html:not(.js) .totop { display: none; }

/* ── calm: reduced motion fades, never travels ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* nothing travels; the cues stay as fades */
  .totop { transform: none; transition: opacity 200ms linear, visibility 0s linear 200ms; }
  .totop.is-on { transition-delay: 0s; }
  .fold-btn::after { transition: opacity 120ms linear; }
  .tick__mark::after { transform: translateY(-1px) rotate(45deg); opacity: 0; transition: opacity 120ms linear; }
  .tick__in:checked + .tick__mark::after { opacity: 1; transform: translateY(-1px) rotate(45deg); }
  .btn { transition: background-color var(--cp-dur-quick) linear; }
  .btn:active { transform: none; }
}
@media (forced-colors: active) { .who, .when, .tick__mark, .secidx a, .totop { border: 1px solid CanvasText; } }
@media (prefers-contrast: more) { .fold-btn, a { text-decoration-color: currentColor; } }

/* ==========================================================================
 * The hub: every guide by stage, a one line answer each, a filter by stage.
 * ========================================================================== */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hub > section { max-width: var(--e-max); margin: 0 auto; padding-left: max(var(--cp-gutter), env(safe-area-inset-left)); padding-right: max(var(--cp-gutter), env(safe-area-inset-right)); }
.hhero { display: grid; gap: 28px; padding-top: 28px; padding-bottom: 8px; }
.hub__title { font-size: clamp(2.75rem, 1.7rem + 4.4vw, 5.25rem); font-weight: 450; line-height: 1.02; letter-spacing: -0.025em; margin: 10px 0 18px; }
.hhero__lede { font-size: 1.1875rem; line-height: 1.55; color: var(--cp-ink-2); max-width: 54ch; margin: 0 0 24px; }
.hhero__acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
@media (max-width: 520px) { .hhero__acts .btn { flex: 1 1 100%; } }
.hfigs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
.hfigs li { display: grid; gap: 4px; align-content: start; padding-top: 12px; border-top: 2px solid var(--cp-midnight); min-width: 0; }
.hfigs .n { font-family: var(--cp-font-figure); font-feature-settings: var(--cp-figure-features); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--cp-midnight); }
.hfigs .l { font-size: 0.9375rem; line-height: 1.35; color: var(--cp-ink-2); }
.plate { margin: 0; display: grid; gap: 10px; min-width: 0; }
.plate__frame { overflow: hidden; border-radius: var(--cp-radius-card); background: var(--cp-sunken); aspect-ratio: 4 / 3; }
.plate__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plate figcaption { font-size: 0.9375rem; line-height: 1.45; color: var(--cp-ink-2); }
.plate .credit { display: block; font-size: 0.875rem; color: var(--cp-ink-3); }
.plate .credit a { color: inherit; padding-block: 14px; }
@media (min-width: 1000px) {
  .hhero { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 72px; align-items: center; padding-top: 56px; padding-bottom: 24px; }
}

/* start here: the two guides for a family that does not know where to begin */
.start { padding-top: 40px; }
.start .label { margin: 0 0 10px; }
.glist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cp-line-strong); }
.grow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--cp-line); }
.grow__t { font-size: 1.3125rem; line-height: 1.22; margin: 0 0 4px; }
.grow__link { display: inline-block; padding-block: 10px; margin-block: -10px; color: var(--cp-midnight); text-decoration: none; }
.grow__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.grow:hover .grow__link { text-decoration: underline; text-decoration-color: var(--cp-coral); text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
.grow__link:focus-visible { outline: none; }
.grow:has(.grow__link:focus-visible) { outline: var(--cp-focus-width) solid var(--cp-focus-color); outline-offset: 4px; border-radius: 6px; }
.grow__d { margin: 0; color: var(--cp-ink-2); font-size: 1rem; line-height: 1.5; max-width: 62ch; }
.grow__figs { grid-column: 1 / -1; list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.grow__figs li { font-size: 0.9375rem; color: var(--cp-ink-2); line-height: 1.35; }
.grow__figs .n { font-family: var(--cp-font-figure); font-feature-settings: var(--cp-figure-features); font-weight: 600; color: var(--cp-midnight); }
.grow__main > .grow__tag { margin: 0 0 6px; }
.grow__tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--cp-midnight); color: #fff; font-family: var(--cp-font-figure); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; vertical-align: 1px; }
.grow__pdf { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; min-width: 64px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cp-line-strong); background: var(--cp-paper); color: var(--cp-midnight); text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
.grow__pdf:hover { background: var(--e-wash); }
.grow--big .grow__t { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
.glist--start { border-top: 3px solid var(--cp-coral); }
@media (min-width: 900px) {
  .glist--start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; border-top: 0; }
  .glist--start .grow { border-top: 3px solid var(--cp-coral); }
}

/* every guide, by stage */
.stages { padding-top: clamp(48px, 4vw + 32px, 88px); }
.stages__h { font-size: var(--e-h2); margin: 0 0 8px; }
.stages__p { color: var(--cp-ink-2); max-width: 62ch; margin: 0 0 20px; scroll-margin-top: calc(var(--e-top) + 16px); }
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.filter__b { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cp-line-strong); background: var(--cp-paper); color: var(--cp-midnight); font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer; transition: background-color var(--cp-dur-quick) linear, color var(--cp-dur-quick) linear; }
.filter__b:hover { background: var(--e-wash); }
.filter__b[aria-pressed="true"] { background: var(--cp-midnight); border-color: var(--cp-midnight); color: #fff; }
.filter__n { font-family: var(--cp-font-figure); font-feature-settings: var(--cp-figure-features); font-size: 0.875rem; opacity: 0.8; }
html:not(.js) .filter { display: none; }
.stage { padding-top: 36px; scroll-margin-top: calc(var(--e-top) + 8px); }
.stage[hidden] { display: none; }
.stage__head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; margin: 0 0 14px; }
.stage__n { font-family: var(--cp-font-figure); font-feature-settings: var(--cp-figure-features); font-size: 1.75rem; font-weight: 500; line-height: 1; color: var(--cp-midnight); letter-spacing: -0.03em; }
.stage__t { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
.stage__line { grid-column: 1 / -1; margin: 6px 0 0; color: var(--cp-ink-2); max-width: 56ch; }
@media (min-width: 1100px) {
  .stage { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; padding-top: 56px; }
  .stage__head { position: sticky; top: calc(var(--e-top) + 24px); align-self: start; }
  .stage .glist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 0; }
  .stage .grow { border-top: 1px solid var(--cp-line-strong); border-bottom: 0; }
}

/* the three companions, How IKAN helps, the pack */
.sec-head { max-width: 62ch; margin: 0 0 24px; }
.sec-head h2 { font-size: var(--e-h2); margin: 6px 0 8px; }
.sec-head p { color: var(--cp-ink-2); margin: 0; }
.companions, .assist { padding-top: clamp(56px, 5vw + 32px, 104px); }
.threes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.three { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-top: 2px solid var(--cp-midnight); }
.three__n { font-family: var(--cp-font-figure); font-size: 1.5rem; font-weight: 500; color: var(--cp-midnight); line-height: 1.1; }
.three--us { border-top-color: var(--cp-coral); }
.three--us .three__n { color: var(--cp-coral-text); }
.three h3 { font-size: 1.3125rem; margin: 0 0 4px; }
.three p { margin: 0; color: var(--cp-ink-2); }
.three__go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; font-weight: 500; }
@media (min-width: 900px) { .threes { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; } .three { grid-template-columns: minmax(0, 1fr); } }
.assist__grid { display: grid; gap: 32px; }
.assist__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--cp-line-strong); }
.assist__rows li { padding: 16px 0; border-bottom: 1px solid var(--cp-line); }
.assist__rows h3 { font-size: 1.1875rem; margin: 0 0 4px; }
.assist__rows p { margin: 0; color: var(--cp-ink-2); }
.assist__q { margin: 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--cp-coral); }
.assist__q p { font-family: var(--cp-font-voice); font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.3; color: var(--cp-midnight); margin: 0 0 12px; }
.assist__q b { color: var(--cp-coral-text); font-weight: 500; }
.assist__q footer { font-family: var(--cp-font-figure); font-size: var(--e-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-muted); }
@media (min-width: 900px) { .assist__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 64px; align-items: start; } .assist__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.hub > .pack { display: grid; gap: 18px; align-items: center; margin-top: clamp(56px, 5vw + 32px, 104px); margin-bottom: 24px; padding-top: 28px; padding-bottom: 28px; background: var(--cp-ground); border-radius: var(--cp-radius-card); max-width: calc(var(--e-max) - 2 * var(--cp-gutter)); }
.pack h2 { font-size: var(--e-h2); margin: 0 0 6px; }
.pack p { margin: 0; color: var(--cp-ink-2); max-width: 56ch; }
@media (min-width: 800px) { .hub > .pack { grid-template-columns: minmax(0, 1fr) auto; padding: 36px 40px; } }
@media (max-width: 1247px) { .hub > .pack { margin-left: var(--cp-gutter); margin-right: var(--cp-gutter); } }

/* ==========================================================================
 * Print: every guide as a clean A4 document (engine/pdf.mjs renders these).
 * Every fold opens, the checklists keep their boxes for a pen, the screen
 * furniture goes, and no shadow survives (Apple's renderer prints a soft
 * shadow as a grey slab). Page numbers come from the PDF footer.
 * ========================================================================== */
@page { size: A4; margin: 14mm 15mm 17mm; }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none !important; text-shadow: none !important; }
  html { font-size: 13px; }
  body { background: #fff; font-size: 10.5pt; line-height: 1.5; }
  .hdr, .skip, .rail, .secidx, .totop, .pn, .foot, .g__acts, .fold-btn, .fold__figs, .ck__clear, .ck__hint, .tcr-btn, .ecard-actions, .three__go, .hhero__acts, .filter { display: none !important; }
  .fold--on > .fold__rest, .fold > .fold__rest { display: inline !important; }
  .g__head, .g__body, .pn { max-width: none; padding: 0; margin: 0; }
  .g__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4mm; padding: 0 0 4mm; border-bottom: 2pt solid var(--cp-midnight); }
  .crumb { min-height: 0; font-size: 9pt; }
  .crumb a { min-height: 0; color: var(--cp-ink-2); }
  .g__kind { margin: 0 0 2mm; }
  .g__title { font-size: 28pt; margin: 0 0 3mm; }
  .g__sub { font-size: 11.5pt; max-width: none; }
  .keyfigs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 6mm; }
  .keyfigs li { display: grid; grid-template-columns: minmax(0, 1fr); padding: 2.5mm 0; border-top-width: 1.5pt; }
  .keyfigs li:only-child { grid-column: auto; }
  .keyfigs .n { font-size: 18pt; }
  .keyfigs .l { font-size: 9pt; }
  .g__body { display: block; padding: 0; }
  .g__article { max-width: none; }
  .inshort { margin: 5mm 0 4mm; padding: 4mm 5mm 3.5mm; break-inside: avoid; border-left-width: 3pt; }
  .inshort li { font-size: 10.5pt; }
  .gintro { padding-top: 2mm; }
  .gs { padding-top: 7mm; }
  .gs__part { margin: 0 0 4mm; padding-top: 3mm; break-after: avoid; }
  .gs__head { margin: 0 0 3mm; break-after: avoid; }
  .gs__head h2 { font-size: 16pt; }
  .gs__n { font-size: 16pt; }
  h2, h3, h4, .sublabel, .gs__head, .clist > h3, .ck__count { break-after: avoid; }
  /* a heading never sits alone at the foot of a page: it reserves 36mm below itself */
  .gs__head, .gs__part, .prose .sublabel, .clist > h3 { break-inside: avoid; }
  .gs__head::after, .prose .sublabel::after, .clist > h3::after { content: ""; display: block; grid-column: 1 / -1; height: 36mm; margin-bottom: -36mm; }
  .prose p, .prose li { orphans: 3; widows: 3; }
  .prose p { max-width: none; }
  .prose p.lead { font-size: 11.5pt; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4mm 0; break-inside: avoid; }
  .stats .v { font-size: 18pt; }
  .stats .st--word .v { font-size: 13pt; }
  .stats .l { font-size: 9pt; }
  .steps .s, .note, .startbox, .reddl, .gtk .t, .grid .card, .reslist .r, .helps .row, .ck__row, .qref .row, .glos .gdef, .costbars .cb, .dbox .drow, .refblock, .scenario-card blockquote, figure, .panfig, .ecard-wrap, .signoff, .endbar, .nets .net, .three, .stats .st { break-inside: avoid; }
  .steps .s { padding: 3mm 0; grid-template-columns: 9mm minmax(0, 1fr) auto; }
  .steps .s:not(.s--when) { grid-template-columns: 9mm minmax(0, 1fr); }
  .steps .n { font-size: 15pt; }
  .steps .c > b { font-size: 12pt; }
  .steps .c > span:not(.who) { font-size: 10pt; }
  .when { min-width: 18mm; padding: 1.5mm 2mm; border-color: var(--cp-ink-3); }
  .when__n { font-size: 10.5pt; }
  .who { font-size: 7.5pt; min-height: 0; padding: 0.6mm 2mm; }
  .note, .startbox { margin: 3mm 0 5mm; }
  .tick__in { display: none; }
  .tick { width: 7mm; height: 7mm; }
  .tick__mark { width: 4.2mm; height: 4.2mm; border-width: 1pt; border-color: var(--cp-ink-2); border-radius: 1mm; }
  .clist .row, .ck__row { min-height: 0; padding: 1.6mm 0; grid-template-columns: 8mm minmax(0, 1fr); }
  .clist { margin: 6mm 0 5mm; }
  .prose table { font-size: 9.5pt; }
  .prose thead { display: table-header-group; }
  .prose thead th { font-size: 7.5pt; padding: 0 3mm 1.5mm 0; }
  .prose tbody td, .prose tbody th { padding: 2mm 3mm 2mm 0; }
  .prose tr { break-inside: avoid; }
  .tbl--check .tcol-key { display: table-cell; }
  .tbl--check .tick { display: inline-grid; vertical-align: middle; margin-right: 1mm; }
  .tbl-wrap--grid { overflow: visible; }
  .prose table.tcr-matrix, .prose table.tcr-log { min-width: 0 !important; }
  .prose .tcr-wide::after, .prose .tcr-swipe { display: none !important; }
  .gtk .t, .grid .card, .reslist .r, .nets .net, .glos .gdef { padding: 2.5mm 0; }
  .helps .row { padding: 2.5mm 0 2.5mm 26px; }
  .ck__count { display: none !important; }
  .reslist .nm a, .nets .nm a { min-height: 0; }
  .helps .row::before { top: 3.4mm; }
  .refblock .e { min-height: 0; padding: 1.5mm 0; }
  .refblock .num a.tel { min-height: 0; }
  .gclose { margin-top: 8mm; padding-top: 4mm; }
  .signoff p { font-size: 12pt; }
  .signoff .meta { line-height: 1.6; }
  .signoff .meta a { padding: 0; margin: 0; }
  .endbar .t { font-size: 9pt; }
  a { color: inherit !important; text-decoration: none !important; padding: 0 !important; }
  .prose a[data-short], .prose p a:not([class]), .prose li a:not([class]), .prose td a:not([class]), .prose span a:not([class]) { margin: 0 !important; }
  .scenario-card { padding: 5mm 0 4mm; }
  .scenario-links { display: none; }
  .ecard { break-inside: avoid; }
  img { max-width: 100% !important; }
}