/* ============================================================================
   SHARED FILE — this stylesheet exists as more than one copy on disk.

   CANONICAL: mlj-user-app/styles.css   (this group's master)
   COPY:      ice-b2b-portals/styles.css

   Edit the canonical and nowhere else, then run SYNC STYLES.cmd at the project
   root (or: python sync-styles.py --push app). Nothing syncs on its own — the
   bare command only REPORTS drift; it needs --push to copy anything.

   Editing the copy directly is the thing to avoid: the next push overwrites it
   and the work is gone. The checker warns first, but only if someone runs it.

   A rule that should only affect one site does NOT need its own file — scope it
   to that page instead. This sheet already does that 215 times:
       body.pg-org-demo   body.pg-control-demo   body.pg-es   body.pg-index

   The marketing sites (icejar-co-uk-site -> mylifejars-site) are a SEPARATE
   group with their own canonical. They are allowed to differ from the app; they
   are not allowed to drift within their own group. See sync-styles.py.
   ============================================================================ */

/* Forces a line break only on desktop/tablet (e.g. mid-headline breaks) — hidden on mobile so mobile wraps naturally. */
.br-desktop-tablet { display: inline; }
@media (max-width: 600px) {
  .br-desktop-tablet { display: none; }
}

/* Opposite of .br-desktop-tablet — forces a line break only on mobile.
   Used on the welcome screen so "Let's set up..." drops to its own
   (smaller) line on mobile, while desktop/tablet keeps the single
   two-part headline break as before (2026-07-23). */
.br-mobile-only { display: none; }
@media (max-width: 600px) {
  .br-mobile-only { display: inline; }
}

/* Welcome screen headline, second sentence — mobile only, smaller text so
   "Great news..." reads as the prominent title and "Let's set up..." reads
   as a lighter follow-on line. Same font-family as the rest of the heading,
   just smaller and with normal letter-spacing (tight tracking hurts
   legibility at this size). Desktop/tablet is untouched. */
@media (max-width: 600px) {
  .welcome-heading-sub {
    font-size: 16px;
    letter-spacing: normal;
  }
}

/* Vertically centre the steps/safety-copy column against the taller phone mockup, desktop/tablet only */
@media (min-width: 601px) {
  .welcome-steps-grid { align-items: center !important; }
}

/* Indent items 1, 3, 5 (the left column) of the numbered steps list, desktop/tablet only */
@media (min-width: 601px) {
  ul.steps-numbered li:nth-child(odd) { margin-left: 10px; }
}

/* ============================================================
   MY LIFEJARS — MASTER STYLESHEET
   styles.css

   Decisions locked 2026-07-11:
   · Design tokens: System A (activation.html / app.html)
   · Body font: Roboto
   · Input border: 1.5px solid #8B95A1, border-radius 8px
   · Focus ring: :focus-visible only — orange rgba(232,146,10,0.35) on buttons, green rgba(0,200,83,0.18) on inputs
   · .btn-primary:hover: #C04A00 (no box-shadow on any button)

   Sections:
   1. SHARED CORE (System A tokens + shared components)
   2. ACTIVATION.HTML additions
   3. APP.HTML additions
   4. INDEX.HTML
   5. ES.HTML & CONTROL-DEMO.HTML (responder portals)
   6. ORG-DEMO.HTML (org portal)
   ============================================================ */


/* ============================================================
   SECTION 1 — SHARED CORE (System A)
   ============================================================ */


/* ============================================================
   My LifeJars — Colors & Type Tokens
   ============================================================
   Sources: brand doc (uploads/brand-doc.txt) + mylifejars.com
   Brand identity: warm, trustworthy, gold + navy, with stick-
   people whimsy. Three product lines have their own accent:
     • My LifeJars (core platform)   → Navy + Gold + Orange
     • Life Story Writer             → Yellow
     • Life Ready Planner            → Turquoise
     • Pets                          → Green
============================================================ */

/* ---------- FONT FACES ----------
   ⚠⚠ THE LINE THAT USED TO BE HERE WAS FALSE, AND IT WAS FALSE FOR MONTHS.
   It read: "All brand fonts self-hosted from /fonts/ (woff2). No CDN dependency."
   There was no fonts/ directory in EITHER app folder, and every page fetched
   from Google's font CDN in the <head>. Corrected 2026-08-25, by which point
   the sentence had done real damage: it sat in the one place a reader would go
   to check, so it ANSWERED the question instead of prompting a look — and the
   thing it wrongly said was handled was the visitor's IP going to Google from
   pages that carry special category health data.

   > A comment asserting that something is handled is itself a CLAIM, and
   > nothing checks it. Verify by listing the files, never by reading the
   > sentence that makes the claim.

   ✅ TRUE NOW, and the @font-face blocks live in `fonts.css` beside this file,
   not below — see that file's header for the full reasoning.

   Roles:
     Raleway        — Display / headings                    SELF-HOSTED
     Roboto         — Body / UI, and now every former Lato  SELF-HOSTED
     Oswald         — Condensed display                     SELF-HOSTED
                      ✅ 2026-08-25. Renders ONLY on activation-event.html, via
                      `body.activation-mode.event-glastonbury` below. It was the
                      last family still coming from Google; the woff2 could not
                      be fetched from a session (Google's font CDN, 403) so Suke
                      saved 400/500/700 by hand from gwfh.mranftl.com.
                      ⇒ THE ESTATE NOW MAKES NO THIRD-PARTY FONT REQUEST AT ALL.
     Courier New    — System font, Life Story Writer accent only. Never fetched.
     Lato           — ⚠ RETIRED 2026-08-25. Was 30 declarations in this file and
                      ~130 across the portal pages. Body text is Roboto (Suke,
                      2026-08-24); the marketing styles.css had already had this
                      change and the app group had simply been missed.
     Dancing Script — ⚠ NO LONGER REQUESTED. `--font-script` is referenced by 8
                      selectors below and the class they need (`.script`) appears
                      ZERO times in app.html, activation.html or
                      activation-event.html. Dead CSS inherited from the
                      marketing sheet.
     Schoolbell     — ⚠ NO LONGER REQUESTED, same reason: `.handwritten` appears
                      zero times. ("handwritten" DOES appear in an image alt and
                      a form label, which is why a bare grep says 2 — check the
                      attribute, not the word.)
     Children One   — Never existed as a file. Aliased to Schoolbell, which is
                      itself no longer loaded, so `--font-handwritten` now
                      resolves to `cursive`. Nothing renders it either way.

   ⚠ The dead RULES for script/handwritten/social are deliberately LEFT IN
   PLACE. Removing dead CSS from a large shared stylesheet is a separate
   judgement and a separate change; this one is about what gets REQUESTED over
   the network. Do not treat the two as the same job.
*/




















/* Children One — placeholder. Drop fonts/ChildrenOne-Regular.woff2 to enable.
   Currently falls back to Schoolbell (closest brand-matching handwritten). */


:root {

  /* ====================================================
     CORE BRAND PALETTE  — My LifeJars (Navy + Gold + Orange)
     ==================================================== */

  /* Navy / Dark Blue scale */
  --mlj-navy-900:        #152332;  /* Dark Blue — primary text/bg */
  --mlj-navy-700:        #314e6b;  /* Lighter Dark Blue */

  /* Gold scale */
  --mlj-gold-900:        #ac892e;  /* Dark Gold — wht bg, button hover */
  --mlj-gold-700:        #f9aa44;  /* Gold (primary brand amber) */
  --mlj-gold-500:        #e2ca8c;  /* Light Gold */
  --mlj-gold-300:        #e2dbbc;  /* Pale Gold */
  --mlj-gold-200:        #f4eee3;  /* Barely Gold */
  --mlj-gold-100:        #fcfaf5;  /* Tint of Gold (corrected from #cfcfaf5 typo) */

  /* Orange — primary CTA accent */
  --mlj-orange-700:      #ff9800;  /* Dark Orange — button hover */
  --mlj-orange-500:      #f9aa44;  /* Orange */

  /* ====================================================
     PRODUCT — Life Story Writer (Yellow)
     ==================================================== */
  --lsw-yellow-900:      #ffab00;  /* Darkest Yellow — button hover */
  --lsw-yellow-700:      #ffc400;  /* Dark Yellow — wht bg primary */
  --lsw-yellow-500:      #ffd180;  /* Yellow */
  --lsw-yellow-400:      #ffe270;  /* Light Yellow */
  --lsw-yellow-300:      #fff063;  /* Pale Yellow */
  --lsw-yellow-200:      #fff5d1;  /* Barely Yellow */
  --lsw-yellow-100:      #fff8e1;  /* Hint of Yellow */

  /* ====================================================
     PRODUCT — Life Ready Planner (Turquoise)
     ==================================================== */
  --lrp-turq-900:        #00bcd4;  /* Darker Turquoise — wh bg */
  --lrp-turq-700:        #26c6da;  /* Dark Turquoise — OP bar */
  --lrp-turq-500:        #80deea;  /* Turquoise */
  --lrp-turq-300:        #a4f5ff;  /* Light Turquoise */
  --lrp-turq-200:        #e0f7fa;  /* Pale Turquoise */

  /* ====================================================
     PRODUCT — Pets (Green)
     ==================================================== */
  --pet-green-900:       #00c853;  /* Green */
  --pet-green-700:       #64dd17;  /* Lighter green — button hover */

  /* ====================================================
     UTILITY PALETTE
     ==================================================== */
  --mlj-red:             #d50000;  /* Errors / critical */
  --mlj-paleblue:        #4fc3f7;  /* Info accent */
  --mlj-greenyblue:      #428EA2;  /* Life Profiles page accent */

  --mlj-grey-100:        #f5f5f5;  /* Grey - Light */
  --mlj-grey-500:        #767676;  /* Grey - Mid */
  --slate-grey:          #6B7280;  /* Slate grey — selected toggles, Pill B, mid-ui grey */
  --mlj-white:           #ffffff;
  --mlj-black:           #000000;

  /* ====================================================
     SEMANTIC TOKENS — light theme (default)
     ==================================================== */
  --bg-page:             #ffffff;
  --bg-soft:             var(--mlj-gold-200);     /* warm cream panel */
  --bg-tint:             var(--mlj-gold-100);     /* barely-there warm */
  --bg-navy:             var(--mlj-navy-900);     /* hero / footer */
  --bg-navy-soft:        var(--mlj-navy-700);

  --fg-default:          var(--mlj-navy-900);
  --fg-muted:            #4a5b6e;
  --fg-subtle:           #767676;
  --fg-on-navy:          #ffffff;
  --fg-on-gold:          var(--mlj-navy-900);

  --accent:              var(--mlj-gold-700);
  --accent-strong:       var(--mlj-gold-900);
  --cta:                 var(--mlj-orange-500);
  --cta-hover:           var(--mlj-orange-700);

  --border-soft:         rgba(21, 35, 50, 0.10);
  --border-default:      rgba(21, 35, 50, 0.18);
  --border-gold:         var(--mlj-gold-500);

  --success:             var(--pet-green-900);
  --warning:             var(--mlj-orange-500);
  --danger:              var(--mlj-red);
  --info:                var(--mlj-paleblue);

  /* Shadows — soft, warm */
  --shadow-sm:           0 1px 2px rgba(21,35,50,0.06), 0 1px 1px rgba(21,35,50,0.04);
  --shadow-md:           0 4px 12px rgba(21,35,50,0.08), 0 2px 4px rgba(21,35,50,0.04);
  --shadow-lg:           0 12px 32px rgba(21,35,50,0.12), 0 4px 8px rgba(21,35,50,0.06);
  --shadow-gold:         0 8px 24px rgba(197,175,128,0.35);

  /* Radii */
  --radius-xs:           4px;
  --radius-sm:           8px;
  --radius-md:           12px;
  --radius-lg:           20px;
  --radius-xl:           28px;
  --radius-pill:         999px;

  /* Spacing scale (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ====================================================
     TYPOGRAPHY  — families
     ==================================================== */
  /* Typewriter — Life Story Writer accent only */
  --font-typewriter:     'Courier New', 'Courier', ui-monospace, monospace;

  --font-display:        'Raleway', system-ui, -apple-system, sans-serif;
  --font-body:           'Roboto', system-ui, -apple-system, sans-serif;
  --font-handwritten:    'Schoolbell', 'Children One', cursive;
  --font-script:         'Dancing Script', cursive;
  --font-social:         'Oswald', 'Raleway', sans-serif;

  /* Weights */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-extra:    800;

  /* Type scale (clamped for fluid headings) */
  --fs-hero:    clamp(2.5rem, 5vw, 4rem);     /* 40 → 64 */
  --fs-h1:      clamp(2rem, 3.6vw, 3rem);     /* 32 → 48 */
  --fs-h2:      clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-h3:      1.5rem;       /* 24 */
  --fs-h4:      1.25rem;      /* 20 */
  --fs-h5:      1.0625rem;    /* 17 */
  --fs-body:    1rem;         /* 16 */
  --fs-small:   0.875rem;     /* 14 */
  --fs-caption: 0.75rem;      /* 12 */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-loose:   1.75;
}

/* ====================================================
   PRODUCT THEME OVERRIDES
   Apply via class on a wrapper element to switch accent:
     <body class="theme-life-story-writer"> ... </body>
   ==================================================== */
.theme-life-story-writer {
  --accent:        var(--lsw-yellow-700);
  --accent-strong: var(--lsw-yellow-900);
  --bg-soft:       var(--lsw-yellow-100);
  --bg-tint:       var(--lsw-yellow-200);
  --cta:           var(--lsw-yellow-700);
  --cta-hover:     var(--lsw-yellow-900);
}
.theme-life-ready-planner {
  --accent:        var(--lrp-turq-900);
  --accent-strong: var(--lrp-turq-700);
  --bg-soft:       var(--lrp-turq-200);
  --bg-tint:       #f0fcfd;
  --cta:           var(--lrp-turq-900);
  --cta-hover:     var(--lrp-turq-700);
}
.theme-pets {
  --accent:        var(--pet-green-900);
  --accent-strong: var(--pet-green-700);
  --cta:           var(--pet-green-900);
  --cta-hover:     var(--pet-green-700);
}

/* ====================================================
   SEMANTIC ELEMENT STYLES
   ==================================================== */
html, body {
  background: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-default);
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0 0 var(--space-4) 0;
}
h1 { font-size: var(--fs-h1);  font-weight: var(--w-bold); }
h2 { font-size: var(--fs-h2);  font-weight: var(--w-bold); }
h3 { font-size: var(--fs-h3);  font-weight: var(--w-semibold); }
h4 { font-size: var(--fs-h4);  font-weight: var(--w-semibold); }
h5 { font-size: var(--fs-h5);  font-weight: var(--w-semibold); letter-spacing: 0; }
h6 {
  font-size: var(--fs-small); font-weight: var(--w-bold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted);
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--w-extra);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  text-wrap: pretty;
  margin: 0 0 var(--space-4) 0;
}
.lead { font-size: 1.125rem; line-height: var(--lh-loose); color: var(--fg-muted); }
small, .small { font-size: var(--fs-small); }
.caption { font-size: var(--fs-caption); color: var(--fg-subtle); }

/* The cursive "Dancing Script" is used for emotive sub-headings
   ("My Story, Stored", "Be ready for anything") */
.script-accent {
  font-family: var(--font-script);
  font-weight: var(--w-bold);
  color: var(--accent-strong);
  font-size: 1.5em;
}

/* The "Schoolbell" handwritten font is used in social/marketing
   alongside the stick-people illustrations */
.handwritten {
  font-family: var(--font-handwritten);
  letter-spacing: 0.01em;
}

/* Oswald — condensed display, used in social posts */
.social-display {
  font-family: var(--font-social);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

a { color: var(--accent-strong); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--mlj-orange-700); }

code, kbd, samp, pre {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--mlj-grey-100);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

/* ICE Jar — Life Passport Activation prototype styles
   Uses tokens from /colors_and_type.css. ICE Jar sub-brand:
   navy chrome + red accent (per ICEBOX-BRAND.md). Orange CTAs
   inherited from master MLJ brand for consistency. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scrollbar-gutter: stable; }
/* On the activation wizard, body.activation-mode already sets overflow:hidden — the page
   itself never scrolls; all scrolling happens inside .step-card--scrollable's own
   overflow-y:auto with its own thin custom scrollbar. The reserved gutter above still ate a
   permanent ~15-17px strip on the right of the whole page though, since it doesn't know the
   body will never need it — pushing every card's right-hand padding out of sync with its
   left (2026-07-22). Nothing here actually scrolls, so no gutter is needed. */
html:has(body.activation-mode) { scrollbar-gutter: auto; }

body {
  background: var(--mlj-navy-900);
  min-height: 100vh;
  color: var(--fg-default);
}

/* App shell — simulates the pop-up that appears when Life Jar is plugged in.
   Sits on a navy page background with a white working surface inside. */
.app-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 68px 24px 40px;
  position: relative;
}

/* Dashboard full-screen mode — strips all prototype chrome, card fills viewport */
.app-shell--dashboard {
  max-width: 100%;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

/* Ensure body doesn't show navy behind full-height screens */
body:has(.app-shell--dashboard) {
  background: #f5f5f5;
}
/* Push app content below fixed header without a visible gap —
   all main body flex containers start at y=0 behind the fixed header (z-index 200)
   so the 58px padding is invisible — content appears right at the header bottom. */
.app-shell--dashboard .app-flex-outer,
.app-shell--dashboard .step-card > div[style*="min-height: 600px"],
.app-shell--dashboard .step-card > div[style*="min-height: calc(100vh - 116px)"] {
  padding-top: 58px;
}
.app-shell--dashboard .step-card {
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Content row fills remaining height after the app header */
.app-shell--dashboard .step-card > .dash-content-row {
  flex: 1;
}

/* When the prototype's app-shell is on a navy body, the top bar text needs to be light */
.top-bar .product-name { color: #fff; font-weight: 600; }
.top-bar .icebox-tag { color: rgba(255,255,255,0.85); font-weight: 500; }
.top-bar .icebox-tag .dot { background: var(--mlj-red); box-shadow: 0 0 0 3px rgba(213,0,0,.22); animation: pulse-red 2s ease-in-out infinite; }
.top-bar .icebox-tag .dot--green { background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,.25); animation: pulse-green 2s ease-in-out infinite; }
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 3px rgba(22,163,74,.25); }
  50%      { box-shadow: 0 0 0 6px rgba(22,163,74,.10); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse-orange {
  0%, 100% { box-shadow: 0 0 0 3px rgba(232,121,38,.22); }
  50%      { box-shadow: 0 0 0 6px rgba(232,121,38,.10); }
}
.access-btn { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.18); }
.access-btn:hover { border-color: var(--mlj-red); color: #fff; background: rgba(213,0,0,0.12); }
.access-btn.active { background: var(--mlj-red); color: #fff; border-color: var(--mlj-red); }

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(213,0,0,.45); }
  50% { box-shadow: 0 0 0 6px rgba(213,0,0,0); }
}

/* ---------- Top bar ---------- */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  width: 100%;
  height: 68px;
  background: var(--mlj-navy-900);
  margin: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-lockup img.logo {
  width: 56px;
  height: auto;
  display: block;
}
.brand-lockup .lockup-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand-lockup .product-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: #fff;
  letter-spacing: -0.01em;
}
.brand-lockup .icebox-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.brand-lockup .icebox-tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mlj-red);
}

/* Accessibility toggles top-right */
.demo-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  pointer-events: none;
}
.demo-bar .access-btn {
  padding: 6px 10px;
  min-width: 36px;
  justify-content: center;
  pointer-events: auto;
}
.access-toggles {
  display: flex;
  align-items: center;
  gap: 10px;
}
.access-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid #8B95A1;
  background: #fff;
  color: var(--mlj-navy-900);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 160ms ease-out;
}
.access-btn:hover {
  border-color: #C0C4CC;
  background: #F0F1F3;
  color: var(--mlj-navy-900);
}
.access-btn.active {
  background: #E4E6EA;
  color: var(--mlj-navy-900);
  border-color: #B8BBC4;
}
.access-btn .label-large-text { font-size: 14px; }
.access-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Large-text mode applies via body class */
body.large-text {
  font-size: 19px;
}
body.large-text .form-field input,
body.large-text .form-field select,
body.large-text .form-field textarea { font-size: 19px; padding: 16px 18px; }
body.large-text h1.step-title { font-size: 36px; }
body.large-text .step-subtitle { font-size: 19px; }
body.large-text .btn { font-size: 17px; padding: 16px 28px; }
body.large-text .step-card { zoom: 1.2; }
body.large-text .emergency-phone { zoom: 1.1; }

/* ---------- Progress rail ---------- */
/* Sits on navy app shell — default state is light text */
.progress-rail {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  z-index: 149;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 6px 0 10px;
  border-bottom: 3px solid var(--mlj-red);
  background: var(--mlj-navy-900);
  box-sizing: border-box;
}

/* Thornfield Festival — progress-rail underline is orange instead of the
   default red, to match the event's brand color (2026-07-23). */
body.activation-mode.event-glastonbury .progress-rail {
  border-bottom-color: var(--mlj-orange-500);
}
/* Desktop + tablet only: nudge the step-circle row 10px right (mobile left as-is) */
/* Uses padding, not transform, so the fixed full-bleed navy background isn't dragged off the left edge */
@media (min-width: 601px) {
  .progress-rail { padding-left: 20px; }
}
.progress-dot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}
.progress-dot .num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #e8eaed;
  border: 1.5px solid #ffffff;
  color: #000;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-align: center;
  transition: all 200ms ease-out;
}
.progress-dot.done .num {
  background: var(--pet-green-900);
  border-color: var(--pet-green-900);
  color: #fff;
}
.progress-dot.current { color: #fff; }
.progress-dot.current .num {
  background: var(--mlj-orange-500);
  border-color: var(--mlj-orange-500);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  box-shadow: 0 0 0 4px rgba(232, 121, 38, 0.25);
}
.progress-divider {
  flex: 0 0 36px;
  height: 3px;
  background: rgba(255,255,255,0.45);
  border-radius: 2px;
}
.progress-divider.done { background: var(--pet-green-900); }

/* ---------- Card / step container ---------- */
.step-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 28px 48px 28px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  border: 1px solid var(--border-soft);
  max-width: 880px;
  margin: 20px auto 20px;
  position: relative;
  overflow: visible;
}
.step-card::before {
  display: none;
}

.step-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--orange-dark, #C04A00);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

h1.step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--mlj-navy-900);
}
.step-title .script {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.05em;
  color: var(--mlj-gold-900);
  display: inline-block;
  transform: translateY(2px);
}
.step-subtitle {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 0 0 12px;
  max-width: 640px;
}

/* Shiny gold variant — used on navy hero surfaces (welcome / celebration).
   Mirrors the shiny gold logo treatment per ICEBOX-BRAND.md. */
.btn-gold-shiny {
  background: linear-gradient(135deg,
    #f4dfa1 0%,
    var(--mlj-gold-700) 32%,
    var(--mlj-gold-900) 60%,
    var(--mlj-gold-700) 80%,
    #f4dfa1 100%);
  color: var(--mlj-navy-900);
  border: 1px solid var(--mlj-gold-900);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(120,90,20,0.3),
    0 6px 18px rgba(172,137,46,0.45),
    0 2px 4px rgba(0,0,0,0.18);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.btn-gold-shiny:hover {
  background: linear-gradient(135deg,
    #fbe9b6 0%,
    #d6b970 32%,
    var(--mlj-gold-900) 60%,
    #d6b970 80%,
    #fbe9b6 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(120,90,20,0.3),
    0 10px 24px rgba(172,137,46,0.55),
    0 3px 6px rgba(0,0,0,0.22);
}

/* Shiny orange variant — primary CTA on navy hero surfaces.
   Same dimensional treatment as gold-shiny but in MLJ orange. */
.btn-orange-shiny {
  background: #EA580C;
  color: #fff;
  border: none;
  font-weight: 700;
}
.btn-orange-shiny:hover {
  background: #C04A00;
}
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  padding: 10px 22px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 160ms ease-out;
  white-space: nowrap;
  min-height: 42px;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: #EA580C;
  color: #fff;
  border-color: transparent;
}
.btn-primary:hover {
  background: #C04A00;
}
.btn-primary:disabled {
  background: #F4A89A;
  border: 1.5px solid transparent;
  opacity: 1 !important;
  cursor: not-allowed;
}
.btn-ghost {
  background: transparent;
  color: var(--mlj-navy-900);
  border-color: #8B95A1;
}
.btn-ghost:hover {
  border-color: var(--mlj-navy-900);
  background: var(--mlj-grey-100);
}
.btn-ghost-grey {
  background: #F1F5F9;
  color: #475569;
  border: 1.5px solid #CBD5E1;
}
.btn-ghost-grey:hover {
  background: #E2E8F0;
  border-color: #94A3B8;
}
/* Compact secondary action buttons — eg scan QR / enter ICE code */
.btn.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
  gap: 6px;
}
.btn-link {
  background: none;
  border: none;
  color: var(--mlj-navy-700);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 0;
}
.btn-link:hover { color: var(--mlj-orange-700); }
.btn-link-black {
  background: none; border: none;
  color: #1E293B;
  font-weight: 600; cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0; font-size: 13px;
  font-family: inherit;
}
.btn-link-black:hover { color: #EA580C; }

/* Tooltip info icon — 18px solid grey circle with white i, used inline next to labels */
.tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #64748B;
  border: none;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  vertical-align: middle;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.tip-icon:hover { background: #475569; }

.btn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.btn-row .right { display: flex; gap: 12px; align-items: center; }

/* Language grid — subgrid so label/input/hint rows align across columns */
.language-grid {
  grid-template-rows: auto auto auto;
  row-gap: 6px;
}
.language-grid .form-field {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-content: start;
}

/* ---------- Form fields ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  margin-top: 8px;
  align-items: end;
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
/* Form section wrap — desktop default (stripped on mobile) */
.form-section-wrap {
  background: #FFF8F0;
  border: 1.5px solid #FFD0A0;
  border-radius: 8px;
  padding: 20px 20px 18px 20px;
  margin-bottom: 20px;
  overflow: visible;
}
.form-section-wrap--child {
  background: #eef4ff;
  border-color: #b8cef0;
  padding: 20px 24px;
}
/* Their/Your photo box — half width by default (desktop). Mobile still forces
   it full width via the 880px block's .photo-field{width:100% !important},
   and tablet has its own scoped 50% override — both outrank this via
   !important, so this plain rule only actually takes effect on desktop. */
.photo-field { max-width: 50%; }
/* Accommodation-group "add by ticket number" input — half width on desktop/tablet,
   full width on mobile via the 600px block below (2026-07-22). */
.accom-group-ticket-input { max-width: 50%; }
/* "Skip for now — you can add this later" (accommodation step) — right-justified
   on desktop/tablet, left-aligned (default) on mobile (2026-07-23). */
@media (min-width: 601px) {
  .skip-accom-link { display: block; margin-left: auto; }
}
.form-field.full { grid-column: 1 / -1; }
/* Event Info modal — Event name + Dates share a row on desktop/tablet, 2/3 + 1/3 split.
   Stacks to a single column on mobile (2026-07-22). */
.event-info-row { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 601px) {
  .event-info-row { flex-direction: row; gap: 16px; }
  .event-info-row > .form-field:first-child { flex: 2 1 0; }
  .event-info-row > .form-field:last-child { flex: 1 1 0; }
}
.form-field label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--mlj-navy-900);
  letter-spacing: 0.01em;
}
/* Compact label for modals and dense form blocks */
.field-label,
.form-field label.field-label {
  font-family: var(--font-body);
  font-size: 13px !important;
  font-weight: 700;
  color: var(--mlj-navy-900);
  letter-spacing: 0.01em;
  margin-bottom: 0;
}
/* Shared form input — added 2026-08-10.
   `.field-label` has existed here for months and app.html uses it in 61 places,
   but there was NO generic `.field-input` at all: the only two definitions were
   scoped to `body.pg-control-demo` and `body.pg-org-demo`, so every modal in
   app.html rolled its own inline `inputSt` / `selectSt` object instead. That is
   the thing the visual-compliance rule ("always use CSS classes first") exists
   to stop, and it is why the same field has three slightly different borders in
   three modals.
   Values are the locked standard: 1.5px #949494, 6px radius, #fff, placeholder
   #767676 (the WCAG AA floor — never lighter). The two body-scoped rules later
   in this file have higher specificity and still win on those pages. */
.field-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1.5px solid #949494;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: var(--mlj-navy-900);
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.field-input:focus-visible { border-color: #C04A00; }
.field-input::placeholder { color: #767676; opacity: 1; }

/* ── Grouped content block inside a modal (2026-08-11) ──────────────────────
   #EDF0F4 on #C8D0D9. Taken from OrgRegistryAddModal's own "Organisation name"
   panel — which is exactly what the Healthcare Provider card's
   "+ Add Healthcare Provider" button opens, so the card and the panel you then
   type into are the same colour and read as one flow. Suke's pick, 2026-08-11.

   ⚠ COOL GREY-BLUE, and deliberately NOT the warm #FFF7ED / #FFFBF5 on #FFD0A0
   used by Symptoms and "Who can see this". In the health modals warm means
   ACCESS AND SHARING. A content block that borrowed it would tell the reader
   that adding a healthcare provider grants that provider access — the exact
   misreading those blocks' captions exist to prevent. Keep content cool.

   ⚠ NAMED `field-card`, NOT `field-group`. `.field-group` ALREADY EXISTS, scoped
   to `body.pg-control-demo` and `body.pg-org-demo`, where it means a form-field
   wrapper carrying nothing but a margin-bottom. Defining a global `.field-group`
   with a background and a border would have turned every form field on both of
   those pages into a grey card. Caught by an assertion, 2026-08-11 — the same
   trap `.field-input` had before it went global on 2026-08-10. CHECK FOR AN
   EXISTING BODY-SCOPED RULE BEFORE ADDING ANY GLOBAL CLASS TO THIS FILE. */
.field-card {
  background: #EDF0F4;
  border: 1.5px solid #C8D0D9;
  border-radius: 10px;
  padding: 16px 20px;
}
/* Same family, lighter weight: an outline rather than a fill, for a block that
   sits next to a filled one and should read as secondary to it. */
.field-card-outline {
  background: #fff;
  border: 1.5px solid #C8D0D9;
  border-radius: 10px;
  padding: 16px 20px;
}

/* Health record-type selector — Condition / Injury / Allergy / Drug Allergy.
   Added 2026-08-10. Deliberately a CLASS rather than an inline grid: the
   ≤600px catch-all matches `div[style*="grid-template-columns: repeat(4"]`,
   so an inline version was being collapsed to one column on mobile. With no
   inline grid there is nothing for that selector to match, and no !important
   needed here.
   ⚠ 2 columns on mobile is a DELIBERATE exception to the "all tile grids are
   single column ≤600px" rule. That rule exists because card tiles get too
   narrow to read on a 360px phone; these are compact icon+label buttons and
   sit comfortably at ~160px each. Suke asked for 2×2 explicitly, 2026-08-10. */
.cond-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

/* Conditions modal — Symptoms / Severity radio row (2026-08-11).
   Six options in ONE grid: None, Mild, Moderate, Severe, Debilitating, and
   Managed / Controlled. The sixth used to be a sibling div below the grid; it
   was moved inside so that at <=600px it can sit beside Debilitating (Suke's
   request) — CSS cannot move a node between containers, so the DOM had to
   change and these rules keep the desktop layout identical to before.
   ⚠ The <=600px catch-all further down matches repeat(2 through repeat(4 only,
   NOT repeat(5 — so this grid was staying five columns wide on a phone, with
   the radios and their labels crushed together. Two columns fixes that as well
   as answering the request. */
.cond-sev-managed {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #F1F5F9;
}
@media (max-width: 600px) {
  .cond-sev-grid { grid-template-columns: 1fr 1fr !important; }
  /* Becomes an ordinary cell: 6 items over 2 columns puts Debilitating and
     Managed / Controlled together on the third row. The divider goes with it —
     it separated two rows that are now one. */
  .cond-sev-managed {
    grid-column: auto;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}
@media (max-width: 600px) {
  .cond-type-grid { grid-template-columns: 1fr 1fr; }
}

.hazard-group-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--mlj-navy-900);
  margin-bottom: 8px;
}

/* Primary button — small (Edit), only when not combined with .btn pill class */
.btn-primary:not(.btn) {
  background: #EA580C;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-primary:not(.btn):hover { background: #C04A00; }
/* Primary button — large (Save changes) */
.btn-primary-lg {
  background: #EA580C;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-primary-lg:hover { background: #C04A00; }
.form-field label .req { color: var(--mlj-red); margin-left: 2px; }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 13px 16px;
  border: 1.5px solid #8B95A1;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--fg-default);
  transition: all 160ms ease-out;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
/* Safari: restore chevron for .form-field selects */
.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B95A1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px;
  padding-right: 36px;
}
button:focus { outline: none; box-shadow: none; }
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 146, 10, 0.35);
}
input.text-input:focus-visible,
select.text-input:focus-visible {
    outline: none;
    border-color: #E8920A;
    box-shadow: 0 0 0 3px rgba(232, 146, 10, 0.18);
    background: #ffffff;
}
select:focus-visible {
    outline: none;
    border-color: #E8920A;
    box-shadow: 0 0 0 3px rgba(232, 146, 10, 0.18);
    background: #ffffff;
}
select {
  accent-color: #EA580C;
  color: #152332;
}
select option { color: #152332; }
input::placeholder,
textarea::placeholder { color: #767676; opacity: 1; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--fg-subtle); opacity: 1; }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--pet-green-900);
  box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.18);
}

/* Selected option inside any open <select> dropdown — pale green tint.
   These selectors only take effect on the rendered options list. */
.form-field select option:checked,
.form-field select option:hover,
.form-field select option:focus {
  background: rgba(0, 200, 83, 0.18) linear-gradient(0deg, rgba(0, 200, 83, 0.18), rgba(0, 200, 83, 0.18));
  color: var(--mlj-navy-900);
}

/* ---------- Custom dropdown (Dropdown component) ---------- */
.dd {
  position: relative;
  width: 100%;
}
.dd-trigger {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 13px 16px;
  background: #fff;
  border: 1.5px solid #8B95A1;
  border-radius: 8px;
  color: var(--mlj-navy-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: all 160ms ease-out;
  text-align: left;
}
.dd-trigger:hover { border-color: var(--mlj-navy-700, #2c3e5a); }
.dd.open .dd-trigger,
.dd-trigger:focus {
  border-color: var(--pet-green-900);
  box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.18);
  outline: none;
}
.dd.disabled .dd-trigger {
  background: #f5f6f8;
  color: var(--fg-subtle);
  cursor: not-allowed;
  border-color: var(--border-soft, #e5e7eb);
}
.dd-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-value.placeholder { color: var(--fg-subtle); font-weight: 400; }
.dd-caret {
  flex-shrink: 0;
  color: var(--fg-muted);
  transition: transform 160ms ease-out;
}
.dd.open .dd-caret { transform: rotate(180deg); color: var(--pet-green-900); }

.dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: #fff;
  border: 1.5px solid var(--pet-green-900);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 25, 50, 0.16), 0 4px 8px rgba(15, 25, 50, 0.06);
  max-height: 280px;
  overflow-y: auto;
  animation: dd-pop 140ms ease-out;
}
.dd-menu::-webkit-scrollbar { width: 6px; }
.dd-menu::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
.dd-menu::-webkit-scrollbar-track { background: transparent; }
@keyframes dd-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dd-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--mlj-navy-900);
  cursor: pointer;
  transition: background 100ms ease-out;
}
.dd-option .dd-check { color: var(--pet-green-900); flex-shrink: 0; }
.dd-option.selected {
  background: rgba(0, 200, 83, 0.14);
  font-weight: 600;
}
.dd-option.active {
  background: rgba(0, 200, 83, 0.10);
}
.dd-option.selected.active {
  background: rgba(0, 200, 83, 0.20);
}
.dd-empty { padding: 14px; color: var(--fg-subtle); font-size: 14px; text-align: center; }
.form-field .hint {
  font-size: 13px;
  color: var(--fg-muted);
  font-style: italic;
  margin-top: 3px;
  line-height: 1.4;
}
.hint {
  font-size: 13px;
  color: var(--fg-muted);
  font-style: italic;
  line-height: 1.4;
}
.form-field textarea { resize: vertical; min-height: 80px; }

/* Voice input chip inside a field */
.field-voice {
  position: relative;
}
.field-voice .voice-chip {
  position: absolute;
  right: 10px;
  top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--lrp-turq-200);
  color: var(--lrp-turq-900);
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: all 160ms ease-out;
}
.field-voice .voice-chip:hover { background: var(--lrp-turq-300); }
.field-voice .voice-chip.recording {
  background: var(--mlj-red);
  color: #fff;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(213,0,0,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(213,0,0,0); }
}

/* Photo uploader */
.photo-uploader {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px;
  border: 1.5px dashed #FFD0A0;
  border-radius: var(--radius-md);
  background: #FFF8F0;
}
.photo-thumb {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--mlj-grey-100);
  border: 2px solid #949494;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  color: var(--fg-subtle);
  flex-shrink: 0;
  overflow: hidden;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-uploader-text { flex: 1; }
.photo-uploader-text .t { font-weight: 600; color: var(--mlj-navy-900); }
.photo-uploader-text .h { font-size: 13px; color: var(--fg-subtle); margin-top: 4px; }

/* ---------- QR scanner panel ---------- */

/* Mode tabs — Scan / Manual entry */
.mode-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--mlj-grey-100);
  padding: 4px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
  cursor: pointer;
  transition: all 160ms ease-out;
}
.mode-tab:hover { color: var(--mlj-navy-900); }
.mode-tab.active {
  background: #fff;
  color: var(--mlj-navy-900);
  box-shadow: 0 2px 6px rgba(21,35,50,0.08);
}

/* Manual entry panel */
.manual-entry {
  grid-column: 1 / -1;
  background: var(--bg-tint);
  border: 1.5px solid var(--mlj-gold-500);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.manual-entry .manual-icon {
  width: 72px; height: 72px;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--lrp-turq-900);
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.manual-entry h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--mlj-navy-900);
  margin: 0 0 8px;
}
.manual-entry p {
  color: var(--fg-muted);
  margin: 0 0 20px;
  max-width: 460px;
  line-height: 1.55;
}
.manual-input-row {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  align-items: stretch;
}
.manual-input-row input {
  flex: 1;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  padding: 14px 16px;
  border: 1.5px solid #8B95A1;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--mlj-navy-900);
  outline: none;
  transition: all 160ms ease-out;
}
.manual-input-row input:focus-visible {
    outline: none;
    border-color: #E8920A;
    box-shadow: 0 0 0 3px rgba(232, 146, 10, 0.18);
    background: #ffffff;
}
.manual-input-row input::placeholder { color: var(--fg-subtle); opacity: 1; letter-spacing: 0.18em; }
.manual-error {
  margin-top: 10px;
  color: var(--mlj-red);
  font-size: 13px;
  font-weight: 500;
}

.qr-panel {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  align-items: start;
}
.qr-camera {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1a2c40 0%, #152332 100%);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.qr-frame {
  width: 60%;
  aspect-ratio: 1;
  border: 2.5px solid rgba(255,255,255,0.4);
  border-radius: 16px;
  position: relative;
}
.qr-frame::before, .qr-frame::after,
.qr-frame .c1, .qr-frame .c2 {
  content: '';
  position: absolute;
  width: 26px; height: 26px;
  border-color: var(--mlj-orange-500);
  border-style: solid;
}
.qr-frame::before { top: -3px; left: -3px; border-width: 3px 0 0 3px; border-radius: 16px 0 0 0; }
.qr-frame::after { top: -3px; right: -3px; border-width: 3px 3px 0 0; border-radius: 0 16px 0 0; }
.qr-frame .c1 { bottom: -3px; left: -3px; border-width: 0 0 3px 3px; border-radius: 0 0 0 16px; }
.qr-frame .c2 { bottom: -3px; right: -3px; border-width: 0 3px 3px 0; border-radius: 0 0 16px 0; }
.qr-scanline {
  position: absolute;
  left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mlj-orange-500), transparent);
  top: 50%;
  animation: scan 2.4s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(249,170,68,0.6);
}
@keyframes scan {
  0%, 100% { top: 22%; }
  50% { top: 78%; }
}
.qr-detected {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(82, 165, 109, 0.94);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  gap: 6px;
}
.qr-detected .check {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--pet-green-900);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.qr-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.qr-side h3 {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--mlj-navy-900);
}
.qr-side p { color: var(--fg-muted); margin: 0 0 10px; line-height: 1.5; font-size: 14px; }
.qr-manual {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.qr-manual .lab {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-subtle);
  margin-bottom: 8px;
}
.qr-manual input {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  width: 100%;
  padding: 14px;
  border: 1.5px solid #8B95A1;
  border-radius: var(--radius-sm);
}
.qr-manual input:focus-visible {
    outline: none;
    border-color: #E8920A;
    box-shadow: 0 0 0 3px rgba(232, 146, 10, 0.18);
    background: #ffffff;
}

/* Detected reference */
.qr-ref {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(82, 165, 109, 0.10);
  border: 1px solid var(--pet-green-900);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
}
.qr-ref .icon-circle {
  width: 36px; height: 36px;
  background: var(--pet-green-900);
  border: 1px solid var(--pet-green-900);
  color: #fff;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 12px;
}
.qr-ref .icon-circle {
  width: 36px; height: 36px;
  background: var(--pet-green-900);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.qr-ref .ref-text { flex: 1; }
.qr-ref .ref-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--mlj-navy-700); letter-spacing: 0.08em; }
.qr-ref .ref-code { font-family: ui-monospace, monospace; font-size: 16px; font-weight: 700; color: var(--mlj-navy-900); letter-spacing: 0.1em; }

/* ---------- Household choice ---------- */
.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 8px;
  align-items: stretch;
}
.choice-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.choice-caption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 0;
  padding: 0 4px;
  min-height: 88px;
}
.choice-caption-combined {
  display: none;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 0 0 12px;
  padding: 0 2px;
}
@media (max-width: 600px) {
  .choice-caption { display: none; }
  .choice-caption-combined { display: block; }
}
.choice-card {
  background: #fff;
  border: 2px solid #949494;
  border-radius: var(--radius-lg);
  padding: 20px 20px 24px 20px;
  cursor: pointer;
  transition: all 180ms ease-out;
  text-align: left;
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  align-items: stretch;
  flex: 1;
}
.choice-card:hover {
  border-color: var(--pet-green-900);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.choice-card.selected {
  border-color: var(--pet-green-900);
  background: rgba(76, 175, 80, 0.10);
  box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.18);
}
.choice-card .check-mark {
  position: absolute;
  top: 18px; right: 18px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid #949494;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  font-weight: 700;
}
.choice-card.selected .check-mark {
  background: var(--pet-green-900);
  border-color: var(--pet-green-900);
  color: #fff;
}
.choice-card .illo {
  height: 90px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.choice-card .illo img { height: 120px; object-fit: contain; }
.choice-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--mlj-navy-900);
  margin: 0;
}
.choice-card p {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.5;
  margin: 0;
}

/* Linked household sub-panel */
.household-link-panel {
  margin-top: 24px;
  padding: 24px;
  background: var(--bg-tint);
  border-radius: var(--radius-lg);
  border: 1px solid var(--mlj-gold-500);
}
@media (max-width: 600px) {
  /* Drop the gold card chrome on mobile — the 24px padding + border was eating
     into the narrow viewport. Content (eg the "Where are you staying at the
     festival?" tile) now runs edge-to-edge like the rest of the step (2026-07-22). */
  .household-link-panel {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
  }
}

/* "Email links" button on the booking-group ICE-record-links panel: sits in the
   header next to the title on desktop, moves below the last person tile on
   mobile so it doesn't crowd the title row on narrow screens (2026-07-22). */
.email-links-mobile-only { display: none; }
@media (max-width: 600px) {
  .email-links-desktop-only { display: none !important; }
  .email-links-mobile-only { display: block; margin-top: 12px; }
}
.household-link-panel h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 10px;
  color: var(--mlj-navy-900);
}
.household-link-panel h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mlj-navy-700);
  margin: 0 0 10px;
}
/* Selectable primary-household prompt — orange when chosen, neutral default */
.primary-prompt-btn {
  width: 100%;
  display: flex;
  gap: 14px;
  align-items: center;
  text-align: left;
  padding: 16px 18px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid #8B95A1;
  cursor: pointer;
  font-family: var(--font-body);
  margin: 16px 0;
  transition: all 160ms ease-out;
}
.primary-prompt-btn:hover {
  border-color: var(--pet-green-900);
  background: rgba(0, 200, 83, 0.04);
}
.primary-prompt-btn.selected {
  border-color: var(--pet-green-900);
  background: rgba(0, 200, 83, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.18);
}
.primary-prompt-btn .primary-prompt-icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--bg-soft); color: var(--fg-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 160ms ease-out;
}
.primary-prompt-btn.selected .primary-prompt-icon {
  background: var(--pet-green-900); color: #fff;
}
.primary-prompt-btn strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--mlj-navy-900);
  margin-bottom: 2px;
}
.primary-prompt-btn span {
  display: block;
  font-size: 13px;
  color: var(--fg-muted);
}
.primary-prompt-btn > div:nth-child(2) { flex: 1; }
.primary-prompt-radio {
  width: 22px; height: 22px;
  border: 2px solid #949494;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 160ms ease-out;
}
.primary-prompt-btn.selected .primary-prompt-radio {
  border-color: var(--pet-green-900);
}
.radio-inner {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--pet-green-900);
  transform: scale(0);
  transition: transform 160ms ease-out;
}
.primary-prompt-btn.selected .radio-inner { transform: scale(1); }
.link-existing {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
/* Prefilled / read-only field treatment for prepopulated household address */
.prefilled-field {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  background: #F7FDF9;
  border: 1.5px solid var(--pet-green-900);
  border-radius: 8px;
  font-size: 15px;
  color: var(--mlj-navy-900);
}
.prefilled-field.muted {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  color: var(--fg-muted);
}
.prefilled-field .check {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--pet-green-900); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.prefilled-field .prefilled-tag {
  margin-left: auto;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pet-green-900);
}
/* Tiny inline toggle for "I don't have one" next to email */
.tiny-toggle {
  background: #FFE8CC;
  border: 1.5px solid #F5C080;
  color: #1a1a1a;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 160ms ease-out;
}
.tiny-toggle:hover { background: #FFD9A8; border-color: #F0A850; color: #000; }
/* Firefox draws a hidden 1px inner border/padding on <button> that survives
   custom padding, nudging pill buttons like .tiny-toggle a px or two off-centre
   relative to a plain <label> sitting next to them in the same row (2026-08-03). */
button::-moz-focus-inner { border: 0; padding: 0; }

/* Field title row — label + optional tiny-toggle pill (eg "None") sharing one line.
   NOTE 2026-08-02: a paired field's title row (no pill) sits at a fixed 32px, but a
   long label next to a pill (eg "Conditions to know about" + "I have no conditions")
   can get squeezed by flex-shrink until the label text wraps onto a 2nd line — which
   grows this row taller than its paired 32px sibling and pushes the input box below
   it down, breaking the side-by-side alignment. Fix: hard-cap the row at 32px and let
   the label truncate with an ellipsis instead of wrapping, so the row height — and the
   input box beneath it — always lines up with its neighbour regardless of column width. */
.field-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  min-height: 32px;
  overflow: hidden;
}
.field-title-row label {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}
.field-title-row .tiny-toggle {
  flex-shrink: 0;
  margin-left: 0;
  line-height: 1;
}
.tiny-toggle.on {
  background: var(--slate-grey);
  border-color: var(--slate-grey);
  color: #fff;
}

/* Segmented toggle buttons (gender, pronouns) — consistent sizing across all groups */
.seg-btn {
  padding: 8px 6px;
  font-size: 14px;
  font-family: var(--font-body);
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  white-space: normal;
  min-width: 0;
  flex: 1;
}

/* Label rows that may contain a pill toggle — ensures consistent height so adjacent columns stay aligned */
.label-pill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 32px;
}

/* Middle-name "+ Add" link rows — left-justified inside the form grid */
.middle-name-row {
  text-align: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}
.middle-name-row .btn-link-dark {
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Multi-select conditions picker */
.conditions-picker { position: relative; margin-top: 8px; }
.conditions-trigger {
  width: 100%;
  padding: 13px 16px;
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1.5px solid #8B95A1;
  border-radius: var(--radius-sm, 8px);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--mlj-navy-900);
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms;
}
.conditions-trigger:hover { border-color: var(--mlj-navy-700); }
.conditions-trigger:focus { border-color: var(--pet-green-900); outline: none; box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.18); }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.condition-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: #FFF7ED;
  border: 1.5px solid #EA580C;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 600;
  color: #C04A00;
  cursor: pointer;
  transition: background 160ms;
}
.condition-chip:hover { background: #FFF7ED; }
.chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #EA580C;
  color: #fff;
  font-size: 11px; line-height: 1;
  font-weight: 700;
}

.conditions-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff;
  border: 1.5px solid #EA580C;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(20, 35, 50, 0.12);
  max-height: 280px;
  overflow-y: auto;
  z-index: 20;
  padding: 6px;
}
.conditions-menu::-webkit-scrollbar { width: 6px; }
.conditions-menu::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
.conditions-menu::-webkit-scrollbar-track { background: transparent; }
.conditions-menu--up { top: auto; bottom: calc(100% + 6px); }
.condition-option {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--mlj-navy-900);
}
.condition-option:hover { background: var(--bg-soft); }
.condition-option input[type="checkbox"] {
  width: 18px; height: 18px;
  flex-shrink: 0;
  accent-color: #EA580C;
  cursor: pointer;
}

/* ── Tick-row variant of .condition-option (2026-08-14) ───────────────────────
   Makes the activation wizard's Medical Info pickers render EXACTLY like
   app.html's HealthChipPicker and HealthSearchSelect rows, so the two read as
   one control rather than two that merely resemble each other. Every value
   below is the app's own row style, lifted from those components.

   ⚠ A TICK, NOT A SQUARE CHECKBOX. Suke called the boxes out on 2026-08-12 for
   the app's health pickers, and again on 2026-08-14 for activation. A selected
   row carries the house orange and a tick; an unselected one carries nothing.

   ⚠ THE CHECKBOX INPUT IS HIDDEN, NOT REMOVED. Every existing `onChange` stays
   wired exactly as it was, so this is a change of appearance and nothing else —
   no state plumbing was touched, and a keyboard user still gets a real input.
   Do not "tidy" the input away without replacing the label's click handling.

   ⚠ A MODIFIER, NOT A RESTYLE OF `.condition-option`. That base class is also
   used by app.html's EntitlementPicker and by ice-b2b-portals' org.html, and
   neither of those was asked to change. Restyling the base would have silently
   redrawn three screens nobody was looking at.

   ⚠ styles.css is COPIED, not built — run `SYNC STYLES.cmd` (or sync-styles.py)
   after editing so ice-b2b-portals' copy does not drift. */
.condition-option--tick {
  gap: 9px;
  padding: 7px 12px 7px 20px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  background: #fff;
  /* ⚠ The button reset is here because app.html's rows are <button> and
     activation's are <label>. One class has to serve both or the "single
     source" is only half true. None of it does anything to a <label>. */
  width: 100%;
  border: none;
  text-align: left;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
/* The "clear this answer" row at the top of a single-select. Grey, because it
   is the absence of an answer rather than one of the answers. */
.condition-option--muted { color: #64748B; }
/* The "(no longer offered)" tail on a stored value the list has since dropped.
   ⚠ That row is shown deliberately: a value the list no longer offers must be
   keepable, not silently blanked and written over on the next Save. */
.condition-option__note { font-weight: 500; color: #94A3B8; }
/* Empty state inside a .conditions-menu. */
.conditions-empty { padding: 10px 12px; font-size: 13px; color: #94A3B8; }
.condition-option--tick input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0; margin: 0;
  pointer-events: none;
}
.condition-option__tick {
  width: 14px;
  flex-shrink: 0;
  color: #C04A00;
  font-weight: 700;
}
.condition-option--tick:hover { background: var(--bg-soft); }
.condition-option--tick.is-selected,
.condition-option--tick.is-selected:hover {
  background: #FFF7ED;
  color: #C04A00;
  font-weight: 700;
}
/* The group heading above a run of tick rows. Same values as the app's. */
.conditions-group-label {
  padding: 7px 12px 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94A3B8;
}

/* ── Activation progress bar (2026-08-14) ─────────────────────────────────────
   Shown on Review & Activate between pressing Activate and the next screen.
   Activation is the slowest thing in the product — it writes eight tabs, has no
   rollback, and until now the only feedback was the button changing to
   "Activating…", which on a cold Netlify function reads as nothing happening.

   ⚠ THE BAR EASES TO 90% AND STOPS UNTIL THE REQUEST ACTUALLY RETURNS. A bar
   that reaches 100% while the work is still running is a lie, and the one thing
   a progress bar must not do is finish early — the person then watches a
   completed bar and concludes the page has hung. 100% is written only when
   activate.js has answered. */
.activate-progress {
  height: 10px;
  border-radius: 999px;
  background: #E8EAED;
  overflow: hidden;
}
.activate-progress__bar {
  height: 100%;
  border-radius: 999px;
  background: var(--pet-green-900);
  transition: width 220ms ease;
}

/* Privacy note — bigger, easier to read than default hint */
.privacy-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mlj-navy-900);
  background: #ffffff;
  border-radius: 8px;
  border: 1.5px solid #E8920A;
  border-left: 4px solid #E8920A;
  padding: 14px 18px;
  width: 75%;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .privacy-note { width: 100%; }
}
.privacy-note strong { color: var(--mlj-navy-900); }
.household-link-panel p { font-size: 14px; color: var(--fg-muted); margin: 0 0 16px; }
.linked-row {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.linked-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px;
  background: #fff;
  border: 1px solid #949494;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}
.linked-pill .av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--mlj-gold-500); color: var(--mlj-navy-900);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.linked-pill button {
  border: none; background: none; color: var(--fg-subtle);
  cursor: pointer; padding: 0 0 0 6px; font-size: 16px;
}
.linked-pill button:hover { color: var(--mlj-red); }

/* Welcome — navy outer card framing a single white working panel.
   Eyebrow + heading + body + CTA all live inside the white panel
   per BRAND.md (white = working surface). */
.welcome-card {
  background: transparent;
  border: none;
  padding: 0;
  max-width: 880px;
  margin: 20px auto 0;
}
.welcome-card::before {
  display: none;
}
/* On welcome card the eyebrow keeps the standard red-on-pink badge
   (from the global .step-eyebrow rule) since it now sits on white. */
.welcome-card .step-eyebrow { margin-bottom: 18px; }

.welcome-content-panel {
  background: #fff;
  color: var(--mlj-navy-900);
  border-radius: var(--radius-xl);
  padding: 28px 48px 28px;
  margin: 0;
  box-shadow: none;
}
.welcome-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--mlj-navy-900);
  width: 100%;
  box-sizing: border-box;
}
.welcome-content-panel p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 0 0 10px;
}
.welcome-content-panel p strong { color: var(--mlj-navy-900); }

/* Numbered steps */
ul.steps-numbered {
  list-style: none;
  padding: 0;
  margin: 14px 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
}
ul.steps-numbered li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 14px;
  color: var(--mlj-navy-900);
  line-height: 1.5;
}
ul.steps-numbered li strong { color: var(--mlj-navy-900); }
ul.steps-numbered li .num {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--mlj-navy-900);
  border: 1.5px solid var(--mlj-navy-900);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  flex-shrink: 0;
}

/* Secondary link inside the white panel — needs to be dark */
.btn-link-dark {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 4px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
}
.btn-link-dark:hover { color: var(--mlj-navy-900); }

/* Phone number input with flag/dial-code selector */
.phone-input-wrap {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #8B95A1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  transition: border-color 160ms;
}
.phone-input-wrap:focus-within {
  border-color: var(--mlj-navy-700);
  box-shadow: 0 0 0 3px rgba(21,35,50,0.08);
}
.phone-flag-select {
  border: none;
  border-right: 1.5px solid #949494;
  background: #F1F5F9;
  padding: 0 10px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--mlj-navy-900);
  cursor: pointer;
  outline: none;
  min-width: 100px;
  appearance: auto;
  align-self: stretch;
  height: auto;
}
.phone-number-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--mlj-navy-900);
  background: transparent;
  box-shadow: none !important;
}

/* Override .form-field input/select rules that bleed into the phone widget */
.phone-input-wrap .phone-flag-select {
  border: none;
  border-right: 1.5px solid #949494;
  border-radius: 0;
  padding: 0 10px;
  background-color: #F1F5F9;
  background-image: none;
  font-size: 14px;
  box-shadow: none;
}
.phone-input-wrap .phone-number-input {
  border: none;
  border-radius: 0;
  padding: 12px 14px;
  font-size: 15px;
  background: transparent;
  box-shadow: none;
}

.welcome-footer-note {
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-subtle);
}
.welcome-footer-note .strong { color: var(--mlj-navy-700); font-weight: 600; }
.welcome-card .footer-note { color: rgba(255,255,255,0.62); }
.welcome-card .footer-note .strong { color: #fff; }
.welcome-illo {
  background: linear-gradient(180deg, var(--lrp-turq-200), var(--mlj-gold-200));
  border-radius: var(--radius-xl);
  padding: 24px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.welcome-illo img { max-width: 100%; height: auto; display: block; }
.welcome-illo::after {
  content: '';
  position: absolute; inset: auto 24px 24px auto;
  font-family: var(--font-script);
}
.welcome h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--mlj-navy-900);
}
.welcome h1 .script {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--mlj-gold-900);
  display: block;
  font-size: 0.7em;
  margin-top: 6px;
}
.welcome p { font-size: 17px; line-height: 1.6; color: var(--fg-muted); margin: 0 0 12px; }
.welcome ul {
  list-style: none; padding: 0; margin: 24px 0;
  display: flex; flex-direction: column; gap: 12px;
}
.welcome ul li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; color: var(--mlj-navy-900);
}
.welcome ul li .tick {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--lrp-turq-900); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0; margin-top: 2px;
}

/* ---------- Storage screen (Screen 2) ---------- */
.storage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
.storage-card {
  background: #fff;
  border: 2px solid #949494;
  border-radius: var(--radius-lg);
  padding: 32px 24px 28px;
  cursor: pointer;
  transition: all 180ms ease-out;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  text-align: left;
  font-family: var(--font-body);
  align-items: stretch;
}
.storage-card:hover { border-color: var(--lrp-turq-900); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.storage-card.selected { border-color: var(--lrp-turq-900); box-shadow: 0 0 0 4px rgba(0,188,212,0.15); }
.storage-card.recommended { border-color: var(--mlj-gold-500); background: var(--bg-tint); }
.storage-card.recommended.selected { border-color: var(--lrp-turq-900); background: #fff; }
.storage-card .badge {
  position: absolute;
  top: -12px; left: 20px;
  background: var(--mlj-gold-700);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(21,35,50,0.12);
}
.storage-card.recommended .icon-block { margin-top: 8px; }
.storage-card .icon-block {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--lrp-turq-200);
  color: var(--lrp-turq-900);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.storage-card.recommended .icon-block { background: var(--mlj-gold-500); color: var(--mlj-navy-900); }
.storage-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin: 0;
  color: var(--mlj-navy-900);
}
.storage-card .price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--mlj-navy-900);
  margin-top: -4px;
}
.storage-card .price small { font-size: 13px; font-weight: 500; color: var(--fg-muted); }
.storage-card .price.free { color: var(--pet-green-900); }
.storage-card p { font-size: 14px; color: var(--fg-muted); line-height: 1.5; margin: 0; }
.storage-card ul {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.storage-card ul li {
  font-size: 13px; color: var(--mlj-navy-900);
  display: flex; align-items: flex-start; gap: 8px;
  line-height: 1.45;
}
.storage-card ul li::before {
  content: '✓';
  color: var(--lrp-turq-900);
  font-weight: 700;
  flex-shrink: 0;
}

/* ---------- Done / success screen ---------- */
.done-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
}
.done-screen .seal {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lrp-turq-500), var(--lrp-turq-900));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 56px;
  box-shadow: 0 12px 32px rgba(0,188,212,0.35);
  margin-bottom: 24px;
}
.done-screen h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.4;
  margin: 0 0 20px;
  color: var(--mlj-navy-900);
}
.done-screen .script {
  font-family: var(--font-script);
  color: var(--mlj-gold-900);
  font-size: 1.3em;
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
  padding: 0 4px;
}
.done-screen p { font-size: 17px; color: var(--fg-muted); max-width: 540px; margin: 0 0 28px; }

.summary-grid {
  background: var(--bg-tint);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
  margin: 0 auto 28px;
  max-width: 640px;
  text-align: left;
  border: 1px solid var(--mlj-gold-500);
}
.summary-grid .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: nowrap; }
.summary-grid .row .v { white-space: nowrap; }
.summary-grid .row .l { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--fg-muted); letter-spacing: 0.06em; }
.summary-grid .row .v { font-size: 14px; font-weight: 600; color: var(--mlj-navy-900); }

/* ---------- Footer / branding ---------- */
.footer-note {
  text-align: center;
  font-size: 12px;
  color: var(--fg-subtle);
  margin-top: 32px;
  font-family: var(--font-body);
}
.footer-note .strong { color: var(--mlj-navy-700); font-weight: 600; }

/* ---------- Jar nav — global icon size (20% smaller: 58×60 → 46×48) ---------- */
.jar-nav div[style*="width: 58px"]  { width: 46px !important; height: 48px !important; }
.jar-nav img[style*="width: 58px"]  { width: 46px !important; height: 48px !important; }
/* Memory Jars nav — jar images shown, icons hidden */
.memory-jar-nav div[style*="position: absolute"] { display: none !important; }
/* Memory Jars nav — sticky below the header.
   FIX (2026-07-20): nav was sticking too low, overlapping and hiding the
   white card's eyebrow underneath it. Root cause: sticky `top` is relative
   to its own scroll container (.mj-content-pane), which .app-flex-outer's
   padding-top (102px tablet / 58px desktop) has ALREADY offset below the
   fixed header — so re-using that same number here double-counted the
   header clearance and pushed the stuck nav ~58-102px too far down.
   Correct value is 0 (stick flush at the top of that already-offset
   container = right under the header). Filter bar's own sticky top
   (below) already assumed this correct flush position (58+52=110,
   102+52=154) and needs no change.

   REGRESSION FIX (2026-07-20, later same day): the demo-mode override below
   this — `.mj-content-pane.is-demo .memory-jar-nav { top: 48px }` — was kept
   on the theory that demo builds still needed the extra ~48px to clear the
   .demo-skip bar, separately from the header clearance above. That's what
   produced the visible gap above the jar-icon row reported on the live demo
   build: `body.app-is-demo .app-flex-outer` (see the ~7800/7840-line blocks)
   ALREADY bumps its own padding-top by that same ~48px for demo mode (106px
   desktop / 150px tablet, vs 58px/102px non-demo) — so this nav's demo `top`
   was double-counting clearance that .app-flex-outer had already applied to
   the whole content pane. MemoryJarNav is the first child of that pane, so
   as a sticky element it renders the offset immediately, even unscrolled —
   not just a scroll-triggered effect, which is why it was visible at rest.
   Demo and non-demo now both use 0 — .app-flex-outer's own demo/non-demo
   padding-top is the only place this offset should exist. */
@media (min-width: 601px) and (max-width: 880px) {
  .memory-jar-nav {
    position: sticky !important;
    top: 0px !important;
    z-index: 25 !important;
  }
  .mj-content-pane.is-demo .memory-jar-nav { top: 0px !important; }
}
@media (min-width: 881px) {
  .memory-jar-nav {
    position: sticky !important;
    top: 0px !important;
    z-index: 25 !important;
  }
  .mj-content-pane.is-demo .memory-jar-nav { top: 0px !important; }
}
/* Memory Jars filter bar — its own sticky top was a flat 110px (58 header + ~52 nav
   height), correct on desktop but not tablet (needs 102 + 52 = 154). Also bump by the
   nav row's own demo offset so the two never overlap when the demo bar is showing. */
@media (min-width: 601px) and (max-width: 880px) {
  .mj-filter-bar { top: 154px !important; }
  .mj-content-pane.is-demo .mj-filter-bar { top: 202px !important; }
  /* Add Memory button — RHS-justify on tablet (2026-07-20), same as Things
     Jars. Memory Jars' filter bar doesn't currently wrap at this width (no
     .mj-search-wrap flex-basis:100% rule here, unlike Things Jars), so the
     search box's flex:1 already pushes this flush right in practice — this
     is a defensive no-op that keeps the same guarantee if that ever changes. */
  .mj-filterbar-add-btn { margin-left: auto !important; }
}
@media (min-width: 881px) {
  .mj-content-pane.is-demo .mj-filter-bar { top: 158px !important; }
}
/* Memory Jars title block has no banner image above it (unlike Passwords Jars,
   which does), so its title sat right against the white card's top edge on
   desktop/tablet. Give it a bit more breathing room there; mobile unaffected.
   (2026-07-20: briefly bumped to 32px to compensate for the nav sticking too
   low and overlapping the card — see .memory-jar-nav fix above. That was the
   real cause; reverted to 22px now that the nav no longer overlaps.) */
@media (min-width: 601px) {
  .mj-page-header-block { padding-top: 22px !important; }
}
/* Memory Jars title block — mobile only. Base inline style is 14px; on
   mobile the jar-nav tab row is hidden entirely (see mobile hide rule
   below) so there's nothing above the card competing for space — 14px
   read as too much air before the eyebrow. Tightened to 6px. */
@media (max-width: 600px) {
  .mj-page-header-block { padding-top: 6px !important; }
}
/* Memory Jars "Memory Jars" eyebrow — explicit visibility guard (2026-07-20).
   Reported missing on desktop/tablet even though it renders unconditionally
   in JSX with no hiding rule found; forcing display in case of a stale/cached
   build. Class added to the eyebrow div so it can be targeted directly. */
.mj-page-header-eyebrow { display: block !important; opacity: 1 !important; visibility: visible !important; }

/* Memory Jars demo build — the white card's top margin is a flat 8px,
   which doesn't account for the extra ~48px the nav sticks lower by in
   demo mode (to clear the .demo-skip bar — see the nav fix above). Once
   the nav is stuck at that demo offset, the flat 8px isn't enough
   clearance and the card's top content (eyebrow, first tile) ends up
   underneath it. Bump the card's top margin by that same ~48px in demo
   mode only; mobile hides the nav entirely so is excluded. */
@media (min-width: 601px) {
  .mj-content-pane.is-demo .app-content-inner.mlj-page-content { margin-top: 56px !important; }
}

/* ICE Record page (In Case of Emergency) — same demo-skip clearance issue as
   above, but this page's header/content wrapper never carried the
   .mlj-page-content class the fix above targets, so the "In Case of
   Emergency" heading rendered underneath the fixed .demo-skip toolbar on
   desktop/tablet in demo mode (2026-07-22). Mobile hides the nav, so excluded. */
@media (min-width: 881px) {
  .ice-page-header.is-demo { margin-top: 56px; }
}
/* Tablet range also has the fixed docked search band (see the tablet header
   block further down) stacked above the demo-skip toolbar, so it needs more
   clearance than desktop. */
@media (min-width: 601px) and (max-width: 880px) {
  .ice-page-header.is-demo { margin-top: 116px; }
}

/* Health Jar screens (About My Health, Conditions, Letters, Medication,
   Surgery, Medical/Care Equipment, Family History) — same demo-skip
   clearance issue as the ICE Record page immediately above, same root cause
   (this page's wrapper never carried .app-flex-outer, the class that
   normally picks up demo-mode clearance elsewhere), same fix shape: give
   the jar icon row (HealthJarNav, shared across all 7 screens — one
   component definition, so this one class fix covers every screen) an
   .is-demo margin-top. Numbers reused as-is from the ICE Record page fix
   since both pages share the identical step-card > MLJAppHeader > flex-row
   wrapper skeleton (2026-08-04, reported by Suke via screenshot). */
@media (min-width: 881px) {
  .health-jar-nav.is-demo { margin-top: 56px; }
}
@media (min-width: 601px) and (max-width: 880px) {
  .health-jar-nav.is-demo { margin-top: 116px; }
}

/* Things Jars nav — same sticky fix, same reason: its own filter bar is already
   coded with sticky top:110px, which only makes sense if this row stays pinned above it.
   FIX (2026-07-20): had the same double-counted offset as Memory Jars nav (see that
   fix above for the full explanation) — top:58 re-used the header-clearance height
   instead of 0 (flush with the already-offset scroll container). Corrected to 0;
   the filter bar's own top:110px already assumed this correct flush position
   (58 header + 52 nav = 110) and needs no change. */
@media (min-width: 601px) {
  .things-jar-nav {
    position: sticky !important;
    top: 0px !important;
    z-index: 25 !important;
  }
}

/* ---------- Demo skip controls ---------- */
.demo-skip {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px 6px;
  background: #E2E4E9 !important;
  border: 1px solid #C8CAD0 !important;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  font-family: var(--font-body);
}
.demo-skip__label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(30,40,70,0.55);
  font-weight: 700;
}
.demo-skip__screen {
  font-size: 12px;
  color: #0F1F3D;
  font-weight: 700;
  font-family: var(--font-mono, ui-monospace, monospace);
  padding: 2px 8px;
  background: none;
  min-width: 80px;
  text-align: center;
}
.demo-skip__btn {
  appearance: none;
  border: none;
  background: #4A4E5A;
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.demo-skip__btn:hover:not(:disabled) {
  background: rgba(0,0,0,0.12);
}
.demo-skip__btn--arrow {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.demo-skip__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.demo-skip__btn--primary {
  background: #1E293B;
  color: #fff;
  height: 28px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
}
.demo-skip__btn--primary:hover:not(:disabled) {
  background: #334155;
  transform: translateY(-1px);
}
.demo-skip__btn--outline {
  background: #fff;
  color: #1E293B;
  border: 1.5px solid #1E293B;
  padding: 0 11px;
  height: 28px;
  display: inline-flex;
  align-items: center;
}
.demo-skip__btn--outline:hover:not(:disabled) {
  background: #f1f5f9;
  color: #C05C00;
  border-color: #C05C00;
  transform: translateY(-1px);
}

/* ---------- Activation Success screen ---------- */
.activation-card {
  padding: 28px 48px;
  text-align: center;
}
.activation-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.activation-hero__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
}
.activation-seal {
  position: relative;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pet-green-500, #6ed09a) 0%, var(--pet-green-900) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.activation-seal__pulse {
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--pet-green-900);
  opacity: 0.5;
  animation: activation-pulse 2.4s ease-out infinite;
}
@keyframes activation-pulse {
  0%   { transform: scale(0.85); opacity: 0.6; }
  70%  { transform: scale(1.15); opacity: 0;  }
  100% { transform: scale(1.15); opacity: 0;  }
}
.activation-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pet-green-900);
  margin: 0 0 12px;
}
.activation-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--mlj-navy-900);
  margin: 0;
}
.activation-title .script {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--mlj-gold-900);
  font-size: 1.1em;
  display: inline-block;
  transform: translateY(2px);
  padding: 0 4px;
}
.activation-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 540px;
  margin: 0 0 32px;
  text-align: left;
}
.activation-lede strong { color: var(--mlj-navy-900); }

.activation-summary {
  background: var(--bg-tint);
  border: 1px solid var(--mlj-gold-500);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  text-align: left;
}
.activation-summary__row {
  display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 10px;
}
.activation-summary__row .l {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--fg-muted); letter-spacing: 0.08em;
}
.activation-summary__row .v {
  font-size: 14px; font-weight: 600; color: var(--mlj-navy-900);
}

.activation-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 36px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(15, 30, 60, 0.04);
  border: 1px solid #949494;
  color: var(--mlj-navy-900);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease-out;
}
.activation-preview-link:hover {
  border-color: var(--mlj-red);
  color: var(--mlj-red);
  background: rgba(213, 0, 0, 0.06);
}

.activation-question {
  margin-top: 8px;
  padding-top: 36px;
  border-top: 1px solid var(--border-soft);
  text-align: center;
}
.activation-question__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  color: var(--mlj-navy-900);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.activation-question__title .script {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--mlj-gold-900);
  font-size: 1.15em;
  display: inline-block;
  transform: translateY(2px);
  padding: 0 2px;
}
.activation-question__sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 540px;
  margin: 0 auto 24px;
}

.activation-paths {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}
.activation-path {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1.5px solid #8B95A1;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 180ms ease-out;
}
.activation-path:hover {
  border-color: var(--mlj-navy-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.activation-path--primary {
  border-color: var(--mlj-orange-500);
  background: linear-gradient(180deg, #fff 0%, rgba(232,121,38,0.04) 100%);
  box-shadow: 0 4px 14px rgba(232, 121, 38, 0.12);
}
.activation-path--primary:hover {
  border-color: var(--mlj-orange-700);
  background: linear-gradient(180deg, #fff 0%, rgba(232,121,38,0.08) 100%);
  box-shadow: 0 8px 20px rgba(232, 121, 38, 0.18);
}
.activation-path__icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--mlj-orange-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.activation-path__icon--ghost {
  background: var(--bg-soft);
  color: var(--mlj-navy-700);
}
.activation-path__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.activation-path__body strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--mlj-navy-900);
  letter-spacing: -0.005em;
}
.activation-path__body span {
  font-size: 13.5px;
  color: var(--fg-muted);
  line-height: 1.45;
}
.activation-path__chev {
  flex-shrink: 0;
  color: var(--fg-subtle);
  transition: transform 160ms ease-out;
}
.activation-path:hover .activation-path__chev {
  transform: translateX(3px);
  color: var(--mlj-navy-900);
}
.activation-path--primary .activation-path__chev { color: var(--mlj-orange-500); }
.activation-path--primary:hover .activation-path__chev { color: var(--mlj-orange-700); }

/* ---------- Emergency responder screen ---------- */
.emergency-stage {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "phone title"
    "phone body";
  gap: 16px 32px;
  align-items: start;
  padding: 28px 28px 0 28px;
}
.emergency-context {
  position: sticky;
  top: 24px;
  color: var(--mlj-navy-900);
  font-family: var(--font-body);
}
.emergency-context__pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(213, 0, 0, 0.08);
  border: 1px solid rgba(213, 0, 0, 0.3);
  color: #c0392b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.emergency-context__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--mlj-navy-900);
  margin: 0 0 14px;
}
.emergency-context__title .script {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--mlj-gold-500);
  font-size: 1.1em;
  display: inline-block;
  transform: translateY(2px);
  padding: 0 2px;
}
.emergency-context p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0 0 16px;
}
.emergency-context__list {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.emergency-context__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--mlj-navy-900);
}
.emergency-context__list li svg {
  flex-shrink: 0;
  color: #166534;
  margin-top: 1px;
  background: #DCFCE7;
  /* Pill F (positive health) border weight and green — see the visual
     compliance table. Padding drops 3px -> 2px so the tick keeps its size
     inside the 20px circle once the 1.5px border is taken out of it. */
  border: 1.5px solid #15803D;
  border-radius: 50%;
  padding: 2px;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
}
/* Desktop and tablet only — mobile (<=600px) keeps the list flush left so it
   does not lose width. Placed after the base rule so source order wins; nothing
   later in this file sets padding on this selector. */
@media (min-width: 601px) {
  .emergency-context__list { padding-left: 10px; }
}
.emergency-context__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.emergency-context__back {
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 14px;
  font-weight: 600;
}
.emergency-context__back:hover { color: var(--mlj-orange-500); }

/* Phone frame */
.emergency-phone {
  width: 360px;
  aspect-ratio: 9 / 19.5;
  margin: 0 auto;
  border-radius: 44px;
  background: #0b0b0e;
  padding: 12px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 0 2px #1a1a20;
}
.emergency-phone__notch {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 26px;
  background: #000;
  border-radius: 999px;
  z-index: 2;
}
.emergency-phone__screen {
  background: #fff;
  border-radius: 34px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: relative;
}
.emergency-phone__screen::-webkit-scrollbar { display: none; }

/* Status bar */
.emergency-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 26px 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--mlj-navy-900);
}
.emergency-statusbar__right {
  display: flex; align-items: center; gap: 5px;
  color: var(--mlj-navy-900);
}
.emergency-battery {
  display: inline-block;
  width: 22px; height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  position: relative;
  margin-left: 2px;
}
.emergency-battery::before {
  content: '';
  position: absolute;
  inset: 1px;
  width: 80%;
  background: currentColor;
  border-radius: 1px;
}
.emergency-battery::after {
  content: '';
  position: absolute;
  right: -3px; top: 2px;
  width: 2px; height: 5px;
  background: currentColor;
  border-radius: 0 2px 2px 0;
}

/* Red emergency banner */
.emergency-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  margin: 6px 12px 0;
  background: linear-gradient(135deg, var(--mlj-red) 0%, #b00000 100%);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(213, 0, 0, 0.35);
}
.emergency-banner__pulse {
  width: 16px; height: 16px;
  position: relative; flex-shrink: 0;
}
.emergency-banner__pulse span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
}
.emergency-banner__pulse span:nth-child(2) {
  background: rgba(255,255,255,0.5);
  animation: emergency-ping 1.6s ease-out infinite;
}
@keyframes emergency-ping {
  0%   { transform: scale(1);    opacity: 0.7; }
  80%  { transform: scale(2.2);  opacity: 0;   }
  100% { transform: scale(2.2);  opacity: 0;   }
}
.emergency-banner__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.emergency-banner__text strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
}
.emergency-banner__text span {
  font-size: 11px;
  opacity: 0.88;
  margin-top: 2px;
}
.emergency-banner__lock {
  flex-shrink: 0;
  opacity: 0.9;
}

/* Identity */
.emergency-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 10px;
}
.emergency-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--mlj-gold-500);
  color: var(--mlj-navy-900);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid var(--mlj-gold-700);
}
.emergency-avatar img { width: 100%; height: 100%; object-fit: cover; }
.emergency-identity__text { flex: 1; min-width: 0; }
.emergency-identity__text h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.15;
  color: var(--mlj-navy-900);
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.emergency-identity__meta {
  font-size: 12px;
  color: var(--fg-muted);
  margin: 0 0 2px;
}
.emergency-identity__meta strong { color: var(--mlj-navy-900); }
.emergency-identity__ref {
  font-size: 11px;
  color: var(--fg-subtle);
  margin: 2px 0 0;
  letter-spacing: 0.04em;
}
.emergency-identity__ref .mono {
  font-family: ui-monospace, monospace;
  color: var(--mlj-navy-700);
  font-weight: 600;
}

/* Critical strip */
.emergency-critical {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  margin: 0 12px;
  background: #949494;
  border-radius: 14px;
  overflow: hidden;
}
.emergency-critical__cell {
  background: #fafbfc;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}
.emergency-critical__cell .l {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--fg-muted);
}
.emergency-critical__cell .v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--mlj-navy-900);
  line-height: 1.2;
}
.emergency-critical__cell--alert {
  background: var(--mlj-red);
}
.emergency-critical__cell--alert .l {
  color: #FFFFFF;
}
.emergency-critical__cell--alert .v {
  color: #FFFFFF;
}
.emergency-critical__cell--safe {
  background: #F0FDF4;
}
.emergency-critical__cell--safe .l {
  color: #15803D;
}
.emergency-critical__cell--safe .v {
  color: #166534;
}
.emergency-critical__cell--conditions {
  background: #EFF6FF;
}
.emergency-critical__cell--conditions .l {
  color: #1D4ED8;
}
.emergency-critical__cell--blood {
  background: #FFF1F2;
}
.emergency-critical__cell--blood .l {
  color: #BE123C;
}

/* Sections */
.emergency-section {
  margin: 0 12px 6px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #949494;
  border-radius: 10px;
}
.emergency-section h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--mlj-navy-900);
  margin: 0 0 5px;
}

/* ICE contact card */
.emergency-ice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  background: var(--bg-tint);
  border: 1px solid var(--mlj-gold-500);
  border-radius: 14px;
}
.emergency-ice__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--mlj-navy-900);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  overflow: hidden;
}
.emergency-ice__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.emergency-ice__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.emergency-ice__body strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--mlj-navy-900);
  line-height: 1.2;
}
.emergency-ice__body span {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
}
.emergency-ice__phone {
  font-family: ui-monospace, monospace;
  font-size: 13px !important;
  color: var(--mlj-navy-700) !important;
  font-weight: 600;
  margin-top: 4px !important;
}
.emergency-ice__call {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--pet-green-900);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 168, 107, 0.4);
  transition: transform 160ms ease-out;
}
.emergency-ice__call:hover { transform: scale(1.06); }
.emergency-ice__call:active { transform: scale(0.95); }

.emergency-notes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.emergency-notes li {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--mlj-navy-900);
  padding-left: 18px;
  position: relative;
}
.emergency-notes li::before {
  content: '';
  position: absolute;
  left: 4px; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mlj-orange-500);
}

.emergency-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px 12px 18px;
  padding: 12px;
  border-top: 1px solid var(--border-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
}

/* responsive */
@media (max-width: 880px) {
  .emergency-stage { grid-template-columns: 1fr !important; grid-template-areas: "title" "phone" "body" !important; gap: 10px !important; }
  .emergency-context { position: static; }
  .activation-card { padding: 28px 22px; }
  .activation-title { font-size: 20px !important; }
  .welcome { grid-template-columns: 1fr !important; }
  .form-grid { grid-template-columns: 1fr !important; }
  /* About You — stack fields one per row, keep Marital/Title side-by-side */
  .dob-wrap { grid-column: 1 !important; }
  .about-gender-field, .about-pronouns-field { grid-column: 1 / -1 !important; }
  /* Gender/Identify As — fill full width on mobile */
  .form-grid--dob-gender { grid-template-columns: 1fr !important; }
  .gender-toggle-wrap { width: 100% !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; }
  .gender-toggle-wrap .seg-btn { width: auto !important; min-width: 0 !important; }
  /* Gender field only has 3 options (Male/Female/Not recorded) — the generic
     4-column rule above (sized for the 4-option pronouns toggle) left an
     empty trailing cell here on mobile (2026-07-22). */
  .about-gender-field .gender-toggle-wrap { grid-template-columns: repeat(3, 1fr) !important; }
  .photo-field { width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; }
  .contact-details-grid { grid-template-columns: 1fr !important; overflow: hidden; }
  .contact-details-grid > .form-field { min-width: 0; width: 100%; box-sizing: border-box; overflow: hidden; }
  .phone-input-wrap { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; }
  .phone-number-input { min-width: 0 !important; }
  .contact-notify-note { width: 100% !important; }
  .form-section-wrap { overflow: hidden !important; }
  .form-grid > .form-field { min-width: 0; width: 100%; box-sizing: border-box; overflow: hidden; }
  /* Catch-all: any input/select/textarea inside the step card must not bust its grid cell */
  .step-card input:not(.phone-number-input),
  .step-card select:not(.phone-flag-select),
  .step-card textarea { max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; }
  .about-email-field { grid-column: 1 !important; }
  .about-lang-grid { grid-template-columns: 1fr !important; }
  .qr-panel { grid-template-columns: 1fr !important; }
  .choice-grid { grid-template-columns: 1fr !important; }
  .storage-grid { grid-template-columns: 1fr !important; }
  .step-card { padding: 28px 22px; }
  .step-card.welcome-card { padding: 0; }
  h1.step-title { font-size: 22px; }
  .welcome h1 { font-size: 36px; }
  /* Top bar — tighter horizontal padding on mobile */
  .top-bar__inner { padding-left: 10px !important; padding-right: 10px !important; }

  /* Release body scroll lock on mobile — activation-mode locks body to 100dvh on desktop */
  body.activation-mode { height: auto !important; overflow-y: auto !important; padding-bottom: 0 !important; }

  /* Progress rail — dots only, no labels from tablet down */
  .progress-dot { font-size: 0; gap: 0; }
  .progress-dot .num { font-size: 12px; width: 24px; height: 24px; }
  .progress-divider { flex: 0 0 14px; }


}

/* ── Tablet only (601-860px): re-pair About You identity fields (First/Last,
   Middle/Previous, Preferred/DOB), Mobile/Email, and Languages rows that the
   880px block above collapses to 1 column. Scoped to .form-grid--identity so
   other .form-grid steps (emergency contacts, allergies, etc.) are untouched. ── */
@media (min-width: 601px) and (max-width: 860px) {
  .form-grid.form-grid--identity { grid-template-columns: 1fr 1fr !important; }
  .form-grid.form-grid--identity .dob-wrap { grid-column: 2 !important; }
  .contact-details-grid { grid-template-columns: 1fr 1fr !important; }
  .contact-details-grid .about-email-field { grid-column: 2 !important; }
  .about-lang-grid { grid-template-columns: 1fr 1fr !important; }

  /* Step 4 (Medical Info) — Allergies + Drug allergies same row. The two
     rows below it (Conditions, Blood type/Medications) already carry their
     own explicit inline grid + full-width span, so they are unaffected. */
  .form-grid.form-grid--allergies { grid-template-columns: 1fr 1fr !important; }

  /* app.html — its About You step bundles First/Last/Middle/Previous/Preferred
     into one grid (form-grid--identity, same fix as activation.html) and
     DOB/Gender/Mobile/Email/Languages into a second grid (form-grid--identity2).
     Every field in the second grid already has an explicit gridColumn:1/2 pin
     (or a full-width 1/-1 span), so restoring 2 columns reproduces its desktop
     pairing automatically — no per-field overrides needed. */
  .form-grid.form-grid--identity2 { grid-template-columns: 1fr 1fr !important; }

  /* Step 5 (Contacts) — First name + Last name same row, Phone + Email same row.
     Same class covers BOTH the primary emergency contact form and the second
     emergency contact form (identical markup), so one rule fixes both. The
     Relationship field after them is already gridColumn:'1 / -1' (full width)
     so it is unaffected either way. */
  .form-grid.form-grid--contacts { grid-template-columns: 1fr 1fr !important; }

  /* Step 1 (child journey) — "Formal legal role" select must match the
     50% column width of the relationship dropdown above it. Both share
     .rel-half-field, but the 880px catch-all block above
     (".step-card select:not(.phone-flag-select) { max-width:100% !important }")
     outranks .rel-half-field's plain max-width:50% for any <select>, which
     is why this one alone was rendering full width. Higher-specificity
     selector needed to win over that catch-all. */
  .step-card select.rel-half-field { max-width: 50% !important; }

  /* Assisted-adult journey — "Select your relationship" (Family) dropdown must stay
     a third-column width, same 880px-catch-all problem as .rel-half-field above. */
  .step-card select.rel-third-field { max-width: 33.333% !important; }

  /* Child journey — organisation summary card ("Manchester Children's
     Services / Edit") half width, matching the fields above it. */
  .step-card .org-summary-card--child { max-width: 50% !important; box-sizing: border-box !important; }

  /* About You / About the child — "Their/Your photo" box was forced to full
     row width (gridColumn:'1 / -1' in JSX, plus the 880px block's
     .photo-field{width:100% !important}). Cap it at half width on tablet;
     the rest of that gender/pronouns/marital/title grid is unchanged since
     only the photo box was reported as wrong. */
  .photo-field { max-width: 50% !important; }

  /* Emergency review screen ("This is what an emergency service will see") —
     restore the desktop 2-column layout (phone in its own left column, title
     + body text in the right column) instead of the stacked/centred mobile
     layout the 880px block above forces. Mobile (<=600px) is untouched. */
  .emergency-stage {
    grid-template-columns: 260px 1fr !important;
    grid-template-areas: "phone title" "phone body" !important;
    gap: 16px 32px !important;
  }
  .emergency-context { position: sticky !important; top: 24px !important; }
}

/* ── iPad portrait: 768px ── */
/* Top padding kept at 68px (not reduced) — the fixed navy top-bar + step-dot rail above still take up ~113px here, unchanged from desktop, so reducing it clipped the white card under the header */
@media (max-width: 768px) {
  .app-shell { padding: 68px 16px 36px; }
  .step-card { padding: 24px 28px; margin-top: 20px; }
  /* Welcome screen's outer wrapper carries both .step-card and .welcome-card — the padding above leaks onto it too since .welcome-card's padding:0 loses the source-order tie. Higher specificity forces it back to 0 so only the inner white panel below shows padding, not a second transparent box around it. */
  .step-card.welcome-card { padding: 0; }
  .welcome-content-panel { padding: 24px 28px; }
  .welcome-heading { font-size: 22px; }
  h1.step-title { font-size: 18px; }
  .brand-lockup .product-name { font-size: 22px; }
  .activation-card { padding: 24px 28px; }
  .activation-title { font-size: 24px; }
}

/* ── Mobile: 600px and below ── */
@media (max-width: 600px) {
  .accom-group-ticket-input { max-width: 100% !important; }
  /* Demo nav — top-centred on mobile, just below header */
  /* Demo bar — full-width compact strip on mobile so all pills are visible */
  .demo-skip {
    top: 25px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    gap: 3px !important;
    padding: 9px 6px 4px !important;
    justify-content: center;
    white-space: nowrap;
  }
  .demo-skip .demo-skip__btn {
    font-size: 10px !important;
    padding: 0 6px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    white-space: nowrap;
  }
  .demo-skip .demo-skip__btn--arrow {
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
    padding: 0 !important;
  }
  .demo-skip .demo-skip__screen {
    min-width: 50px !important;
    font-size: 10px !important;
    padding: 0 3px !important;
  }
  /* Two-line PORTAL buttons → single line on mobile */
  .demo-skip .demo-skip__btn[style*="flex-direction: column"] {
    flex-direction: row !important;
    gap: 3px !important;
    height: 24px !important;
    padding: 0 6px !important;
  }

  /* Password fields — stack */
  .pw-field-row { flex-direction: column !important; }

  /* Welcome-screen steps grid — reverted to side-by-side (image left, steps
     right) on mobile too, matching desktop/tablet. Less vertical height than
     the stacked layout below, which was tried 2026-07-22 and reverted
     2026-07-25 at Suke's request. */
  .welcome-steps-grid { grid-template-columns: 1fr 2fr !important; }

  /* "Are they at the festival with you?" tile — full width on mobile so the
     label and Yes/No toggle sit on one row instead of wrapping onto two
     lines (which inflated the tile's height). The toggle now lands in the
     right-hand half of the row, per the existing space-between layout (2026-07-22). */
  .festival-toggle-tile { width: 100% !important; flex-wrap: nowrap !important; }

  /* Steps grid — single column */
  ul.steps-numbered { grid-template-columns: 1fr; gap: 8px; }
  ul.steps-numbered li { font-size: 13px; align-items: flex-start; }
  ul.steps-numbered li .num { width: 22px; height: 22px; font-size: 11px; flex-shrink: 0; margin-top: 1px; }

  /* QR camera — compact on mobile */
  .qr-camera { width: 72px !important; height: 72px !important; }
  .qr-panel { grid-template-columns: 72px 1fr; gap: 16px; }
  .qr-detected { font-size: 10px; }
  .qr-detected .check { font-size: 20px; }

  /* Reduce excess vertical space */
  .step-eyebrow { padding: 4px 10px; font-size: 10px; margin-bottom: 6px; }
  .step-subtitle { margin-bottom: 8px; }
  .form-grid { grid-template-columns: 1fr !important; margin-top: 4px; gap: 14px 16px; }
  /* btn-row mobile margin handled below */

  /* icebox-tag and title — hide on mobile */
  .brand-lockup .icebox-tag { display: none; }
  .brand-lockup .lockup-text { display: none; }
  .app-shell { padding: 8px 12px 0; }

  /* Top bar — shrink logo text, stack if needed */
  .brand-lockup .product-name { font-size: 16px; }
  .brand-lockup { gap: 8px; }
  .brand-lockup img.logo { width: 35px; }
  .access-btn { padding: 8px 10px; font-size: 12px; gap: 5px; }

  /* Glastonbury event activation — on mobile, put "Create Your ICE Record"
     underneath the festival logo instead of hiding it (which the generic
     .brand-lockup .lockup-text rule above still does for the plain
     activation flow and the main app header) (2026-07-22). */
  body.activation-mode.event-glastonbury .brand-lockup {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }
  body.activation-mode.event-glastonbury .brand-lockup .lockup-text {
    display: flex;
  }

  /* QR scanned row — stack vertically on mobile */
  .qr-scanned-row { flex-direction: column !important; }
  .qr-scanned-row > div[style*="flex:1"],
  .qr-scanned-row > div[style*="flex: 1"] { width: 100%; }

  /* Progress rail — compact circles only */
  .progress-dot { font-size: 0; gap: 0; }
  .progress-dot .num { font-size: 11px; width: 20px; height: 20px; }
  .progress-divider { flex: 0 0 10px; }
  .progress-rail { padding: 5px 0 7px; gap: 6px; }

  /* Cards */
  .step-card { padding: 20px 16px 20px; margin-top: 12px; border-radius: 16px; border-bottom: none; }
  /* Postcode lookup row — prevent Find address button clipping */
  .postcode-lookup-row { overflow: hidden; }
  .postcode-lookup-row .btn-ghost-grey,
  .postcode-lookup-row button[style*="whiteSpace"] { padding-left: 10px !important; padding-right: 10px !important; flex-shrink: 0; }
  /* Phone input — reduce side padding so widget looks like a normal phone field */
  .form-section-wrap { padding-left: 12px !important; padding-right: 12px !important; }
  .phone-flag-select { min-width: 80px !important; max-width: 90px !important; padding: 0 6px !important; }
  .phone-number-input { padding: 10px 10px !important; }
  .step-card--scrollable { clip-path: inset(0 round 16px); }
  .welcome-card { margin: 12px auto 0; border-radius: 16px; }
  .welcome-content-panel { padding: 20px 16px 20px; border-radius: 14px; }

  /* Typography */
  h1.step-title { font-size: 20px; }
  .welcome-heading { font-size: 26px; }
  .step-subtitle { font-size: 14px; }
  .activation-title { font-size: 20px !important; }
  .activation-card { padding: 10px 16px 16px; }

  /* Buttons */
  .btn { font-size: 14px; padding: 12px 18px; gap: 7px; }
  .btn-row { flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; }
  .btn-row .right { flex-direction: row; gap: 8px; width: auto; }
  .btn-row .right .btn { width: auto; font-size: 13px; padding: 9px 14px; }
  .btn-row > .btn { width: auto; font-size: 13px; padding: 9px 14px; }

  /* Photo uploader */
  .photo-uploader { flex-direction: column; align-items: flex-start; gap: 14px; }
  .photo-thumb { width: 72px; height: 72px; }

  /* QR step */
  .qr-panel { grid-template-columns: 1fr; }
  .qr-camera { width: 120px; height: 120px; }

  /* Choice / household grid */
  .choice-grid { grid-template-columns: 1fr; }
  .choice-card:not(.choice-card--solo) .illo img { height: 136px !important; }

  /* Storage grid */
  .storage-grid { grid-template-columns: 1fr; }

  /* Emergency stage */
  .emergency-stage { grid-template-columns: 1fr; grid-template-areas: "title" "phone" "body"; }
  .emergency-context { position: static; }

  /* Welcome screen illustration */
  .welcome-illo { display: none; }

  /* Dashboard — navy header */
  .step-card > div[style*="navy"] { padding: 16px !important; }

  /* Welcome screen — bottom row (internet req + button) */
  .welcome-bottom-row { flex-direction: column; align-items: stretch; }
  .welcome-bottom-row .welcome-cta-btn { align-self: flex-end; margin-left: 0; }

  /* Done / activation screens */
  .done-screen p { font-size: 15px; }
  .welcome-footer-note { font-size: 12px; }

  /* Summary grid — single column */
  .summary-grid { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  .summary-grid .row { flex-wrap: wrap; }
  .summary-grid .row .v { white-space: normal; }

  /* Activation success — hero green band */
  .activation-hero-band { padding: 16px !important; gap: 16px !important; }

  /* Activation success — 2-col summary boxes → single column */
  .activation-summary-grid { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Password row — transparent label spacer hidden; button full-width */
  .pw-field-row { flex-direction: column !important; gap: 12px !important; }
  .pw-field-row .pw-label-spacer { display: none !important; }
  .pw-field-row .pw-submit-btn { width: 100%; justify-content: center; }

  /* QR sticker placement grid → single column */
  .activation-placement-grid { grid-template-columns: 1fr !important; }

  /* Emergency screen medications + allergies grid → single column */
  .emergency-meds-grid { grid-template-columns: 1fr !important; }
}

/* ── Small phones: 380px and below ── */
@media (max-width: 380px) {
  .app-shell { padding: 6px 8px 24px; }
  .brand-lockup .product-name { font-size: 14px; }
  .brand-lockup img.logo { width: 29px; }
  .progress-dot .num { font-size: 10px; width: 18px; height: 18px; }
  .progress-divider { flex: 0 0 8px; }
  .progress-rail { gap: 4px; }
  h1.step-title { font-size: 18px; }
  .welcome-heading { font-size: 22px; }
  .btn { font-size: 13px; padding: 11px 14px; }
  .step-card { padding: 16px 12px; }
  .welcome-content-panel { padding: 16px 12px; }
  .demo-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  pointer-events: none;
}
.demo-bar .access-btn {
  padding: 6px 10px;
  min-width: 36px;
  justify-content: center;
  pointer-events: auto;
}
.access-toggles { gap: 6px; }
}



/* ── Select option highlight — override browser blue ──────────────────────── */
select option:checked,
select option:hover {
  background: #E8920A !important;
  color: #fff !important;
}

/* ── Focus styles — orange ring + pale orange fill ────────────────────────── */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none !important;
  border-color: #E8920A !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(232, 146, 10, 0.15) !important;
}

@media (max-width: 600px) {
  .cond-card-grid { grid-template-columns: 1fr !important; }
}
input[type="date"] {
  font-family: inherit;
  font-size: inherit;
  min-width: 160px;
  accent-color: #EA580C;
}
input[type="date"] {
  accent-color: #8B95A1;
}
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--fg-subtle);
}

  /* ═══════════════════════════════════════════════════════
     MOBILE APP LAYOUT — phone-first fixes (≤600px)
     These use !important to override JSX inline styles
  ═══════════════════════════════════════════════════════ */

  /* ── Fixed sidebar — stays put on scroll ─────────────────────── */
  .app-sidebar {
    position: fixed !important;
    top: 58px;
    left: 0;
    height: calc(100vh - 58px);
    z-index: 50;
    padding-top: 8px;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .app-sidebar::-webkit-scrollbar { display: none; }
  .app-flex-outer {
    margin-left: 72px;
  }

  /* Sidebar inner div — desktop/tablet: tighten top padding so DASHBOARD icon
     aligns with jar nav icons at the top of the content area */
  @media (min-width: 601px) {
    .app-sidebar > div { padding-top: 4px !important; }
  }

  /* Sidebar hidden on mobile — see main 600px block below */
  @media (max-width: 600px) {

    /* Content inner — reduce SIDE padding on mobile only (was overriding all four
       sides, which clobbered per-page top/bottom padding the same way the 880px
       version did — eg a "page title" + "cards" wrapper pair designed with a small
       14px gap between them would get forced to a much bigger one instead. Bottom
       clearance for the mobile tab bar is already handled by the dedicated
       `.app-content-inner { padding-bottom: 80px !important; }` rule further down.) */
    .app-content-inner {
      padding-left: 12px !important;
      padding-right: 12px !important;
      max-width: 100% !important;
    }

    /* All multi-column fr-based card grids → single column on mobile
       React renders camelCase → kebab-case in the DOM */
    .app-flex-outer div[style*="grid-template-columns: 1fr 1fr"],
    .app-flex-outer div[style*="grid-template-columns:1fr 1fr"],
    .app-flex-outer div[style*="grid-template-columns: 1fr 1fr 1fr"],
    .app-flex-outer div[style*="grid-template-columns:1fr 1fr 1fr"],
    .app-flex-outer div[style*="grid-template-columns: 2fr 1fr"],
    .app-flex-outer div[style*="grid-template-columns:2fr 1fr"],
    .app-flex-outer div[style*="grid-template-columns: 1fr 2fr"],
    .app-flex-outer div[style*="grid-template-columns:1fr 2fr"],
    .app-flex-outer div[style*="grid-template-columns: 3fr 1fr"],
    .app-flex-outer div[style*="grid-template-columns:3fr 1fr"],
    .app-flex-outer div[style*="grid-template-columns: 1fr 3fr"],
    .app-flex-outer div[style*="grid-template-columns:1fr 3fr"],
    .app-flex-outer div[style*="grid-template-columns: repeat(2"],
    .app-flex-outer div[style*="grid-template-columns:repeat(2"],
    .app-flex-outer div[style*="grid-template-columns: repeat(3"],
    .app-flex-outer div[style*="grid-template-columns:repeat(3"],
    .app-flex-outer div[style*="grid-template-columns: repeat(4"],
    .app-flex-outer div[style*="grid-template-columns:repeat(4"] {
      grid-template-columns: 1fr !important;
    }

    /* AboutMe / ICE / health jar screens use .step-card not .app-flex-outer — same rule */
    .step-card div[style*="grid-template-columns: 1fr 1fr"],
    .step-card div[style*="grid-template-columns:1fr 1fr"],
    .step-card div[style*="grid-template-columns: 1fr 1fr 1fr"],
    .step-card div[style*="grid-template-columns:1fr 1fr 1fr"],
    .step-card div[style*="grid-template-columns: repeat(2,1fr)"],
    .step-card div[style*="grid-template-columns:repeat(2,1fr)"],
    .step-card div[style*="grid-template-columns: repeat(3,1fr)"],
    .step-card div[style*="grid-template-columns:repeat(3,1fr)"],
    .step-card div[style*="grid-template-columns: repeat(4,1fr)"],
    .step-card div[style*="grid-template-columns:repeat(4,1fr)"] {
      grid-template-columns: 1fr !important;
    }

    /* About My Health tiles container — 5px side padding on mobile */
    .step-card div[style*="0 36px 32px"] {
      padding-left: 5px !important;
      padding-right: 5px !important;
      padding-top: 0 !important;
    }

    /* About My Health — title-to-cards gap on mobile (2026-07-20). Reported
       as a much bigger gap than the 14px/0px the inline styles specify
       between the "About My Health" heading and the first card below it.
       Force both sides down directly via the exact inline-style match so
       this wins regardless of whatever else is adding the extra space —
       scoped to this page's own unique inline-style strings only, so no
       other page is affected. */
    .step-card div[style*="padding: 20px 36px 14px"] {
      padding-bottom: 4px !important;
    }

    /* Things Jars — "Add Thing" button (2026-07-20). Was sitting in the
       filter bar row, which caused it to wrap awkwardly under the filters
       on mobile. Moved to sit RHS-justified on the same line as the page
       title instead (icon-only there — see .tj-header-add-btn in app.html);
       the labelled filter-bar copy is hidden here so it isn't duplicated.
       Desktop/tablet keep the original filter-bar button, unaffected. */
    .tj-header-add-btn { display: flex !important; }
    .tj-filterbar-add-btn { display: none !important; }

    /* Dashboard tiles — single column */
    .dashboard-tiles { grid-template-columns: 1fr !important; }

    /* Page header row — stack on very small screens */
    .app-content-inner > div[style*="justifyContent:'space-between'"] {
      flex-wrap: wrap;
      gap: 12px;
    }

    /* Jar tab navigation — scroll horizontally */
    div[style*="borderBottom:'3px solid'"] {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    /* Modal widths — full screen on mobile */
    div[style*="maxWidth:'520px'"],
    div[style*="maxWidth: '520px'"],
    div[style*="maxWidth:'760px'"],
    div[style*="maxWidth: '760px'"] {
      max-width: calc(100vw - 24px) !important;
      margin: 12px !important;
    }

    /* Header: shrink search bar */
    div[style*="width:'260px'"][style*="position:'relative'"] {
      width: 120px !important;
    }

    /* Wards page search bar — was capped at maxWidth:420px (a desktop/tablet
       choice) which left it narrower than the page/cards on mobile. Let it
       fill the full width there instead. */
    .wards-search-wrap { max-width: 100% !important; }

    /* Remembrance Wall search bar — same fix, same reason. */
    .rw-search-wrap { max-width: 100% !important; }

    /* Header: hide "Life profile" label, keep avatar */
    .mlj-header-name { display: none !important; }

    /* Dashboard tile grid — reduce side padding from 36px to 10px on mobile */
    .dashboard-tiles { padding-left: 10px !important; padding-right: 10px !important; padding-top: 12px !important; }
    /* Suggestion strip — match tile outer padding on mobile */
    .suggestion-strip-outer { padding-left: 10px !important; padding-right: 10px !important; }
    .suggestion-strip { width: 100% !important; }

    /* ── Jar nav strips — mobile grid layouts ───────────────────────────────── */
    /* All .jar-nav strips: push below demo bar, tighten side padding */
    .jar-nav {
      padding-top: 36px !important;
      padding-left: 6px !important;
      padding-right: 6px !important;
      overflow-x: hidden !important;
    }
    /* Jar images: further 20% smaller on mobile (46×48 → 37×38) */
    .jar-nav div[style*="width: 58px"] { width: 37px !important; height: 38px !important; }
    .jar-nav img[style*="width: 58px"] { width: 37px !important; height: 38px !important; }
    .jar-nav div[style*="padding: 4px 5px"] { padding: 3px 3px !important; }
    /* Inner row: reset flex for grid, tighten gap */
    .jar-nav > div {
      min-width: unset !important;
      gap: 6px !important;
      justify-content: center !important;
    }
    /* Grid items: keep column layout */
    .jar-nav > div > div {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
    }
    /* Health (7): 4+3 */
    .health-jar-nav > div {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
    }
    /* Password (8): 4+4 */
    .passwords-jar-nav > div {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
    }
    /* Memory (5): all in one row */
    .memory-jar-nav > div {
      display: grid !important;
      grid-template-columns: repeat(5, 1fr) !important;
    }
    /* Things (6): 3+3 */
    .things-jar-nav > div {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
    }
    /* Message (4): single row */
    .message-jar-nav > div {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Memory Jars page — stack summary on top, tiles 2-col below on mobile */
    .app-flex-outer div[style*="padding: 16px 20px 24px"][style*="gap: 20px"] {
      flex-direction: column !important;
    }
    /* Memory Jars left summary panel — full width on mobile */
    .app-flex-outer div[style*="width: 294px"][style*="flex-shrink: 0"] {
      width: 100% !important;
    }
    /* Memory tile list — one per row on mobile */
    .app-flex-outer div[style*="padding: 16px 20px 24px"][style*="gap: 20px"] > div[style*="min-width: 0"] > div[style*="flex-direction: column"][style*="gap: 10px"] {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }

    /* Memory Jars filter/search bar — search field moves to its own row on top, mobile only */
    .mj-filter-bar {
      flex-wrap: wrap !important;
      /* FIX (2026-07-20): inline style ships top:110px (58px header + 52px
         nav row), but .memory-jar-nav is hidden entirely on mobile
         (display:none — see the jar-nav mobile-hide rule), so there's no
         52px of nav above this to clear inside .mj-content-pane (this bar's
         actual sticky scroll container). Sticky's `top` still forced the
         bar down to that stale 110px even at rest, same double-count/stale-
         offset bug as the memory-jar-nav fix above — creating a visible gap
         between the title and this bar, AND, since sticky/relative offsets
         don't change where FOLLOWING siblings are laid out, made the
         two-column content below sit as if this bar were still at its
         un-shifted natural position, so it rendered partly underneath the
         bar. Corrected to flush with the top of the already-offset
         .mj-content-pane, same as the nav row. */
      top: 0 !important;
    }
    .mj-search-wrap {
      flex-basis: 100% !important;
      width: 100% !important;
      margin-bottom: 8px !important;
    }

    /* Add Memory button — same mobile move as Things Jars (2026-07-20): RHS-
       justified icon-only button on the title row instead of the filter bar. */
    .mj-header-add-btn { display: flex !important; }
    .mj-filterbar-add-btn { display: none !important; }

  /* Page title font reduction (26px → 24px, mobile only) */
  .app-flex-outer h1[style*="font-size: 26px"],
  .app-flex-outer h2[style*="font-size: 26px"],
  .step-card h1[style*="font-size: 26px"],
  .step-card h2[style*="font-size: 26px"],
  .dash-content-row h1[style*="font-size: 26px"],
  .dash-content-row h2[style*="font-size: 26px"] {
    font-size: 24px !important;
  }
}

/* Memory Jars — Add/Edit Memory modal (2026-07-26): the Jar+Tag row and the
   Secret Keeper+Time Lock row are each already coded as a 1fr 1fr grid, but
   the generic mobile rule above (.app-flex-outer div[style*="grid-template-
   columns: 1fr 1fr"]) collapses them to a single stacked column on every
   phone ≤600px, same as it would any other 2-column grid. On a "large
   phone" (381-600px) there's room to keep these two side by side instead —
   only small phones (≤380px) need the full single-column stack. Both rows
   in both modals now carry .mj-addmemory-2col so they can be restored here
   without touching every other 2-column grid the generic rule still needs
   to collapse. Same specificity (class + type + class = 0,2,1) as the
   generic rule, so this wins in the 381-600px range purely by appearing
   later in the file. */
@media (max-width: 600px) and (min-width: 381px) {
  .app-flex-outer div.mj-addmemory-2col {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Remembrance Wall legacy/memorial card grid — was a flat 4-column grid that
   the generic mobile rule would collapse straight to 1 column everywhere
   under 600px. Two-tier instead: still readable at "large mobile" width
   (2 up), only drops to 1 column on small phones.
   NOTE: the inline style '1fr 1fr 1fr 1fr' still contains the substring
   "1fr 1fr", so the generic .app-flex-outer div[style*="grid-template-columns:
   1fr 1fr"] rule above (specificity 0,2,1) also matches this div and was
   winning over a plain .rw-legacy-grid class rule (0,1,0). Doubling the class
   here bumps specificity to 0,3,1 so this always wins regardless of source
   order. */
@media (max-width: 600px) and (min-width: 381px) {
  .app-flex-outer div.rw-legacy-grid.rw-legacy-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 380px) {
  .app-flex-outer div.rw-legacy-grid.rw-legacy-grid { grid-template-columns: 1fr !important; }
}

  /* Medium screens (601–880px) — side padding only (sidebar now becomes bottom tab bar, see 880px nav block below).
     Was overriding ALL four sides (padding: 20px 24px 40px !important), which clobbered each page's own
     carefully-tuned top/bottom padding — eg on Health Jar pages, a "page title" wrapper and its "cards"
     wrapper both use this same class with 0-14px of padding between them by design, but this rule was
     forcing 40px bottom + 20px top onto them regardless, producing a ~60px dead gap between the heading
     and the content below it. Narrowed to just left/right, matching the stated "side padding" intent. */
  @media (max-width: 880px) {
    .app-content-inner {
      padding-left: 24px !important;
      padding-right: 24px !important;
    }

    /* Things Jars filter/search bar — same overflow bug as Memory Jars had
       (search + 3 selects + Add button in one unwrapped row), but this one
       breaks at tablet width too, so it's fixed at both tablet and mobile here. */
    .tj-filter-bar {
      flex-wrap: wrap !important;
    }
    .tj-search-wrap {
      flex-basis: 100% !important;
      width: 100% !important;
      margin-bottom: 8px !important;
    }
    /* Add Thing button — RHS-justify on tablet (2026-07-20). Once the search
       bar wraps to its own line (rule above), the filters + button wrap to a
       second line and pack to the left by default, leaving the button
       stranded with empty space after it. Push it to the far right of that
       line instead. (Mobile already hides this button entirely via
       .tj-filterbar-add-btn { display: none } — see the 600px block — so
       this is harmless there too.) */
    .tj-filterbar-add-btn {
      margin-left: auto !important;
    }
  }

/* Things Jars filter/search bar — mobile-only sticky top fix (2026-07-20,
   same bug and same fix as Memory Jars' .mj-filter-bar above). Inline style
   ships top:110px (58px header + 52px nav row), but .things-jar-nav is
   hidden entirely below 600px (display:none), so there's no 52px of nav
   left to clear inside .app-flex-outer's content pane. Scoped to its own
   600px-only block rather than folded into the shared 880px block above,
   because .things-jar-nav is NOT hidden at tablet width (601-880px) — the
   original top:110px is still correct there. */
@media (max-width: 600px) {
  .tj-filter-bar { top: 0 !important; }
}

/* Things Jar "thing" preview (2026-07-20) — the detail panel (image/document +
   info) sits in a sticky right-hand column next to the item list on desktop
   and tablet (2-column grid). Below 600px the generic multi-column collapse
   rule forces that grid to 1 column, which stacked the panel under the WHOLE
   list rather than under whichever tile was tapped — the preview always
   looked like it belonged to the last item. Two variants now exist in the
   JSX (see .tj-desktop-preview / .tj-mobile-inline-preview in app.html's
   ThingsJarPage): show only one per breakpoint. */
@media (max-width: 600px) {
  .tj-desktop-preview { display: none !important; }
}
@media (min-width: 601px) {
  .tj-mobile-inline-preview { display: none !important; }
}

/* Health Jar screens (ICE Record, About My Health, Conditions, Scans, Medication,
   Surgery, Equipment, Family) — the sidebar+content row was hardcoded to
   min-height: 600px instead of filling the real viewport, so on tall screens
   (tablets especially) the grey/white background ran out before reaching the
   bottom nav, exposing the dark page backdrop. Match the viewport-relative
   height already used by app-flex-outer screens (eg Dashboard). */
.step-card > div[style*="display: flex; min-height: 600px"] {
  min-height: calc(100vh - 116px) !important;
}

@media (max-width: 600px) {
  body { background: #fff; }
  .app-shell { padding: 0; overflow-x: hidden; }
  .step-card { overflow-x: hidden; }
  .welcome-card {
    margin: 12px 0 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    max-width: 100%;
    overflow-x: hidden;
  }
  .form-grid { grid-template-columns: 1fr !important; margin-top: 4px; gap: 14px 16px; }
  .welcome-hint-text { font-size: 12px !important; line-height: 1.4; margin-bottom: 6px; }
  /* Keep orange card styling — only reduce margin-bottom */
  .form-section-wrap { margin-bottom: 12px !important; }
  /* Phone field — prevent flag-select overflowing on narrow screens */
  .phone-flag-select { min-width: 80px !important; max-width: 100px !important; }
  .phone-input-wrap { overflow: hidden !important; }
  .step-card *, .welcome-card * { max-width: 100%; box-sizing: border-box; }
}

/* ── Mobile-only: done screen, review screen, emergency stage ── */
@media (max-width: 600px) {
  /* Done screen — push seal below fixed nav+rail (~100px combined) */
  .done-screen { padding-top: 56px !important; }

  /* Emergency review screen — reduce outer padding, fix phone scale & centering */
  .emergency-stage { padding: 12px 16px 0 !important; }
  /* Extra breathing room above the "Here's a preview..." body text, below the phone mockup */
  .emergency-context-body { margin-top: 20px !important; }

  /* Activated screen — navy fill under the fixed TopBar.
     On desktop/tablet, .app-shell reserves 68px of top padding, which exactly
     cancels this div's marginTop:-68px/paddingTop:68px, so it fills flush
     behind the TopBar and the green tile sits 10px below it (marginBottom).
     On mobile, body.activation-mode forces .app-shell padding-top down to
     10px (see ~line 3646), so the same -68px margin over-pulls this div by
     58px, making it end WAY above the TopBar's real 68px bottom edge — the
     green tile then renders mostly hidden behind the opaque TopBar with
     ~0px visible gap, no matter what marginBottom is set to. Re-anchor the
     margin to the actual 10px reserved here so the div's bottom lines up
     with the TopBar's bottom edge again (10 - 13 + 71 = 68), restoring the
     intended 10px white gap above the green tile. */
  .activation-navy-fill { margin-top: -13px !important; }
  .emergency-phone-wrap > div {
    transform: scale(0.65) !important;
    transform-origin: top center !important;
    margin-bottom: -273px !important;
    margin-left: 0 !important;
    margin-top: 8px !important;
  }
}

.suggestion-strip { width: 75%; }
@media (max-width: 900px) { .suggestion-strip { width: 100% !important; } }

/* ── Safari: normalise all input/textarea/select heights ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
textarea {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

/* ── Standard severity-scale radio (Disability grids etc.) — shared across
   app.html, activation.html and activation-event.html so all three render
   identically instead of each carrying its own slightly different inline
   style (see MLJ - Decisions.md, 2026-08-01).
   NOTE 2026-08-02: qualified with the `input` type selector (not just the
   bare class) so its specificity (0,1,1) ties `.form-field input`
   (0,1,1) — the disability grids sit inside a `.form-field` wrapper, and a
   bare `.mlj-severity-radio` class (0,1,0) was silently losing to that
   wrapper rule and rendering as a plain grey rounded box instead of a
   native orange radio, regardless of which rule appeared later in the
   file. ── */
input.mlj-severity-radio {
  width: 17px;
  height: 17px;
  accent-color: #EA580C;
  cursor: pointer;
  -webkit-appearance: radio;
  appearance: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
/* ── Column-heading text for severity-scale grids (None/Mild/Moderate/Severe/
   Debilitating) — shared across app.html, activation.html and
   activation-event.html, both the inline "About You" grid and the edit
   modal, so headings render identically instead of each carrying its own
   one-off inline style (see MLJ - Decisions.md, 2026-08-01). ── */
.mlj-severity-col-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--mlj-navy-900);
  letter-spacing: 0.01em;
}
select:not(.phone-flag-select) {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B95A1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
}



/* ============================================================
   SECTION 1b — SHARED LOADER & KEYFRAMES (app.html)
   ============================================================ */


@keyframes mlj-spin{to{transform:rotate(360deg)}}
.mlj-loader-spinner{width:27px;height:27px;border:3px solid #E2E8F0;border-top-color:#EA580C;border-radius:50%;animation:mlj-spin 0.8s linear infinite;margin:0 auto}
.mlj-lbg{position:fixed;inset:0;z-index:9999;background:#152332 url('Images%20-%20Ice%20Jar/mylifejars%20app/mylifejars-background.png') center/cover no-repeat;display:flex;align-items:center;justify-content:center;transition:opacity 0.5s ease}
.mlj-lcard{background:#fff;border-radius:16px;padding:40px 48px 44px;text-align:center;max-width:380px;width:90%;box-shadow:0 4px 24px rgba(0,0,0,0.13);border:1.5px solid #C9A84C}
@media(max-width:768px){
  .mlj-lcard{padding:32px 28px 36px;max-width:320px}
}




/* ============================================================
   SECTION 1c — PILL BUTTON STANDARDS
   ============================================================
   Base pill + colour variants. All interactive pill/chip buttons
   should use .pill + one colour modifier. Status/display-only
   chips may use inline styles where unique.
   ============================================================ */

/* Base pill — applies sizing, shape, cursor */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 20px;
  border: 1.5px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
.pill:disabled { opacity: 0.45; cursor: not-allowed; }

/* Orange action pill — upload, primary actions */
.pill-orange {
  background: #FFF3E0;
  border-color: #E8920A;
  color: #B45309;
}
.pill-orange:hover { background: #FFE0B2; }

/* Grey skip/cancel pill — secondary/defer actions */
.pill-grey {
  background: #E2E8F0;
  border-color: #8B95A1;
  color: #334155;
}
.pill-grey:hover { background: #CBD5E1; }

/* Muted pill — lighter skip/later, minor actions */
.pill-muted {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #475569;
}
.pill-muted:hover { background: #E2E8F0; }

/* ── Record-tile tags (2026-08-15) ────────────────────────────────────────────
   The small tags along the top of a health record tile: body part, severity,
   how often, side of family, where the record came from.

   ⚠ THESE ARE NOT THE `.pill-*` FAMILY ABOVE. Those are interactive — the
   filter buttons across the top of a jar — and carry :hover and :disabled.
   A tile tag is a label, not a control, and giving it hover states would say
   it can be clicked. Different job, different class.

   ⚠ THE VALUES ARE NOT NEW. They are lifted verbatim from the `TAG_BASE` /
   `TAG_NEUTRAL` / `TAG_WARM` / `TAG_ALERT` / `TAG_GOOD` consts that already
   exist inline in app.html — declared TWICE, once in StepConditionsPage and
   again in StepFamilyPage, which is exactly the drift this file is meant to
   prevent. Surgery & Treatments now uses these classes; the other health tiles
   still carry the local consts and should be moved across.

   ⚠ `--neutral` is deliberately LIGHTER than `.pill-grey` (Suke, 2026-08-12):
   `#F1F5F9` on `#CBD5E1`, not `#E2E8F0` on `#94A3B8`. A neutral tag sitting
   beside a red or a warm one has to RECEDE. At style A's weight it reads as
   another status rather than as the absence of one.

   ⚠ styles.css is COPIED, not built — run `SYNC STYLES.cmd` (or sync-styles.py)
   after editing, or copy to ice-b2b-portals by hand and md5sum both. */
.mlj-tag {
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 7px;
  display: inline-block;
  white-space: nowrap;
}
.mlj-tag--neutral { background: #F1F5F9; border: 1.5px solid #CBD5E1; color: #475569; }
.mlj-tag--warm    { background: #FFF7ED; border: 1.5px solid #C04A00; color: #C04A00; }
.mlj-tag--alert   { background: #FEF2F2; border: 1.5px solid #B91C1C; color: #B91C1C; }
.mlj-tag--good    { background: #F0FDF4; border: 1.5px solid #15803D; color: #15803D; }

/* ── .mlj-example ────────────────────────────────────────────────────────────
   The italic "Example: " that prefixes the title of a seeded demo record.

   ⚠ NO font-size. It INHERITS the title's, which is the whole point: at the
   title's size in a lighter weight it reads as part of the title, and at a
   smaller size it reads as a label stuck on the front. The Things jar sets
   14px inline because its own title is 14px, not because the prefix wants to
   be small.

   Values are the Things jar's, unchanged (Suke, 2026-08-15) — this existed as
   the same three declarations written inline in more than twenty places, so
   there was nothing to reconcile, only somewhere to put it.

   ⚠ styles.css is COPIED, not built — run `SYNC STYLES.cmd` (or sync-styles.py)
   after editing, or copy to ice-b2b-portals by hand and md5sum both. */
.mlj-example {
  font-style: italic;
  font-weight: 400;
  color: #94A3B8;
  /* ⚠ Never shouted. Four of these sit inside uppercase eyebrow rows and
     each had to say textTransform:'none' inline to escape it. */
  text-transform: none;
}

/* Solid grey pill — confirmed/saved state labels in org portal */
.pill-solid-grey {
  background: var(--slate-grey);
  border-color: var(--slate-grey);
  color: #fff;
  padding: 3px 10px 3px 12px;
}

/* Toggle pills — grey variant (country picker, general selectors) */
/* Use with .active class toggled by JS state */
.pill-toggle {
  background: #fff;
  border-color: #CBD5E1;
  color: var(--mlj-navy-900);
}
.pill-toggle.active {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #475569;
  font-weight: 600;
}

/* Toggle pills — orange variant (relationship/boolean toggles) */
/* Off = white with grey border; On = solid orange */
.pill-toggle-orange {
  background: #fff;
  border-color: #8B95A1;
  color: #64748B;
}
.pill-toggle-orange.active {
  background: #E8920A;
  border-color: #E8920A;
  color: #fff;
}

/* ============================================================
   SECTION 2 — ACTIVATION.HTML (full block)
   ============================================================ */

/* Activation-specific rules not covered by shared core */

body.activation-mode {
  background: #FAF6F1;
  height: 100dvh;
  overflow: hidden;
  color: var(--fg-default);
}


/* ====================================================
   EVENT THEME OVERRIDES — activation wizard, per festival
   Same pattern as PRODUCT THEME OVERRIDES above: apply by
   adding an event class alongside activation-mode on <body>:
     <body class="activation-mode event-glastonbury">
   Add one block per future event, overriding only what that
   event's brand actually needs — usually the page background
   and the display (heading) font. Everything else (buttons,
   cards, form fields) still reads as My LifeJars underneath.
   ==================================================== */
body.activation-mode.event-glastonbury {
  --font-display: 'Oswald', 'Raleway', sans-serif;
  background: #17181c;
}
@media (max-width: 600px) {
  body.activation-mode.event-glastonbury {
    background: #17181c;
  }
}
/* Nav (top bar + progress rail) matches the page background instead of the
   default navy, so the whole header reads as one dark surface. */
body.activation-mode.event-glastonbury .top-bar,
body.activation-mode.event-glastonbury .progress-rail {
  background: #17181c;
}
/* Logo hidden for this event — the text lockup ("Create Your ICE Record ·
   For Glastonbury 2027") carries the branding on its own. */
body.activation-mode.event-glastonbury .brand-lockup img {
  display: none;
}
/* The phone mockup shows what an emergency service actually sees in the real
   My LifeJars app — which never uses the event's Oswald theming. Reset back
   to the standard display font inside it so it matches activation.html's
   phone preview exactly, regardless of which event flavour built it (2026-07-22). */
body.activation-mode.event-glastonbury .emergency-phone {
  --font-display: 'Raleway', system-ui, -apple-system, sans-serif;
}

@media (max-width: 600px) {
  body.activation-mode .app-shell:not(.app-shell--dashboard) {
    padding: 10px 0 0;
  }
  body.activation-mode {
    background: #fff;
  }
  body.activation-mode .step-eyebrow {
    margin-top: 24px;
    color: #C04A00;
    display: block;
    text-align: left;
    padding-left: 0;
    margin-left: 0;
  }
  .welcome-cta-btn {
    margin-left: auto !important;
    margin-top: 8px;
  }
}

#inet-info-wrap.open #inet-info-box { display: block !important; }

/* Mobile: tip-popover (responder tip etc) — cap width so it doesn't overflow */
@media (max-width: 600px) {
  .tip-popover { width: calc(100vw - 48px) !important; max-width: 280px !important; }
}

/* Mobile: reposition inet-info-box as centred fixed panel */
@media (max-width: 600px) {
  #inet-info-box {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    bottom: auto !important;
    width: calc(100vw - 48px) !important;
    max-width: 320px !important;
    z-index: 9999 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.20) !important;
  }
}

.top-bar__inner {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 6px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
}

.progress-rail-spacer {
  height: 45px;
  flex-shrink: 0;
}

.ec-notify-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .ec-notify-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet: pin both activation-success tile rows (ICE Code/Contact summary + EC1/EC2 notify)
   explicitly to 2 columns — !important needed because .activation-summary-grid's columns
   are set via inline style, which otherwise beats a plain class rule. */
@media (min-width: 601px) and (max-width: 860px) {
  .activation-summary-grid { grid-template-columns: 1fr 1fr !important; gap: 0 16px !important; }
  .ec-notify-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

.step-card--scrollable {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100dvh - 153px);
  overscroll-behavior: contain;
  clip-path: inset(0 round 28px);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.step-card--scrollable::-webkit-scrollbar { width: 6px; }

.step-card--scrollable::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }

.step-card--scrollable::-webkit-scrollbar-track { background: transparent; }

.step-card--scrollable::after {
  content: '';
  display: block;
  height: 20px;
  flex-shrink: 0;
}

.mlj-text-link {
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  transition: color 120ms ease;
}

.mlj-text-link:hover { color: var(--mlj-orange, #E8920A); }

.contact-notify-note { width: 75%; }

@media (min-width: 581px) { .form-grid--contacts { align-items: start; } }

.choice-card:not(.choice-card--solo) .illo img { height: 113px; }

@media (min-width: 601px) and (max-width: 880px) {
  .choice-card:not(.choice-card--solo) .illo img { height: 136px !important; }
  /* Grow the illo container to match, so the taller image is contained within the tile instead of overflowing past its top edge */
  .choice-card:not(.choice-card--solo) .illo { height: 136px; }
}

button[style*="borderRadius: 50%"],
button[style*="border-radius: 50%"] {
  -webkit-appearance: none;
  appearance: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--mlj-navy-900) !important;
}

.rel-select-wrap select {
  height: 48px;
  box-sizing: border-box;
  background-color: #fff !important;
  border: 1.5px solid #8B95A1 !important;
  border-radius: 8px !important;
  -webkit-appearance: auto;
  appearance: auto;
}

.emergency-phone-wrap {
  grid-area: phone;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.emergency-context-title {
  grid-area: title;
  color: var(--mlj-navy-900);
  font-family: var(--font-body);
}

.emergency-context-body {
  grid-area: body;
}

@media (min-width: 881px) {
  .choice-card:not(.choice-card--solo) .illo img { height: 255px !important; }
  .about-gender-field { grid-column: 1; }
  .about-pronouns-field { grid-column: 2; }
  .title-prefix-field { grid-column: 2; }
}

@media (max-width: 375px) {
  .app-shell { padding: 6px 8px 24px; }
  .gender-toggle-wrap button { padding: 8px 4px !important; font-size: 12px !important; }
  .brand-lockup .product-name { font-size: 14px; }
  .brand-lockup img.logo { width: 29px; }
  h1.step-title { font-size: 18px; }
  .activation-title { font-size: 17px !important; }
  .welcome-heading { font-size: 22px; }
  .btn { font-size: 13px; padding: 11px 14px; }
  .step-card { padding: 16px 12px; }
  .welcome-content-panel { padding: 16px 12px; }
  .demo-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  pointer-events: none;
}
.demo-bar .access-btn {
  padding: 6px 10px;
  min-width: 36px;
  justify-content: center;
  pointer-events: auto;
}
.access-toggles { gap: 6px; }
}

.dob-wrap { max-width: 220px; }

.dob-input-row { position: relative; display: flex; align-items: center; }

.dob-input {
  width: 100%;
  padding: 12px 40px 12px 14px;
  border: 1.5px solid #8B95A1;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  box-sizing: border-box;
  color: var(--mlj-navy-900);
  background: #fff;
}

.dob-input:focus-visible {
    outline: none;
    border-color: #E8920A;
    box-shadow: 0 0 0 3px rgba(232, 146, 10, 0.18);
    background: #ffffff;
}

.dob-cal-icon {
  position: absolute;
  right: 12px;
  pointer-events: none;
  color: var(--slate-grey);
  display: flex;
  align-items: center;
}

.dob-input::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 0; width: 36px; height: 100%; cursor: pointer; }

.storage-opts { display:flex; gap:10px; margin-bottom:8px; }

.storage-opts__col { flex:1; }

.storage-opts__col:first-child { padding-left:0; }

.storage-opts__col:last-child  { padding-right:0; }

.storage-opts__col > div { height:100%; box-sizing:border-box; }

@media (max-width:600px) {
  .storage-opts { flex-direction:column; }
  .storage-opts__col { border-right:none; border-bottom:none; padding:0; margin-bottom:0; }
  .storage-opts__col:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
}

.rel-cat-btns { display:flex; gap:8px; margin-bottom:12px; }

.rel-half-field { max-width:50%; }

.rel-third-field { max-width:33.333%; }

@media (max-width:600px) { .rel-half-field { max-width:100%; } .rel-third-field { max-width:100%; } .friend-rel-spacer { display:none; } }

.welcome-title-row { display: block; }

.welcome-title-img { display: none; }

/* Mobile 170px cover-crop rule removed 2026-07-25 — it went with the stacked
   welcome-screen layout above, which has been reverted to side-by-side. The
   jar photo now just uses its normal inline sizing (85% width, 179px max
   height, object-fit: contain) at every breakpoint, same as desktop/tablet —
   shows the whole jar instead of cropping top/bottom off. */

@media(max-width:600px){.friend-rel-spacer{display:none!important}}

@media(max-width:600px){.done-tick{display:none}}

/* ============================================================
   SECTION 4 — INDEX.HTML (landing page)
   ============================================================ */


:root {
  --white:         #FFFFFF;
  --cream:         #FAF6F1;
  --cream-mid:     #F0E8DF;
  --navy:          #1C2B3A;
  --navy-mid:      #253649;
  --orange:        #EA580C;
  --orange-dark:   #C04A00;
  --orange-light:  #FEF3E2;
  --red-ice:       #C8102E;
  --text-body:     #3A4B5C;
  --text-muted:    #7A8C9E;
  --border:        #E4D9CF;
}
html { scroll-behavior: smooth; overflow-x: clip; }
body.pg-index { font-family: 'Roboto', sans-serif; background: var(--white); color: var(--text-body); overflow-x: hidden; max-width: 100%; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: 'Raleway', sans-serif; }

.container        { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 640px;  margin: 0 auto; padding: 0 32px; }
.text-orange { color: var(--orange); }

/* BUTTONS */
body.pg-index .btn-primary {
  display: inline-block; background: var(--orange); color: #fff;
  padding: 14px 42px; border-radius: 6px;
  font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 16px;
  letter-spacing: 0.03em; border: 2px solid var(--orange); cursor: pointer; text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
body.pg-index .btn-primary:hover { border-color: var(--orange-dark); }
body.pg-index .btn-primary:hover { background: var(--orange-dark); }
.btn-outline-orange {
  display: inline-block; background: #fff; color: var(--orange-dark);
  padding: 14px 42px; border-radius: 6px;
  font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 16px;
  letter-spacing: 0.03em; border: 2px solid var(--orange-dark); cursor: pointer; text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease;
}
.btn-outline-orange:hover { background: var(--orange-dark); color: #fff; transform: translateY(-2px); }
.btn-white {
  display: inline-block; background: #fff; color: var(--orange);
  padding: 14px 42px; border-radius: 6px;
  font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 16px;
  letter-spacing: 0.03em; border: 2px solid var(--orange-dark); cursor: pointer; text-decoration: none;
  transition: all 0.2s ease; box-shadow: 0 4px 24px rgba(0,0,0,0.14);
}
.btn-white:hover { background: #f8f8f8; }

/* NAV */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border); height: 64px; display: flex; align-items: center;
}
.nav-inner { max-width: 1160px; margin: 0 auto; padding: 0 32px; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo img { height: 40px; width: auto; display: block; }
.nav-logo-fallback { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: 0.05em; color: var(--navy); display: none; }
.nav-logo-fallback span { color: var(--red-ice); }
.nav-links {
  display: flex; gap: 28px; list-style: none; margin: 0; padding: 0;
  align-items: center;
}
.nav-links a {
  font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--navy); text-decoration: none; letter-spacing: 0.02em;
  transition: color 0.18s ease;
}
.nav-links a:hover { color: var(--orange-dark); }
.nav-burger {
  display: none; background: none; border: none; cursor: pointer;
  padding: 8px; width: 40px; height: 40px;
}
.nav-burger span {
  display: block; width: 24px; height: 2px; background: var(--navy);
  margin: 5px 0; transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }
.nav-mobile {
  position: fixed; top: 64px; left: 0; right: 0; z-index: 300;
  background: rgba(255,255,255,0.98); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  flex-direction: column; padding: 20px 32px; gap: 4px;
  display: none;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font-family: 'Raleway', sans-serif; font-size: 17px; font-weight: 600;
  color: var(--navy); text-decoration: none; padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile-cta {
  margin-top: 12px; background: transparent; color: var(--orange) !important;
  text-align: center; border-radius: 6px; border: 2px solid var(--orange) !important;
  border-bottom: 2px solid var(--orange) !important;
  padding: 12px 0 !important;
}
.nav-mobile-activate {
  margin-top: 12px; background: var(--red-ice); color: #fff !important;
  text-align: center; border-radius: 6px; border: 2px solid var(--red-ice) !important;
  border-bottom: 2px solid var(--red-ice) !important;
  padding: 12px 0 !important; font-weight: 700 !important;
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .site-nav .nav-cta { display: none; }
  .site-nav .nav-cta-activate { display: none; }
  .nav-burger { display: block; }
  .site-nav .nav-cta-outline { font-size: 13px; padding: 7px 14px; }
}

.nav-link-plain {
  font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--navy); text-decoration: none; letter-spacing: 0.01em;
  transition: color 0.15s;
}
.nav-link-plain:hover { color: var(--orange-dark); }
.nav-ctas { display: flex; align-items: center; gap: 12px; }
.nav-cta-activate {
  font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; line-height: 1;
  color: #fff; background: var(--red-ice); padding: 9px 22px;
  border: 2px solid var(--red-ice); border-radius: 6px;
  text-decoration: none; letter-spacing: 0.03em;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.nav-cta-activate:hover { background: #b71c1c; border-color: #b71c1c; color: #fff; }
.closing-cta { font-size: 16px; padding: 14px 32px; }
.nav-cta-outline {
  font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; line-height: 1;
  color: var(--orange-dark); background: #fff; padding: 9px 22px;
  border: 2px solid var(--orange); border-radius: 6px;
  text-decoration: none; letter-spacing: 0.03em;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-cta-outline:hover { background: var(--orange); color: #fff; }
/* nav-cta-outline shown on mobile — handled in 900px block above */
.nav-cta {
  font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 700;
  color: #fff; background: var(--orange); padding: 10px 26px; border-radius: 6px;
  text-decoration: none; letter-spacing: 0.03em;
  transition: background 0.18s ease, transform 0.15s ease;
}
.nav-cta:hover { background: var(--orange-dark); transform: translateY(-1px); }

/* HERO */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; background: var(--white); padding-top: 64px; padding-bottom: 60px; }
.hero-scroll-cue {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  color: var(--orange-dark); text-decoration: none; line-height: 0;
}
.hero-scroll-cue:hover { color: var(--orange-dark); }
.hero-inner {
  max-width: 1080px; margin: 0 auto; padding: 60px 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; width: 100%;
}
.hero-eyebrow {
  font-family: 'Raleway', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--red-ice); margin-bottom: 22px;
}
.hero-title { font-size: clamp(32px,3.8vw,52px); font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; color: var(--navy); margin-bottom: 20px; }
.hero-subtitle { font-size: clamp(15px,1.4vw,17px); line-height: 1.8; color: var(--text-body); margin-bottom: 32px; max-width: 440px; }
.hero-buy-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-buy-row .btn-primary,
.hero-buy-row .btn-primary { padding: 16px 28px; font-size: 16px; }
.hero-buy-row .btn-outline-orange { padding: 16px 28px; font-size: 16px; }
.hero-buy-row .btn-outline-orange { color: var(--orange); border: 2px solid var(--orange); }
.hero-buy-row .btn-outline-orange:hover { background: var(--orange); color: #fff; }
.hero-price { font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 600; color: var(--text-muted); line-height: 1.3; }
.hero-price strong { display: block; font-size: 30px; font-weight: 800; color: var(--navy); line-height: 1; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-login-hint {
  margin: 14px 0 0; font-size: 13px; color: var(--muted);
  font-family: 'Raleway', sans-serif; text-align: center;
}
.hero-login-hint a {
  color: var(--orange-dark); font-weight: 600; text-decoration: none;
}
.hero-login-hint a:hover { text-decoration: underline; }
.badge { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--navy); font-family: 'Roboto', sans-serif; }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.hero-image-col { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-image-bg { position: absolute; inset: -5%; background: var(--cream); border-radius: 28px; z-index: 0; }
.hero-image-col img { position: relative; z-index: 1; width: 100%; max-width: 520px; height: auto; object-fit: contain; border-radius: 16px; filter: drop-shadow(0 24px 52px rgba(28,43,58,0.13)); }

/* SECTION CHROME */
.section-header { text-align: center; margin-bottom: 56px; }
.section-eyebrow { font-family: 'Raleway', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange-dark); margin-bottom: 14px; }

.section-title { font-size: clamp(28px,4vw,48px); font-weight: 800; color: var(--navy); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 16px; }
.section-sub { font-size: 18px; color: #3A4B5C; line-height: 1.7; max-width: 540px; margin: 0 auto; }

/* PROBLEM */
.problem-section { background: var(--cream); padding: 100px 24px; text-align: center; border-top: 3px solid var(--orange); }
.problem-inner { max-width: 680px; margin: 0 auto; }
.problem-hook { font-size: clamp(30px,4.5vw,52px); font-weight: 800; line-height: 1.12; color: var(--navy); letter-spacing: -0.025em; margin-bottom: 32px; }
.problem-hook em { font-style: normal; color: var(--red-ice); }
.problem-body { font-size: clamp(16px,1.5vw,19px); line-height: 1.85; color: var(--text-body); margin-bottom: 18px; }
.problem-kicker { font-family: 'Raleway', sans-serif; font-size: 17px; font-weight: 700; color: var(--orange-dark); margin-top: 28px; letter-spacing: 0.02em; }

/* KIT */
.kit-section { background: var(--white); padding: 100px 24px; }
.kit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1160px; margin: 0 auto; }
.kit-card {
  background: var(--cream); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px 18px; text-align: center; display: flex; flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.kit-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(28,43,58,0.09); border-color: var(--orange); }
.kit-img-wrap { width: 100%; aspect-ratio: 1/1; background: var(--white); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 14px; }
.kit-img-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform 0.3s ease; }
.kit-card:hover .kit-img-wrap img { transform: scale(1.06); }
.kit-card h3 { font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.kit-card p { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; margin: 0; }
.kit-placeholder { opacity: 0.55; }
.placeholder-wrap { background: var(--cream-mid) !important; border: 2px dashed var(--border) !important; flex-direction: column; gap: 8px; }
.placeholder-wrap span { font-size: 11px; color: var(--text-muted); font-family: 'Roboto', sans-serif; }

/* STORAGE */
.storage-section { background: var(--navy); padding: 100px 24px; }
.storage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1060px; margin: 0 auto; }
.desktop-br { display: inline; }
@media (max-width: 860px) { .desktop-br { display: none; } }

/* Hides a word inside button/label text on mobile only — eg "Add " in
   "+ Add Record" buttons across the Health Jar pages, so mobile just
   reads "+ Record". Uses the app's own 600px mobile breakpoint (not
   the 860px marketing-page one above). */
.desktop-word { display: inline; }
@media (max-width: 600px) { .desktop-word { display: none; } }
@media (max-width: 860px) { .storage-grid { grid-template-columns: 1fr; } }
/* Tablet only: keep the 3 storage cards in a single row (mobile still stacks via the activation-flow rule above 880px) */
@media (min-width: 601px) and (max-width: 860px) { body.pg-index .storage-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; } body.pg-index .storage-card { padding: 24px 18px 22px !important; } }
.storage-card { background: var(--white); border-radius: 16px; padding: 40px 32px 36px; position: relative; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(28,43,58,0.06); }
.storage-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 5px; border-radius: 16px 0 0 16px; }
.storage-card-usb::before { background: var(--orange); }
.storage-card-sync::before { background: #90A4AE; }
.storage-card-vault::before { background: #B4965A; }
.storage-section .section-eyebrow { color: var(--orange); }
.storage-card-label { font-family: 'Raleway', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; }
.storage-card-usb .storage-card-label { color: var(--orange-dark); }
.storage-card-sync .storage-card-label { color: #546E7A; }
.storage-card-vault .storage-card-label { color: #9A7A3A; }
.storage-card h3 { font-family: 'Raleway', sans-serif; font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 14px; line-height: 1.35; }
.storage-card p { font-size: 15px; color: var(--text-body); line-height: 1.75; margin-bottom: 0; }
.storage-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.storage-card-usb .storage-icon { background: rgba(234,88,12,0.1); border: 1.5px solid var(--orange-dark); }
.storage-card-sync .storage-icon { background: rgba(144,164,174,0.12); border: 1.5px solid #78909C; }
.storage-card-vault .storage-icon { background: rgba(180,150,80,0.1); border: 1.5px solid #9A7A3A; }

/* HOW */
.how-section { background: var(--cream); padding: 100px 24px; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; max-width: 960px; margin: 0 auto; position: relative; }

.how-step-img-wrap {
  width: 80px; height: 80px;
  margin: 0 auto 18px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.how-step-img-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }

.how-connector { display: none; }
.how-step { text-align: center; position: relative; z-index: 1; background: var(--white); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(28,43,58,0.06); padding-bottom: 32px; }
.how-num { display: none; }
.how-step h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 12px; padding: 0 20px; letter-spacing: -0.01em; }
.how-step p { font-size: 14.5px; color: var(--text-body); line-height: 1.75; padding: 0 20px; }
.how-step p strong { color: var(--navy); font-weight: 700; }
.how-step-icon-wrap { width: 80px; height: 80px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; background: var(--orange-light); border-radius: 12px; border: 1.5px solid var(--orange-dark); }

/* PERSONAS */
.personas-section { background: var(--cream); padding: 100px 24px; }
.personas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1060px; margin: 0 auto; }
.persona-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 20px 24px 32px; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; display: flex; flex-direction: column; }
.persona-card:hover { border-color: var(--orange); box-shadow: 0 8px 36px rgba(28,43,58,0.10); transform: translateY(-4px); }
.persona-icon { width: 80px; height: 80px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; overflow: hidden; }
.persona-icon img { width: 100%; height: 100%; object-fit: contain; }
.persona-card h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.persona-card p { font-size: 14px; color: var(--text-body); line-height: 1.75; }
.persona-kicker { display: block; margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 700; font-style: italic; color: var(--navy); }

/* LIFE-JAR */
.lifejar-section { background: var(--navy); padding: 100px 24px; position: relative; overflow: hidden; }
.lifejar-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: rgba(234,88,12,0.05); top: -150px; right: -100px; pointer-events: none; }
.lifejar-inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
.lifejar-eyebrow { font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.storage-section .section-eyebrow { color: var(--orange); }
.lifejar-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--orange); }
.lifejar-title { font-size: clamp(30px,4vw,50px); font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 22px; letter-spacing: -0.025em; }
.lifejar-body { font-size: 17px; line-height: 1.8; color: rgba(255,255,255,0.72); margin-bottom: 28px; }
.lifejar-list { list-style: none; margin-bottom: 38px; }
.lifejar-list li { font-size: 15px; color: rgba(255,255,255,0.8); padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 12px; }
.lifejar-list li:last-child { border-bottom: none; }
.lifejar-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.lifejar-image-wrap { display: flex; justify-content: center; }
.lifejar-image-wrap img { width: 100%; max-width: 480px; height: auto; object-fit: contain; border-radius: 20px; filter: drop-shadow(0 28px 64px rgba(0,0,0,0.4)); }

/* TRUST */
.trust-section { background: var(--white); padding: 100px 24px; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: 1160px; margin: 0 auto; }

/* JOURNEY (responder access steps — replaces old Trust) */
.journey-section { background: var(--white); padding: 100px 24px; }
.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 48px;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.journey-step {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px 24px;
  box-shadow: 0 4px 20px rgba(28,43,58,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 10px;
  align-items: center;
}
.journey-step:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(28,43,58,0.10); }
.journey-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.journey-step { z-index: 1; }
@media (max-width: 1024px) {
  .journey-path { display: none; }
}
.journey-num {
  width: 34px; height: 34px;
  background: var(--orange);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(28,43,58,0.20);
  grid-column: 1;
  grid-row: 1;
}
.journey-step h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.01em;
  grid-column: 2;
  grid-row: 1;
}
.journey-step p {
  font-size: 14.5px;
  color: var(--text-body);
  line-height: 1.7;
  margin: 0;
  grid-column: 1 / -1;
  grid-row: 2;
}
.journey-fallback {
  max-width: 1100px;
  margin: 56px auto 0;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.75;
  color: var(--navy);
  padding: 0 8px;
}
.journey-fallback strong {
  font-style: normal;
  font-weight: 700;
  color: var(--navy);
}
.care-callout {
  max-width: 760px;
  margin: 64px auto 0;
  padding: 32px 36px;
  background: var(--orange-light);
  border-left: 4px solid var(--orange);
  border-radius: 10px;
}
.care-callout-eyebrow {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin: 0 0 10px;
}
.care-callout h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}
.care-callout p {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-body);
  margin: 0;
}
@media (max-width: 1024px) {
  .journey-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .journey-grid { grid-template-columns: 1fr; gap: 16px; }
  .care-callout { padding: 24px 22px; }
@media (max-width: 380px) { .section-header { margin-bottom: 20px; } .container { padding: 0 12px; } .sharing-grid > div { padding: 16px 12px !important; } .hero-inner { padding: 12px 12px; } .nav-inner { padding: 0 12px; } }
  .care-callout h3 { font-size: 19px; }
}
.travel-callout { max-width: 760px; margin: 56px auto 0; padding: 32px 36px; background: var(--orange-light); border-left: 4px solid var(--orange); border-radius: 10px; }
.travel-callout-label { font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange-dark); margin: 0 0 10px; }
.travel-callout h3 { font-family: 'Raleway', sans-serif; font-size: 22px; font-weight: 700; color: var(--navy); margin: 0 0 12px; letter-spacing: -0.015em; }
.travel-callout p { font-family: 'Roboto', sans-serif; font-size: 15px; line-height: 1.75; color: var(--text-body); margin: 0; }
@media (max-width: 600px) { .travel-callout { padding: 24px 22px; } .travel-callout h3 { font-size: 19px; } }
/* Two-column wrapper for paired callouts (Beyond Emergencies + Travelling Overseas) */
.callouts-grid { max-width: 1080px; margin: 64px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.callouts-grid .care-callout, .callouts-grid .travel-callout { max-width: none; margin: 0; }
@media (max-width: 860px) { .callouts-grid { grid-template-columns: 1fr; gap: 16px; } }
.trust-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 36px 26px 32px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.trust-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(28,43,58,0.08); }
.trust-icon { width: 48px; height: 48px; background: var(--orange-light); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; border: 1.5px solid var(--orange-dark); }
.trust-card h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.trust-card p { font-size: 14px; color: var(--text-body); line-height: 1.75; }

/* PRICE */
.price-section { background: var(--orange-light); padding: 100px 24px; }
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; max-width: 1080px; margin: 0 auto; }
.price-tile { background: #fff; border: 2px solid var(--border); border-radius: 20px; padding: 40px 36px; position: relative; display: flex; flex-direction: column; overflow: hidden; }
.price-tile.featured { border-color: var(--orange); box-shadow: 0 16px 64px rgba(28,43,58,0.12); }
.price-tile.featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg,var(--orange),#F5A623); border-radius: 18px 18px 0 0; }
.price-tile-badge { display: inline-block; background: var(--orange); color: #fff; font-family: 'Raleway',sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 20px; }
.price-tile-label { font-family: 'Raleway',sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-dark); margin-bottom: 10px; line-height: 1.5; min-height: 36px; }
.price-tile h3 { font-family: 'Raleway',sans-serif; font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.price-tile-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.6; min-height: 60px; }
.price-tile-amount { font-family: 'Raleway',sans-serif; font-size: 48px; font-weight: 700; color: var(--navy); line-height: 1; margin: 0 0 4px; min-height: 48px; display: flex; align-items: center; justify-content: center; text-align: center; }
.price-tile-amount sup { font-size: 24px; font-weight: 700; vertical-align: super; }
.price-tile-cadence { font-family: 'Raleway', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); text-align: center; margin-bottom: 8px; min-height: 30px; line-height: 1.55; }
.price-tile-coming { font-family: 'Raleway',sans-serif; font-size: 20px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; min-height: 56px; display: flex; align-items: center; }
.price-tile-divider { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
.price-tile ul { list-style: none; margin-bottom: 32px; flex: 1; }
.price-tile ul li { font-size: 14px; color: var(--text-body); padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.price-tile ul li:last-child { border-bottom: none; }
.price-tile-check { width: 20px; height: 20px; min-width: 20px; background: var(--orange); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; box-shadow: none; }
.price-tile-check-muted { width: 18px; height: 18px; min-width: 18px; background: var(--border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.price-tile .btn-primary, .price-tile .btn-outline-orange { min-height: 76px; display: flex; align-items: center; justify-content: center; }

/* Price tile colour variants */
.price-tile-silver { border-color: #90A4AE; border-width: 2.5px; }
.price-tile-silver::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg,#90A4AE,#B0C4CE); border-radius: 18px 18px 0 0; }
.price-tile-silver .price-tile-label { color: #546E7A; }
.price-tile-silver .price-tile-check { background: #78909C; }

.price-tile-gold { border-color: #B4965A; }
.price-tile-gold::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg,#B4965A,#D4B87A); border-radius: 18px 18px 0 0; }
.price-tile-gold .price-tile-label { color: #9A7A3A; }
.price-tile-gold .price-tile-check { background: #B4965A; }
.price-tile-silver .btn-outline-orange { color: #546E7A; border-color: #78909C; }
.price-tile-silver .btn-outline-orange:hover { background: #78909C; color: #fff; }
.price-tile-gold .btn-outline-orange { color: #9A7A3A; border-color: #B4965A; }
.price-tile-gold .btn-outline-orange:hover { background: #B4965A; color: #fff; }
@media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; max-width: 480px; } }

.price-card { max-width: 520px; margin: 0 auto; border: 2px solid var(--orange); border-radius: 24px; padding: 56px 48px; text-align: center; box-shadow: 0 16px 64px rgba(28,43,58,0.10); position: relative; overflow: hidden; }
.price-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg,var(--orange),#F5A623); }
.price-eyebrow { font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange-dark); margin-bottom: 18px; }
.price-amount { font-family: 'Raleway', sans-serif; font-size: 80px; font-weight: 900; color: var(--navy); line-height: 1; margin-bottom: 8px; letter-spacing: -0.03em; }
.price-amount sup { font-size: 40px; vertical-align: top; margin-top: 14px; display: inline-block; }
.price-note { font-size: 14px; color: var(--text-muted); margin-bottom: 32px; }
.price-divider { height: 1px; background: var(--border); margin-bottom: 28px; }
.price-includes { list-style: none; text-align: left; margin-bottom: 38px; }
.price-includes li { font-size: 15px; color: var(--text-body); padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.price-includes li:last-child { border-bottom: none; }
.price-check { width: 20px; height: 20px; background: var(--orange); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.price-check svg { color: #fff; }
.price-btn-wrap { text-align: center; }
.price-btn-wrap .btn-primary { width: 100%; text-align: center; padding: 18px 32px; font-size: 17px; }

/* BOUNCING CHEVRON FOR SCROLL CUES */
@keyframes bounce-chevron {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
.scroll-chevron {
  display: block;
  width: 24px;
  height: 24px;
  margin: 8px auto 0;
  animation: bounce-chevron 1.6s ease-in-out infinite;
}

/* PRICING ADD-ONS BLOCK */
.addons-block {
  max-width: 1080px;
  margin: 56px auto 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 44px 40px;
  box-shadow: 0 6px 28px rgba(28,43,58,0.08);
}
.addons-eyebrow {
  font-family: 'Raleway', sans-serif;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-dark);
  text-align: center;
  margin: 0 0 10px;
}
.addons-block > h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 24px; font-weight: 700;
  color: var(--navy);
  text-align: center;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.addons-intro {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: var(--text-body);
  text-align: center;
  margin: 0 auto 32px;
  max-width: 540px;
  line-height: 1.65;
}
.addons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.addon-item {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
}
.addon-item h4 {
  font-family: 'Raleway', sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.addon-item p {
  font-family: 'Roboto', sans-serif;
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.55;
  margin: 0 0 14px;
  flex-grow: 1;
}
.addon-price {
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--orange-dark);
  letter-spacing: -0.01em;
}
@media (max-width: 860px) {
  .addons-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .addons-grid { grid-template-columns: 1fr; }
  .addons-block { padding: 28px 22px; }
}

/* GUARANTEE CALLOUT */
.guarantee-callout {
  max-width: 900px;
  margin: 32px auto 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--orange);
  border-radius: 14px;
  padding: 32px 40px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(28,43,58,0.06);
}
.guarantee-callout-eyebrow {
  font-family: 'Raleway', sans-serif;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin: 0 0 10px;
}
.guarantee-callout h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 22px; font-weight: 700;
  color: var(--navy);
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}
.guarantee-callout p {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-body);
  margin: 0 auto 10px;
  max-width: 720px;
}
.guarantee-callout p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .guarantee-callout { padding: 24px 22px; }
  .guarantee-callout h3 { font-size: 19px; }
}

/* CLOSING */
.closing-section { background: var(--white); padding: 120px 24px; text-align: center; position: relative; overflow: hidden; }
.closing-section::before { content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 700px; height: 700px; border-radius: 50%; background: rgba(255,255,255,0.05); pointer-events: none; }
.closing-section::after { content: ''; position: absolute; bottom: -80px; right: -80px; width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,0.04); pointer-events: none; }
.closing-content { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.closing-title { font-size: clamp(28px,4vw,48px); font-weight: 800; color: var(--navy); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 20px; }
.closing-sub { font-size: 22px; font-weight: 600; color: var(--navy); margin-bottom: 44px; line-height: 1.65; }

/* FOOTER */
footer { background: var(--navy); padding: 32px 24px; }
.footer-inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
footer p { font-size: 13px; color: rgba(255,255,255,0.78); margin: 0; }
footer a { color: rgba(255,255,255,0.9); text-decoration: none; }
footer a:hover { color: #fff; }
.footer-login { font-size: 13px; font-family: 'Roboto', sans-serif; font-weight: 600; color: #fff; text-decoration: none; white-space: nowrap; padding: 7px 18px; border: 1.5px solid rgba(255,255,255,0.5); border-radius: 6px; transition: border-color 0.2s, background 0.2s; }
.footer-login:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
@media (max-width: 600px) { .footer-inner { flex-direction: column; align-items: center; text-align: center; } }


/* HERO MONTAGE */
.hero-image-col { position: relative; display: flex; align-items: center; justify-content: center; min-height: 520px; }
.hero-montage { position: relative; width: 100%; max-width: 520px; }
.montage-bg-blob {
  position: absolute;
  width: 85%; height: 88%;
  top: 6%; left: 8%;
  background: var(--cream);
  border-radius: 28px;
  z-index: 0;
}
.montage-back {
  position: absolute;
  width: 62%;
  height: auto;
  object-fit: contain;
  top: 0; right: -4%;
  z-index: 1;
  transform: rotate(6deg) translateY(12px);
  filter: drop-shadow(0 16px 36px rgba(28,43,58,0.15));
  border-radius: 12px;
}
.montage-front {
  position: relative;
  z-index: 2;
  width: 72%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 24px 0 24px 0;
  filter: drop-shadow(0 24px 52px rgba(28,43,58,0.18));
  border-radius: 14px;
}



/* HOW STEP — lifestyle image */
.how-step-img-lifestyle {
  width: 100%;
  height: auto;
  margin: 0 0 16px;
  border-radius: 0;
  overflow: visible;
  border: none;
  display: block;
}
.how-step-img-lifestyle img { width: 100%; height: auto; display: block; }

/* TRUST CARD with photo */
.trust-card-img { padding: 0; overflow: hidden; }
.trust-card-photo { width: 100%; aspect-ratio: 1/1; overflow: hidden; }
.trust-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.trust-card-img:hover .trust-card-photo img { transform: scale(1.04); }
.trust-card-img h3, .trust-card-img p { padding: 0 24px; }
.trust-card-img h3 { padding-top: 22px; margin-bottom: 10px; }
.trust-card-img p  { padding-bottom: 28px; }


/* PROBLEM SECTION image */
.problem-img-wrap {
  margin-top: 68px;
  border-radius: 20px;
  overflow: hidden;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 16px 48px rgba(28,43,58,0.12);
}
.problem-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* KIT LIFESTYLE IMAGES — cover crop, no padding */
.kit-img-wrap.lifestyle { background: transparent; }
.kit-img-wrap.lifestyle img { object-fit: cover; padding: 0; border-radius: 8px; }

/* RESPONSIVE */
@media (max-width: 1024px) { .trust-grid { grid-template-columns: repeat(2,1fr); } .personas-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 860px) { .section-header { margin-bottom: 40px; } .hero-scroll-cue { display: none; } .hero { min-height: 0 !important; padding-top: 48px; padding-bottom: 16px; align-items: flex-start; } .hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 20px; } .hero-image-col { order: -1; min-height: 0 !important; align-items: flex-start; justify-content: flex-start; } .hero-image-col img { width: 100%; max-width: 100%; height: auto; max-height: none; margin: 0; display: block; border-radius: 16px; } .hero-image-bg { display: none; } .hero-subtitle { max-width: 100%; } .how-grid { grid-template-columns: 1fr; gap: 20px; } .how-connector { display: none; } .lifejar-inner { grid-template-columns: 1fr; gap: 48px; } .lifejar-image-wrap { order: -1; } .kit-grid { grid-template-columns: repeat(3,1fr); } .problem-section, .how-section, .kit-section, .storage-section, .personas-section, .lifejar-section, .trust-section, .journey-section, .price-section, .closing-section { padding-left: 0; padding-right: 0; } }
@media (max-width: 600px) { .section-header { margin-bottom: 28px; } .container { padding: 0 20px; } .hero-inner { padding: 16px 20px; } .hero-eyebrow { margin-top: 4px; margin-bottom: 11px; } .hero-buy-row { gap: 8px; align-items: stretch; } body.pg-index .hero-buy-row .btn-primary, .hero-buy-row .btn-outline-orange { padding: 13px 8px; font-size: 14px; flex: 1; text-align: center; box-sizing: border-box; display: flex; align-items: center; justify-content: center; white-space: nowrap; } .problem-section, .how-section, .kit-section, .storage-section, .personas-section, .lifejar-section, .trust-section, .journey-section, .price-section, .closing-section { padding-left: 0; padding-right: 0; } .how-step h3 { padding: 0 16px; } .how-step p { padding: 0 16px; } .persona-card { padding: 20px 20px 28px; } .kit-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .kit-card { padding: 14px 12px; } .kit-card p { line-height: 1.4; font-size: 12px; } .kit-card h3 { font-size: 13px; margin-bottom: 4px; } .kit-img-wrap { margin-bottom: 10px; } .personas-grid { grid-template-columns: 1fr; } .trust-grid { grid-template-columns: 1fr; } .price-card { padding: 40px 26px; } .price-amount { font-size: 64px; } .nav-inner { padding: 0 16px; } .sharing-grid { grid-template-columns: 1fr !important; } .sharing-grid > div { padding: 18px 16px !important; } .closing-cta { padding: 12px 16px; font-size: 14px; flex: 1; text-align: center; justify-content: center; box-sizing: border-box; } .journey-qr-hint { display: none !important; } }
@media (min-width: 861px) { .tile-update-pos { order: 1; } .tile-poa-pos { order: 2; } }
@media (max-width: 860px) { .kit-section .section-header { margin-bottom: 24px; } }
@media (max-width: 860px) {
  .hero-eyebrow { font-size: clamp(11px, 1.5vh, 16px); }
  .hero-title { font-size: clamp(22px, 4.5vh, 46px); line-height: 1.1; }
  .hero-subtitle { font-size: clamp(12px, 1.8vh, 18px); line-height: 1.6; margin-bottom: clamp(12px, 2vh, 24px); }
  .hero-img-tablet { max-height: 40vh; width: 100%; object-fit: cover; object-position: center; }
  .hero-buy-row { gap: 10px; }
  .hero-price { font-size: clamp(11px, 1.4vh, 14px); }
  .hero-price strong { font-size: clamp(20px, 3.5vh, 30px); }
}
@media (max-width: 600px) { .kit-section .section-header { margin-bottom: 16px; } }
  .hero-img-desktop { display: block; width: 100%; border-radius: 16px; }
.hero-img-tablet { display: none !important; width: 100%; border-radius: 16px; }
@media (max-width: 860px) { .hero-img-desktop { display: none !important; } .hero-img-tablet { display: block !important; } }
  


/* ============================================================
   SECTION 5 — ES.HTML & CONTROL-DEMO.HTML (responder portals)
   ============================================================ */

/* --- es.html --- */

:root {
  --red:       #C8102E;
  --red-dark:  #9B1222;
  --navy:      #152332;
  --navy-mid:  #1C2B3A;
  --white:     #FFFFFF;
  --cream:     #FAF6F1;
  --text:      #1E293B;
  --muted:     #64748B;
  --border:    #E2E8F0;
  --green:     #16A34A;
  --green-bg:  #DCFCE7;
  --green-bd:  #22C55E;
  --alert-bg:  #FEF2F2;
  --alert-bd:  #EF4444;
}

body.pg-es, body.pg-control-demo { height: 100%; }
body.pg-es {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  background: var(--cream);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.page-wrap {
  max-width: 960px;
  margin: 0 auto;
  flex: 1;
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 40px;
}

/* ── HEADER ──────────────────────────────────────── */
body.pg-es .header{
  position: relative;
  z-index: 900;
  background: var(--navy);
  height: 58px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 3px solid var(--red);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  box-sizing: border-box;
}
body.pg-es .header img{ width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
body.pg-es .header-text{ display: flex; flex-direction: column; justify-content: center; }
body.pg-es .header-text h1{
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin: 0;
}
body.pg-es .header-text p{
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.03em;
  font-weight: 600;
  margin: 1px 0 0;
}

/* ── CARD ────────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  margin: 20px auto 0;
  max-width: none;
  width: calc(100% - 32px);
  overflow: hidden;
}
.card-inner { padding: 24px 20px; }

/* Record screen with MLJ section below: flat bottom so bar connects flush */
#screen-record .card,
#screen-police-record .card,
#screen-fire .card,
#screen-coastguard .card { border-radius: 12px !important; margin: 32px 0 0 !important; width: 100% !important; max-width: none !important; box-sizing: border-box; }

/* Record screen divs are the sole width/centering container */
#screen-record,
#screen-police-record,
#screen-fire,
#screen-coastguard {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-bottom: 32px;
}

/* Orange bar + info card fill the container exactly */
#screen-record .mlj-orange-bar,
#screen-police-record .mlj-orange-bar,
#screen-fire .mlj-orange-bar,
#screen-coastguard .mlj-orange-bar {
  width: 100% !important; max-width: none !important; margin: 32px 0 0 !important;
  border: none !important;
  border-radius: 10px 10px 0 0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

#screen-record .mlj-info-card,
#screen-police-record .mlj-info-card,
#screen-fire .mlj-info-card,
#screen-coastguard .mlj-info-card {
  width: 100% !important; max-width: none !important; margin: 0 !important;
  padding-top: 16px !important; padding-bottom: 16px !important;
  background: #fff !important;
  border: none !important; border-top: 1px solid #EA580C !important;
  border-radius: 0 0 10px 10px !important;
}




@media (max-width: 600px) {
  #screen-record .card,
  #screen-police-record .card,
  #screen-fire .card,
  #screen-coastguard .card { margin: 16px 0 0 !important; }
  #screen-record .mlj-orange-bar,
  #screen-police-record .mlj-orange-bar,
  #screen-fire .mlj-orange-bar,
  #screen-coastguard .mlj-orange-bar { margin: 16px 0 0 !important; }
}

/* ── PRE-AUTH SCREEN ─────────────────────────────── */
#screen-auth { display: block; }
#screen-record,
#screen-household,
#screen-police-emma { display: none; }

.step-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.step-row:last-child { border-bottom: none; }

.step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.step-body { flex: 1; }
.step-label {
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 6px;
}
.step-detail {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

/* ICE Code display */
.ice-code-box {
  background: #F0FDF4;
  border: 2px solid var(--navy);
  border-radius: 10px;
  padding: 14px 20px;
  margin: 10px 0 4px;
  text-align: center;
}
.ice-code-label {
  font-family: 'Roboto', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.ice-code-value {
  font-family: 'Roboto', sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: 0.12em;
}
.ice-code-hint { display: none; }

/* Auth code input */
.auth-input-wrap { margin: 10px 0 4px; }
.auth-input {
  width: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  padding: 14px 16px;
  border: 1.5px solid #8B95A1;
  border-radius: 8px;
  color: var(--navy);
  background: var(--cream);
  outline: none;
  transition: border-color 0.2s;
}
.auth-input:focus-visible {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18);
  background: #ffffff;
}
.auth-input::placeholder { color: #8B95A1; letter-spacing: 0.08em; }

.btn-unlock {
  width: 100%;
  margin-top: 20px;
  padding: 16px;
  background: var(--red);
  color: var(--white);
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
}
.btn-unlock:hover { background: var(--red-dark); transform: translateY(-1px); }
.btn-unlock:active { transform: translateY(0); }

.auth-error {
  display: none;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--alert-bg);
  border: 1px solid var(--alert-bd);
  border-radius: 6px;
  font-size: 13px;
  color: #991B1B;
  font-weight: 600;
  text-align: center;
}

body.pg-es .no-signal-note{
  margin: 0 10px 16px;
  max-width: 520px;
  width: calc(100% - 20px);
  padding: 10px 16px;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-left: 3px solid #64748B;
  border-radius: 8px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
body.pg-es .no-signal-note p{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
body.pg-es .no-signal-note strong{ color: var(--text); }



/* ── Responder photo capture overlay ────────────────── */
.resp-photo-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(15,23,42,0.85); z-index: 8000;
  flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
}
.resp-photo-overlay.open { display: flex; }
.resp-photo-card {
  background: #fff; border-radius: 20px; padding: 28px 24px 24px;
  max-width: 400px; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.resp-photo-title {
  font-family: 'Raleway', sans-serif; font-size: 18px; font-weight: 800;
  color: #152332; margin-bottom: 6px; text-align: center;
}
.resp-photo-sub {
  font-size: 12px; color: var(--slate-grey); text-align: center;
  margin-bottom: 20px; max-width: 300px; line-height: 1.5;
}
.resp-camera-wrap {
  width: 100%; border-radius: 12px; overflow: hidden;
  background: #1E293B; margin-bottom: 20px; min-height: 220px;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.resp-camera-wrap video { width: 100%; display: block; }
.resp-face-guide {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.resp-face-guide.active { display: flex; }
.resp-face-oval {
  width: 200px; height: 240px; border-radius: 50%;
  border: 3px solid #EA580C;
  box-shadow: 0 0 0 1000px rgba(0,0,0,0.45);
}
.resp-face-label {
  position: absolute; bottom: 16px; left: 0; right: 0;
  color: #fff; font-size: 12px; font-weight: 700;
  margin-top: 0; text-align: center;
  font-family: 'Roboto', sans-serif;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  letter-spacing: 0.01em;
}
.resp-camera-placeholder-txt {
  display: flex; flex-direction: column; align-items: center;
  font-size: 13px; text-align: center; padding: 40px 20px;
}
.resp-confirm-strip {
  display: none; background: rgba(22,163,74,0.15); border: 1.5px solid #16A34A;
  border-radius: 10px; padding: 10px 16px; margin-bottom: 16px;
  font-size: 13px; color: #111827; font-weight: 600; text-align: center;
  max-width: 340px; width: 100%;
}
.resp-photo-btn {
  width: 100%; max-width: 340px; padding: 14px; background: #FFF8F0;
  color: #EA580C; border: 1.5px solid #E8920A; border-radius: 10px;
  font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 800;
  letter-spacing: 0.04em; cursor: pointer; margin-bottom: 10px;
}
.resp-photo-btn:hover { background: #FFEDD5; }
.resp-photo-skip {
  display: none;
  background: none; border: none; color: #64748B;
  font-size: 13px; cursor: pointer; font-family: 'Roboto',sans-serif;
  font-weight: 600; text-decoration: none; padding: 4px;
  margin-top: 12px;
}

/* ── Radio fallback overlay ─────────────────────────────── */
.radio-fallback-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(15,23,42,0.88); z-index: 8500;
  flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
}
.radio-fallback-overlay.open { display: flex; }
.radio-fallback-card {
  background: #fff; border-radius: 20px; padding: 24px 20px 20px;
  max-width: 380px; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* ── Org sign-in modal ────────────────────────────────── */
.org-modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.65);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.org-modal-overlay.open { display: flex; }
.org-modal-sheet {
  background: #fff;
  border-radius: 20px;
  width: 100%; max-width: 420px;
  padding: 28px 24px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.org-modal-handle { display: none; }
.org-modal-title {
  font-family: 'Raleway', sans-serif;
  font-size: 17px; font-weight: 800; color: #152332;
  margin: 0 0 4px; text-align: center;
}
.org-modal-sub {
  font-size: 12px; color: #64748B; text-align: center;
  margin: 0 0 20px; line-height: 1.5;
}
.org-step { display: none; }
.org-step.active { display: block; }
.org-field { margin-bottom: 14px; }
.org-field label {
  display: block; font-size: 11px; font-weight: 700;
  color: #64748B; text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 5px;
}
.org-field input {
  width: 100%; padding: 12px 14px; border: 1.5px solid #8B95A1;
  border-radius: 10px; font-size: 15px; font-family: 'Roboto',sans-serif;
  color: #152332; background: #F8FAFC; box-sizing: border-box; outline: none;
}
.org-field input:focus-visible {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18);
  background: #ffffff;
}
body.pg-es .org-btn{
  width: 100%; padding: 13px; background: #152332; color: #fff;
  border: none; border-radius: 10px; font-family: 'Roboto',sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: 0.04em;
  cursor: pointer; margin-top: 6px;
}
body.pg-es .org-btn:hover{ background: #1E3A5F; }
.org-otp-hint {
  font-size: 12px; color: #64748B; text-align: center;
  margin-bottom: 14px; line-height: 1.5;
}
.org-camera-wrap {
  background: #0F172A; border-radius: 12px; overflow: hidden;
  margin-bottom: 14px; position: relative; min-height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.org-camera-wrap video { width: 100%; display: block; border-radius: 12px; }
.org-camera-wrap canvas { display: none; }
.org-camera-placeholder {
  color: rgba(255,255,255,0.5); font-size: 13px; text-align: center; padding: 40px 20px;
}
.org-confirm-strip {
  display: none; background: #F0FDF4; border: 1.5px solid #86EFAC;
  border-radius: 10px; padding: 12px 16px; margin-bottom: 14px;
  font-size: 13px; color: #111827; font-weight: 600; text-align: center;
  line-height: 1.5;
}
.org-close {
  background: none; border: none; cursor: pointer;
  font-size: 12px; color: #94A3B8; display: block;
  margin: 14px auto 0; font-family: 'Roboto',sans-serif;
}
.org-step-indicator {
  display: flex; justify-content: center; gap: 6px; margin-bottom: 20px;
}
.org-step-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #E2E8F0;
}
.org-step-dot.done { background: #152332; }
/* Footer org link */
.footer-org-link {
  font-size: 12px; color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.35);
  border-radius: 20px; cursor: pointer;
  font-family: 'Raleway', sans-serif; font-weight: 600; letter-spacing: 0.03em;
  text-decoration: none; padding: 6px 18px; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.footer-org-link:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.6); color: #fff; }

/* Footer policy links row */
.footer-links-row { display: flex; align-items: center; justify-content: center; width: 100%; }
.footer-links-row.hidden { display: none; }
.footer-org-row { display: flex; justify-content: center; width: 100%; padding: 2px 0; }
.footer-org-row.hidden { display: none; }
body.pg-es .footer-policy-links{ display: flex; gap: 10px; flex-wrap: nowrap; align-items: center; }
body.pg-es .footer-policy-links a{
  font-size: 11px; color: rgba(255,255,255,0.7);
  text-decoration: none; font-family: 'Roboto', sans-serif; white-space: nowrap;
}
body.pg-es .footer-policy-links a:hover{ color: rgba(255,255,255,0.95); text-decoration: underline; }
body.pg-es .footer-sep{ font-size: 11px; color: rgba(255,255,255,0.3); }
.footer-mobile-break { display: none; }
body.pg-es .footer-cookie-btn{
  font-size: 11px; color: rgba(255,255,255,0.7);
  background: none; border: none; cursor: pointer;
  font-family: 'Roboto', sans-serif; padding: 0; white-space: nowrap;
}
body.pg-es .footer-cookie-btn:hover{ color: rgba(255,255,255,0.95); text-decoration: underline; }
.footer-bottom-row { display: flex; align-items: center; justify-content: center; width: 100%; gap: 3px; flex-wrap: wrap; }

/* ── ICE RECORD ──────────────────────────────────── */
body.pg-es .record-header{
  background: var(--navy);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.record-header-text h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.04em;
}
.record-header-text p {
  font-size: 11px;
  rgba(255,255,255,0.55);
  margin-top: 1px;
}

/* DNACPR strip */
.dnacpr-strip {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dnacpr-strip .icon { font-size: 18px; flex-shrink: 0; }
.dnacpr-title {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dnacpr-sub { font-size: 12px; line-height: 1.4; margin-top: 2px; }

/* Identity block */
.identity-block {
  padding: 22px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 14px;
  align-items: center;
}
.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
  font-size: 21px;
  font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
  border: 2px solid var(--red);
}
.identity-name {
  font-family: 'Roboto', sans-serif;
  font-size: 21px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
}
.identity-meta {
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
}
.identity-meta strong { color: var(--text); }

/* Section blocks */
body.pg-es .record-section{
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
body.pg-es .record-section:last-child{ border-bottom: none; }
body.pg-es .record-section-title{
  font-family: 'Roboto', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}

.alert-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--alert-bg);
  border: 1.5px solid var(--alert-bd);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
  color: #991B1B;
  margin: 3px 4px 3px 0;
}

.med-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.med-row:last-child { border-bottom: none; }
.med-name { font-weight: 700; color: var(--text); }
.med-dose { color: var(--muted); font-size: 13px; }

.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.contact-row:last-child { border-bottom: none; }
.contact-name { font-weight: 700; font-size: 14px; color: var(--text); }
.contact-rel { font-size: 12px; color: var(--muted); margin-top: 2px; }
.contact-phone {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
}

.info-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.info-row:last-child { border-bottom: none; }
.info-label { color: var(--muted); }
.info-value { font-weight: 700; color: var(--text); text-align: right; }

/* Accessed footer */
.access-footer {
  margin: 8px 20px 20px;
  padding: 6px 12px;
  font-size: 11px;
  color: rgba(255,255,255,0.9);
  text-align: center;
  line-height: 1.5;
}
.access-footer strong { font-weight: 600; color: rgba(255,255,255,0.9); }

/* ── FOOTER ──────────────────────────────────────── */
body.pg-es .site-footer{
  background: var(--navy);
  padding: 6px 32px 4px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
body.pg-es .footer-copy{
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  width: 100%;
}
.footer-audit {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
  order: -1;
}
.footer-audit.visible { display: flex; }


/* ── HOUSEHOLD SELECTION ─────────────────────────── */
.household-intro {
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.household-intro h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 17px; font-weight: 800; color: var(--navy);
  margin-bottom: 4px;
}
.household-intro p { font-size: 13px; color: var(--muted); }

.person-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.person-tile:last-child { border-bottom: none; }

body.pg-es .person-photo{
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto', sans-serif;
  font-size: 20px; font-weight: 800;
  color: var(--white); flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.15);
}
body.pg-es .person-info{ flex: 1; min-width: 0; }
body.pg-es .person-name{
  font-family: 'Roboto', sans-serif;
  font-size: 17px; font-weight: 800; color: var(--navy);
  line-height: 1.2;
}
body.pg-es .person-meta{ font-size: 13px; color: var(--muted); margin-top: 3px; }
.person-badges { margin-top: 5px; display: flex; gap: 6px; flex-wrap: wrap; }

.person-badge {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 10px;
  line-height: 1.5; white-space: nowrap;
}
.badge-adult   { background: #E2E8F0; color: #334155; border: 1.5px solid #94A3B8; }
.badge-ward    { background: #617080; color: #fff;    border: 1.5px solid #94A3B8; }
.badge-primary { background: #F0FDF4; color: #166534; border: 1.5px solid #86EFAC; }

.btn-view-record {
  flex-shrink: 0;
  background: var(--red);
  color: var(--white);
  font-family: 'Roboto', sans-serif;
  font-size: 13px; font-weight: 800;
  padding: 10px 14px;
  border: none; border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s;
  white-space: nowrap;
}
.btn-view-record:hover { background: var(--red-dark); }

.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px;
  font-size: 13px; font-weight: 700; color: var(--muted);
  cursor: pointer; border-bottom: 1px solid var(--border);
  text-decoration: none; width: 100%;
}
.back-link:hover { color: var(--navy); background: #F8FAFC; }


/* ── EMR RECORD VIEW (matches prototype responder flow) ── */
body.pg-es .emr-identity{
  display: flex; align-items: center; gap: 12px;
  padding: 20px 20px 12px;
}
body.pg-es .emr-avatar{
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto', sans-serif; font-weight: 800; font-size: 17px;
  flex-shrink: 0; overflow: hidden;
  border: 2px solid #8B95A1;
}
body.pg-es .emr-avatar img{ width: 100%; height: 100%; object-fit: cover; }
body.pg-es .emr-identity-text{ flex: 1; min-width: 0; }
body.pg-es .emr-identity-text h2{
  font-family: 'Roboto', sans-serif; font-weight: 800;
  font-size: 18px; color: var(--navy); margin: 0 0 2px;
}
body.pg-es .emr-identity-meta{ font-size: 13px; color: var(--muted); margin: 0 0 2px; }
body.pg-es .emr-identity-ref{ font-size: 11px; rgba(255,255,255,0.9); margin: 2px 0 0; }

body.pg-es .emr-critical{
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 1px; margin: 0 20px 8px;
  background: #949494; border-radius: 14px; overflow: hidden;
  border: 1.5px solid #8B95A1;
}
body.pg-es .emr-critical__cell{
  background: #FAFBFC; padding: 12px 10px;
  display: flex; flex-direction: column; gap: 4px; text-align: center;
}
body.pg-es .emr-critical__cell--alert{ background: #FEE2E2; }   /* drug allergy present */
.emr-critical__cell--alert-none { background: #DCFCE7; }   /* no drug allergy */
.emr-critical__cell--alert-none .v { color: #166534; }
body.pg-es .emr-critical__cell--alert .v{ color: #991B1B; }
body.pg-es .emr-critical__cell--conditions{ background: #DBEAFE; }   /* conditions — pale blue */
body.pg-es .emr-critical__cell--conditions .v{ color: #1E40AF; }
body.pg-es .emr-critical__cell--blood{ background: #FEE2E2; }   /* blood type — pale red */
body.pg-es .emr-critical__cell--blood .v{ color: #991B1B; }
body.pg-es .emr-critical__cell .l{
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); line-height: 1.3;
}
body.pg-es .emr-critical__cell .v{
  font-family: 'Roboto', sans-serif; font-weight: 700;
  font-size: 15px; color: var(--navy); line-height: 1.2;
}

.emr-section {
  margin: 0 16px 16px; padding: 16px;
  background: var(--white); border: 1.5px solid #8B95A1; border-radius: 10px;
}
.emr-section--ice {
  border: none; background: transparent; padding: 12px 12px 16px;
}
.emr-section h3 {
  font-family: 'Roboto', sans-serif; font-weight: 700;
  font-size: 14px; color: var(--navy); margin: 0 0 5px;
}
.emr-section p { font-size: 14px; color: var(--text); margin: 0; line-height: 1.5; }
.emr-no-info { font-size: 13px; rgba(255,255,255,0.9); font-style: italic; padding: 2px 0; }
.emr-condition-item { padding: 8px 0; border-top: 1px solid #E2E8F0; }
.emr-condition-item:first-of-type { border-top: none; padding-top: 0; }
.emr-condition-item strong { display: block; font-size: 14px; color: var(--navy); }
.emr-condition-meta { font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.06em; display: block; margin: 2px 0 4px; }
.emr-condition-item p { font-size: 13px; color: var(--text); margin: 0; line-height: 1.5; }
.emr-section h3 + h3, .emr-section p + h3 { margin-top: 10px; }

/* ── Hazard & Risk pills (es.html fire panel — selected/active state) ── */
.hazard-pill-row { display:flex; align-items:flex-start; gap:6px; flex-wrap:wrap; margin-bottom:8px; font-size:13px; color:#334155; line-height:2; }
.hazard-pill-row:last-child { margin-bottom:0; }
.hazard-pill-row strong { white-space:nowrap; font-weight:700; margin-right:2px; }
.hazard-pill { background:#FEF2F2; color:#991B1B; border:1.5px solid #DC2626; font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; }
.hazard-pill-outline { background:#fff; color:#DC2626; border:1.5px solid #DC2626; font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; }
.hazard-clutter { font-size:13px; color:#334155; font-family:'Roboto',sans-serif; }

.emr-ice-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
body.pg-es .emr-ice{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 0;
  background: #FFF8F0; border: 1.5px solid #FFD0A0; border-radius: 12px;
  cursor: pointer; height: 100%; box-sizing: border-box;
}
body.pg-es .emr-ice:last-child{ margin-bottom: 0; }
body.pg-es .emr-ice__avatar{
  width: 42px; height: 42px; border-radius: 50%;
  background: #94A3B8; color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 13px;
  flex-shrink: 0; overflow: hidden;
}
body.pg-es .emr-ice__avatar img{ width: 100%; height: 100%; object-fit: cover; }
body.pg-es .emr-ice__body{ flex: 1; display: flex; flex-direction: column; min-width: 0; }
body.pg-es .emr-ice__body strong{ font-size: 14px; color: var(--navy); }
body.pg-es .emr-ice__body span{ font-size: 12px; color: var(--muted); margin-top: 1px; }
body.pg-es .emr-ice__phone{
  font-family: ui-monospace, monospace; font-size: 12px !important;
  color: var(--navy) !important; font-weight: 600; margin-top: 3px !important;
}
body.pg-es .emr-ice-tile{ display: flex; flex-direction: column; gap: 4px; align-self: stretch; }
body.pg-es .emr-ice-tile__label{
  font-size: 8px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted); padding-left: 2px;
}
body.pg-es .emr-ice-tile--primary .emr-ice-tile__label{ color: #16A34A; }
body.pg-es .emr-ice__call{
  width: 46px; height: 46px; border-radius: 50%;
  background: #16A34A; color: var(--white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; text-decoration: none;
}
body.pg-es .emr-ice__call:hover{ background: #15803D; }
/* Secondary contact — inactive: pale grey */
body.pg-es .emr-ice--secondary{
  background: #F1F5F9; border-color: #CBD5E1;
}
body.pg-es .emr-ice--secondary .emr-ice__body strong{ color: #64748B; }
body.pg-es .emr-ice--secondary .emr-ice__phone{ color: #64748B !important; }
body.pg-es .emr-ice--secondary .emr-ice__call{
  background: #94A3B8; color: #fff;
}
body.pg-es .emr-ice--secondary .emr-ice__call:hover{ background: #64748B; }

/* Secondary contact — active: pale orange */
.emr-ice--active-secondary {
  background: #FFF7ED; border-color: #EA580C;
}
body.pg-es .emr-ice--active-secondary .emr-ice__body strong{ color: var(--navy); }
body.pg-es .emr-ice--active-secondary .emr-ice__phone{ color: var(--navy) !important; }
body.pg-es .emr-ice--active-secondary .emr-ice__call{
  background: #EA580C; color: #fff;
}
body.pg-es .emr-ice--active-secondary .emr-ice__call:hover{ background: #C04A00; }
body.pg-es .emr-ice-wrap{ display: flex; flex-direction: column; gap: 10px; }

.emr-footer { margin: 0 20px 12px; }


/* ── ESSENTIAL NOTES PANEL ───────────────────────── */
body.pg-es .emr-essential{
  margin: 16px 20px 8px;
  padding: 10px 12px 10px 14px;
  background: #fff;
  border: 3px solid #EA580C;
  border-radius: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.emr-essential__icon { font-size: 18px; flex-shrink: 0; line-height: 1.4; display:none; }
body.pg-es .emr-essential__label{
  font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: #EA580C; margin-bottom: 5px;
}
body.pg-es .emr-essential__text{ font-size: 13px; color: var(--text); line-height: 1.5; margin: 0; }
body.pg-es .emr-essential__body{ flex: 1; }
.emr-essential__divider { border: none; border-top: 1px solid #EA580C; margin: 10px 0; opacity: 0.25; }
.emr-essential__service-label {
  font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: #EA580C; margin-bottom: 5px; margin-top: 0;
}

/* ── BREAKPOINTS ─────────────────────────────────── */

/* iPad and above (768px+) */
@media (min-width: 768px) {
  #screen-auth .card { max-width: 520px; }
  #screen-auth .card-inner { padding: 16px 24px; }
  #screen-auth .step-row { padding: 6px 0; }
  #screen-auth .step-label { font-size: 17px; }
  #screen-auth .step-detail { font-size: 12px; }
  #screen-auth .card-inner { padding: 12px 24px; }
  #screen-auth .fields-wrap { margin-right: 46px; }
  #es-demo-block { margin-right: 46px; }
  body.pg-es #screen-auth .no-signal-note{ max-width: 500px; width: calc(100% - 20px); margin: 12px auto 24px; padding: 10px 16px; }
  body.pg-es .header{ padding: 18px 28px; }
  body.pg-es .header img{ width: 56px; height: 56px; }
  
  .card { margin: 24px auto 0; }
  #screen-record .card, #screen-police .card, #screen-fire .card, #screen-coastguard .card, #screen-police-adam .card, #screen-fire-adam .card, #screen-police-rosa .card, #screen-fire-rosa .card, #screen-police-helen .card, #screen-fire-helen .card, #screen-police-emma .card, #screen-fire-emma .card, #screen-police-ryan .card, #screen-fire-ryan .card, #screen-police-marcus .card, #screen-fire-marcus .card { max-width: 850px; }
  .mlj-orange-bar { max-width: 850px; }
  .card-inner { padding: 28px 24px; }
  .fields-wrap { max-width: 100%; }
  .ice-code-value { font-size: 24px; }
  .ice-code-box { padding: 16px 28px; }
  .step-label { font-size: 17px; }
  .step-detail { font-size: 15px; }
  .auth-input { font-size: 22px; padding: 12px 20px; }
  .btn-unlock { font-size: 15px; padding: 14px; }
  .identity-name { font-size: 22px; }
  .identity-meta { font-size: 14px; }
  .avatar { width: 64px; height: 64px; font-size: 22px; }
  body.pg-es .record-section{ padding: 16px 24px; }
  body.pg-es .no-signal-note{ max-width: 520px; margin: 0 auto 24px; padding: 10px 16px; }
  .access-footer { margin: 0 24px 28px; }
  .emr-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 12px 8px; }
  .emr-ice-expand { display: none; }
  body.pg-es .emr-ice-wrap{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  body.pg-es .emr-ice-wrap > div[id]{ display: block !important; margin-top: 0 !important; }
  .emr-two-col > .emr-section { margin: 0; }

}

/* Standard mobile (≤600px) */
@media (max-width: 600px) {
  body.pg-es .header-text h1{ font-size: 14px; }
  .card { margin: 0; width: 100%; border-radius: 0; box-shadow: none; border: none; }
  .mlj-orange-bar { width: 100%; max-width: none; border-radius: 0; margin-left: 0; margin-right: 0; }
  .mlj-info-card { width: 100%; max-width: none; margin: 0 auto 8px; border-radius: 0; box-shadow: none; border: 1px solid #FED7AA; border-top: none; padding-top: 0; }
  .card-inner { padding: 0 14px 18px; }
  body { background: var(--cream); }
  /* balance the circle offset so fields look centred */
  #screen-auth .card-inner { padding-right: 46px; }
  .ice-code-value { font-size: 22px; }
  .ice-code-box { padding: 12px 14px; }
  .contact-row { flex-direction: column; gap: 6px; align-items: flex-start; }
  .contact-phone { font-size: 16px; }
  body.pg-es .no-signal-note{ margin: 0 10px 16px; }
  .access-footer { margin: 0 10px 20px; }
  body.pg-es .site-footer{ padding-bottom: 5%; }
}

/* Small phones — iPhone SE, older Androids (≤375px) */
@media (max-width: 375px) {
  body.pg-es .header{ padding: 12px 14px; }
  body.pg-es .header img{ width: 40px; height: 40px; }
  
  .card { margin: 0; width: 100%; border-radius: 0; box-shadow: none; border: none; }
  .card-inner { padding: 0 12px 14px; }
  .ice-code-value { font-size: 19px; letter-spacing: 0.08em; }
  .step-num { width: 28px; height: 28px; font-size: 13px; }
  .step-label { font-size: 17px; }
  .auth-input { font-size: 20px; }
  .identity-name { font-size: 18px; }
  .avatar { width: 48px; height: 48px; font-size: 17px; }
  body.pg-es .no-signal-note{ margin: 0 8px 14px; }
  .access-footer { margin: 0 8px 16px; }
  body.pg-es .footer-copy{ text-align: center; }
  .footer-mobile-break { display: none; }
  .footer-bottom-row { justify-content: center; }
  body.pg-es .footer-policy-links{ flex-wrap: wrap; justify-content: center; gap: 8px; }
  body.pg-es .footer-sep{ display: none; }
  .footer-links-row { justify-content: center; }
  .footer-org-row { justify-content: center; }
}

/* ── 2-COL MEDS / ALLERGIES ROW ─────────────────── */
body.pg-es .emr-meds-row{
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 0 20px 16px;
  border: 1.5px solid #8B95A1; border-radius: 10px; overflow: hidden;
}
body.pg-es .emr-meds-cell{
  background: #FAFBFC; padding: 16px;
}
body.pg-es .emr-meds-cell:first-child{
  border-right: 1.5px solid #8B95A1;
}
body.pg-es .emr-meds-cell p{ font-size: 13px; color: var(--text); line-height: 1.45; margin: 4px 0 0; }
@media (max-width: 600px) {
  body.pg-es .emr-critical{
    grid-template-columns: 1fr;
    margin: 0 16px 32px;
    border-radius: 10px;
  }
  body.pg-es .emr-critical__cell{ text-align: left; padding: 10px 14px; }
  body.pg-es .emr-critical__cell:not(:last-child){ border-bottom: 1px solid rgba(0,0,0,0.06); }
  body.pg-es .emr-meds-row{
    grid-template-columns: 1fr;
    margin: 0 16px 32px;
  }
  body.pg-es .emr-meds-cell:first-child{ border-right: none; border-bottom: 1.5px solid #8B95A1; }
  .emr-section { margin: 0 16px 32px; }
}
@media (max-width: 380px) {
  body.pg-es .emr-critical{ margin: 0 16px 20px; }
  body.pg-es .emr-meds-row{ margin: 0 16px 20px; }
  .emr-section { margin: 0 16px 20px; }
}

/* ── MICRO LABEL (column/section headings) ────────── */
body.pg-es .emr-micro-label{
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted);
}

/* ── LANGUAGE ROW ────────────────────────────────── */
.emr-language {
  margin: 0 16px 16px;
  padding: 10px 14px;
  font-size: 13px; color: var(--text);
  display: grid; grid-template-columns: auto 1fr 1fr;
  align-items: baseline; gap: 6px 12px;
  border: 1.5px solid #8B95A1;
  border-radius: 8px;
  background: #fff;
  width: calc(50% - 16px);
}
@media (max-width: 600px) {
  .emr-language { width: auto; }
}
.emr-languages {
  margin: 0 16px 16px;
  padding: 10px 14px;
  border: 1.5px solid #8B95A1;
  border-radius: 8px;
  background: #fff;
  width: calc(50% - 16px);
}
@media (max-width: 600px) {
  .emr-languages { width: auto; }
}

/* ── TWO-COL WRAPPER (mobile: transparent) ─────────── */
.emr-two-col { display: contents; }

/* ── ICE EXPAND BUTTON ───────────────────────────── */
.emr-ice-expand {
  width: 100%; margin-top: 8px;
  background: none; border: 1px dashed #CBD5E1;
  border-radius: 8px; padding: 8px 12px;
  font-family: 'Roboto', sans-serif; font-size: 13px;
  font-weight: 700; color: var(--muted);
  cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.emr-ice-expand:hover { background: #F8FAFC; color: var(--navy); }

/* ── FURTHER INFO DIVIDER ────────────────────────── */
body.pg-es .further-divider{
  margin: 4px 20px 4px;
  padding: 10px 0 6px;
  border-top: 1px solid var(--border);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted);
}
.further-info-strip {
  background: var(--navy);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.further-info-strip__icon {
  width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.further-info-strip__title {
  font-family: 'Roboto', sans-serif;
  font-size: 11px; font-weight: 800;
  color: #fff; letter-spacing: 0.04em;
}
.further-info-strip__sub {
  font-size: 10px; rgba(255,255,255,0.55); margin-top: 1px;
}

/* ── MY LIFEJARS INFO CARD ─── */
.mlj-orange-bar {
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 0;
  padding: 20px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 32px);
  max-width: 850px;
  margin: 0 auto;
  box-sizing: border-box;
}
  .mlj-info-card {
  background: #fff;
  border: none;
  box-shadow: none;
  margin: 0;
  padding-top: 20px;
  width: 100%;
  max-width: 850px;
  overflow: visible;
  padding-bottom: 20px;
}
.mlj-info-header { padding: 14px 20px 12px; border-bottom: 1px solid #E2E8F0; background: #fff; }
.mlj-info-header__eyebrow { font-family: 'Roboto', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #1C3A5F; margin-bottom: 4px; }
.mlj-info-header__sub { font-size: 13px; color: #475569; line-height: 1.4; }

/* ── DESKTOP 2-COL SECTIONS (grid applied at ≥768px) ─── */


/* ── Service pills bar ─────────────────────────────────── */
#demo-bar { display:none !important; }
#service-pills-bar {
  position: relative;
  z-index: 899;
  background: #E2E4E9;
  border-bottom: 1px solid #C8CAD0;
  padding: 8px 16px;
  display: block;
}
#service-pills-bar .pills-inner {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
/* nav group: ← label → */
.spb-nav-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* divider between nav and pills — hidden on mobile */
.spb-divider { display: none; }
/* desktop/tablet: single row */
@media(min-width:601px) {
  #service-pills-bar { display: flex; align-items: center; justify-content: center; gap: 12px; }
  .spb-divider { display: block; width: 1px; height: 20px; background: #C8CAD0; flex-shrink: 0; }
  #service-pills-bar .pills-inner { margin: 0; }
}
/* mobile: nav row on top, pills below */
@media(max-width:600px) {
  #service-pills-bar { display: block; padding: 6px 12px; }
  .spb-nav-group { margin-bottom: 6px; }
}
.svc-pill {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  border: 1.5px solid #94A3B8;
  border-radius: 20px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.svc-pill:hover:not(.svc-pill--active) { background: #F1F5F9; }
.svc-pill--active {
  background: #1E293B;
  color: #fff;
  border-color: #1E293B;
}
.location-select-wrap { padding: 6px 16px 10px; }
.household-intro { border-bottom: 1px solid #E2E8F0; padding-bottom: 4px; }
.location-select-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8B95A1; margin-bottom: 8px; }
.location-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.location-pill { font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 700; padding: 3px 10px; border: 1.5px solid #8B95A1; border-radius: 20px; background: #F1F5F9; color: #475569; cursor: pointer; white-space: nowrap; transition: all 0.15s; }
.location-pill--active { background: #64748B; color: #fff; border-color: transparent; }
.svc-pill--disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.svc-pill:hover:not(.svc-pill--active):not(.svc-pill--disabled) {
  background: #F8FAFC;
  border-color: #64748B;
}



.pet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}@media(max-width:600px){.pet-grid{grid-template-columns:1fr 1fr;}}@media(max-width:380px){.pet-grid{grid-template-columns:1fr;}}

/* --- control-demo.html --- */

:root {
  --red:       #C8102E;
  --red-dark:  #9B1222;
  --navy:      #152332;
  --navy-mid:  #1C2B3A;
  --white:     #FFFFFF;
  --cream:     #FAF6F1;
  --text:      #1E293B;
  --muted:     #64748B;
  --border:    #E2E8F0;
  --green:     #16A34A;
  --green-bg:  #DCFCE7;
  --green-bd:  #22C55E;
  --alert-bg:  #FEF2F2;
  --alert-bd:  #EF4444;
  --auth-bg:   rgba(200,16,46,0.06);
  --auth-bd:   #C8102E;
}

body.pg-control-demo {
  height: 100%;
  font-family: 'Roboto', sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  background: var(--cream);
}

/* ── Shared header ──────────────────────────── */
body.pg-control-demo .header{
  background: var(--navy);
  height: 58px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 3px solid var(--red);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  flex-shrink: 0;
}
body.pg-control-demo .header img{ width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.header-text { display: flex; flex-direction: column; justify-content: center; }
.header-text h1 {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin: 0;
}
.header-text p {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.03em;
  font-weight: 600;
  margin: 2px 0 0;
}
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Operator badge shown in dashboard header */
.operator-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.operator-badge .op-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
.operator-badge .op-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}

.service-badge {
  padding: 5px 11px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,0.3);
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

body.pg-control-demo .btn-header-outline{
  background: transparent;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 8px;
  padding: 8px 14px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.pg-control-demo .btn-header-outline:hover{ background: rgba(255,255,255,0.1); }
body.pg-control-demo .btn-header-outline span:first-child{ font-size: 14px; font-weight: 700; color: var(--white); }
body.pg-control-demo .btn-header-outline span:last-child{ font-size: 11px; color: rgba(255,255,255,0.8); }

/* Right-corner service label in header */
.header-service-label {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  border-left: 1px solid rgba(255,255,255,0.15);
  padding-left: 16px;
}
body.pg-control-demo .header-service-label .svc-line1{
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.header-service-label .svc-line2 {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ══════════════════════════════════════════════
   LOGIN SCREEN
══════════════════════════════════════════════ */
#screen-login { display: flex; flex-direction: column; min-height: 100vh; }

body.pg-control-demo .login-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--cream);
}

body.pg-control-demo .demo-hint{ background: #FFF7ED; border: 1px solid #FDBA74; border-radius: 8px; padding: 12px 14px; margin-bottom: 18px; }
body.pg-control-demo .demo-hint p{ font-size: 12px; color: #64748B; margin: 0 0 8px; }
body.pg-control-demo .demo-hint p:last-child{ margin-bottom: 0; }
body.pg-control-demo .demo-hint strong{ color: #C04A00; }
.demo-svc-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
body.pg-control-demo .demo-fill-btn{ background: #fff; border: 1.5px solid #8B95A1; color: #152332; font-size: 11px; font-weight: 700; cursor: pointer; padding: 4px 10px; border-radius: 20px; font-family: 'Roboto', sans-serif; transition: background 0.15s, color 0.15s; }
body.pg-control-demo .demo-fill-btn:hover, body.pg-control-demo .demo-fill-btn.active{ background: #152332; border-color: #152332; color: #fff; }
#demo-cred-detail { font-size: 11px; color: #92400E; margin-top: 7px; display: none; }

body.pg-control-demo .login-card{
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  width: 100%;
  max-width: 500px;
  overflow: hidden;
}

body.pg-control-demo .login-card-header{
  background: var(--navy);
  padding: 20px 24px;
}
body.pg-control-demo .login-card-header h2{
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
body.pg-control-demo .login-card-header p{
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin: 0;
  margin-top: 1px;
}

.login-card-body { padding: 28px 24px; }

body.pg-control-demo .field-group{ margin-bottom: 18px; }
body.pg-control-demo .field-label{
  font-size: 13px;
  font-weight: 700;
  color: #1C2B3A;
  letter-spacing: 0.01em;
  display: block;
  margin-bottom: 6px;
}
body.pg-control-demo .field-input{
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #8B95A1;
  border-radius: 7px;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s;
}
body.pg-control-demo .field-input:focus-visible{
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18);
  background: #ffffff;
}
body.pg-control-demo .field-input::placeholder{ color: #B0BAC6; }

/* Domain detection badge */
body.pg-control-demo .domain-detect{
  display: none;
  margin-top: 8px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  align-items: center;
  width: fit-content;
  max-width: 50%;
}
body.pg-control-demo .domain-detect.found{
  display: flex;
  background: var(--green-bg);
  border: 1.5px solid var(--green-bd);
  color: #14532D;
}
body.pg-control-demo .domain-detect.unknown{
  display: flex;
  background: #FEF9C3;
  border: 1.5px solid #FDE68A;
  color: #713F12;
}

/* Fallback service selector — shown only when domain is ambiguous */
.service-fallback {
  display: none;
  margin-top: 10px;
}
.service-fallback.visible { display: block; }
.service-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.service-pill {
  padding: 9px 8px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
  text-align: center;
  transition: all 0.18s;
}
.service-pill .pill-emoji { font-size: 18px; display: block; margin-bottom: 2px; }
.service-pill .pill-name  { font-size: 11px; font-weight: 700; color: var(--muted); }
.service-pill:hover { border-color: var(--red); }
.service-pill.selected { border-color: var(--red); background: var(--alert-bg); }
.service-pill.selected .pill-name { color: var(--red); }

body.pg-control-demo .login-error{
  display: none;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--alert-bg);
  border: 1px solid var(--alert-bd);
  border-radius: 6px;
  font-size: 13px;
  color: #991B1B;
  font-weight: 600;
}

body.pg-control-demo .btn-signin{
  width: 100%;
  padding: 14px;
  background: var(--red);
  color: var(--white);
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.18s, transform 0.12s;
}
body.pg-control-demo .btn-signin:hover{ background: var(--red-dark); transform: translateY(-1px); }
body.pg-control-demo .btn-signin:active{ transform: translateY(0); }

.login-footnote {
  margin-top: 18px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 420px;
  width: 100%;
}
.login-footnote p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
}
.login-footnote strong { color: var(--text); }

/* ══════════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════════ */
#screen-dashboard { display: none; flex-direction: column; height: 100vh; overflow: hidden; }

body.pg-control-demo .demo-bar{
  background: #FEF9C3;
  border-bottom: 1px solid #FDE68A;
  padding: 6px 24px;
  font-size: 12px;
  color: #713F12;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  flex-shrink: 0;
}

/* Three-column layout */
body.pg-control-demo .dash-body{
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

.col-lookup {
  background: var(--cream);
  border-right: 1px solid var(--border);
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.col-lookup > * { width: 100%; max-width: 420px; flex-shrink: 0; }

.col-results {
  background: var(--white);
  border-right: 1px solid var(--border);
  padding: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.results-populated.visible { display: flex !important; flex-direction: column; flex: 1; overflow: hidden; }
.person-list { display: flex; flex-direction: column; gap: 20px; overflow-y: auto; flex: 1; padding-right: 4px; }

.col-record {
  background: var(--cream);
  padding: 24px 20px 20px;
  overflow-y: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.col-record > * { width: 100%; }
.col-record iframe { width: 100%; flex: 1; }

.col-record-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--muted);
  gap: 8px;
}
.col-record-empty p { font-size: 15px; max-width: 260px; line-height: 1.6; }

.record-header {
  background: var(--navy);
  border-radius: 10px 10px 0 0;
  padding: 14px 18px;
  margin-bottom: 0;
}
.record-header h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.03em;
}
.record-header p { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 2px; }

body.pg-control-demo .record-body{
  background: var(--white);
  border-radius: 0 0 10px 10px;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
.record-section { margin-bottom: 16px; }
.record-section:last-child { margin-bottom: 0; }
.record-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.record-field { font-size: 13px; color: var(--text); margin-bottom: 4px; line-height: 1.4; }
.record-field strong { font-weight: 700; }
.no-signal-note {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 14px;
  line-height: 1.5;
  font-style: italic;
}

/* ── Lookup card ── */
.panel-card {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  overflow: hidden;
}
.panel-card-header {
  background: var(--navy);
  padding: 13px 18px;
  text-align: center;
}
.panel-card-header h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.04em;
}
.panel-card-header p { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 2px; }
.panel-card-body { padding: 10px 18px 18px; text-align: center; }

.ice-input {
  width: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  padding: 14px 16px;
  border: 1.5px solid #8B95A1;
  border-radius: 10px;
  color: var(--navy);
  background: #F8FAFC;
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: 14px;
}
.ice-input:focus-visible {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18);
  background: #ffffff;
}
.ice-input::placeholder { color: #B0BAC6; }
.ice-input-hint { font-size: 11px; color: var(--text); text-align: left; margin:14px 0; background:#FFF7ED; border:1px solid #FDBA74; border-radius:8px; padding:10px 14px; line-height:1.9; }

.btn-find {
  width: 100%;
  padding: 13px;
  background: var(--navy);
  color: var(--white);
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
}
.btn-find:hover { background: var(--navy-mid); transform: translateY(-1px); }

.lookup-error {
  display: none;
  margin-top: 10px;
  padding: 9px 14px;
  background: var(--alert-bg);
  border: 1px solid var(--alert-bd);
  border-radius: 6px;
  font-size: 13px;
  color: #991B1B;
  font-weight: 600;
  text-align: center;
}

/* Found strip */
.found-strip {
  display: none;
  padding: 9px 14px;
  background: var(--green-bg);
  border: 1px solid var(--green-bd);
  border-radius: 8px;
  font-size: 12px;
  color: #14532D;
  font-weight: 700;
  gap: 8px;
  align-items: center;
}
.found-strip.visible { display: flex; }

/* Auth code card */
.auth-card { display: none; }
.auth-card.visible { display: block; }

.auth-card-header {
  background: var(--red);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.auth-card-header h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.04em;
}

.auth-card-body { padding: 18px; text-align: center; }

.auth-instruction {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-bottom: 10px;
}

.auth-code-box {
  background: var(--auth-bg);
  border: 2.5px solid var(--auth-bd);
  border-radius: 12px;
  padding: 12px 20px;
  text-align: center;
  margin-bottom: 14px;
}
.auth-code-value {
  font-family: 'Roboto', sans-serif;
  font-size: 56px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: 0.28em;
  line-height: 1;
}
.auth-code-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.auth-actions { display: flex; gap: 8px; }
.btn-copy {
  flex: 1;
  padding: 9px;
  background: var(--navy);
  color: var(--white);
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  font-size: 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.18s;
}
.btn-copy:hover { background: var(--navy-mid); }
.btn-copy.copied { background: var(--green); }
.btn-reset {
  flex: 1;
  padding: 9px;
  background: transparent;
  color: var(--muted);
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 12px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s;
}
.btn-reset:hover { border-color: var(--navy); color: var(--navy); }

/* Audit strip */
.audit-strip {
  display: none;
  font-size: 11px;
  color: rgba(255,255,255,0.9);
  gap: 6px;
  align-items: flex-start;
  line-height: 1.5;
}
.audit-strip.visible { display: flex; }

/* ── Results panel ── */
.results-empty {
  height: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
}
.results-empty .empty-icon { font-size: 44px; opacity: 0.35; margin-bottom: 14px; }
.results-empty h3 { font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 800; color: #94A3B8; margin-bottom: 6px; }
.results-empty p  { font-size: 13px; color: #94A3B8; max-width: 230px; line-height: 1.5; }

.results-populated { display: none; }
.results-populated.visible { display: block; }

.results-header { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.results-header h2 { font-family: 'Raleway', sans-serif; font-size: 20px; font-weight: 800; color: var(--navy); }
.results-header .subtitle { font-size: 13px; color: var(--muted); margin-top: 4px; }

.btn-new-lookup {
  width: 28px; height: 28px; border-radius: 8px;
  background: #F1F5F9; border: 1.5px solid #8B95A1;
  color: #475569;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.btn-new-lookup:hover { border-color: #475569; color: #1E293B; }
.btn-new-lookup svg { display: block; }

.info-btn {
  width: 20px; height: 20px; border-radius: 50%;
  background: #F1F5F9; border: 1.5px solid #94A3B8; color: #334155;
  font-size: 11px; font-weight: 700; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; position: relative;
  user-select: none;
}
.info-popup {
  display: none;
  position: absolute;
  top: 28px; left: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 400; font-style: normal;
  line-height: 1.5; padding: 10px 14px;
  border-radius: 8px; width: 260px; z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.info-popup::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: var(--navy); border-top: none;
}
.info-btn.open .info-popup { display: block; }
.ice-ref {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 4px 10px;
  background: #F1F5F9;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.1em;
}
.ice-ref .ref-label { font-family: 'Roboto', sans-serif; font-size: 10px; color: var(--muted); font-weight: 400; letter-spacing: 0; margin-right: 2px; }

/* Person list */

.person-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 16px;
  background: #F8FAFC;
  border: 1.5px solid #8B95A1;
  border-radius: 10px;
  transition: border-color 0.18s, background 0.18s;
  cursor: pointer;
}

.dnacpr-tile-strip {
  flex-basis: calc(100% + 32px);
  margin: 0 -16px -14px;
  padding: 9px 16px;
  background: var(--alert-bg);
  border-top: 1px solid var(--alert-bd);
  border-radius: 0 0 8px 8px;
  font-size: 12px;
  color: #991B1B;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.person-row:hover { border-color: #94A3B8; }
.person-row.selected { background: rgba(200,16,46,0.06); border-color: #C8102E; }

.person-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Raleway', sans-serif;
  font-size: 18px; font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.2);
}
.is-holder .person-avatar { border-color: #8B95A1; }

.person-info { flex: 1; min-width: 0; }
.person-name  { font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 800; color: var(--navy); }
body.pg-control-demo .person-meta{ font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.badge-dnacpr { background: #991B1B; border: none; color: #fff; }
.badge-holder { background: #F1F5F9; border: 1px solid var(--border); color: var(--muted); }

.btn-view {
  padding: 8px 14px;
  background: var(--red);
  color: var(--white);
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  font-size: 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-view:hover:not(.btn-view-inactive) { background: var(--red-dark); }
.btn-view.btn-view-inactive {
  background: #FECACA;
  color: #F87171;
  border-color: #FECACA;
}
.btn-view.btn-view-inactive:hover { background: #FCA5A5; border-color: #FCA5A5; }

.control-note {
  margin-top: 20px;
  padding: 12px 16px;
  background: #F1F5F9;
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.control-note strong { color: var(--text); }

/* ── Footer ─────────────────────────────────── */
body.pg-control-demo .site-footer{
  background: var(--navy);
  padding: 8px 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.08);
}
body.pg-control-demo .site-footer p{ font-size: 11px; color: rgba(255,255,255,0.9); line-height: 1.6; }
body.pg-control-demo .site-footer a{ color: rgba(255,255,255,0.9); text-decoration: none; font-size: 11px; }
body.pg-control-demo .site-footer a:hover{ color: rgba(255,255,255,0.9); }
.footer-col       { display: flex; flex-direction: column; gap: 3px; }
.footer-col.center { align-items: center; text-align: center; }
.footer-col.right  { align-items: flex-end; text-align: right; }
body.pg-control-demo .footer-links{ display: flex; flex-wrap: wrap; gap: 3px 10px; }
body.pg-control-demo .footer-sep{ color: rgba(255,255,255,0.25); }
body.pg-control-demo .footer-copy{ font-size: 11px; color: rgba(255,255,255,0.9); }

/* ── Demo bar ───────────────────────────────── */
#demo-bar, #demo-bar-dash, #demo-bar-reg {
  background: #E8ECF0;
  border-bottom: 1px solid #CBD5E1;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
body.pg-control-demo .demo-bar-label{
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #64748B;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.demo-bar-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
}
.demo-nav {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #334155;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.demo-nav:hover { background: #1E293B; }
#demo-state-label, #demo-state-label2, #demo-state-label3 {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #1E293B;
  white-space: nowrap;
  min-width: 90px;
  text-align: center;
}
.svc-wrap { display: flex; gap: 5px; }
.svc-btn {
  background: #fff;
  color: #334155;
  border: 1.5px solid #94A3B8;
  border-radius: 20px;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.svc-btn:hover:not(.on) { background: #F1F5F9; }
.svc-btn.on { background: #1E293B; color: #fff; border-color: #1E293B; }

/* ── Responsive guard ───────────────────────── */
.narrow-guard {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  gap: 12px;
}
.narrow-guard strong { font-family: 'Raleway', sans-serif; font-size: 18px; color: var(--white); }
.narrow-guard p { font-size: 14px; color: rgba(255,255,255,0.65); max-width: 300px; line-height: 1.6; }
@media (max-width: 959px) { .narrow-guard { display: flex; } }


@media (max-width: 600px) {
  .header-text h1 { font-size: 14px; }
}


body.pg-control-demo .mlj-lbg{position:fixed;inset:0;z-index:9999;background:#152332;display:flex;align-items:center;justify-content:center;transition:opacity 0.5s ease}
body.pg-control-demo .mlj-lcard{background:#fff;border-radius:16px;padding:40px 48px 44px;text-align:center;max-width:380px;width:90%;box-shadow:0 4px 24px rgba(0,0,0,0.18);border:1.5px solid #C9A84C}
@keyframes mlj-spin{to{transform:rotate(360deg)}}
body.pg-control-demo .mlj-spinner{width:36px;height:36px;border:3px solid #F5C6CC;border-top-color:#C8102E;border-radius:50%;animation:mlj-spin 0.8s linear infinite;margin:20px auto 0}



/* ============================================================
   SECTION 6 — ORG-DEMO.HTML (org portal)
   ============================================================ */



:root {
  --teal:       #0D9488;
  --teal-dark:  #0A7069;
  --teal-light: #CCFBF1;
  --teal-mid:   #14B8A6;
  --navy:       #152332;
  --navy-mid:   #1C2B3A;
  --white:      #FFFFFF;
  --cream:      #FAF6F1;
  --text:       #1E293B;
  --muted:      #64748B;
  --border:     #E2E8F0;
  --green:      #16A34A;
  --green-bg:   #DCFCE7;
  --green-bd:   #22C55E;
  --amber-bg:   #FFFBEB;
  --amber-bd:   #F59E0B;
  --red:        #C8102E;
  --red-bg:     #FEF2F2;
  --red-bd:     #EF4444;
  --orange:     #EA580C;
}

body.pg-org-demo { height: 100%; font-family: 'Roboto', sans-serif; color: var(--text); -webkit-font-smoothing: antialiased; background: #F5F5F5; }

/* ── Header ── */
body.pg-org-demo .header{
  background: var(--navy);
  height: 58px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 3px solid var(--orange);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.header-logo { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.header-text h1 { font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 800; color: var(--white); letter-spacing: 0.04em; line-height: 1.2; }
.header-text p  { font-size: 12px; color: rgba(255,255,255,0.6); letter-spacing: 0.03em; font-weight: 600; margin: 2px 0 0; }
.header-right   { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header-service-label { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; border-left: 1px solid rgba(255,255,255,0.15); padding-left: 16px; }
body.pg-org-demo .header-service-label .svc-line1{ font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 800; color: var(--white); letter-spacing: 0.04em; line-height: 1.2; }
.header-service-label .svc-line2 { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.04em; font-weight: 600; }

body.pg-org-demo .btn-header-outline{ background: transparent; border: 2px solid rgba(255,255,255,0.4); border-radius: 8px; padding: 7px 14px; cursor: pointer; color: var(--white); font-size: 13px; font-weight: 700; transition: background 0.15s; }
body.pg-org-demo .btn-header-outline:hover{ background: rgba(255,255,255,0.1); }

.operator-badge { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.operator-badge .op-name { font-size: 13px; font-weight: 700; color: var(--white); line-height: 1.2; }
.operator-badge .op-meta { font-size: 11px; color: rgba(255,255,255,0.55); }

/* ── LOGIN ── */
#screen-login { display: flex; flex-direction: column; min-height: 100vh; }
body.pg-org-demo .login-body{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; }

body.pg-org-demo .login-card{ background: var(--white); border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); width: 100%; max-width: 480px; overflow: hidden; }
body.pg-org-demo .login-card-header{ background: var(--navy); padding: 20px 24px; }
body.pg-org-demo .login-card-header h2{ font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 800; color: var(--white); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; }
body.pg-org-demo .login-card-header p{ font-size: 12px; color: rgba(255,255,255,0.85); margin: 0; margin-top: 1px; }
.login-card-body { padding: 28px 24px; }

body.pg-org-demo .field-group{ margin-bottom: 12px; }
body.pg-org-demo .field-label{ font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; text-transform: none; color: #1C2B3A; margin-bottom: 6px; display: block; }
body.pg-org-demo .field-input{ width: 100%; padding: 11px 13px; border: 1.5px solid #8B95A1; border-radius: 6px; font-size: 15px; font-family: 'Roboto', sans-serif; color: var(--text); background: var(--white); transition: border-color 0.15s; }
body.pg-org-demo .field-input:focus-visible{
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18);
  background: #ffffff;
}

body.pg-org-demo .domain-detect{ font-size: 12px; color: #C04A00; font-weight: 700; margin-top: 4px; min-height: 0; }

body.pg-org-demo .btn-signin{ width: 100%; background: var(--orange); color: var(--white); border: none; border-radius: 8px; padding: 14px; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s; margin-top: 4px; }
body.pg-org-demo .btn-signin:hover{ background: #C04A00; }

body.pg-org-demo .login-error{ color: var(--red); font-size: 13px; font-weight: 700; margin-top: 10px; display: none; }
body.pg-org-demo .login-error.visible{ display: block; }

body.pg-org-demo .demo-hint{ background: var(--amber-bg); border: 1px solid var(--amber-bd); border-radius: 8px; padding: 12px 14px; margin-top: 16px; margin-bottom: 14px; }
body.pg-org-demo .demo-hint p{ font-size: 12px; color: #64748B; line-height: 1.5; }
body.pg-org-demo .demo-hint strong{ font-weight: 700; color: #C04A00; }
body.pg-org-demo .demo-hint .demo-fill{ background: none; border: none; color: #C04A00; font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
body.pg-org-demo .demo-fill-btn{ background: #fff; border: 1.5px solid #8B95A1; color: #152332; font-size: 12px; font-weight: 700; cursor: pointer; padding: 5px 11px; border-radius: 20px; font-family: 'Roboto', sans-serif; display: inline-flex; align-items: center; gap: 5px; transition: background 0.15s, color 0.15s; }
body.pg-org-demo .demo-fill-btn:hover, body.pg-org-demo .demo-fill-btn.active{ background: #152332; border-color: #152332; color: #fff; }

.login-footer { text-align: center; padding: 20px; font-size: 12px; color: var(--muted); }
.login-page-footer { background: var(--navy); padding: 10px 32px 8px; text-align: center; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid rgba(255,255,255,0.08); }
.login-page-footer .footer-policy-links { display: flex; gap: 10px; flex-wrap: nowrap; align-items: center; justify-content: center; }
.login-page-footer .footer-policy-links a, .login-page-footer .footer-cookie-btn { font-size: 11px; color: rgba(255,255,255,0.7); text-decoration: none; font-family: 'Roboto', sans-serif; background: none; border: none; cursor: pointer; padding: 0; white-space: nowrap; }
.login-page-footer .footer-policy-links a:hover, .login-page-footer .footer-cookie-btn:hover { color: rgba(255,255,255,0.95); text-decoration: underline; }
body.pg-org-demo .login-page-footer .footer-sep{ color: rgba(255,255,255,0.3); font-size: 11px; }
body.pg-org-demo .login-page-footer .footer-copy{ font-size: 11px; color: rgba(255,255,255,0.55); text-align: center; width: 100%; }

/* ── DASHBOARD ── */
#screen-dashboard { display: none; flex-direction: column; min-height: 100vh; }
body.pg-org-demo .dash-body{ max-width: 850px; margin: 0 auto; width: 100%; padding: 24px 20px; box-sizing: border-box; }

/* Responsive — dash-body */
@media (max-width: 600px) {
  body.pg-org-demo .dash-body { padding: 16px 16px; }
  body.pg-org-demo .summary-strip { grid-template-columns: 1fr 1fr; display: grid; }
}
@media (max-width: 380px) {
  body.pg-org-demo .dash-body { padding: 12px 12px; }
  body.pg-org-demo .summary-strip { grid-template-columns: 1fr; }
}

.dash-section-title { font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }

.summary-strip { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.summary-card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; flex: 1; min-width: 130px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.summary-card .sc-val  { font-family: 'Roboto', sans-serif; font-size: 28px; font-weight: 900; color: var(--navy); line-height: 1; }
.summary-card .sc-label { font-size: 12px; color: var(--muted); font-weight: 700; margin-top: 4px; }

.caseload-table { background: var(--white); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); overflow: hidden; border: 1px solid var(--border); }
.caseload-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.13s; }
.caseload-row:last-child { border-bottom: none; }
.caseload-row:hover { background: #FFFBF8; }
.caseload-row.header-row { background: #F8FAFC; cursor: default; padding: 10px 18px; }
.caseload-row.header-row:hover { background: #F8FAFC; }

.cr-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #E2E8F0; display: flex; align-items: center; justify-content: center; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 800; color: var(--muted); }
.cr-avatar img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.cr-name-block { flex: 0 0 220px; min-width: 0; }
.cr-name  { font-size: 15px; font-weight: 700; color: var(--text); }
.cr-meta  { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cr-scheme { flex: 1; min-width: 110px; }
.scheme-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.scheme-chc  { background: #DBEAFE; color: #1E40AF; }
.scheme-la   { background: #F0FDF4; color: #15803D; }
.scheme-sds  { background: #FCE7F3; color: #9D174D; }
.scheme-alert   { background: #FEF2F2; color: #B91C1C; }
.scheme-caution { background: #FFF7ED; color: #C04A00; }
.scheme-neutral { background: #E2E8F0; color: #334155; }
.cr-visit { flex-shrink: 0; text-align: right; min-width: 110px; }
.cr-visit .visit-label { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.cr-visit .visit-val   { font-size: 13px; font-weight: 700; color: var(--text); margin-top: 2px; }
.cr-visit .visit-next  { font-size: 12px; color: var(--orange); margin-top: 1px; }
.cr-arrow { font-size: 18px; color: var(--muted); flex-shrink: 0; }

.col-hdr { font-family: 'Roboto', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ── CLIENT RECORD ── */
#screen-record { display: none; flex-direction: column; min-height: 100vh; }
body.pg-org-demo .record-body{ flex: 1; max-width: 860px; margin: 0 auto; width: 100%; padding: 20px 20px 40px; }

/* DNACPR banner */
.dnacpr-banner { background: var(--red-bg); border-bottom: 3px solid var(--red-bd); padding: 14px 20px; display: flex; align-items: center; gap: 14px; }
.dnacpr-icon { font-size: 28px; flex-shrink: 0; }
.dnacpr-text h3 { font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 900; color: var(--red); letter-spacing: 0.08em; text-transform: uppercase; }
.dnacpr-text p  { font-size: 13px; color: #7F1D1D; margin-top: 2px; }
.btn-dnacpr { margin-left: auto; background: var(--red); color: var(--white); border: none; border-radius: 6px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; }

/* Back bar */
.back-bar { padding: 14px 0 0; display: flex; align-items: center; gap: 10px; }
.btn-back { background: none; border: 1.5px solid var(--border); border-radius: 6px; padding: 7px 14px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: border-color 0.13s; }
.btn-back:hover { border-color: var(--orange); color: var(--orange); }

.person-card { background: transparent; border-radius: 0; border: none; box-shadow: none; padding: 0 0 14px 0; margin-top: 0; display: flex; align-items: flex-start; gap: 16px; border-bottom: 1px solid #E2E8F0; }
.person-photo { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.person-info h2 { font-family: 'Roboto', sans-serif; font-size: 22px; font-weight: 800; color: var(--text); }
body.pg-org-demo .person-info .person-meta{ font-size: 14px; color: var(--muted); margin-top: 4px; }
.person-info .person-ward { font-size: 13px; color: var(--orange); margin-top: 3px; font-weight: 700; }

/* Medical alert tiles */
.alert-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 14px; }
.alert-tile { border-radius: 8px; padding: 12px 14px; }
.alert-tile .at-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.alert-tile .at-val   { font-size: 16px; font-weight: 700; color: var(--text); }
.tile-allergy { background: #FFF1F2; border: 1px solid #FECDD3; }
.tile-allergy .at-val { color: #BE123C; }
.tile-condition { background: #EFF6FF; border: 1px solid #BFDBFE; }
.tile-blood { background: #FFF1F2; border: 1px solid #FECDD3; }

/* Info tiles */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.info-tile { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.info-tile .it-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.info-tile .it-val   { font-size: 14px; color: var(--text); line-height: 1.4; }

.essential-notes { background: var(--amber-bg); border: 1.5px solid var(--amber-bd); border-radius: 8px; padding: 14px 16px; margin-top: 10px; }
.essential-notes .en-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #92400E; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.essential-notes p { font-size: 14px; color: #78350F; line-height: 1.5; }

/* Section headers */
.section-hdr { font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; border-top: 1px solid var(--border); padding-top: 16px; }

/* Emergency contacts */
.ec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ec-card { border-radius: 8px; border: 1px solid var(--border); padding: 12px 14px; display: flex; align-items: center; gap: 12px; background: var(--white); }
.ec-card.primary { border-color: var(--amber-bd); border-width: 1.5px; }
.ec-label-primary { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }
.ec-label-sec { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.ec-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #E2E8F0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Roboto', sans-serif; font-weight: 800; font-size: 14px; color: var(--muted); }
.ec-info .ec-name { font-size: 15px; font-weight: 700; color: var(--text); }
.ec-info .ec-rel  { font-size: 12px; color: var(--muted); }
.ec-info .ec-phone { font-size: 13px; font-weight: 700; color: var(--text); margin-top: 4px; letter-spacing: 0.04em; }
.btn-call { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; background: var(--green); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }

/* Detail blocks */
.detail-block { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.detail-block h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.detail-block p  { font-size: 14px; color: var(--text); line-height: 1.5; }
.detail-row { display: flex; gap: 6px; margin-bottom: 5px; font-size: 14px; }
.detail-row .dr-label { font-weight: 700; color: var(--text); flex-shrink: 0; min-width: 100px; }
.detail-row .dr-val   { color: var(--text); }
.condition-block { margin-bottom: 14px; }
.condition-block:last-child { margin-bottom: 0; }
.condition-name { font-size: 15px; font-weight: 700; color: var(--text); }
.condition-severity { display: inline-flex; gap: 8px; margin: 3px 0 6px; }
.badge-severity { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; }
.badge-severe   { background: #FEE2E2; color: #991B1B; }
.badge-moderate { background: #FEF3C7; color: #92400E; }
.badge-ongoing  { background: #F1F5F9; color: #475569; }
.condition-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }


/* ── CARE PLAN SECTION ── */
.care-plan-block { background: #FFF7ED; border: 1.5px solid #F5C49A; border-radius: 10px; padding: 16px 18px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(28,43,58,0.08); }
.care-plan-block h4 { font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.scheme-info { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.scheme-name-large { font-size: 16px; font-weight: 700; color: var(--text); }
.ndis-tooltip { position: relative; display: inline-block; }
.ndis-tip-trigger { font-size: 11px; background: #FEF3E2; color: #C04A00; border: none; border-radius: 4px; padding: 2px 7px; cursor: pointer; font-weight: 700; }
.ndis-tip-bubble { display: none; position: absolute; top: 24px; left: 0; background: var(--navy); color: var(--white); font-size: 12px; line-height: 1.5; padding: 10px 12px; border-radius: 8px; width: 260px; z-index: 10; }
.ndis-tooltip:hover .ndis-tip-bubble,
.ndis-tip-trigger:focus + .ndis-tip-bubble { display: block; }

.care-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.care-meta-item .cmi-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.care-meta-item .cmi-val   { font-size: 14px; color: var(--text); font-weight: 700; }
.care-meta-item .cmi-sub   { font-size: 12px; color: var(--muted); margin-top: 1px; }

.entitlement-list { margin-bottom: 14px; }
.entitlement-list .el-hdr { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; padding-top: 14px; }
.entitlement-item { display: flex; align-items: center; gap: 5px; padding: 6px 8px; background: #fff; border: 1.5px solid #8B95A1; border-radius: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.entitlement-item .ei-icon { font-size: 13px; flex-shrink: 0; }
.entitlement-item .ei-text { font-size: 11px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.entitlement-item .ei-freq { font-size: 11px; color: var(--orange); margin-left: auto; white-space: nowrap; }

.provider-row { display: flex; align-items: center; gap: 12px; background: #FAF9F8; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; }
.provider-icon { width: 36px; height: 36px; background: var(--navy); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.provider-info .pi-name { font-size: 14px; font-weight: 700; color: var(--text); }
.provider-info .pi-type { font-size: 12px; color: var(--muted); }

/* Visit log */
.visit-log { }
.visit-entry { background: var(--white); border: 1.5px solid #8B95A1; border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; }
.ve-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ve-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--navy); flex-shrink: 0; }
.ve-dot.today { background: var(--green); }
.ve-dot.missed { background: #EF4444; }
.ve-when { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; }
.ve-carer { font-size: 12px; color: var(--muted); margin-left: auto; }
.ve-note { font-size: 13px; color: var(--text); line-height: 1.4; }
.ve-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ve-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: #F1F5F9; color: #475569; }

.btn-add-note { width: 100%; background: var(--orange); color: var(--white); border: none; border-radius: 8px; padding: 13px; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 800; cursor: pointer; transition: background 0.15s; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-add-note:hover { background: #C04A00; }

/* Legal docs */
.legal-block { background: var(--red-bg); border: 1.5px solid #FECDD3; border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; }
.legal-block .lb-title { font-size: 13px; font-weight: 700; color: var(--red); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.legal-block .lb-body  { font-size: 13px; color: #7F1D1D; line-height: 1.4; }
.legal-block-plain { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.legal-block-plain .lbp-text { font-size: 14px; color: var(--text); flex: 1; }
.legal-block-plain .lbp-text strong { font-weight: 700; }
.btn-view-doc { background: var(--navy); color: var(--white); border: none; border-radius: 6px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.btn-view-doc.red { background: var(--red); }

/* Audit footer */
.audit-footer { text-align: center; padding: 24px 20px 16px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.audit-footer strong { color: var(--orange); }

/* Navy site footer */
body.pg-org-demo .site-footer{ background: var(--navy); padding: 8px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
body.pg-org-demo .site-footer .footer-access{ font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.5; }
body.pg-org-demo .site-footer .footer-access strong{ color: rgba(255,255,255,0.75); font-weight: 600; }
body.pg-org-demo .site-footer .footer-right{ text-align: right; }
body.pg-org-demo .site-footer .footer-links{ display: flex; gap: 6px 14px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 2px; }
body.pg-org-demo .site-footer .footer-links a{ font-size: 11px; color: rgba(255,255,255,0.5); text-decoration: none; }
body.pg-org-demo .site-footer .footer-links a:hover{ color: rgba(255,255,255,0.9); }
body.pg-org-demo .site-footer .footer-sep{ color: rgba(255,255,255,0.25); font-size: 11px; }
body.pg-org-demo .site-footer .footer-copy{ font-size: 11px; color: rgba(255,255,255,0.35); }

/* DG tooltip */
.dg-tip-wrap:hover .dg-tip { opacity: 1 !important; pointer-events: auto !important; }

/* Review alert */
.review-alert { background: #FFFBEB; border: 1.5px solid #F59E0B; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.review-alert .ra-text { font-size: 13px; font-weight: 700; color: #92400E; }
.review-alert .ra-sub  { font-size: 12px; color: #B45309; margin-top: 1px; }

@media (max-width: 600px) {
  .header-text h1 { font-size: 14px; }
  .alert-tiles { grid-template-columns: 1fr; }
  .info-grid   { grid-template-columns: 1fr; }
  .ec-grid     { grid-template-columns: 1fr; }
  .care-meta-grid { grid-template-columns: 1fr; }
  .summary-strip  { flex-direction: column; }
  .caseload-row   { flex-wrap: wrap; }
  body.pg-org-demo .site-footer{ padding-bottom: 5%; }
  #record-grid{ grid-template-columns: 1fr !important; height: auto !important; overflow-y: visible !important; }
  .panel-chevron-left{ transform: rotate(90deg); }
  .panel-chevron-right{ transform: rotate(-90deg); }
  #panel-centre{ order: 1; height: auto !important; }
  #panel-care-plan{ order: 2; height: auto !important; }
  #panel-health-info{ order: 3; height: auto !important; }
}

/* ── Demo bar ── */
body.pg-org-demo .demo-bar{ background: #E8ECF0; border-bottom: 1px solid #CBD5E1; padding: 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
body.pg-org-demo .demo-bar-label{ font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 600; color: #64748B; letter-spacing: 0.01em; text-transform: none; }
.demo-bar-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; }
.demo-nav { width: 28px; height: 28px; border-radius: 50%; background: #334155; color: #fff; border: none; cursor: pointer; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.demo-nav:hover { background: #1E293B; }
.demo-state-label { font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700; color: #1E293B; white-space: nowrap; min-width: 90px; text-align: center; }
.org-btn { background: #fff; color: #334155; border: 1.5px solid #94A3B8; border-radius: 20px; font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 700; padding: 4px 11px; cursor: pointer; transition: all 0.15s; white-space: nowrap; width: auto; margin-top: 0; }
.org-btn:hover:not(.on) { background: #F1F5F9; }
.org-btn.on { background: #1E293B; color: #fff; border-color: #1E293B; }

/* Scope notice banner */
.scope-notice { display: flex; align-items: flex-start; gap: 10px; background: #FEF3E2; border-bottom: 1px solid #FED7AA; padding: 10px 20px; }
.scope-notice .sn-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #C04A00; margin-bottom: 2px; }
.scope-notice .sn-text  { font-size: 12px; color: var(--navy); line-height: 1.4; }


/* ── Loading screen ── */
body.pg-org-demo .mlj-lbg{position:fixed;inset:0;z-index:9999;background:#152332 url('Images%20-%20Ice%20Jar/mylifejars%20app/mylifejars-background.png') center/cover no-repeat;display:flex;align-items:center;justify-content:center;transition:opacity 0.5s ease}
body.pg-org-demo .mlj-lcard{background:#fff;border-radius:16px;padding:40px 48px 44px;text-align:center;max-width:380px;width:90%;box-shadow:0 4px 24px rgba(0,0,0,0.13);border:1.5px solid #C9A84C}
@keyframes mlj-spin{to{transform:rotate(360deg)}}
body.pg-org-demo .mlj-spinner{width:36px;height:36px;border:3px solid #E2E8F0;border-top-color:#C9A84C;border-radius:50%;animation:mlj-spin 0.8s linear infinite;margin:20px auto 0}

/* ── EMR styles (copied from es.html) ── */
.emr-identity { display:flex; align-items:center; gap:12px; padding:12px 20px 14px; border-bottom:1px solid #E2E8F0; margin-bottom:12px; }
.emr-avatar { width:52px; height:52px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Roboto',sans-serif; font-weight:800; font-size:17px; flex-shrink:0; overflow:hidden; border:2px solid #8B95A1; }
.emr-avatar img { width:100%; height:100%; object-fit:cover; }
.emr-identity-text { flex:1; min-width:0; }
.emr-identity-text h2 { font-family:'Roboto',sans-serif; font-weight:800; font-size:18px; color:var(--navy); margin:0 0 2px; }
.emr-identity-meta { font-size:13px; color:var(--muted); margin:0 0 2px; }
.emr-identity-ref  { font-size:11px; color:#94A3B8; margin:2px 0 0; }
.emr-critical { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; margin-bottom:8px; background:#949494; border-radius:14px; overflow:hidden; }
.emr-critical__cell { background:#FAFBFC; padding:12px 10px; display:flex; flex-direction:column; gap:4px; text-align:center; }
.emr-critical__cell--alert { background:#FEE2E2; }
.emr-critical__cell--alert .v { color:#991B1B; }
.emr-critical__cell--conditions { background:#DBEAFE; }
.emr-critical__cell--conditions .v { color:#1E40AF; }
.emr-critical__cell--blood { background:#FEE2E2; }
.emr-critical__cell--blood .v { color:#991B1B; }
.emr-critical__cell .l { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); line-height:1.3; }
.emr-critical__cell .v { font-family:'Roboto',sans-serif; font-weight:700; font-size:15px; color:var(--navy); line-height:1.2; }
.emr-meds-row { display:grid; grid-template-columns:1fr 1fr; margin-bottom:8px; border:1px solid #CBD5E1; border-radius:10px; overflow:hidden; }
.emr-meds-cell { background:#FAFBFC; padding:10px 12px; }
.emr-meds-cell:first-child { border-right:1px solid #CBD5E1; }
.emr-meds-cell p { font-size:13px; color:var(--text); line-height:1.45; margin:4px 0 0; }
.emr-micro-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); }
.emr-essential { margin-bottom:8px; padding:10px 12px 10px 14px; background:#FFFBEB; border:1px solid #F59E0B; border-left:4px solid #F59E0B; border-radius:10px; display:flex; gap:10px; align-items:flex-start; }
.emr-essential__label { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; color:#92400E; margin-bottom:4px; }
.emr-essential__text { font-size:13px; color:var(--text); line-height:1.5; margin:0; }
.emr-essential__body { flex:1; }
.emr-ice-wrap { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:8px; }
.emr-ice-tile { display:flex; flex-direction:column; gap:4px; align-self:stretch; }
.emr-ice-tile__label { font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); padding-left:2px; }
.emr-ice-tile--primary .emr-ice-tile__label { color:#16A34A; }
.emr-ice { display:flex; align-items:center; gap:12px; padding:10px 12px; background:#F0FDF4; border:1px solid #BBF7D0; border-radius:12px; cursor:pointer; height:100%; box-sizing:border-box; }
.emr-ice--secondary { background:#F1F5F9; border-color:#CBD5E1; }
.emr-ice--secondary .emr-ice__body strong { color:#64748B; }
.emr-ice--secondary .emr-ice__phone { color:#64748B !important; }
.emr-ice--secondary .emr-ice__call { background:#94A3B8; }
.emr-ice__avatar { width:42px; height:42px; border-radius:50%; background:#94A3B8; color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Roboto',sans-serif; font-weight:700; font-size:13px; flex-shrink:0; overflow:hidden; }
.emr-ice__avatar img { width:100%; height:100%; object-fit:cover; }
.emr-ice__body { flex:1; display:flex; flex-direction:column; min-width:0; }
.emr-ice__body strong { font-size:14px; color:var(--navy); }
.emr-ice__body span { font-size:12px; color:var(--muted); margin-top:1px; }
.emr-ice__phone { font-family:ui-monospace,monospace; font-size:12px !important; color:var(--navy) !important; font-weight:600; margin-top:3px !important; }
.emr-ice__call { width:46px; height:46px; border-radius:50%; background:#16A34A; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; text-decoration:none; border:none; cursor:pointer; }
.emr-ice__call:hover { background:#15803D; }
.further-divider { margin:4px 0 4px; padding:10px 0; }

/* ── org-demo sidebar — hamburger / mobile nav ── */
.org-sidebar-hamburger {
  display: none;
  position: fixed;
  top: 68px;
  left: 10px;
  z-index: 250;
  background: var(--navy);
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.org-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 290;
}
.org-sidebar-overlay.visible { display: block; }
.org-sidebar-close {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  line-height: 1;
}

@media (max-width: 880px) {
  /* Tablet + phone: nav moves to the bottom tab bar (.mobile-bottom-nav), matching app.html — icon sidebar and its hamburger/drawer are desktop-only now */
  body.pg-org-demo .org-sidebar { display: none !important; }
  body.pg-org-demo .org-sidebar.mobile-open {
    display: flex !important;
    position: fixed !important;
    left: 0; top: 0; bottom: 0;
    width: 220px !important;
    height: 100% !important;
    z-index: 300;
    box-shadow: 4px 0 24px rgba(0,0,0,0.25);
  }
  body.pg-org-demo .org-sidebar.mobile-open .org-sidebar-item {
    width: 100% !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: 12px 16px !important;
    gap: 12px !important;
    min-height: 0 !important;
    border-left: none !important;
    border-radius: 8px !important;
    margin: 0 8px !important;
    box-sizing: border-box !important;
  }
  body.pg-org-demo .org-sidebar.mobile-open .org-sidebar-item span {
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
  }
}

/* ── app.html — mobile bottom tab bar ── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 62px;
  background: #fff;
  border-top: 1px solid #E8EAED;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  z-index: 200;
  justify-content: space-around;
  align-items: stretch;
}
.mobile-bottom-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  color: #64748B;
  padding: 6px 0;
  font-family: 'Roboto', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.mobile-bottom-tab span {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}
.mobile-bottom-tab.active { color: #D95200; }
.mobile-bottom-tab.active span { color: #D95200; }

/* ── App shell nav ─ icon sidebar → bottom tab bar (tablet + mobile, ≤880px) ── */
@media (max-width: 880px) {
  .app-sidebar { display: none !important; }
  .mobile-bottom-nav { display: flex; }
  /* Remove sidebar left-margin now nav is at bottom */
  .app-flex-outer { margin-left: 0 !important; }
  /* Push content above bottom nav */
  .app-content-inner { padding-bottom: 80px !important; }
}

/* ── Modal action tile — shared 2x2 quick-action tile used inside modals
   (Manage your storage, ICE Code) ── */
.modal-action-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border: 1.5px solid #8B95A1;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

/* ── Modal close (×) button — shared square close button used inside modals ── */
.modal-close-btn {
  background: #F1F5F9;
  border: 1.5px solid #8B95A1;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  /* Top nav mobile: hide search + tier pills only; show ICE/Storage/Profile */
  .mlj-header-status { display: none !important; }
  .mlj-header-search { display: none !important; }
  .mlj-header-tier-pill { display: none !important; }
  /* display:none removes search from grid flow, so pin right to column 3 explicitly */
  .mlj-header-right { grid-column: 3 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; }
  /* Grid: logo auto-width left, search 0, right fills rest */
  .mlj-app-header { grid-template-columns: auto 0 1fr !important; gap: 0 !important; padding: 0 12px !important; }
  /* ICE jar service views (Ambulance/Police/Fire/Coastguard cards) — 3-col → 1-col
     on mobile. Uses a dedicated class rather than an inline-style attribute match —
     the attribute-selector versions below were silently failing because the browser
     re-serialises the style attribute (adds a space after the comma in "repeat(3,1fr)"),
     so the substring never actually matched. Kept those two as a harmless fallback. */
  .ice-record-grid { grid-template-columns: 1fr !important; }
  .app-content-inner[style*="repeat(3,1fr)"],
  .app-content-inner[style*="1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* Storage modal — 2×2 → 1-col on mobile */
  .storage-modal-grid { grid-template-columns: 1fr !important; }
}

/* ── App dashboard header — docked demo bar (shared, ≥601px) ──
   Matches org-demo.html / control-demo.html convention: grey-blue stripe
   docked under the header, not a floating pill. top/left/width set per
   breakpoint below (tablet vs desktop) since the sidebar only exists on
   desktop. */
@media (min-width: 601px) {
  body:not(.activation-mode) .demo-skip {
    background: #E8ECF0 !important;
    border: none !important;
    border-bottom: 1px solid #CBD5E1 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    justify-content: center !important;
    padding: 8px 20px !important;
  }
  /* Two-line PORTAL buttons → single line in the docked stripe */
  body:not(.activation-mode) .demo-skip .demo-skip__btn[style*="flex-direction: column"] {
    flex-direction: row !important;
    gap: 4px !important;
    height: 28px !important;
    padding: 0 10px !important;
  }
}

/* ── App dashboard header — tablet (601–880px) ──
   Row 1: existing navy header, right-cluster justified flush right.
   Row 2: new navy band holding the search bar (centred).
   Row 3: grey demo-skip stripe (docked, from shared block above). */
@media (min-width: 601px) and (max-width: 880px) {
  .mlj-app-header { grid-template-columns: auto 0 1fr !important; gap: 0 !important; }
  .mlj-header-right { grid-column: 3 !important; justify-content: flex-end !important; }
  body:not(.activation-mode) .mlj-header-search {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    padding: 0 20px 8px !important;
    background: var(--mlj-navy-900) !important;
    z-index: 199 !important;
  }
  .mlj-header-search input {
    width: 360px !important;
    height: 38px !important;
  }
  /* Search icon — re-anchor to the left edge of the centred 360px input
     (container is full-width now, so 50% of it minus half the input's
     width lands exactly on the input's left edge). Also clamp its height
     to the input's own 38px (bottom: 8px, matching the container's
     8px bottom padding) — its inline style stretches top:0/bottom:0 to
     fill the WHOLE .mlj-header-search box, which now includes that 8px
     padding strip beneath the input, so the icon's border-right divider
     line was hanging 8px below the input's rounded corner into that gap. */
  .mlj-header-search div[style*="border-right: 1px solid rgb(203, 213, 225)"] {
    left: calc(50% - 180px) !important;
    right: auto !important;
    top: 0 !important;
    bottom: 8px !important;
  }
  body:not(.activation-mode) .demo-skip {
    top: 102px !important;
    left: 0 !important;
    width: 100% !important;
  }
  .app-shell--is-dashboard .app-flex-outer { padding-top: 172px !important; }
  /* Non-dashboard app-flex-outer pages (Jars hubs, Tribe pages, Guardians, Wards, Life Profile, etc.) —
     the docked search band (row 2 above) shows on EVERY page at this width, not just Dashboard,
     so these still need to clear header(56) + docked search band(~46) = ~102px, not just the
     single header row. Using only 58px here left a real gap on pages like Life Profile where
     content sits flush under the header. */
  .app-flex-outer { padding-top: 102px !important; }
  /* Global demo-mode clearance (2026-07-20) — the fixed .demo-skip bar floats
     over the top of every .app-flex-outer page at this width; only Dashboard
     and Memory Jars previously compensated for it via per-page patches.
     102 + 48 (demo-skip's own height) = 150, flush under it, matching the
     same 150px constant already used for .dash-notif-banner.is-demo.
     Dashboard is excluded — it already handles demo clearance itself via
     dash-notif-banner.is-demo, and its own 172px flex-outer padding above
     is deliberately larger breathing room, not a header-clearance number —
     so it's re-asserted unchanged here to win over this broader rule. */
  body.app-is-demo .app-flex-outer { padding-top: 150px !important; }
  body.app-is-demo .app-shell--is-dashboard .app-flex-outer { padding-top: 172px !important; }
  /* Dashboard notification banner has its own hardcoded 58px margin-top
     (sized for the old single-row header) instead of using app-flex-outer's
     padding — override it to clear the tablet header stack. Demo builds
     also have the docked demo bar (row 3) to clear; non-demo builds only
     have row 1 + row 2 (search band), so they need a smaller offset —
     otherwise there's a blank gap where the (absent) demo bar would sit.
     150px = demo-skip's own top(102) + its rendered height(~47.6) — flush,
     no extra gap (the 172px used for app-flex-outer below is deliberately
     larger — that's breathing room before the content CARDS, not this). */
  .dash-notif-banner.is-demo { margin-top: 150px !important; }
  .dash-notif-banner:not(.is-demo) { margin-top: 102px !important; }
}

/* ── App dashboard header — desktop (≥881px) ──
   No row 2: search stays centred inside the header's own grid.
   Demo-skip docks directly under the (single-row) header, offset past
   the icon sidebar. */
@media (min-width: 881px) {
  body:not(.activation-mode) .demo-skip {
    top: 58px !important;
    left: 72px !important;
    width: calc(100% - 72px) !important;
  }
  .app-shell--is-dashboard .app-flex-outer { padding-top: 106px !important; }
  /* Same as tablet — non-dashboard pages only need to clear the single-row header. */
  .app-flex-outer { padding-top: 58px !important; }
  /* Global demo-mode clearance (2026-07-20) — same reasoning as the tablet
     block above: 58 + 48 = 106, matching .dash-notif-banner.is-demo's own
     106px. Dashboard excluded (re-asserted unchanged) for the same reason. */
  body.app-is-demo .app-flex-outer { padding-top: 106px !important; }
  body.app-is-demo .app-shell--is-dashboard .app-flex-outer { padding-top: 106px !important; }
  /* Same fix as tablet — demo builds clear the header + docked demo bar;
     non-demo builds only have the single-row header (no row 2 on desktop
     either, search stays inline), so they need just the header height. */
  .dash-notif-banner.is-demo { margin-top: 106px !important; }
  .dash-notif-banner:not(.is-demo) { margin-top: 58px !important; }
  /* Inset past the icon sidebar (72px, fixed, always visible ≥881px) —
     otherwise the banner's coloured background runs full-bleed behind it,
     which reads as a rendering glitch rather than intentional design.
     Matches the content card grid's own left edge below. */
  .dash-notif-banner { margin-left: 72px !important; }
}

/* ── Jars hub accordion — expanded jar grid ── */
.hub-jar-expand .jar-nav {
  background: #FFF8F0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* ── Health + Things jar nav — hide on mobile (navigation is via Jars Hub accordion) ── */
@media (max-width: 600px) {
  .health-jar-nav { display: none !important; }
  .hub-jar-expand .health-jar-nav { display: block !important; }
  .things-jar-nav { display: none !important; }
  .hub-jar-expand .things-jar-nav { display: block !important; }
  .memory-jar-nav { display: none !important; }
  .hub-jar-expand .memory-jar-nav { display: block !important; }
  .message-jar-nav { display: none !important; }
  .hub-jar-expand .message-jar-nav { display: block !important; }
  .passwords-jar-nav { display: none !important; }
  .hub-jar-expand .passwords-jar-nav { display: block !important; }
}

/* ── Notifications — stack on mobile ── */
@media (max-width: 600px) {
  .notif-cards-row { flex-direction: column !important; }
  .notif-cards-row > div { flex: 0 0 auto !important; width: 100% !important; }
  body:not(.activation-mode) .demo-skip { display: none !important; }
}

/* ── Settings page — mobile fixes ── */
@media (max-width: 600px) {
  .settings-fixed-header { left: 0 !important; }
  .settings-spacer { height: 116px !important; }
  .settings-content-inner { padding-top: 12px !important; padding-left: 12px !important; padding-right: 12px !important; padding-bottom: 80px !important; }
}

/* ── Mobile page layout — catch-all for 36px padded wrappers ── */
@media (max-width: 600px) {
  .mlj-page-header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Life Wall search bar — full width on mobile */
  .lw-search-bar { width: 100% !important; }
  /* Life Wall header buttons — hide icons on mobile */
  .lw-header-actions svg { display: none !important; }
  .mlj-page-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 80px !important;
  }

  /* ── Health jars on a phone (Suke, 2026-08-15) ────────────────────────────
     Three complaints, one cause: the tile and the page header were laid out for
     a desktop column and never re-thought for 360px.

     ⚠ !important on every line. All six headers and both tile parts carry
     their geometry INLINE, and an inline declaration beats any selector - the
     same reason .tj-header-add-btn above needs it. */

  /* The record-type icon. It is decoration on a phone, and the ~48px it takes
     is exactly what the type tag beside it was being clipped for. */
  .hj-tile-icon { display: none !important; }

  /* The tag shared a row with three access badges, all flex-shrink:0, so the
     tag - the only part that CAN shrink - was the part that got the ellipsis.
     Give it the whole first line and let the badges wrap underneath. */
  .hj-tile-head { flex-wrap: wrap !important; }
  .hj-tile-head > div:first-child { flex: 1 1 100% !important; }

  /* Banner, eyebrow, 26px title, Add Record and a five-control filter bar were
     using most of the screen before a single record appeared. */
  .hj-page-block { padding: 14px 12px !important; }
  .hj-page-head  { margin-bottom: 4px !important; }
  .hj-page-title { font-size: 20px !important; }

  /* About My Health - the gap between the title and the first card. */
  .hj-about-title { padding-top: 10px !important; padding-bottom: 4px !important; }
  /* Data tables — horizontal scroll instead of overflow */
  .mlj-table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .mlj-table-scroll > div[style*="grid"],
  .mlj-table-scroll > div[style*="display: grid"] {
    min-width: 520px;
  }
  /* Per-table min-width overrides (2026-07-20) — the generic 520px above is
     a safe floor, but these specific tables have more fixed-width columns
     than that leaves room for, so their content would still squash. Same
     specificity as the generic rule above (class + attribute), so these win
     by source order — one rule per table's exact gridTemplateColumns
     signature so each gets just enough room, no more. Added for: Passwords
     Jar list (7 cols), My Wishes / Letters / message-delivery tables (5-6
     cols), and the Risk Alert / Safe & Well notification log (5 cols) —
     all reported cutting off columns on mobile with no way to see the rest. */
  /* Passwords Jar table — hide Icon, Strength AND Type columns on mobile
     (2026-07-26, so a whole row fits on one screen without horizontal
     scroll). Header/row cells carry .pw-col-icon / .pw-col-strength /
     .pw-col-type (added in app.html) so they can be targeted directly.
     Hiding grid children just removes them from auto-placement — the
     remaining 4 real cells (entry, password, access, edit) then need only
     4 explicit tracks, so grid-template-columns is overridden here too;
     min-width shrinks to match.
     NOTE (fix, same day): the first pass at this (Strength-only) listed 5
     tracks (52px 1fr 140px 100px 44px) instead of the correct 6, silently
     dropping the 80px Access track entirely — corrected once, then again
     here as Icon and Type are removed too. */
  .pw-col-strength, .pw-col-icon, .pw-col-type { display: none !important; }
  .mlj-table-scroll > div[style*="grid-template-columns: 52px 1fr 140px 100px 100px 80px 44px"] {
    grid-template-columns: 1fr 140px 80px 44px !important;
    min-width: 380px;
  }
  .mlj-table-scroll > div[style*="grid-template-columns: 130px 120px 1fr 76px 44px"] { min-width: 580px; }
  .mlj-table-scroll > div[style*="grid-template-columns: 150px 120px 1fr 76px 44px"] { min-width: 600px; }
  .mlj-table-scroll > div[style*="grid-template-columns: 44px 160px 1fr 82px 150px 44px"] { min-width: 680px; }
  .mlj-table-scroll > div[style*="grid-template-columns: 120px 1fr 90px 110px 44px"] { min-width: 580px; }
.mlj-table-scroll > div[style*="grid-template-columns: 36px 1fr 36px 100px 32px"] { min-width: 300px; }

  /* Passwords Jar table header — mobile-only sticky top fix (2026-07-26,
     same bug/fix as Memory Jars' .mj-filter-bar and Things Jars' .tj-filter-bar
     above). This header ships position:sticky; top:167px so it stacks correctly
     below the page's sticky filter bar (top:110px) on desktop/tablet, where
     .mlj-table-scroll has no overflow set and isn't itself a scroll container.
     But on mobile the rule right above this one forces
     .mlj-table-scroll { overflow-x: auto !important }, which (per the CSS spec)
     also computes overflow-y to auto, turning .mlj-table-scroll into a NEW
     scrolling container — so the header's sticky top is now measured from the
     top of that box, not the page. Since the header is the first child of
     .mlj-table-scroll, top:167px pushed it ~167px down from the top of the
     table itself, landing it visually between rows 2 and 3 instead of above
     row 1. Zeroed out to sit flush at the top of its own (mobile-only)
     scroll box instead. */
  .pw-table-header { top: 0 !important; }

  /* Collapse repeat(5) grids */
  [style*="repeat(5, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  [style*="repeat(5,1fr)"]  { grid-template-columns: 1fr 1fr !important; }
  /* Collapse repeat(7) calendar — scroll instead */
  [style*="repeat(7, 68px)"],
  [style*="repeat(7,68px)"] { min-width: 500px; }
  /* Sticky edit panel height — account for bottom nav */
  [style*="calc(100vh - 64px)"] { max-height: calc(100vh - 120px) !important; }
  /* ICE header row — allow wrap */
  .ice-header-row { flex-wrap: wrap !important; gap: 8px !important; }
  /* Placeholder jar icon — scale down */
  .mlj-placeholder-icon,
  [style*="fontSize:'36px'"][style*="marginBottom"] { font-size: 26px !important; }
  /* Dashboard section header padding */
  [class="mlj-page-header"] { padding-left: 12px !important; padding-right: 12px !important; }
  /* Billing plan cards — stack on mobile */
  .billing-plan-cards { flex-direction: column !important; }
  /* Guardians permission grid — 3 col on mobile */
  [style*="repeat(6, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  /* Safe & Well + others: large padding empty states */
  [style*="padding:'40px 36px'"] { padding: 28px 12px !important; }
}

/* ── Org-demo status pills & connect button ── */
body.pg-org-demo .status-pill { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; font-family:'Roboto',sans-serif; }
body.pg-org-demo .status-pill--active { background:#DCFCE7; color:#166534; border:1.5px solid #86EFAC; }
body.pg-org-demo .status-pill--api    { background:#FFF3E8; color:#C04A00; border:1.5px solid #FDBA74; }
body.pg-org-demo .status-pill--notify { background:#FFF8F0; color:#92400E; border:1.5px solid #FED7AA; }
body.pg-org-demo .status-pill--noapi { background:#F1F5F9; color:#64748B; border:1.5px solid #CBD5E1; }
body.pg-org-demo .btn-connect-api { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; }
/* Org-demo ICE Record panel: align box margins with emr-critical/emr-meds-row (flush to the 22px panel padding) and stack emergency contacts */
body.pg-org-demo .ctx-note { margin: 0 0 16px; }
body.pg-org-demo .emr-languages { margin: 0 0 16px; width: auto; }
body.pg-org-demo .emr-ice-wrap { display: flex; flex-direction: column; gap: 10px; }
/* ══════════════════════════════════════════════════════════════
   ctx-note — service-specific context note callout boxes (es.html)
   One per service; colour driven by modifier class.
══════════════════════════════════════════════════════════════ */
.ctx-note {
  margin: 16px 20px 16px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  border-left-width: 4px;
  border-left-style: solid;
}
.ctx-note__label {
  font-family: 'Roboto', sans-serif;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
}
.ctx-note__body {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: #1E293B;
  margin: 0;
  line-height: 1.55;
}
.ctx-note__body--empty {
  color: #94A3B8;
  font-style: italic;
}

/* Ambulance — NHS green */
.ctx-note--ambulance {
  background: #F0FDF4;
  border-color: #86EFAC;
  border-left-color: #007F3B;
}
.ctx-note--ambulance .ctx-note__label { color: #166534; }

/* Police — UK Police blue */
.ctx-note--police,
.ctx-note--police-empty {
  background: #EFF6FF;
  border-color: #BFDBFE;
  border-left-color: #003087;
}
.ctx-note--police .ctx-note__label,
.ctx-note--police-empty .ctx-note__label { color: #003087; }

/* Fire — red */
.ctx-note--fire {
  background: #FEF2F2;
  border-color: #FECACA;
  border-left-color: #B91C1C;
}
.ctx-note--fire .ctx-note__label { color: #B91C1C; }

/* Coastguard — navy blue */
.ctx-note--coastguard {
  background: #EFF6FF;
  border-color: #BFDBFE;
  border-left-color: #003E87;
}
.ctx-note--coastguard .ctx-note__label { color: #003E87; }

/* ── Fire record — occupants grid ── */
.fire-occ-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 520px) {
  .fire-occ-grid { grid-template-columns: 1fr; }
}

/* Emergency-contacts notify note — tablet only, match desktop's 75% (the 880px catch-all block forces 100% !important on this otherwise) */
@media (min-width: 601px) and (max-width: 880px) {
  .contact-notify-note { width: 75% !important; }
}

/* Personal Details modal (Life Profile) — mobile: photo above fields (not
   beside them), and all paired fields single-column instead of 2-up. */
@media (max-width: 600px) {
  .lp-personal-photorow { flex-direction: column !important; }
  .lp-personal-indent { padding-left: 0 !important; }
  .lp-personal-grid { grid-template-columns: 1fr !important; width: 100% !important; }
}

/* Festival photo gallery — activation-event.html, between the QR-access
   card and the "Adding information" card on the final/completion screen
   (2026-07-23). Desktop/tablet: one row of 6. Mobile large (<=600px):
   3 rows of 2. Small phone (<=380px): kept at 2 columns (still 3 rows) but
   with a tighter gap and softer corners, since 6 individual columns would
   be unreadably small on that width anyway — my call per Suke's "decide
   for small phone" instruction. */
.festival-photo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 20px 0;
}
.festival-photo-grid__item {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  background: #fff;
}
@media (max-width: 600px) {
  .festival-photo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
@media (max-width: 380px) {
  .festival-photo-grid {
    gap: 6px;
  }
  .festival-photo-grid__item {
    border-radius: 8px;
  }
}

/* Thornfield Festival top-bar logo -- desktop/tablet gets a 20% larger mark
   (100px -> 120px) per Suke's request (2026-07-23); mobile stays as-is. */
.topbar-logo-thornfield {
  width: 100px;
  height: auto;
}
@media (min-width: 601px) {
  .topbar-logo-thornfield {
    width: 120px;
  }
}


/* ===== Destructive buttons — two rungs, added 2026-08-09 =====================
   Suke's decision: the Delete that OPENS a confirmation is red outline; the
   Delete that actually destroys is filled red. So the irreversible click gains
   visual weight over the click that merely offers it, and the first Delete stops
   competing with a filled orange "Save changes" beside it — which matters with
   this audience, because muscle memory reaches for the coloured button.

   The app was already doing this in ten places and only the details drifted:
   border 1px vs 1.5px, #FCA5A5 vs #FECACA vs #DC2626, text #DC2626 vs #EF4444,
   background none vs #fff vs #FEF2F2. The shared org modal was the real outlier
   with BOTH of its Deletes filled red.

   ⚠ These rules deliberately set COLOUR ONLY — no padding, radius, font-size or
   width. Those stay inline on each button, because a modal footer button and an
   inline "Yes, delete" strip are different sizes and forcing one size on both
   would break the footers this was meant to tidy. Do not add box metrics here.

   Both variants carry a 1.5px border so a Delete and its confirm are the same
   size; the filled one previously had border:none and sat 3px smaller than the
   outline button beside it. */
.btn-danger {
  background: #DC2626;
  border: 1.5px solid #DC2626;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.btn-danger:hover { background: #B91C1C; border-color: #B91C1C; }

.btn-danger-outline {
  background: #fff;
  border: 1.5px solid #DC2626;
  color: #DC2626;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.btn-danger-outline:hover { background: #FEF2F2; }

.btn-danger:disabled,
.btn-danger-outline:disabled { opacity: 0.5; cursor: default; }


/* ═══════════════════════════════════════════════════════════════════════════
   .mlj-x — THE ONE REMOVE CROSS. Added 2026-08-24 (Suke).
   ═══════════════════════════════════════════════════════════════════════════

   There were TWO remove controls doing the same job in app.html: a grey FILLED
   BUTTON (#CBD5E1 background) on middle names and previous last names, and a
   plain faint-grey × (#94A3B8, no background) on emails, mobiles and two other
   lists. Four of one, two of the other — so the button was the minority style,
   not the standard.

   ⚠ Black and bold, not faint grey. #94A3B8 on white is a low-contrast control
   whose whole job is "undo this" — the one thing somebody hunts for.

   ⚠ NOT orange. Orange is this app`s PRIMARY ACTION colour, and removing a row
   is not a primary action. Same reasoning as the 2026-08-24 decision that moved
   "Replace my authenticator" and "switch it off" from orange to navy.

   ⚠⚠ THIS FILE IS *NOT* PARITY-ENFORCED, contrary to what the handover, the
   backup skill and an app.html comment all say. `check-repo-parity.py` enforces
   exactly FIVE files — field-policy.js, sheets-driver.js, ice-records.js,
   field-crypto.js, sheets-multi.js — and styles.css is not among them. The two
   copies already differ by 522 lines and 31KB, legitimately: b2b points at a
   different background image path and the user app carries dashboard mobile
   rules b2b has no dashboard for. ⇒ This block is appended to BOTH copies
   independently. Do not "fix" the drift by copying one over the other.
   ═══════════════════════════════════════════════════════════════════════════ */
.mlj-x {
  background: none;
  border: none;
  padding: 0 6px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--mlj-navy-900, #152332);
  cursor: pointer;
  flex-shrink: 0;
}
.mlj-x:hover { color: #C04A00; }
/* ⚠ focus-visible, not focus — a mouse click must not leave a ring behind. */
.mlj-x:focus-visible { outline: 2px solid #C04A00; outline-offset: 2px; border-radius: 4px; }
.mlj-x[disabled] { opacity: 0.4; cursor: not-allowed; }