/* Plus Jakarta Sans — local for offline use */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/PlusJakartaSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  /* CodedOK brand 2026 — see /docs/brand or the brand pack PDF.
     Deep Tide (primary) + Signal Teal (accent) + warm working-paper
     backgrounds. No gradients, no nautical clichés. */
  --ink:    #1C252B; --ink2: #243036; --ink3: #2B3940;   /* Harbour Black + warmer steps */
  --sea:    #0F4C5C; --seal: #1E7A86; --seap: rgba(30,122,134,.10);  /* Deep Tide + Signal Teal */

  /* Status accents — kept muted to match the workmanlike palette. */
  --green:  #4F7A52; --grnp: rgba(79,122,82,.10);   /* Kelp Green */
  --amber:  #C58A2A; --ampp: rgba(197,138,42,.10);  /* Buoy Amber */
  --red:    #A14A3B; --redp: rgba(161,74,59,.10);   /* Rust Red */
  --purp:   #5A4FCF; --purpp:rgba(90,79,207,.10);   /* Reserved for surveyor accents */

  /* Surfaces — Fog White + Steel Mist. Feels like paper, not a dashboard. */
  --white:  #ffffff;
  --slate:  #E4E9E7;          /* Steel Mist */
  --bdr:    #D5DBD8;
  --bdr-strong: #B8C2BD;
  --page:   #F3F5F4;          /* Fog White */
  --card:   #ffffff;
  --card-2: #FBFCFB;

  /* Type — six steps from tertiary grey to Harbour Black. */
  --text:   #1C252B;          /* Harbour Black */
  --text-2: #2E3940;
  --mid:    #525C63;
  --lt:     #6B767E;
  --lt-2:   #92A0A8;

  /* Type stack — Barlow Condensed for display authority, Inter for UI. */
  --fn-display: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fn:         'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fn-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Radius scale. Slightly softer per the brand pack guidance. */
  --r:    16px;
  --rs:   10px;
  --r-lg: 22px;

  --safe: env(safe-area-inset-bottom,20px);

  /* Shadow scale — tightened a touch for the calmer palette. */
  --sh-sm: 0 1px 2px rgba(28,37,43,.05);
  --sh:    0 1px 3px rgba(28,37,43,.06), 0 6px 24px rgba(28,37,43,.04);
  --sh-md: 0 1px 3px rgba(28,37,43,.08), 0 12px 28px rgba(28,37,43,.07);
  --sh-lg: 0 8px 16px rgba(28,37,43,.08), 0 24px 56px rgba(28,37,43,.10);

  /* Motion. Single ease curve everywhere for cohesive feel. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 140ms var(--ease);
  --t-base: 220ms var(--ease);
  --t-slow: 320ms var(--ease);
}
/* Base size bumped 15 -> 17px. Anything fixed at small px in component
   styles below also scales up because em-based metrics inherit. */
html,body{font-family:var(--fn);background:var(--ink);color:var(--text);min-height:100vh;font-size:17px;line-height:1.55;overflow-x:hidden;letter-spacing:-.005em;}
@media(min-width:520px){body{display:flex;justify-content:center;align-items:flex-start;padding:32px 0 64px;}.shell{width:393px;min-height:852px;border-radius:44px;overflow:hidden;box-shadow:0 60px 120px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);}}

/* SHELL */
.shell{display:none;flex-direction:column;background:var(--page);position:relative;}
.shell.on{display:flex;animation: shellIn 200ms var(--ease);}
/* Opacity-only — no transform — so we don't create a stacking context
   that breaks position:sticky on the bnav while the animation runs. */
@keyframes shellIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .shell.on { animation: none; }
}

/* Mobile: lock the shell to viewport height so .scroll becomes the scroll
   context and .bnav stays pinned to the bottom (instead of scrolling away).
   100dvh handles iOS Safari's collapsing URL bar; 100vh is the fallback. */
@media (max-width: 519px) {
  html, body { height: 100vh; height: 100dvh; overflow: hidden; }
  body { padding: 0; display: block; }
  .shell.on {
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
  }
}

/* STATUS BAR — also serves as the safe-area-top spacer for iOS PWA */
.sb{height:max(50px, env(safe-area-inset-top, 0px));display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:12px;font-weight:600;flex-shrink:0;}
.sb-dk{background:var(--ink);color:rgba(255,255,255,.7);}
.sb-lt{background:var(--page);color:var(--text);}
.sb-cd{background:var(--card);color:var(--text);}

/* SCROLL */
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.scroll::-webkit-scrollbar{display:none;}

/* TOP BAR */
.tbar{background:var(--card);padding:12px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bdr);flex-shrink:0;}

/* Large iOS-style page header — used on Tools and other top-level screens. */
.lt-head{
  background:var(--card);
  padding:18px 20px 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-shrink:0;
  border-bottom:1px solid var(--bdr);
}
.lt-title{font-size:30px;font-weight:800;color:var(--text);letter-spacing:-.8px;line-height:1.05;}
.lt-sub{font-size:14px;color:var(--mid);margin-top:6px;line-height:1.45;max-width:280px;}
.lt-avatar{flex-shrink:0;}
.tbar-title{font-size:18px;font-weight:700;color:var(--text);}
.back{display:flex;align-items:center;gap:3px;color:var(--sea);font-size:15px;font-weight:500;cursor:pointer;border:none;background:none;font-family:var(--fn);}

/* BOTTOM NAV — glove-friendly tap targets, subtle active state.
   Solid background (no backdrop-filter) so iOS Safari doesn't repaint
   the whole nav on every scroll frame — that's what makes the scroll
   feel laggy / "off" with sticky elements. */
.bnav{
  background:var(--card);
  border-top:1px solid var(--bdr);
  display:flex;
  padding:6px 0 max(6px, var(--safe));
  flex-shrink:0;
  position:sticky;
  bottom:0;
  z-index:50;
}
.bni{
  flex:1;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;border:none;background:none;font-family:var(--fn);
  padding:8px 0 6px;min-height:50px;
  color:var(--lt);
  transition: color var(--t-fast);
}
.bni:active { transform: scale(.96); transition: transform 80ms ease; }
.bni-ic{ font-size:24px; line-height:1; position:relative; transition: transform var(--t-fast); filter: grayscale(.15); }
.bni-lb{ font-size:11px; font-weight:600; color:inherit; letter-spacing:.01em; }
.bni.on { color:var(--sea); }
.bni.on .bni-ic { filter: grayscale(0); transform: translateY(-1px); }
.bni.on .bni-lb { color:var(--sea); font-weight:700; }
.bni.on::before{
  content:''; position:absolute; top:0; left:50%;
  transform: translateX(-50%);
  width: 28px; height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--sea);
}

/* CARDS */
.card{background:var(--card);border-radius:var(--r);border:1px solid var(--bdr);overflow:hidden;box-shadow:var(--sh);transition:box-shadow var(--t-base), border-color var(--t-base);}
.mx{margin:0 16px;}

/* SECTION LABEL */
.slbl{font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--mid);padding:22px 20px 10px;display:flex;align-items:center;justify-content:space-between;text-transform:none;}
.slbl-act{font-size:14px;font-weight:600;color:var(--sea);transition: opacity var(--t-fast);}
.slbl-act:hover { opacity: .75; }

/* CHIPS */
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.chip-ok{background:var(--grnp);color:var(--green);}
.chip-am{background:var(--ampp);color:var(--amber);}
.chip-rd{background:var(--redp);color:var(--red);}
.chip-bl{background:var(--seap);color:var(--sea);}
.chip-pu{background:var(--purpp);color:var(--purp);}
.chip-dot{width:5px;height:5px;border-radius:50%;background:currentColor;}

/* ROW ITEMS */
.row{display:flex;align-items:center;gap:14px;padding:16px;min-height:64px;border-bottom:1px solid var(--bdr);cursor:pointer;transition:background .1s;}
.row:last-child{border-bottom:none;}
.row:active{background:var(--slate);}
.row-ic{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px;}
.row-ic.ok{background:var(--grnp);}
.row-ic.am{background:var(--ampp);}
.row-ic.rd{background:var(--redp);}
.row-ic.bl{background:var(--seap);}
.row-ic.pu{background:var(--purpp);}
.row-ic.dk{background:rgba(255,255,255,.08);}
.row-body{flex:1;min-width:0;}
.row-name{font-size:16px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row-sub{font-size:13px;color:var(--mid);margin-top:2px;}
.chev{color:var(--lt);font-size:18px;flex-shrink:0;}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:54px;padding:0 24px;border-radius:14px;
  font-family:var(--fn);font-size:16px;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;border:none;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-base);
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.btn:active { transform: scale(.97); }
.btn-full{width:100%;}
.btn-sea{background:var(--sea);color:white;}
.btn-sea:active{opacity:.85;}
.btn-ink{background:var(--ink);color:white;}
.btn-out{background:transparent;color:var(--text);border:1.5px solid var(--bdr);}
.btn-red{background:var(--red);color:white;}
.btn-green{background:var(--green);color:white;}
.btn-sm{height:44px;padding:0 16px;font-size:14px;border-radius:10px;}
.btn-xs{height:30px;padding:0 10px;font-size:12px;border-radius:7px;}

/* PROGRESS */
.prog{height:6px;border-radius:3px;background:var(--bdr);overflow:hidden;}
.prog-fill{height:100%;border-radius:3px;transition:width .4s ease;}
.prog-fill.ok{background:var(--green);}
.prog-fill.am{background:var(--amber);}
.prog-fill.rd{background:var(--red);}
.prog-fill.bl{background:var(--sea);}

/* TABS */
.tabbar{display:flex;overflow-x:auto;padding:0 16px;gap:2px;border-bottom:1px solid var(--bdr);background:var(--card);flex-shrink:0;}
.tabbar::-webkit-scrollbar{display:none;}
.tab{padding:12px 14px;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;border:none;background:none;color:var(--lt);border-bottom:2px solid transparent;margin-bottom:-1px;font-family:var(--fn);}
.tab.on{color:var(--sea);border-bottom-color:var(--sea);}
.tc{display:none;}
.tc.on{display:block;}

/* TIMELINE */
.tl{padding:16px;display:flex;flex-direction:column;}
.tli{display:flex;gap:14px;padding-bottom:18px;position:relative;}
.tli::before{content:'';position:absolute;left:15px;top:26px;bottom:0;width:2px;background:var(--bdr);}
.tli:last-child::before{display:none;}
.tl-dot{width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:2px;border:2px solid var(--bdr);background:white;z-index:1;display:flex;align-items:center;justify-content:center;font-size:8px;}
.tl-dot.ok{border-color:var(--green);background:var(--grnp);}
.tl-dot.am{border-color:var(--amber);background:var(--ampp);}
.tl-dot.rd{border-color:var(--red);background:var(--redp);}
.tl-dot.up{border-color:var(--ink2);background:var(--ink2);}
.tl-title{font-size:13px;font-weight:500;color:var(--text);}
.tl-date{font-size:12px;color:var(--lt);margin-top:1px;}

/* FORM */
.fg{display:flex;flex-direction:column;gap:5px;padding:13px 16px 0;}
.fg:last-child{padding-bottom:13px;}
.fl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--lt);}
.fi,.fs{height:48px;padding:0 14px;border-radius:var(--rs);border:1.5px solid var(--bdr);font-family:var(--fn);font-size:15px;color:var(--text);background:var(--slate);outline:none;-webkit-appearance:none;width:100%;}
.fi:focus,.fs:focus{border-color:var(--sea);background:white;box-shadow:0 0 0 3px var(--seap);}
.fta{min-height:90px;padding:12px 14px;border-radius:var(--rs);border:1.5px solid var(--bdr);font-family:var(--fn);font-size:15px;color:var(--text);background:var(--slate);outline:none;width:100%;resize:none;line-height:1.5;}
.fta:focus{border-color:var(--sea);background:white;box-shadow:0 0 0 3px var(--seap);}
.divider{height:1px;background:var(--bdr);}

/* SHEET */
.bdrop{position:fixed;inset:0;background:rgba(10,15,30,.6);z-index:100;display:none;align-items:flex-end;backdrop-filter:blur(2px);}
.bdrop.on{display:flex;}
.sheet{background:var(--card);width:100%;border-radius:24px 24px 0 0;max-height:88vh;overflow-y:auto;animation:shup .28s cubic-bezier(.32,.72,0,1);}
@keyframes shup{from{transform:translateY(100%);}to{transform:translateY(0);}}
.sh-pull{width:40px;height:4px;border-radius:2px;background:var(--bdr);margin:12px auto 0;}
.sh-head{padding:12px 20px 16px;display:flex;align-items:center;justify-content:space-between;}
.sh-title{font-size:18px;font-weight:700;color:var(--text);}
.sh-x{background:var(--slate);border:none;width:30px;height:30px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--mid);}

/* STAT GRID */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px;}
.scard{background:var(--card);border-radius:var(--rs);border:1px solid var(--bdr);padding:14px 16px;box-shadow:var(--sh);}
.scard-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--lt);margin-bottom:5px;}
.scard-val{font-size:28px;font-weight:700;line-height:1;}
.scard-val.ok{color:var(--green);}
.scard-val.am{color:var(--amber);}
.scard-val.rd{color:var(--red);}
.scard-val.bl{color:var(--sea);}
.scard-sub{font-size:11px;color:var(--lt);margin-top:4px;}

/* COMPLIANCE RING */
.ring-wrap{position:relative;width:96px;height:96px;flex-shrink:0;}
.ring-wrap svg{transform:rotate(-90deg);}
.ring-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring-pct{font-size:22px;font-weight:700;color:var(--text);}
.ring-pct-lbl{font-size:10px;font-weight:600;color:var(--lt);}

/* INSPECTION BADGE */
.insp-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:700;}
.insp-badge.rdy{background:var(--grnp);color:var(--green);}
.insp-badge.notready{background:var(--redp);color:var(--red);}
.insp-badge.soon{background:var(--ampp);color:var(--amber);}

/* SCAN STATE */
.scan-frame{border:2px dashed var(--sea);border-radius:14px;aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(15,76,92,.04);}

/* Three-way add-record option cards on s-scan. */
.scan-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--bdr);
  text-align: left;
  font-family: var(--fn);
  cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: transform 120ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.scan-opt:active { transform: scale(.99); }
.scan-opt:hover { border-color: var(--bdr-strong); box-shadow: var(--sh); }
.scan-opt-primary {
  background: linear-gradient(180deg, var(--seap) 0%, rgba(15,76,92,.04) 100%);
  border-color: rgba(15,76,92,.25);
}
.scan-opt-ic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.scan-opt-text { flex: 1; min-width: 0; }
.scan-opt-title { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.1px; }
.scan-opt-sub { font-size: 12px; color: var(--mid); margin-top: 3px; line-height: 1.4; }
.scan-opt-arrow { font-size: 20px; color: var(--lt); flex-shrink: 0; }

.quick-add-tile {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: transform 120ms ease, border-color 200ms ease;
}
.quick-add-tile:active { transform: scale(.985); }
.quick-add-tile:hover { border-color: var(--bdr-strong); }
.ai-pulse{width:48px;height:48px;border-radius:50%;background:var(--seap);border:3px solid var(--sea);border-top-color:transparent;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.conf-bar{height:4px;border-radius:2px;background:var(--bdr);overflow:hidden;margin-top:6px;}
.conf-fill{height:100%;border-radius:2px;background:var(--green);transition:width .6s ease;}

/* NOTIF DOT */
.notif-dot{position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid var(--card);}

/* URGENCY STRIP */
.urg{display:flex;gap:8px;padding:0 16px;overflow-x:auto;}
.urg::-webkit-scrollbar{display:none;}
.urg-pill{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;cursor:pointer;}
.urg-pill.rd{background:var(--redp);border:1px solid rgba(220,38,38,.2);}
.urg-pill.am{background:var(--ampp);border:1px solid rgba(217,119,6,.2);}
.urg-pill.ok{background:var(--grnp);border:1px solid rgba(22,163,74,.2);}
.urg-num{font-size:20px;font-weight:700;}
.urg-lbl{font-size:11px;font-weight:600;color:var(--mid);}

/* CALENDAR GRID */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:0 16px;}
.cal-day{aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:var(--lt);}
.cal-day.hd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.cal-day.today{background:var(--sea);color:white;font-weight:700;}
.cal-day.has-ev{position:relative;}
.cal-day.has-ev::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--amber);}
.cal-day.has-rd::after{background:var(--red);}
.cal-day.has-ok::after{background:var(--green);}
.cal-day.cur-mo{color:var(--text);}
.cal-day.other-mo{color:var(--bdr);}

/* CREW ROLE BADGE */
.role-badge{display:inline-flex;align-items:center;gap:5px;background:var(--seap);color:var(--sea);border-radius:6px;padding:3px 8px;font-size:11px;font-weight:700;}

/* ACTION CARD */
.action-card{background:var(--card);border-radius:var(--r);border:1px solid var(--bdr);padding:14px 16px;margin-bottom:10px;display:flex;align-items:center;gap:14px;box-shadow:var(--sh);}
.action-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.action-num{font-size:22px;font-weight:700;color:var(--text);margin-left:auto;flex-shrink:0;}

/* VESSEL HEALTH */
.vh-bar{height:8px;border-radius:4px;background:var(--bdr);overflow:hidden;flex:1;}

/* INSPECTION PACK PREVIEW */
.pack-section{background:var(--slate);border-radius:10px;padding:12px 14px;margin-bottom:10px;}
.pack-sec-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--lt);margin-bottom:8px;}
.pack-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;}
.pack-key{font-size:13px;color:var(--mid);}
.pack-val{font-size:13px;font-weight:600;color:var(--text);}

/* GAP ANALYSIS */
.gap-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--bdr);}
.gap-item:last-child{border:none;}
.gap-sev{width:4px;border-radius:2px;flex-shrink:0;align-self:stretch;}
.gap-sev.rd{background:var(--red);}
.gap-sev.am{background:var(--amber);}
.gap-sev.ok{background:var(--green);}
.gap-title{font-size:13px;font-weight:600;color:var(--text);}
.gap-desc{font-size:12px;color:var(--lt);margin-top:2px;line-height:1.5;}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.shell.on .scroll>*{animation:fadeUp .2s ease both;}
.shell.on .scroll>*:nth-child(2){animation-delay:.04s;}
.shell.on .scroll>*:nth-child(3){animation-delay:.08s;}
.shell.on .scroll>*:nth-child(4){animation-delay:.12s;}
.shell.on .scroll>*:nth-child(5){animation-delay:.16s;}

/* MISC */
.spacer{height:24px;}
.pb24{padding-bottom:24px;}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--ink2);color:white;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}

/* ═══════════════════════════════════════════════════════════════
   v2 VISUAL POLISH — hero cards, vessel covers, animated rings,
   crew chips, ticket-style rows, McCollam Marine surveyor palette.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* McCollam Marine surveyor brand */
  --mm-navy: #0a0f1a;
  --mm-deep: #0f1729;
  --mm-blue: #1e40af;
  --mm-blue-soft: #3b5fff;
  --mm-grey: #6b7589;

  /* Subtle background mesh used on hero cards */
  --mesh-1: radial-gradient(circle at 0% 0%, rgba(15,76,92,.16) 0%, transparent 45%),
            radial-gradient(circle at 100% 0%, rgba(124,58,237,.12) 0%, transparent 45%),
            radial-gradient(circle at 50% 100%, rgba(22,163,74,.10) 0%, transparent 45%);
  --mesh-mm: radial-gradient(circle at 0% 0%, rgba(30,64,175,.30) 0%, transparent 50%),
             radial-gradient(circle at 100% 100%, rgba(15,76,92,.14) 0%, transparent 55%);
}

/* HERO CARD — used on home & vessel detail */
.hero {
  position: relative;
  background: var(--ink);
  background-image: var(--mesh-1);
  border-radius: 18px;
  padding: 18px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% -10%, rgba(255,255,255,.10) 0%, transparent 60%);
  pointer-events: none;
}

/* HERO-HOME — wow variant used on the operator home screen.
   Adds a second radial sheen, deeper shadow, and richer gradient. */
.hero-home {
  background-image:
    radial-gradient(120% 80% at 100% 0%, rgba(30,122,134,.28) 0%, transparent 55%),
    radial-gradient(90% 60% at 0% 100%, rgba(79,122,82,.16) 0%, transparent 60%),
    linear-gradient(180deg, #1C252B 0%, #0F4C5C 100%);
  box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
}
.hero-home::before {
  background:
    radial-gradient(circle at 85% -10%, rgba(255,255,255,.12) 0%, transparent 55%),
    radial-gradient(circle at 0% 110%, rgba(15,76,92,.18) 0%, transparent 55%);
}

/* Subtle drifting starfield in the hero background. Each star is a small
   white dot rendered as a radial gradient — cheap and works offline. */
.hero-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 24%, rgba(255,255,255,.65) 50%, transparent 100%),
    radial-gradient(1px 1px at 72% 18%, rgba(255,255,255,.55) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 72%, rgba(134,239,172,.6) 50%, transparent 100%),
    radial-gradient(1px 1px at 88% 60%, rgba(255,255,255,.45) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 12% 88%, rgba(125,211,252,.55) 50%, transparent 100%),
    radial-gradient(1px 1px at 60% 92%, rgba(255,255,255,.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 92% 30%, rgba(255,255,255,.4) 50%, transparent 100%);
  animation: heroDrift 18s ease-in-out infinite;
}
@keyframes heroDrift {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .55; }
  50%      { transform: translate3d(2px, -3px, 0); opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stars { animation: none; }
}

/* Hero top row — big ring on the left, status on the right. */
.hero-top-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-ring-wrap {
  position: relative;
  width: 124px;
  height: 124px;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.hero-ring-wrap svg circle:first-child { stroke: rgba(255,255,255,.08); }
.hero-ring-wrap svg circle:last-child { stroke-width: 10; }
.hero-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.hero-ring-pct {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1;
}
.hero-ring-percent {
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  margin-left: 1px;
  letter-spacing: -.4px;
}
.hero-summary {
  flex: 1;
  min-width: 0;
}
.hero-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.hero-headline {
  font-size: 20px;
  font-weight: 800;
  color: white;
  letter-spacing: -.4px;
  line-height: 1.15;
  margin-bottom: 4px;
}
.hero-sub {
  font-size: 12px;
  color: rgba(255,255,255,.62);
  line-height: 1.45;
  margin-bottom: 8px;
}

/* Hero CTA — full-width inspection pack button. Glassy and primary. */
.hero-cta {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 14px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(15,76,92,.95) 0%, rgba(7,116,141,.95) 100%);
  color: white;
  font-family: var(--fn);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15,76,92,.35), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform 120ms ease, box-shadow 200ms ease;
}
.hero-cta:active { transform: scale(.985); }
.hero-cta:hover { box-shadow: 0 10px 28px rgba(15,76,92,.45), inset 0 1px 0 rgba(255,255,255,.22); }
.hero-cta-ic { font-size: 19px; }
.hero-cta-lbl { flex: 1; text-align: left; }
.hero-cta-arrow { font-size: 18px; opacity: .9; }
.hero-mm {
  background: var(--mm-navy);
  background-image: var(--mesh-mm);
}

/* Animated ring — replaces flat ring on hero */
@keyframes ringFill { from { stroke-dashoffset: 251.2; } }
.ring-anim circle:last-child { animation: ringFill 1.1s cubic-bezier(.32,.72,0,1) both; }

/* METRIC TILE — bigger, glassy stat */
.tile {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tile-num { font-size: 22px; font-weight: 700; color: white; line-height: 1; letter-spacing: -.4px; }
.tile-num.rd { color: #fca5a5; }
.tile-num.am { color: #fbbf24; }
.tile.tile-sm { padding: 8px 10px; gap: 2px; border-radius: 10px; }
.tile.tile-sm .tile-num { font-size: 17px; letter-spacing: -.3px; }
.tile.tile-sm .tile-lbl { font-size: 10px; }
.tile-num.ok { color: #86efac; }
.tile-lbl { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .07em; }

/* QUICK ACTION TILE — modern row card */
.qa-tile {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-base), border-color var(--t-base);
  box-shadow: var(--sh-sm);
  min-height: 72px;
}
.qa-tile:active { transform: scale(.985); }
.qa-tile:hover { border-color: var(--bdr-strong); box-shadow: var(--sh); }
.qa-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  flex-shrink: 0;
}
.qa-icon.rd { background: var(--redp); color: var(--red); }
.qa-icon.am { background: var(--ampp); color: var(--amber); }
.qa-icon.ok { background: var(--grnp); color: var(--green); }
.qa-icon.bl { background: var(--seap); color: var(--sea); }
.qa-icon.pu { background: var(--purpp); color: var(--purp); }
.qa-title { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing:-.1px; }
.qa-sub { font-size: 13px; color: var(--mid); margin-top: 2px; line-height:1.4; }

/* VESSEL COVER CARD */
.vcover {
  position: relative;
  background: var(--ink2);
  background-image: linear-gradient(135deg, var(--ink) 0%, var(--ink2) 50%, var(--ink3) 100%),
                    radial-gradient(circle at 90% 0%, rgba(15,76,92,.20) 0%, transparent 50%);
  background-blend-mode: overlay;
  color: white;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.05);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.vcover:active { transform: scale(.99); }
.vcover .vc-pattern {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 100% 100%, rgba(255,255,255,.05) 0%, transparent 40%),
    repeating-linear-gradient(135deg, transparent 0px, transparent 18px, rgba(255,255,255,.025) 18px, rgba(255,255,255,.025) 19px);
  pointer-events: none;
}
.vcover-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
  position: relative; z-index: 1;
}
.vcover-name { font-size: 17px; font-weight: 700; color: white; letter-spacing: -.3px; line-height: 1.1; }
.vcover-meta { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 3px; }
.vcover-emoji {
  width: 48px; height: 48px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  overflow: hidden;
}
.vcover-emoji.vcover-photo {
  background: var(--slate);
  border-color: rgba(255,255,255,.15);
  padding: 0;
}
.vcover-emoji.vcover-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.vcover-emoji.vcover-photo,
.vcover-emoji.vcover-photo-empty { cursor: pointer; position: relative; }
.vcover-cam {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px; height: 20px;
  background: var(--sea);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  border: 2px solid var(--ink);
}
.vcover-body {
  background: var(--card); color: var(--text);
  padding: 14px 18px;
  position: relative; z-index: 1;
}
.vcover-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
}
.vcover-stat {
  border-radius: 9px; padding: 9px 4px;
  text-align: center;
}
.vcover-stat .num { font-size: 17px; font-weight: 800; line-height: 1; letter-spacing: -.3px; }
.vcover-stat .lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
.vcover-stat.rd { background: var(--redp); }
.vcover-stat.rd .num, .vcover-stat.rd .lbl { color: var(--red); }
.vcover-stat.am { background: var(--ampp); }
.vcover-stat.am .num, .vcover-stat.am .lbl { color: var(--amber); }
.vcover-stat.ok { background: var(--grnp); }
.vcover-stat.ok .num, .vcover-stat.ok .lbl { color: var(--green); }
.vcover-stat.bl { background: var(--seap); }
.vcover-stat.bl .num, .vcover-stat.bl .lbl { color: var(--sea); }

/* TICKET ROW — cert/equipment with rich detail */
.ticket {
  display: flex; align-items: stretch;
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.ticket:active { transform: scale(.99); }
.ticket-stripe { width: 5px; flex-shrink: 0; }
.ticket-stripe.rd { background: linear-gradient(180deg, var(--red) 0%, #8a3e2f 100%); }
.ticket-stripe.am { background: linear-gradient(180deg, var(--amber) 0%, #a37322 100%); }
.ticket-stripe.ok { background: linear-gradient(180deg, var(--green) 0%, #15803d 100%); }
.ticket-stripe.bl { background: linear-gradient(180deg, var(--sea) 0%, #0e7490 100%); }
.ticket-body { flex: 1; padding: 12px 14px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.ticket-ic {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--slate);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.ticket-text { flex: 1; min-width: 0; }
.ticket-name { font-size: 14px; font-weight: 600; color: var(--text); }
.ticket-sub { font-size: 11px; color: var(--lt); margin-top: 2px; line-height: 1.45; }
/* Vessel context chip on Records rows — Records aggregates across the
   whole fleet, so each row needs to declare which boat it belongs to. */
.ticket-vessel {
  display: inline-block;
  background: var(--slate);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: middle;
  letter-spacing: -.1px;
}
.ticket-end {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex-shrink: 0;
}

/* COUNTDOWN BADGE — bigger, more prominent than chip */
.cb { display: inline-flex; flex-direction: column; align-items: center; padding: 4px 10px; border-radius: 8px; min-width: 52px; }
.cb-num { font-size: 14px; font-weight: 800; line-height: 1; letter-spacing: -.3px; }
.cb-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.cb.rd { background: var(--redp); color: var(--red); }
.cb.am { background: var(--ampp); color: var(--amber); }
.cb.ok { background: var(--grnp); color: var(--green); }

/* CREW CARD */
.crewc {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--sh);
}
.crewc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.crewc-av {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: white;
  flex-shrink: 0;
}
.crewc-name { font-size: 15px; font-weight: 700; color: var(--text); }
.crewc-role { font-size: 11px; color: var(--lt); margin-top: 1px; }

/* CREW VESSEL CHIP */
.vchip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--seap); color: var(--sea);
  border-radius: 7px; padding: 3px 8px;
  font-size: 11px; font-weight: 700;
}
.vchip-x {
  margin-left: 2px; opacity: .6;
  width: 14px; height: 14px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 12px;
}
.vchip-x:hover { background: rgba(15,76,92,.2); opacity: 1; }
.vchip.add {
  background: transparent; color: var(--sea);
  border: 1.5px dashed rgba(15,76,92,.4);
  cursor: pointer;
}
.vchip.add:hover { background: var(--seap); border-style: solid; }

/* ════════════════════════════════════════════════════════════════
   LANDING (s-land) — break out of the mobile shell on desktop and
   give the marketing surface a magazine-style layout. The landing
   uses its OWN brand pack (navy + cyan + Plus Jakarta Sans, the
   original CodedOK identity) — scoped via custom-property overrides
   so the rest of the app keeps Deep Tide / Signal Teal / Barlow.
   ════════════════════════════════════════════════════════════════ */

#s-land {
  --ink:   #0a1628; --ink2: #1a3560; --ink3: #1e3454;
  --sea:   #0891b2; --seal: #06b6d4; --seap: rgba(8,145,178,.12);
  --green: #16a34a; --grnp: rgba(22,163,74,.12);
  --amber: #d97706; --ampp: rgba(217,119,6,.13);
  --red:   #dc2626; --redp: rgba(220,38,38,.12);
  --slate: #f1f5f9; --bdr:  #e2e8f0;
  --text:  #0f172a; --mid:  #475569; --lt:   #94a3b8;
  --page:  #f8fafc; --card: #ffffff;
  --fn-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --fn:         'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-family: var(--fn);
  background: var(--page);
  color: var(--text);
  letter-spacing: -.005em;
}

#s-land .scroll { padding-bottom: 0; background: var(--page); color: var(--text); }

#s-land .ld-eyebrow {
  font-family: var(--fn);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--seal);
  margin-bottom: 14px;
}
#s-land .ld-eyebrow.on-dark { color: #7ED9E6; }

#s-land .ld-h1 {
  font-family: var(--fn-display);
  font-size: clamp(46px, 9.5vw, 96px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.025em;
  color: white;
  margin: 0 0 22px;
}
/* Highlight class on the H1's last line — used to be an inline
   style="color:..." span, which broke when the headline ran through
   the word-splitter. Now a stable class. */
#s-land .ld-h1 .hl { color: var(--seal); }
#s-land .ld-h2 {
  font-family: var(--fn-display);
  font-size: clamp(28px, 4.6vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--text);
  margin: 0 0 16px;
}
#s-land .ld-h2.on-dark { color: white; }
#s-land .ld-h2 {
  font-family: var(--fn-display);
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--text);
  margin: 0 0 18px;
}
#s-land .ld-h2.on-dark { color: white; }

#s-land .ld-sub {
  font-family: var(--fn);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: rgba(255,255,255,.72);
  max-width: 38ch;
}
#s-land .ld-sub.on-light { color: var(--mid); }

#s-land .ld-icon {
  width: 26px; height: 26px;
  display: inline-block;
  color: var(--sea);
}
#s-land .ld-icon.on-dark { color: var(--seal); }

/* Code-tag chip — set in monospace so it reads as technical, not
   marketing. Used in the hero credibility row. */
#s-land .ld-code-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fn-mono);
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 6px 10px;
  border-radius: 6px;
  letter-spacing: -.01em;
}

/* Phone mockup that sits beside the hero copy on wide viewports.
   Mirrors the real s-home layout: dark top strip with greeting +
   avatar, hero block with score ring + 3 tiles, a vessel card, and
   a fixed bnav. Update when the real app changes. */
#s-land .ld-mock {
  width: 100%;
  max-width: 264px;
  flex-shrink: 0;
  border-radius: 38px;
  background: #000;
  padding: 7px;
  box-shadow:
    0 30px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.04);
  position: relative;
}
/* On narrow viewports the mockup sits below the hero copy. Centre it
   and cap the width so it never overflows. */
@media (max-width: 720px) {
  #s-land .ld-mock { margin: 32px auto 0; }
}
/* On the desktop hero grid, prevent the column from trying to expand
   beyond the mockup's natural width. */
@media (min-width: 720px) {
  #s-land .ld-hero-grid > .ld-mock { justify-self: end; }
}
#s-land .ld-mock-screen {
  border-radius: 32px;
  background: #F3F5F4;
  overflow: hidden;
  position: relative;
}
#s-land .ld-mock-notch {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 22px; background: #000;
  border-radius: 0 0 12px 12px;
  z-index: 4;
}
#s-land .ld-mock-status {
  background: #1C252B; color: white;
  padding: 32px 16px 14px;
  font-family: var(--fn);
}
#s-land .ld-mock-status-row { display: flex; align-items: center; justify-content: space-between; }
#s-land .ld-mock-greet { font-size: 9px; color: rgba(255,255,255,.45); letter-spacing: .05em; }
#s-land .ld-mock-h    { font-size: 14px; font-weight: 700; margin-top: 1px; letter-spacing: -.01em; }
#s-land .ld-mock-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--seal); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
#s-land .ld-mock-hero {
  background: linear-gradient(180deg, #1C252B 0%, #0F4C5C 100%);
  padding: 14px 16px 16px;
}
#s-land .ld-mock-hero-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#s-land .ld-mock-ring {
  width: 64px; height: 64px; border-radius: 50%;
  background: conic-gradient(var(--green) 0deg 295deg, rgba(255,255,255,.14) 295deg 360deg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative;
}
#s-land .ld-mock-ring::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #0F4C5C; }
#s-land .ld-mock-ring-text {
  position: relative; z-index: 1; color: white;
  font-family: var(--fn-display); font-size: 18px; font-weight: 700;
  line-height: 1; letter-spacing: -.02em;
}
#s-land .ld-mock-ring-text span { font-size: 10px; color: rgba(255,255,255,.55); margin-left: 1px; }
#s-land .ld-mock-summary { color: white; font-family: var(--fn); flex: 1; min-width: 0; }
#s-land .ld-mock-summary .label    { font-size: 8px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 2px; }
#s-land .ld-mock-summary .headline { font-size: 12px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
#s-land .ld-mock-summary .sub      { font-size: 9px; color: rgba(255,255,255,.55); margin-top: 2px; line-height: 1.4; }
#s-land .ld-mock-tiles { display: flex; gap: 5px; }
#s-land .ld-mock-tile {
  flex: 1; background: rgba(255,255,255,.07);
  border-radius: 8px; padding: 7px 6px;
  text-align: center; color: white; font-family: var(--fn);
}
#s-land .ld-mock-tile .n    { font-size: 15px; font-weight: 700; letter-spacing: -.02em; font-family: var(--fn-display); line-height: 1; }
#s-land .ld-mock-tile .n.rd { color: #FF8E7E; }
#s-land .ld-mock-tile .n.am { color: #FCBF60; }
#s-land .ld-mock-tile .n.gn { color: #A7D6AB; }
#s-land .ld-mock-tile .l    { font-size: 7px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }
#s-land .ld-mock-section     { padding: 12px 14px 0; font-family: var(--fn); }
#s-land .ld-mock-section-lbl { font-size: 8px; color: var(--lt); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: 6px; }
#s-land .ld-mock-card {
  background: white; border: 1px solid var(--bdr);
  border-radius: 12px; padding: 10px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 1px 2px rgba(28,37,43,.04);
}
#s-land .ld-mock-photo {
  width: 44px; height: 44px; border-radius: 8px;
  background: linear-gradient(135deg, #1E7A86 0%, #0F4C5C 100%);
  display: flex; align-items: center; justify-content: center;
  color: white; flex-shrink: 0;
}
#s-land .ld-mock-card-body { flex: 1; min-width: 0; font-family: var(--fn); }
#s-land .ld-mock-card-name { font-size: 11px; font-weight: 700; color: var(--text); letter-spacing: -.01em; line-height: 1.2; display: flex; align-items: center; gap: 5px; }
#s-land .ld-mock-card-sub  { font-size: 8px; color: var(--mid); margin-top: 1px; }
#s-land .ld-mock-pill      { font-size: 8px; font-weight: 700; padding: 2px 5px; border-radius: 4px; letter-spacing: .04em; }
#s-land .ld-mock-pill.gn   { background: rgba(79,122,82,.16);  color: #4F7A52; }
#s-land .ld-mock-pill.rd   { background: rgba(161,74,59,.16);  color: #A14A3B; }
#s-land .ld-mock-mini-ring {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fn-display); font-size: 10px; font-weight: 700;
  color: white; flex-shrink: 0;
}
#s-land .ld-mock-mini-ring.gn { background: conic-gradient(var(--green) 0deg 360deg); }
#s-land .ld-mock-mini-ring.am { background: conic-gradient(var(--amber) 0deg 255deg, var(--bdr) 255deg 360deg); }
#s-land .ld-mock-bnav {
  display: flex; align-items: center; justify-content: space-around;
  padding: 8px 8px 14px;
  background: white; border-top: 1px solid var(--bdr);
  margin-top: 12px;
}
#s-land .ld-mock-bnav-item    { font-size: 13px; opacity: .35; }
#s-land .ld-mock-bnav-item.on { opacity: 1; color: var(--sea); }

/* How-it-works step number — gives weight to a section that
   otherwise just reads as bulleted text. */
#s-land .ld-step-num {
  font-family: var(--fn-display);
  font-size: 56px; font-weight: 700;
  color: var(--sea); line-height: 1; letter-spacing: -.04em;
  opacity: .85;
}

/* Hairline section divider. */
#s-land .ld-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--bdr) 50%, transparent 100%);
}

/* ──────────────────────────────────────────────────────────────
   PREMIUM TOUCHES — sticky nav, floating CTA, hero logo entrance,
   live-counting numbers, watermark, parallax.
   ────────────────────────────────────────────────────────────── */

/* Sticky nav that materialises after the hero scrolls past. iOS-style
   backdrop blur. Hidden by default; .visible state is toggled by the
   landing scroll listener. */
#s-land .ld-stickynav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  padding: 12px 22px;
  background: rgba(28,37,43,.72);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: space-between;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
  font-family: var(--fn);
}
#s-land .ld-stickynav.visible { transform: translateY(0); opacity: 1; }
#s-land .ld-stickynav .brand {
  display: flex; align-items: center; gap: 9px;
  color: white; font-family: var(--fn-display);
  font-size: 17px; font-weight: 700; letter-spacing: -.02em;
}
#s-land .ld-stickynav .actions { display: flex; align-items: center; gap: 8px; }
#s-land .ld-stickynav .signin {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
  font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 10px;
  cursor: pointer; font-family: var(--fn);
}
#s-land .ld-stickynav .start {
  background: var(--sea); color: white;
  border: none; padding: 9px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: var(--fn); letter-spacing: -.005em;
  box-shadow: 0 2px 8px rgba(15,76,92,.32);
}

/* Floating bottom Start-free bar — slides up on scroll past hero.
   Mobile-first: full-width pill at the foot of viewport. */
#s-land .ld-floatcta {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 91;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 18px;
  background: rgba(15,76,92,.96);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
  color: white; font-family: var(--fn);
}
#s-land .ld-floatcta.visible { transform: translateY(0); opacity: 1; }
#s-land .ld-floatcta .blurb { flex: 1; min-width: 0; }
#s-land .ld-floatcta .l1 { font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
#s-land .ld-floatcta .l2 { font-size: 11px; color: rgba(255,255,255,.65); margin-top: 2px; }
#s-land .ld-floatcta .btn-go {
  background: white; color: var(--sea);
  border: none; padding: 10px 16px; border-radius: 11px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: var(--fn); letter-spacing: -.005em;
  white-space: nowrap;
  transition: transform .15s var(--ease);
}
#s-land .ld-floatcta .btn-go:active { transform: scale(.96); }
@media (min-width: 720px) {
  #s-land .ld-floatcta { left: auto; right: 24px; bottom: 24px; max-width: 380px; }
}

/* Hero brand-mark — bigger, with a soft entrance animation on first
   paint. The mark itself is the existing inline SVG; this just adds
   a wrapper that drops + scales in. */
#s-land .ld-hero-mark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  animation: ld-mark-in 800ms cubic-bezier(.22, 1, .36, 1) both;
}
#s-land .ld-hero-mark svg { filter: drop-shadow(0 12px 28px rgba(30,122,134,.45)); }
#s-land .ld-hero-mark .name {
  font-family: var(--fn-display);
  font-size: 30px; font-weight: 700;
  color: white; letter-spacing: -.025em;
}
@keyframes ld-mark-in {
  0%   { opacity: 0; transform: translateY(-12px) scale(.92); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Watermark brand-mark behind certain sections — sits low and large,
   adds visual continuity between full-bleed sections. */
#s-land .ld-watermark {
  position: absolute;
  pointer-events: none;
  opacity: .04;
  z-index: 0;
}

/* Live-counting numbers — they're rendered to their final value first
   so the page validates without JS, then JS replaces with 0 and counts
   up on scroll-in. CSS gives them the display face automatically. */
#s-land .ld-count {
  font-family: var(--fn-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.025em;
}

/* "Trusted by" / proof strip — a flexible row that can hold logos or
   a stats run. */
#s-land .ld-proof {
  background: white;
  border-top: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
  padding: 26px 22px;
}
#s-land .ld-proof-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 22px;
  text-align: center;
}
#s-land .ld-proof-stat .num {
  font-family: var(--fn-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--sea);
  line-height: 1;
  letter-spacing: -.025em;
}
#s-land .ld-proof-stat .lbl {
  font-size: 11px; color: var(--mid);
  text-transform: uppercase; letter-spacing: .12em;
  font-weight: 600;
  margin-top: 8px;
}

/* Parallax hook — the hero illustration shifts slightly slower than
   the scroll. Applied via JS by adjusting --y on the element. */
#s-land [data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--y, 0px), 0);
}

/* Magnetic press — every primary CTA gets a tactile press feel.
   Apple-tier easing curve: cubic-bezier(.32, .72, 0, 1). */
#s-land .btn { transition: transform .2s cubic-bezier(.32, .72, 0, 1), filter .2s cubic-bezier(.32, .72, 0, 1), box-shadow .3s cubic-bezier(.32, .72, 0, 1); }
#s-land .btn:active { transform: scale(.97); filter: brightness(.95); }
#s-land .btn-sea:hover { box-shadow: 0 8px 22px rgba(15,76,92,.28); }

/* Marquee credibility band — endlessly scrolling row of code names.
   Uses two copies of the same content so the loop is seamless. */
#s-land .ld-marquee {
  position: relative;
  overflow: hidden;
  margin: 0 0 30px;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
#s-land .ld-marquee-track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: ld-marquee 32s linear infinite;
  font-family: var(--fn-mono);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  letter-spacing: .02em;
  white-space: nowrap;
}
#s-land .ld-marquee-track span { display: inline-flex; align-items: center; gap: 28px; }
#s-land .ld-marquee-track svg { opacity: .55; flex-shrink: 0; }
@keyframes ld-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  #s-land .ld-marquee-track { animation: none; }
}

/* Full-viewport editorial sections — when the photo IS the moment,
   give it the whole screen. Override the previous fixed min-heights
   on the in-the-field and in-the-yard sections via .ld-vh class. */
#s-land .ld-vh {
  min-height: 92vh !important;
  display: flex;
  align-items: center;
}
#s-land .ld-vh.bottom { align-items: flex-end; }
@media (max-width: 720px) {
  /* On phones, 92vh is too aggressive — the user can't see the whole
     beat in one tap. Drop to 70vh for usable storytelling rhythm. */
  #s-land .ld-vh { min-height: 70vh !important; }
}

/* Flatter, Apple-y card surfaces — strip box-shadows that read as
   web-templatey, replace with a single hairline border. */
#s-land .ld-feature { box-shadow: none; }
#s-land .ld-feature:hover { box-shadow: 0 6px 18px rgba(28,37,43,.06); }
#s-land .ld-plan { box-shadow: none; }
#s-land .ld-plan.featured { box-shadow: 0 18px 44px rgba(15,76,92,.10); }

/* Asymmetric feature grid — desktop 2-col, mobile 1-col. */
#s-land .ld-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
#s-land .ld-feature {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  padding: 22px 22px 20px;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
#s-land .ld-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(15,76,92,.35);
  box-shadow: 0 12px 32px rgba(28,37,43,.08);
}
#s-land .ld-feature .ld-feature-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(15,76,92,.08);
  color: var(--sea);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
#s-land .ld-feature h3 {
  font-family: var(--fn-display);
  font-size: 19px; font-weight: 700; letter-spacing: -.015em;
  color: var(--text); margin: 0 0 6px;
}
#s-land .ld-feature p {
  font-size: 13.5px; line-height: 1.6; color: var(--mid); margin: 0;
}

/* Pricing card — taller, breathier than generic SaaS cards. */
#s-land .ld-plans {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
#s-land .ld-plan {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: 18px;
  padding: 26px 24px 22px;
  position: relative;
}
#s-land .ld-plan.featured {
  border: 2px solid var(--sea);
  box-shadow: 0 16px 40px rgba(15,76,92,.12);
}
#s-land .ld-plan-tag {
  position: absolute; top: -11px; left: 22px;
  background: var(--sea); color: white;
  font-size: 10px; font-weight: 700;
  padding: 4px 10px; border-radius: 6px;
  letter-spacing: .08em;
}
#s-land .ld-plan-name {
  font-family: var(--fn-display);
  font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.02em;
  margin-bottom: 4px;
}
#s-land .ld-plan-price {
  font-family: var(--fn-display);
  font-size: 44px; font-weight: 700; color: var(--sea); letter-spacing: -.03em;
  line-height: 1; margin: 14px 0 4px;
}
#s-land .ld-plan-price small { font-size: 14px; font-weight: 500; color: var(--mid); letter-spacing: 0; }
#s-land .ld-plan-blurb { font-size: 13px; color: var(--mid); line-height: 1.55; margin-bottom: 16px; min-height: 38px; }
#s-land .ld-plan ul { list-style: none; padding: 0; margin: 0 0 4px; }
#s-land .ld-plan li {
  font-size: 13.5px; color: var(--text); line-height: 1.55;
  margin: 7px 0; padding-left: 22px; position: relative;
}
#s-land .ld-plan li::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--green);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6L5 8L9 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* FAQ accordions — strip native disclosure arrow, replace with a
   custom + that rotates on open. */
#s-land .ld-faq { background: var(--card); border: 1px solid var(--bdr); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
#s-land .ld-faq summary {
  list-style: none;
  padding: 18px 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--fn);
  font-size: 15px; font-weight: 600; color: var(--text);
  user-select: none;
}
#s-land .ld-faq summary::-webkit-details-marker { display: none; }
#s-land .ld-faq summary::after {
  content: '+';
  font-size: 22px; font-weight: 300; color: var(--sea);
  transition: transform .25s var(--ease);
  font-family: var(--fn-display);
}
#s-land .ld-faq[open] summary::after { transform: rotate(45deg); }
#s-land .ld-faq-body {
  padding: 0 22px 18px;
  font-size: 14px; line-height: 1.65; color: var(--mid);
}

/* Scroll-reveal: elements with [data-reveal] start hidden + nudged,
   then fade in when they enter the viewport (driver in app.js). */
#s-land [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
#s-land [data-reveal].in {
  opacity: 1; transform: translateY(0);
}

/* Desktop breakout — landing escapes the 393px shell frame.
   Uses :has() to scope to the landing-on body state. */
@media (min-width: 720px) {
  #s-land .ld-features { grid-template-columns: 1fr 1fr; gap: 18px; }
  #s-land .ld-plans    { grid-template-columns: 1fr 1fr 1fr; gap: 18px; align-items: stretch; }
  #s-land .ld-plan     { display: flex; flex-direction: column; }
  #s-land .ld-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto;
    gap: 64px; align-items: center;
  }
}

@media (min-width: 520px) {
  /* Stop centering the body when the landing is on — let it go full
     bleed. :has() selector works in modern browsers; on the rare
     case it doesn't (old Firefox), the landing falls back to the
     centered shell, which still looks fine. */
  body:has(#s-land.on) {
    display: block !important;
    padding: 0 !important;
    align-items: stretch !important;
  }
  body:has(#s-land.on) #s-land.on {
    width: 100vw !important;
    max-width: none !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body:has(#s-land.on) #s-land .scroll {
    overflow-y: visible;
    max-height: none;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Landing rebuild v2 — clean nav/cyan/Plus Jakarta language. These
   rules sit at the end of the #s-land block so they take precedence
   over older variants without removing them.
   ────────────────────────────────────────────────────────────────── */

/* Shared wrap + section primitives */
#s-land .ld-wrap          { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 22px; box-sizing: border-box; }
#s-land .ld-wrap--narrow  { max-width: 880px; }
#s-land .ld-section       { padding: 88px 0; }
#s-land .ld-section--white    { background: #fff; color: var(--text); }
#s-land .ld-section--light    { background: var(--slate); color: var(--text); }
#s-land .ld-section--offwhite { background: #f4f6fa; color: var(--text); }
#s-land .ld-section--dark     { background: linear-gradient(180deg, #0a1628 0%, #0d1f3a 100%); color: #fff; }
#s-land .ld-section-head      { margin: 0 0 44px; max-width: 720px; }
#s-land .ld-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
#s-land .ld-lead {
  font-size: 18px; line-height: 1.6; color: var(--mid); margin: 0; max-width: 680px;
}
#s-land .ld-section-head--center .ld-lead { margin-left: auto; margin-right: auto; }
#s-land .ld-lead--on-dark { color: rgba(255,255,255,.78); }
#s-land .ld-eyebrow--on-dark { color: #67e8f9; }
#s-land .ld-h2--on-dark { color: #fff; }

/* Hero — primary headline + nav row + phone mockup */
#s-land .ld-hero {
  position: relative; overflow: hidden;
  padding: 32px 22px 84px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}
#s-land .ld-hero-glow {
  position: absolute; inset: -200px -100px auto auto; width: 720px; height: 720px;
  background: radial-gradient(circle at 50% 50%, rgba(6,182,212,.18), transparent 65%);
  pointer-events: none; z-index: 0;
}
#s-land .ld-hero-nav {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1180px; margin: 0 auto 56px; padding: 0 4px;
}
#s-land .ld-hero-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 19px; color: var(--ink); text-decoration: none;
  letter-spacing: -.01em;
}
#s-land .ld-hero-signin {
  background: transparent; border: 1px solid var(--bdr); color: var(--text);
  padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 14px;
  cursor: pointer; font-family: var(--fn); transition: background .2s, border-color .2s;
}
#s-land .ld-hero-signin:hover { background: #fff; border-color: var(--sea); }
#s-land .ld-hero-grid {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 48px;
}
#s-land .ld-hero-copy { max-width: 620px; }
#s-land .ld-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--seap); color: #0e7490;
  padding: 7px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  margin-bottom: 22px; text-transform: none;
}
#s-land .ld-hero-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sea);
  box-shadow: 0 0 0 4px rgba(8,145,178,.18);
}
#s-land .ld-h1 {
  font-family: var(--fn-display);
  font-weight: 800; font-size: clamp(40px, 6.5vw, 76px);
  line-height: 1.02; letter-spacing: -.028em;
  color: var(--ink); margin: 0 0 22px;
}
#s-land .ld-h1 .hl { color: var(--sea); }
#s-land .ld-hero-sub {
  font-size: 19px; line-height: 1.55; color: var(--mid);
  margin: 0 0 30px; max-width: 560px;
}
#s-land .ld-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
#s-land .ld-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 24px; border-radius: 999px;
  font-family: var(--fn); font-weight: 700; font-size: 15px; letter-spacing: -.005em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s cubic-bezier(.32,.72,0,1), box-shadow .25s, background .2s, color .2s;
  text-decoration: none; white-space: nowrap;
}
#s-land .ld-cta:active { transform: scale(.97); }
#s-land .ld-cta-primary {
  background: var(--sea); color: #fff;
  box-shadow: 0 8px 22px rgba(8,145,178,.28);
}
#s-land .ld-cta-primary:hover { background: #0e7490; box-shadow: 0 12px 28px rgba(8,145,178,.34); }
#s-land .ld-cta-ghost {
  background: #fff; color: var(--ink); border-color: var(--bdr);
}
#s-land .ld-cta-ghost:hover { border-color: var(--sea); color: var(--sea); }
#s-land .ld-cta-ghost-dark {
  background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22);
}
#s-land .ld-cta-ghost-dark:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
#s-land .ld-cta-sm { padding: 11px 18px; font-size: 14px; }
#s-land .ld-cta-full { width: 100%; }
#s-land .ld-hero-trust {
  display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--mid);
  margin-top: 6px;
}
#s-land .ld-hero-trust .t-tick {
  color: var(--green); font-weight: 800; margin-right: 4px;
}

/* Alert strip */
#s-land .ld-alert {
  background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
  border-bottom: 1px solid rgba(217,119,6,.25);
}
#s-land .ld-alert a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  max-width: 1180px; margin: 0 auto; padding: 11px 22px;
  font-size: 13px; color: #78350f; text-decoration: none; font-weight: 500;
  text-align: center;
}
#s-land .ld-alert-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(217,119,6,.18);
}
#s-land .ld-alert-link { color: #92400e; font-weight: 700; }
#s-land .ld-alert a:hover .ld-alert-link { text-decoration: underline; }

/* Built-for strip */
#s-land .ld-builtfor {
  background: #fff;
  border-top: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
  padding: 18px 0;
}
#s-land .ld-builtfor .ld-wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 22px; font-size: 13px;
}
#s-land .ld-builtfor-label {
  font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lt);
}
#s-land .ld-builtfor-item {
  display: inline-flex; align-items: center; gap: 7px; color: var(--mid); font-weight: 500;
}
#s-land .ld-builtfor-item svg { color: var(--sea); }

/* PBL chips */
#s-land .ld-pbl-chips {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 30px;
}
#s-land .ld-pbl-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--bdr);
  padding: 9px 14px; border-radius: 999px;
  font-size: 13px; color: var(--mid); font-weight: 500;
}
#s-land .ld-pbl-chip strong {
  background: var(--seap); color: #0e7490;
  padding: 2px 8px; border-radius: 6px; font-weight: 800; font-size: 12px;
  letter-spacing: .02em;
}

/* Grids */
#s-land .ld-grid-3, #s-land .ld-grid-2 { display: grid; grid-template-columns: 1fr; gap: 18px; }
#s-land .ld-grid-features { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* Problem cards */
#s-land .ld-pcard {
  background: #fff; border: 1px solid var(--bdr);
  border-radius: 18px; padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .2s, box-shadow .25s, border-color .2s;
}
#s-land .ld-pcard:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(10,22,40,.08); border-color: #cbd5e1; }
#s-land .ld-pcard-ic {
  width: 46px; height: 46px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
#s-land .ld-pcard--red   .ld-pcard-ic { background: var(--redp);  color: var(--red); }
#s-land .ld-pcard--amber .ld-pcard-ic { background: var(--ampp);  color: var(--amber); }
#s-land .ld-pcard--cyan  .ld-pcard-ic { background: var(--seap);  color: var(--sea); }
#s-land .ld-pcard h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 0; color: var(--ink); }
#s-land .ld-pcard p  { font-size: 15px; line-height: 1.6; color: var(--mid); margin: 0; }

/* How-it-works steps */
#s-land .ld-step {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px; padding: 26px;
}
#s-land .ld-step h3 { font-size: 19px; font-weight: 700; margin: 14px 0 8px; color: #fff; letter-spacing: -.01em; }
#s-land .ld-step p  { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.72); margin: 0; }
#s-land .ld-step-num {
  font-family: var(--fn-display);
  font-size: 13px; font-weight: 800; letter-spacing: .14em;
  color: #67e8f9;
}

/* Feature cards */
#s-land .ld-feature {
  background: #fff; border: 1px solid var(--bdr); border-radius: 16px;
  padding: 22px;
  transition: transform .2s, box-shadow .25s, border-color .2s;
}
#s-land .ld-feature-ic {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--seap); color: var(--sea);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
#s-land .ld-feature h3 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; color: var(--ink); }
#s-land .ld-feature p  { font-size: 14px; line-height: 1.55; color: var(--mid); margin: 0; }

/* Codes alignment band */
#s-land .ld-codes-grid {
  display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 22px;
}
#s-land .ld-code-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.85);
}
#s-land .ld-code-row strong { color: #fff; font-weight: 700; margin-right: 6px; }
#s-land .ld-code-arrow { color: #67e8f9; font-weight: 700; }

/* Editorial blocks (full-bleed photographic moments) */
#s-land .ld-editorial {
  position: relative; overflow: hidden;
  min-height: 460px;
  display: flex; align-items: center;
  padding: 64px 22px; color: #fff;
}
#s-land .ld-editorial-content {
  position: relative; z-index: 1; max-width: 720px;
  margin: 0 auto;
}
#s-land .ld-editorial-content--bottom { align-self: flex-end; padding-bottom: 12px; }
#s-land .ld-editorial-bg {
  position: absolute; inset: 0; z-index: 0;
}
#s-land .ld-editorial-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,22,40,.45) 0%, rgba(10,22,40,.85) 100%);
}
#s-land .ld-editorial-bg--field {
  background:
    radial-gradient(circle at 30% 30%, rgba(8,145,178,.35), transparent 55%),
    linear-gradient(135deg, #0a1628 0%, #1e3454 100%);
}
#s-land .ld-editorial-bg--yard {
  background:
    radial-gradient(circle at 75% 70%, rgba(6,182,212,.30), transparent 60%),
    linear-gradient(135deg, #0d1f3a 0%, #0a1628 100%);
}
#s-land .ld-editorial-quote {
  font-family: var(--fn-display);
  font-size: clamp(28px, 4vw, 44px); font-weight: 700;
  line-height: 1.12; letter-spacing: -.02em;
  margin: 0 0 14px; color: #fff;
}
#s-land .ld-editorial-sub {
  font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.82); margin: 0 0 22px;
  max-width: 580px;
}

/* Partners */
#s-land .ld-partner {
  background: #fff; border: 1px solid var(--bdr); border-radius: 18px;
  padding: 28px;
}
#s-land .ld-partner-logo {
  height: 56px; display: flex; align-items: center; margin-bottom: 16px;
}
#s-land .ld-partner-logo img { max-height: 56px; max-width: 200px; object-fit: contain; }
#s-land .ld-partner-name {
  font-family: var(--fn-display);
  font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.015em;
  margin-bottom: 4px;
}
#s-land .ld-partner-kind {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sea); margin-bottom: 14px;
}
#s-land .ld-partner p {
  font-size: 15px; line-height: 1.6; color: var(--mid); margin: 0 0 16px;
}
#s-land .ld-partner-list {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--bdr); padding-top: 14px;
}
#s-land .ld-partner-list li {
  font-size: 13.5px; line-height: 1.55; color: var(--mid);
  padding: 6px 0 6px 22px; position: relative;
}
#s-land .ld-partner-list li::before {
  content: ''; position: absolute; left: 0; top: 13px;
  width: 12px; height: 12px;
  background: var(--seap); border-radius: 50%;
}
#s-land .ld-partner-list li::after {
  content: ''; position: absolute; left: 3px; top: 16px;
  width: 6px; height: 6px;
  background: var(--sea); border-radius: 50%;
}

/* Pricing — uses .ld-grid-3 already; add plan-specific styles */
#s-land .ld-plan {
  background: #fff; border: 1px solid var(--bdr); border-radius: 18px;
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
#s-land .ld-plan--featured {
  border: 2px solid var(--sea);
  box-shadow: 0 22px 50px rgba(8,145,178,.18);
}
#s-land .ld-plan-tag {
  position: absolute; top: -12px; left: 24px;
  background: var(--sea); color: #fff;
  padding: 5px 11px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
}
#s-land .ld-plan-name {
  font-family: var(--fn-display);
  font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sea); margin: 0;
}
#s-land .ld-plan-blurb {
  font-size: 13.5px; line-height: 1.5; color: var(--mid); margin: 2px 0 10px; min-height: 36px;
}
#s-land .ld-plan-price {
  font-family: var(--fn-display);
  font-size: 44px; font-weight: 800; color: var(--ink); letter-spacing: -.02em;
  line-height: 1; margin-bottom: 12px;
}
#s-land .ld-plan-price small {
  font-size: 13px; font-weight: 500; color: var(--mid); letter-spacing: 0;
}
#s-land .ld-plan-list {
  list-style: none; padding: 0; margin: 18px 0 0;
  border-top: 1px solid var(--bdr); padding-top: 18px;
}
#s-land .ld-plan-list li {
  font-size: 14px; line-height: 1.5; color: var(--text);
  padding: 6px 0 6px 24px; position: relative;
}
#s-land .ld-plan-list li::before {
  content: '✓'; position: absolute; left: 0; top: 6px;
  color: var(--sea); font-weight: 800;
}

/* Also-available row */
#s-land .ld-also { margin-top: 44px; }
#s-land .ld-also-eyebrow { margin-bottom: 16px; }
#s-land .ld-also-card {
  background: #fff; border: 1px solid var(--bdr); border-radius: 14px;
  padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
#s-land .ld-also-name { font-weight: 700; font-size: 15px; color: var(--ink); }
#s-land .ld-also-sub  { font-size: 13px; color: var(--mid); margin-top: 2px; }
#s-land .ld-also-price {
  font-family: var(--fn-display);
  font-weight: 800; font-size: 22px; color: var(--sea); letter-spacing: -.015em;
  white-space: nowrap;
}
#s-land .ld-also-price small { font-size: 12px; font-weight: 500; color: var(--mid); }

#s-land .ld-disclosure {
  margin-top: 28px; padding: 14px 18px;
  background: #fff; border: 1px dashed var(--bdr); border-radius: 12px;
  font-size: 13px; color: var(--mid); line-height: 1.5; text-align: center;
}
#s-land .ld-disclosure strong { color: var(--text); }

/* Provenance */
#s-land .ld-provenance {
  padding: 72px 22px;
  background: #fff;
  border-top: 1px solid var(--bdr);
  text-align: center;
}
#s-land .ld-provenance-inner { max-width: 760px; }
#s-land .ld-provenance-quote {
  font-family: var(--fn-display);
  font-size: clamp(22px, 3vw, 30px); font-weight: 600;
  line-height: 1.4; letter-spacing: -.01em;
  color: var(--ink); margin: 12px 0 18px;
}
#s-land .ld-provenance-quote strong { color: var(--sea); font-weight: 800; }
#s-land .ld-provenance-sub { font-size: 14px; color: var(--mid); margin: 0; }
#s-land .ld-provenance-sub a { color: var(--sea); font-weight: 600; text-decoration: none; }
#s-land .ld-provenance-sub a:hover { text-decoration: underline; }

/* Final CTA (rounded card on light bg) */
#s-land .ld-finalcta-wrap { padding: 56px 22px 80px; background: #f4f6fa; }
#s-land .ld-finalcta {
  position: relative; overflow: hidden;
  max-width: 1100px; margin: 0 auto;
  background: linear-gradient(135deg, #0a1628 0%, #0d1f3a 60%, #0e3a52 100%);
  border-radius: 28px;
  padding: 64px 32px;
  color: #fff;
  box-shadow: 0 32px 64px rgba(10,22,40,.20);
}
#s-land .ld-finalcta-glow-a, #s-land .ld-finalcta-glow-b {
  position: absolute; pointer-events: none; z-index: 0;
}
#s-land .ld-finalcta-glow-a {
  inset: -180px auto auto -180px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(6,182,212,.32), transparent 65%);
}
#s-land .ld-finalcta-glow-b {
  inset: auto -180px -180px auto; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(8,145,178,.28), transparent 65%);
}
#s-land .ld-finalcta-inner {
  position: relative; z-index: 1; max-width: 720px; margin: 0 auto; text-align: center;
}
#s-land .ld-finalcta-inner .ld-h2 { margin-bottom: 14px; }
#s-land .ld-finalcta-sub {
  font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.78);
  margin: 0 0 26px;
}
#s-land .ld-finalcta-ctas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 14px;
}
#s-land .ld-finalcta-trust {
  font-size: 13px; color: rgba(255,255,255,.55); margin-top: 4px;
}

/* Footer */
#s-land .ld-footer {
  background: #0a1628; color: rgba(255,255,255,.7);
  padding: 56px 22px 32px;
}
#s-land .ld-footer-top {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.08);
}
#s-land .ld-footer-brand p {
  font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.6); margin: 12px 0 0;
  max-width: 320px;
}
#s-land .ld-footer-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fn-display);
  font-weight: 800; font-size: 19px; color: #fff; text-decoration: none;
  letter-spacing: -.01em;
}
#s-land .ld-footer h4 {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; margin: 0 0 12px;
}
#s-land .ld-footer ul { list-style: none; padding: 0; margin: 0; }
#s-land .ld-footer li { padding: 4px 0; }
#s-land .ld-footer a {
  color: rgba(255,255,255,.65); text-decoration: none; font-size: 14px;
  transition: color .15s;
}
#s-land .ld-footer a:hover { color: #fff; }
#s-land .ld-footer-disclaimer {
  padding: 24px 0; font-size: 12px; line-height: 1.6;
  color: rgba(255,255,255,.55);
}
#s-land .ld-footer-disclaimer strong { color: rgba(255,255,255,.85); }
#s-land .ld-footer-bot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding-top: 18px; font-size: 12px; color: rgba(255,255,255,.45);
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Desktop breakouts for the rebuild */
@media (min-width: 760px) {
  #s-land .ld-grid-3        { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  #s-land .ld-grid-2        { grid-template-columns: 1fr 1fr; gap: 22px; }
  #s-land .ld-grid-features { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  #s-land .ld-section       { padding: 110px 0; }
  #s-land .ld-hero          { padding: 32px 32px 110px; }
  #s-land .ld-hero-grid     { grid-template-columns: minmax(0, 1.2fr) auto; gap: 64px; align-items: center; }
  #s-land .ld-footer-top    { grid-template-columns: 2fr 1fr 1fr; }
  #s-land .ld-finalcta      { padding: 84px 64px; }
}
@media (min-width: 1024px) {
  #s-land .ld-grid-features { grid-template-columns: repeat(4, 1fr); }
  #s-land .ld-h1            { font-size: clamp(56px, 5.4vw, 84px); }
}

/* ════════════════════════════════════════════════════════════════
   end landing
   ════════════════════════════════════════════════════════════════ */

/* Auth loading state — spinner inside buttons + full-screen overlay
   for the longer handleSignedIn round-trip. Designed to feel
   intentional rather than a stalled tap. */
.auth-spin {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: white;
  animation: auth-spin .7s linear infinite;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 8px;
}
.auth-spin-lg {
  width: 44px; height: 44px;
  border-width: 3px;
  border-color: rgba(243,245,244,.25);
  border-top-color: #F3F5F4;
  margin: 0;
  vertical-align: middle;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

#auth-loading-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(28,37,43,.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fn);
  animation: auth-overlay-in 180ms var(--ease);
}
.auth-loading-card {
  text-align: center;
  color: #F3F5F4;
  max-width: 280px;
  padding: 28px 24px;
}
.auth-loading-msg {
  font-size: 15px;
  font-weight: 600;
  margin-top: 18px;
  letter-spacing: -.1px;
  font-family: var(--fn-display);
}
@keyframes auth-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* SECTION HEADING — Barlow Condensed gives compact, authoritative
   stacks for page titles and big numbers (compliance scores, totals). */
.h-display {
  font-family: var(--fn-display);
  font-size: 30px; font-weight: 700; letter-spacing: -.2px;
  line-height: 1.0;
  color: white;
  text-transform: none;
}
/* Apply the display face automatically to common heading tags so we
   don't have to hand-add the class everywhere. */
h1, h2, h3, .slbl {
  font-family: var(--fn-display);
  letter-spacing: -.2px;
}
.slbl { font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
/* Monospace stack for cert numbers, IDs, dates in dense tables. */
.mono { font-family: var(--fn-mono); font-feature-settings: "tnum" 1; }
.invoice-logo {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: white;
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.invoice-logo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  padding: 4px;
}
.h-section {
  font-size: 18px; font-weight: 800; color: var(--text);
  letter-spacing: -.3px;
  margin: 24px 16px 10px;
}
.h-section-row {
  margin: 18px 16px 8px;
  display: flex; align-items: center; justify-content: space-between;
}

/* MCA CATEGORY PILL */
.cat-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.10);
  color: white;
  border-radius: 6px; padding: 3px 8px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
}

/* INSPECTION PILL — replaces old insp-badge with more polish */
.insp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 9px;
  font-size: 11px; font-weight: 700;
  letter-spacing: -.1px;
}
.insp-pill.rdy { background: linear-gradient(135deg, rgba(22,163,74,.15) 0%, rgba(22,163,74,.05) 100%); color: var(--green); border: 1px solid rgba(22,163,74,.25); }
.insp-pill.notready { background: linear-gradient(135deg, rgba(220,38,38,.15) 0%, rgba(220,38,38,.05) 100%); color: var(--red); border: 1px solid rgba(220,38,38,.3); }

/* MCCOLLAM MARINE WORDMARK + HULL MOTIF (inline, no asset dependency) */
.mm-mark { display: flex; align-items: center; gap: 10px; }
.mm-mark-svg { flex-shrink: 0; }
.mm-mark-words { line-height: 1; }
.mm-mark-name { font-family: 'Times New Roman', Cambria, Georgia, serif; font-size: 18px; font-weight: 700; color: white; letter-spacing: .5px; }
.mm-mark-tag { font-family: 'Times New Roman', Cambria, Georgia, serif; font-size: 9px; color: rgba(255,255,255,.6); margin-top: 2px; letter-spacing: .15em; text-transform: uppercase; }

/* SURVEYOR HEADER */
.sv-hero {
  background: var(--mm-navy);
  background-image: var(--mesh-mm);
  position: relative;
  overflow: hidden;
}
.sv-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 90% -20%, rgba(30,64,175,.4) 0%, transparent 60%);
  pointer-events: none;
}

/* TAB UNDERLINE — sliding indicator (no JS) */
.tabbar.tabbar-v2 .tab { position: relative; padding: 14px 16px; }
.tabbar.tabbar-v2 .tab.on::after {
  content: '';
  position: absolute; left: 16px; right: 16px; bottom: -1px;
  height: 2.5px; border-radius: 2px;
  background: var(--sea);
}

/* EMPTY STATE */
.empty {
  text-align: center;
  padding: 32px 24px;
}
.empty-art {
  width: 64px; height: 64px; margin: 0 auto 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--seap) 0%, rgba(15,76,92,.05) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.empty-h { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.empty-sub { font-size: 13px; color: var(--lt); line-height: 1.55; max-width: 240px; margin: 0 auto 16px; }

/* SUBTLE FAB-style add button anchored bottom-right of a screen body */
.fab {
  position: absolute; right: 18px; bottom: calc(72px + var(--safe));
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--sea);
  color: white; font-size: 24px; font-weight: 400;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  box-shadow: 0 12px 28px rgba(15,76,92,.5), 0 4px 12px rgba(15,76,92,.3);
  transition: transform .15s ease;
  z-index: 30;
}
.fab:active { transform: scale(.94); }

/* PULSE for urgent items */
@keyframes pulse-rd {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.45); }
  50%      { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}
.pulse-rd { animation: pulse-rd 1.8s ease-in-out infinite; }

/* SECTION DIVIDER */
.sdiv {
  height: 1px; background: var(--bdr);
  margin: 12px 16px;
}

/* SHEET HANDLE (re-styled) */
.sheet-actions {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.sheet-act {
  background: transparent;
  border: none;
  font-family: var(--fn);
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; gap: 12px;
}
.sheet-act:hover { background: var(--slate); }
.sheet-act.danger { color: var(--red); }

/* ═══════════════════════════════════════════════════════════════
   ADMIN DESKTOP MODE — Joe's workspace.
   Same desktop pattern as the surveyor view but purple-themed
   (CodedOK platform owner, not McCollam Marine).
   ═══════════════════════════════════════════════════════════════ */

.ad-sidebar { display: none; }

@media (min-width: 1024px) {
  body.desktop-admin {
    display: block !important;
    padding: 0 !important;
    background: var(--page);
    overflow: hidden;
  }
  body.desktop-admin .shell {
    width: 100vw !important;
    max-width: none !important;
    min-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 240px;
    overflow: hidden;
  }
  body.desktop-admin .shell.on { display: flex !important; flex-direction: column; }
  body.desktop-admin .scroll { overflow-y: auto; }
  body.desktop-admin .bnav { display: none !important; }
  body.desktop-admin .sb { display: none !important; }

  body.desktop-admin .ad-sidebar {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 240px;
    background: #0E0B1A;
    background-image:
      radial-gradient(circle at 0% 0%, rgba(124,58,237,.30) 0%, transparent 60%),
      radial-gradient(circle at 100% 100%, rgba(59,95,255,.18) 0%, transparent 60%);
    color: white;
    flex-direction: column;
    padding: 22px 14px;
    z-index: 100;
    border-right: 1px solid rgba(255,255,255,.06);
  }

  .ad-sb-brand {
    padding: 0 8px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 14px;
  }

  .ad-sb-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .ad-sb-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: transparent; border: none;
    color: rgba(255,255,255,.7);
    font-family: var(--fn);
    font-size: 13px; font-weight: 500;
    text-align: left; border-radius: 9px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
    position: relative;
    width: 100%;
  }
  .ad-sb-item:hover { background: rgba(255,255,255,.06); color: white; }
  .ad-sb-item.on {
    background: rgba(124,58,237,.4); color: white; font-weight: 600;
  }
  .ad-sb-item.on::before {
    content: ''; position: absolute;
    left: -14px; top: 8px; bottom: 8px; width: 3px;
    background: #a78bfa; border-radius: 0 2px 2px 0;
  }
  .ad-sb-ic { font-size: 16px; line-height: 1; flex-shrink: 0; width: 18px; text-align: center; }
  .ad-sb-lbl { flex: 1; }
  .ad-sb-count {
    background: #7c3aed; color: white;
    font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 8px;
  }
  .ad-sb-foot {
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 12px;
  }
  .ad-sb-user {
    font-size: 11px; color: rgba(255,255,255,.5);
    padding: 0 12px 8px;
  }
  .ad-sb-exit {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.75);
    font-family: var(--fn);
    font-size: 12px; font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease;
  }
  .ad-sb-exit:hover { background: rgba(255,255,255,.06); color: white; }

  /* Admin workspace pages */
  body.desktop-admin #ad-home-scroll,
  body.desktop-admin #ad-review-scroll {
    padding: 0 !important;
    height: 100vh !important;
  }

  /* Two-pane editor layout */
  .ad-editor-grid {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    height: 100vh;
    overflow: hidden;
  }
  .ad-editor-grid > .col {
    overflow-y: auto;
    border-right: 1px solid var(--bdr);
  }
  .ad-editor-grid > .col:last-child { border-right: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN editor — works on mobile too, single-column there.
   ═══════════════════════════════════════════════════════════════ */

.ad-section-list {
  display: flex; flex-direction: column;
  padding: 16px;
}
.ad-section-item {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--fn);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 10px;
  transition: background .12s ease, border-color .12s ease;
}
.ad-section-item:hover { background: var(--slate); }
.ad-section-item.on {
  background: rgba(124,58,237,.10);
  border-color: rgba(124,58,237,.35);
}
.ad-section-item .ic {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--slate);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.ad-section-item.done .ic { background: var(--grnp); color: var(--green); }
.ad-section-item .body { flex: 1; min-width: 0; }
.ad-section-item .ttl { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-section-item .ref { font-size: 10px; color: var(--lt); margin-top: 1px; }

.ad-pane {
  padding: 24px 28px;
}
.ad-pane h1 { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.4px; margin-bottom: 4px; }
.ad-pane h2 { font-size: 14px; font-weight: 700; color: var(--text); margin: 16px 0 6px; }

.ad-input-readonly {
  background: var(--slate);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--fn);
  font-size: 13px;
  line-height: 1.55;
  color: var(--mid);
  white-space: pre-wrap;
  margin-bottom: 12px;
}

.ad-textarea {
  width: 100%;
  min-height: 220px;
  background: white;
  border: 1.5px solid var(--bdr);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--fn);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  outline: none;
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ad-textarea:focus {
  border-color: var(--purp);
  box-shadow: 0 0 0 4px rgba(124,58,237,.10);
}

.ad-notes {
  width: 100%;
  min-height: 70px;
  background: rgba(217,119,6,.04);
  border: 1.5px solid rgba(217,119,6,.2);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--fn);
  font-size: 12px;
  line-height: 1.55;
  color: var(--mid);
  outline: none;
  resize: vertical;
}

.ad-action-bar {
  position: sticky; bottom: 0;
  background: var(--card);
  border-top: 1px solid var(--bdr);
  padding: 12px 16px;
  display: flex; gap: 10px;
  z-index: 10;
}

/* ═══════════════════════════════════════════════════════════════
   SURVEYOR DESKTOP MODE — full-viewport workspace with left sidebar.
   Activated on body when surveyor mode is on AND viewport ≥1024px.
   Mobile / tablet falls back to the standard phone-frame layout.
   ═══════════════════════════════════════════════════════════════ */

.sv-sidebar { display: none; }

@media (min-width: 1024px) {
  body.desktop-surveyor {
    display: block !important;
    padding: 0 !important;
    background: var(--page);
    overflow: hidden;
  }
  body.desktop-surveyor .shell {
    width: 100vw !important;
    max-width: none !important;
    min-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 240px;
    overflow: hidden;
  }
  body.desktop-surveyor .shell.on {
    display: flex !important;
    flex-direction: column;
  }
  body.desktop-surveyor .scroll {
    overflow-y: auto;
  }
  body.desktop-surveyor .bnav { display: none !important; }
  body.desktop-surveyor .sb { display: none !important; }

  /* Sidebar */
  body.desktop-surveyor .sv-sidebar {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 240px;
    background: var(--mm-navy);
    background-image:
      radial-gradient(circle at 0% 0%, rgba(30,64,175,.25) 0%, transparent 60%),
      radial-gradient(circle at 100% 100%, rgba(15,76,92,.10) 0%, transparent 60%);
    color: white;
    flex-direction: column;
    padding: 22px 14px;
    z-index: 100;
    border-right: 1px solid rgba(255,255,255,.06);
  }

  .sv-sb-brand {
    padding: 0 8px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 14px;
  }
  .sv-sb-brand .mm-mark { gap: 8px; }
  .sv-sb-brand .mm-mark-name { font-size: 14px; }
  .sv-sb-brand .mm-mark-tag { font-size: 8px; }

  .sv-sb-nav {
    display: flex; flex-direction: column;
    gap: 2px; flex: 1;
  }
  .sv-sb-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.7);
    font-family: var(--fn);
    font-size: 13px; font-weight: 500;
    text-align: left;
    border-radius: 9px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
    position: relative;
    width: 100%;
  }
  .sv-sb-item:hover {
    background: rgba(255,255,255,.06);
    color: white;
  }
  .sv-sb-item.on {
    background: rgba(30,64,175,.4);
    color: white;
    font-weight: 600;
  }
  .sv-sb-item.on::before {
    content: ''; position: absolute;
    left: -14px; top: 8px; bottom: 8px; width: 3px;
    background: var(--mm-blue-soft);
    border-radius: 0 2px 2px 0;
  }
  .sv-sb-ic { font-size: 16px; line-height: 1; flex-shrink: 0; width: 18px; text-align: center; }
  .sv-sb-lbl { flex: 1; }
  .sv-sb-count {
    background: var(--mm-blue);
    color: white;
    font-size: 10px; font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
  }

  .sv-sb-foot {
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 12px;
  }
  .sv-sb-user {
    font-size: 11px; color: rgba(255,255,255,.5);
    padding: 0 12px 8px;
  }
  .sv-sb-exit {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.75);
    font-family: var(--fn);
    font-size: 12px; font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
  }
  .sv-sb-exit:hover { background: rgba(255,255,255,.06); color: white; }

  /* Surveyor home hero on desktop — clean banner instead of cramped header */
  body.desktop-surveyor #s-surveyor-home > div[style*="background:var(--ink)"] {
    padding: 24px 32px !important;
    border-bottom: 1px solid var(--bdr);
  }
  body.desktop-surveyor #s-surveyor-home .h-display { font-size: 26px !important; }
  body.desktop-surveyor #s-surveyor-home .tile { padding: 12px 16px; }
  body.desktop-surveyor #s-surveyor-home .tile-num { font-size: 22px; }
  body.desktop-surveyor #s-surveyor-home > div[style*="background:var(--ink)"] > div:first-child {
    margin: 0 0 16px !important;
  }
  body.desktop-surveyor #s-surveyor-home > div[style*="background:var(--ink)"] > div:nth-child(2) {
    margin-bottom: 0 !important;
  }

  /* Cap content width nicely on wide desktops */
  body.desktop-surveyor #sv-home-scroll,
  body.desktop-surveyor #sv-vessel-scroll,
  body.desktop-surveyor #sv-job-scroll,
  body.desktop-surveyor #sv-quote-scroll,
  body.desktop-surveyor #sv-insp-scroll {
    padding: 8px 32px 32px;
  }

  /* Vessels grid on desktop — 2 columns */
  body.desktop-surveyor #sv-home-scroll [style*="display:flex;flex-direction:column;gap:10px"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 12px !important;
  }

  /* Inbox cards on desktop — 2 columns */
  body.desktop-surveyor #sv-home-scroll > div[style*="padding:0 16px"]:has(.card) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 12px !important;
    padding: 0 0 !important;
  }

  /* Surveyor branded hero on individual screens — desktop variant */
  body.desktop-surveyor .hero-mm {
    padding: 24px 32px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  body.desktop-surveyor .hero-mm .h-display { font-size: 26px !important; }

  /* Surveyor screens: hide the back buttons inside heroes (sidebar is the nav) */
  body.desktop-surveyor #s-surveyor-vessel .hero-mm > div:first-child .back,
  body.desktop-surveyor #s-surveyor-job .hero-mm > div:first-child .back {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE COMPACTION — tighten heroes, tiles and headers below 520px
   so above-the-fold content shows actions, not just decoration.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 519px) {
  /* Hero containers — reduce padding */
  .hero { padding: 14px !important; }

  /* Compliance ring — drop from 96 to 76 across the app */
  .ring-wrap { width: 76px !important; height: 76px !important; }
  .ring-wrap > svg { width: 76px !important; height: 76px !important; }
  .ring-pct { font-size: 19px !important; }
  .ring-pct-lbl { font-size: 9px !important; }

  /* Inline 26px ring text used on home — override */
  .hero .ring-val > div:first-child { font-size: 19px !important; }
  .hero .ring-val span { font-size: 11px !important; }

  /* Display headings — slightly smaller */
  .h-display { font-size: 20px !important; letter-spacing: -.4px !important; }

  /* Tiles in hero strips */
  .tile { padding: 8px 10px !important; }
  .tile-num { font-size: 17px !important; }
  .tile-lbl { font-size: 9px !important; }

  /* Quick action / qa-tile — small but reasonable */
  .qa-tile { padding: 12px !important; }
  .qa-icon { width: 36px !important; height: 36px !important; font-size: 17px !important; }
  .qa-title { font-size: 13px !important; }
  .qa-sub { font-size: 11px !important; }

  /* Top dark header on home — less bottom padding */
  #s-home > div[style*="background:var(--ink)"] {
    padding: 0 18px 12px !important;
  }
  #home-greeting > div:first-child { font-size: 11px !important; margin-bottom: 1px !important; }
  #home-greeting .h-display { font-size: 18px !important; }

  /* Section headings — slightly smaller */
  .h-section { font-size: 14px !important; margin: 14px 16px 6px !important; }
  .h-section-row { margin: 14px 16px 6px !important; }
  .slbl { padding: 14px 20px 6px !important; font-size: 10px !important; }

  /* Vessel detail / surveyor vessel hero compaction */
  #s-vessel-detail > div[style*="background:var(--ink)"],
  #s-surveyor-vessel .hero-mm,
  #s-surveyor-job .hero-mm {
    padding: 12px 14px 14px !important;
  }
  .vcover-emoji { width: 38px !important; height: 38px !important; font-size: 18px !important; }
  .vcover-name { font-size: 15px !important; }
  .vcover-stat .num { font-size: 15px !important; }
  .vcover-stat .lbl { font-size: 8px !important; }

  /* Vessel cover card body padding */
  .vcover-body { padding: 12px 14px !important; }
  .vcover-head { padding: 14px 14px 10px !important; }

  /* Status badges */
  .insp-pill { font-size: 10px !important; padding: 5px 9px !important; }
  .cat-pill { font-size: 9px !important; padding: 2px 7px !important; }

  /* Action card margins */
  .action-card { padding: 12px !important; }

  /* Surveyor home tile-strip horizontal compaction */
  #s-surveyor-home > div[style*="background:var(--ink)"],
  #s-surveyor-home > div.sv-hero {
    padding: 0 16px 14px !important;
  }

  /* Login card — slightly tighter on small screens */
  .auth-content { padding: 0 22px calc(28px + env(safe-area-inset-bottom)) !important; }
  .auth-card { padding: 16px !important; }
  .auth-h1 { font-size: 24px !important; margin-top: 18px !important; }
  .auth-sub { font-size: 13px !important; margin-top: 6px !important; }
  .auth-mark { width: 56px !important; height: 56px !important; margin-top: 18px !important; }

  /* Tickets + crew cards padding */
  .ticket-body { padding: 10px 12px !important; gap: 10px !important; }
  .ticket-name { font-size: 13px !important; }
  .ticket-sub { font-size: 11px !important; }
  .ticket-ic { width: 34px !important; height: 34px !important; font-size: 15px !important; }

  .crewc { padding: 12px !important; }
  .crewc-av { width: 38px !important; height: 38px !important; }
  .crewc-name { font-size: 14px !important; }

  /* Bottom nav slightly tighter */
  .bnav { padding: 8px 0 calc(8px + var(--safe)) !important; }
  .bni-ic { font-size: 19px !important; }
  .bni-lb { font-size: 9px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   AUTH SCREENS — login + magic-link sent.
   Full-bleed dark background with mesh, premium feel.
   ═══════════════════════════════════════════════════════════════ */

.auth-shell {
  background: var(--ink) !important;
  position: relative;
  overflow: hidden;
}
.auth-shell .auth-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 25% 0%, rgba(15,76,92,.45) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(30,122,134,.20) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 30%, rgba(30,122,134,.10) 0%, transparent 60%),
    linear-gradient(180deg, #1C252B 0%, #0F4C5C 100%);
  pointer-events: none;
}
.auth-shell .auth-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 85% 15%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 35% 85%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 75% 50%, rgba(255,255,255,.25), transparent);
  background-size: 100% 100%;
  pointer-events: none;
  opacity: .65;
}

.auth-wave {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 200px;
  pointer-events: none;
  overflow: hidden;
}
.auth-wave svg {
  position: absolute; bottom: 0; left: 0;
  width: 200%; height: 100%;
  animation: wave-drift 18s linear infinite;
}
@keyframes wave-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.auth-content {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column;
  padding: 0 28px calc(32px + env(safe-area-inset-bottom));
  /* Make the auth shell scrollable. On mobile the parent .shell.on
     is overflow:hidden + fixed-height, so .auth-content has to own
     the scroll context — otherwise the sign-up form (taller than a
     phone viewport once role-picker + name + business + email +
     password + create button are stacked) gets clipped at the
     bottom with no way to reach Submit. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.auth-mark {
  margin: 24px auto 0;
  width: 64px; height: 64px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px rgba(15,76,92,.25), inset 0 1px 0 rgba(255,255,255,.06);
  animation: auth-fade-up .5s cubic-bezier(.32,.72,0,1) both;
}

@keyframes auth-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-h1 {
  font-size: 28px; font-weight: 800; color: white;
  letter-spacing: -.6px; line-height: 1.1;
  text-align: center;
  margin-top: 24px;
  animation: auth-fade-up .5s .08s cubic-bezier(.32,.72,0,1) both;
}
.auth-sub {
  font-size: 14px; color: rgba(255,255,255,.55);
  line-height: 1.55; text-align: center;
  margin-top: 8px;
  max-width: 280px;
  margin-left: auto; margin-right: auto;
  animation: auth-fade-up .5s .12s cubic-bezier(.32,.72,0,1) both;
}

.auth-card {
  /* margin-top: auto pushed the card to the bottom of the viewport
     when content fit, which looked elegant — but when the sign-up
     form grows past the viewport height the auto margin combined
     with overflow:hidden parent ate the top half of the card. Use
     a normal top margin so it flows from the hero copy down and
     scrolls naturally. */
  margin: 28px 0 28px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 18px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: auth-fade-up .5s .16s cubic-bezier(.32,.72,0,1) both;
  flex-shrink: 0;
}

.auth-input {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: var(--fn);
  font-size: 15px;
  color: white;
  outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.auth-input::placeholder { color: rgba(255,255,255,.35); }
.auth-input:focus {
  border-color: var(--seal);
  background: rgba(15,76,92,.08);
  box-shadow: 0 0 0 4px rgba(15,76,92,.15);
}

.auth-btn {
  width: 100%;
  height: 50px;
  border-radius: 12px;
  border: none;
  font-family: var(--fn);
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  letter-spacing: -.1px;
}
.auth-btn:active { transform: scale(.99); }
.auth-btn-primary {
  background: linear-gradient(180deg, var(--seal) 0%, var(--sea) 100%);
  color: white;
  box-shadow: 0 8px 24px rgba(15,76,92,.4), inset 0 1px 0 rgba(255,255,255,.15);
}
.auth-btn-primary:hover { box-shadow: 0 10px 28px rgba(15,76,92,.5), inset 0 1px 0 rgba(255,255,255,.15); }
.auth-btn-social {
  background: white;
  color: #1C252B;
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.auth-btn-social.dark {
  background: #000;
  color: white;
}

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,.35);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  margin: 16px 0;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1; height: 1px;
  background: rgba(255,255,255,.10);
}

.auth-fineprint {
  font-size: 11px; color: rgba(255,255,255,.4);
  text-align: center; line-height: 1.6;
  margin-top: 18px;
}
.auth-fineprint a { color: rgba(255,255,255,.7); text-decoration: none; }

.auth-demo-link {
  display: block;
  margin: 14px auto 0;
  font-size: 13px; font-weight: 600;
  color: var(--seal);
  text-align: center;
  cursor: pointer;
  background: none; border: none;
  font-family: var(--fn);
  padding: 8px 14px;
  border-radius: 8px;
  transition: background .15s ease;
}
.auth-demo-link:hover { background: rgba(255,255,255,.05); color: white; }

/* Demo-mode floating badge */
/* DEMO BADGE — hidden. Sign-out lives in Account → Sign out so we don't
   float a floating pill over screen titles or the bottom nav. */
.demo-badge { display: none !important; }

/* JURISDICTION */
.jur-panel{border-radius:12px;padding:14px 16px;margin-bottom:10px;}
.jur-panel.uk{background:rgba(0,56,168,.08);border:1px solid rgba(0,56,168,.15);}
.jur-panel.ie{background:rgba(22,90,54,.08);border:1px solid rgba(22,90,54,.15);}
.jur-panel.shared{background:var(--seap);border:1px solid rgba(15,76,92,.15);}
.jur-flag{font-size:18px;flex-shrink:0;}
.jur-title{font-size:13px;font-weight:700;color:var(--text);}
.jur-sub{font-size:11px;color:var(--lt);margin-top:2px;}
.jur-status{font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;white-space:nowrap;}
.jur-status.ready{background:var(--grnp);color:var(--green);}
.jur-status.action{background:var(--ampp);color:var(--amber);}
.jur-status.critical{background:var(--redp);color:var(--red);}
.jur-status.missing{background:rgba(124,58,237,.12);color:var(--purp);}
.jur-selector{display:flex;gap:8px;}
.jur-opt{flex:1;padding:12px 8px;border-radius:10px;border:2px solid var(--bdr);background:var(--card);text-align:center;cursor:pointer;transition:all .15s;}
.jur-opt.on{border-color:var(--sea);background:var(--seap);}
.jur-opt-flag{font-size:22px;margin-bottom:4px;}
.jur-opt-lbl{font-size:12px;font-weight:600;color:var(--text);}
.deficiency-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--bdr);}
.deficiency-item:last-child{border:none;}
.def-sev{width:4px;border-radius:2px;flex-shrink:0;align-self:stretch;}
.def-sev.critical{background:var(--red);}
.def-sev.major{background:var(--amber);}
.def-sev.minor{background:var(--sea);}
.def-title{font-size:13px;font-weight:600;color:var(--text);}
.def-meta{font-size:11px;color:var(--lt);margin-top:2px;line-height:1.5;}
.def-jur{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;background:var(--seap);color:var(--sea);border-radius:4px;padding:2px 6px;margin-top:4px;}
.disclaimer{background:rgba(124,58,237,.07);border:1px solid rgba(124,58,237,.15);border-radius:10px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;margin:0 16px;}

/* ════════════════════════════════════════════════════════════════
   DESKTOP — break the auth shell out of the 393px mobile column.
   Same pattern as the landing's body:has(#s-land.on) override:
   keep the centered mobile preview for the app interior, but let
   the entry-point screens (login/signup, onboarding) fill the
   viewport on desktop so first impressions look like a real product.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 520px) {
  body:has(#s-login.on),
  body:has(#s-onboard.on) {
    display: block !important;
    padding: 0 !important;
    align-items: stretch !important;
  }
  body:has(#s-login.on) #s-login.on,
  body:has(#s-onboard.on) #s-onboard.on {
    width: 100vw !important;
    max-width: none !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  /* Two-column hero + form layout for sign-in / sign-up on desktop.
     The form card stays a comfortable reading width; the left half
     carries the brand + tagline so the screen doesn't feel empty. */
  #s-login.on .auth-content {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 48px 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    min-height: 100vh;
  }
  #s-login.on .auth-mark { margin: 0 0 24px; }
  #s-login.on .auth-h1 {
    text-align: left;
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin-top: 0;
  }
  #s-login.on .auth-sub {
    text-align: left;
    font-size: 18px;
    line-height: 1.55;
    max-width: 480px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 16px;
  }
  #s-login.on .auth-card {
    margin: 0;
    max-width: 460px;
    width: 100%;
    padding: 32px;
    justify-self: end;
  }
  /* Stack the hero above the form when there isn't quite enough room
     for two columns to breathe (e.g. small laptops in split-screen). */
  @media (max-width: 880px) {
    #s-login.on .auth-content {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 48px 32px 64px;
    }
    #s-login.on .auth-h1 { font-size: 40px; text-align: center; }
    #s-login.on .auth-sub { text-align: center; margin: 16px auto 0; }
    #s-login.on .auth-mark { margin: 0 auto 24px; }
    #s-login.on .auth-card { justify-self: stretch; max-width: 480px; margin: 0 auto; }
  }
  #s-onboard.on .scroll {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 24px;
  }
}

/* ════════════════════════════════════════════════════════════════
   QR POPUP — desktop-only "Open on phone" floating button + modal.
   Hidden on mobile (the app is already on the phone) and on
   standalone PWA installs. The QR encodes https://codedok.com so
   scanning lands the visitor on the same site, where the mobile
   smart-banner offers Add-to-Home-Screen.
   ════════════════════════════════════════════════════════════════ */
.qr-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9998;
  background: #0F4C5C;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.08);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.qr-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.30); }
.qr-fab svg { width: 18px; height: 18px; }
.qr-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10,22,40,.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: qrFade 180ms ease both;
}
@keyframes qrFade { from { opacity: 0 } to { opacity: 1 } }
.qr-modal-card {
  background: #fff;
  border-radius: 24px;
  padding: 32px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 40px 100px rgba(0,0,0,.40);
  color: #0f172a;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  position: relative;
}
.qr-modal-card h3 {
  font-size: 22px; font-weight: 800; letter-spacing: -.5px;
  margin: 0 0 6px;
}
.qr-modal-card p {
  font-size: 14px; color: #475569; line-height: 1.5;
  margin: 0 0 22px;
}
.qr-modal-card img {
  width: 220px; height: 220px;
  display: block;
  margin: 0 auto 18px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
}
.qr-modal-card .qr-url {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: #0F4C5C;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 6px 10px;
}
.qr-modal-card .qr-close {
  position: absolute;
  top: 12px; right: 14px;
  background: none; border: 0;
  font-size: 26px; line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px 8px;
}
.qr-modal-card .qr-close:hover { color: #0f172a; }
@media (max-width: 519px) {
  /* Phone visitors don't need a "scan to open on phone" prompt. */
  .qr-fab, .qr-modal-overlay { display: none !important; }
}
.disclaimer-txt{font-size:11px;color:var(--mid);line-height:1.6;}

/* ════════════════════════════════════════════════════════════════
   LANDING — CINEMATIC DARK OVERLAY
   Flips the entire s-land brand pack to a deep navy-black palette
   with cyan accents, massive editorial type, subtle gradient meshes
   and elevated dark cards. No HTML restructuring — overrides the
   existing .ld-* class system so the reveal animations and section
   flow stay intact. Tone: Apple / Anthropic, not bright SaaS.
   ════════════════════════════════════════════════════════════════ */

#s-land {
  /* IMPORTANT: in the original landing pack --ink / --ink2 / --ink3
     are *text* colors (dark navy on a light page). The dark-mode
     overlay flips the page background, so --ink also has to flip
     to a LIGHT colour or every h3 / .ld-pcard h3 / .ld-feature h3
     / .ld-also-name (which use `color: var(--ink)`) will render
     dark-on-dark and disappear. */
  --ink:   #f8fafc !important;
  --ink2:  #cbd5e1 !important;
  --ink3:  rgba(248,250,252,.65) !important;
  --sea:   #06b6d4 !important;
  --seal:  #67e8f9 !important;
  --seap:  rgba(6,182,212,.12) !important;
  --slate: rgba(255,255,255,.04) !important;
  --bdr:   rgba(255,255,255,.08) !important;
  --text:  #f8fafc !important;
  --mid:   rgba(248,250,252,.65) !important;
  --lt:    rgba(248,250,252,.40) !important;
  --page:  #050614 !important;
  --card:  #0f111c !important;
  background: #050614 !important;
  color: #f8fafc !important;
}
body:has(#s-land.on) { background: #050614 !important; }

/* Flip every section variant to dark. Original landing used white/
   off-white/light to stagger the page rhythm — we keep the rhythm
   via subtle gradient shifts but never break the dark canvas. */
#s-land .ld-section--white,
#s-land .ld-section--offwhite {
  background: #050614 !important;
  color: #f8fafc !important;
}
#s-land .ld-section--light {
  background: linear-gradient(180deg, #050614 0%, #0a0d22 100%) !important;
  color: #f8fafc !important;
}
#s-land .ld-section--dark {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(6,182,212,.10) 0%, transparent 50%),
    linear-gradient(180deg, #0a0d22 0%, #050614 100%) !important;
  color: #f8fafc !important;
}

/* HERO — full-bleed cinematic, twin glows, massive type */
#s-land .ld-hero {
  background: #050614 !important;
  position: relative;
  isolation: isolate;
}
#s-land .ld-hero-glow {
  background:
    radial-gradient(ellipse 60% 50% at 25% 25%, rgba(6,182,212,.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(8,145,178,.14) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(11,52,82,.30) 0%, transparent 70%) !important;
  opacity: 1 !important;
}

/* TYPOGRAPHY — cinematic display sizing */
#s-land .ld-h1 {
  font-size: clamp(48px, 9vw, 104px) !important;
  font-weight: 800 !important;
  letter-spacing: -3.5px !important;
  line-height: 0.96 !important;
  color: #f8fafc !important;
}
#s-land .ld-h1 .hl {
  color: #67e8f9 !important;
  background: linear-gradient(135deg, #67e8f9 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#s-land .ld-h2 {
  font-size: clamp(34px, 5vw, 64px) !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
  line-height: 1.05 !important;
  color: #f8fafc !important;
}
#s-land .ld-h2--on-dark,
#s-land .ld-h2.on-dark { color: #f8fafc !important; }
#s-land .ld-h3 {
  color: #f8fafc !important;
  font-weight: 700 !important;
  letter-spacing: -.4px !important;
}
#s-land .ld-sub,
#s-land .ld-lead,
#s-land .ld-hero-sub,
#s-land .ld-section p,
#s-land .ld-feature-body,
#s-land .ld-feature-blurb {
  color: rgba(248,250,252,.65) !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
}
#s-land .ld-sub.on-light,
#s-land .ld-section--light p,
#s-land .ld-section--light .ld-lead,
#s-land .ld-section--offwhite p,
#s-land .ld-section--offwhite .ld-lead {
  color: rgba(248,250,252,.65) !important;
}
#s-land .ld-eyebrow,
#s-land .ld-hero-eyebrow {
  color: #67e8f9 !important;
  text-transform: uppercase;
  letter-spacing: .22em !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
#s-land .ld-eyebrow.on-dark,
#s-land .ld-eyebrow--on-dark { color: #67e8f9 !important; }
#s-land .ld-hero-eyebrow-dot { background: #67e8f9 !important; box-shadow: 0 0 12px #67e8f9; }

/* TRUST ROW */
#s-land .ld-hero-trust { color: rgba(248,250,252,.55) !important; }
#s-land .ld-hero-trust .t-tick { color: #67e8f9 !important; }

/* CTAs — cinematic buttons */
#s-land .ld-cta {
  font-family: var(--fn) !important;
  font-weight: 700 !important;
  transition: transform 180ms cubic-bezier(.22,1,.36,1), box-shadow 180ms ease, background 180ms ease !important;
}
#s-land .ld-cta-primary {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
  color: #050614 !important;
  border: 0 !important;
  box-shadow: 0 12px 40px rgba(6,182,212,.35), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
#s-land .ld-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 55px rgba(6,182,212,.50), inset 0 1px 0 rgba(255,255,255,.30) !important;
}
#s-land .ld-cta-ghost,
#s-land .ld-cta-ghost-dark {
  background: rgba(255,255,255,.04) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#s-land .ld-cta-ghost:hover,
#s-land .ld-cta-ghost-dark:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.22) !important;
  transform: translateY(-1px);
}

/* HERO SIGN-IN BUTTON */
#s-land .ld-hero-signin {
  background: rgba(255,255,255,.04) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  font-weight: 600 !important;
}
#s-land .ld-hero-brand,
#s-land .ld-hero-brand span { color: #f8fafc !important; }

/* ALERT TAPE — top */
#s-land .ld-alert {
  background: rgba(6,182,212,.08) !important;
  border-bottom: 1px solid rgba(6,182,212,.18) !important;
  color: #f8fafc !important;
}
#s-land .ld-alert a,
#s-land .ld-alert a:hover { color: #f8fafc !important; text-decoration: none; }
#s-land .ld-alert strong { color: #f8fafc !important; }
#s-land .ld-alert-link { color: #67e8f9 !important; }
#s-land .ld-alert-dot {
  background: #67e8f9 !important;
  box-shadow: 0 0 12px rgba(103,232,249,.7) !important;
}

/* STICKY NAV */
#s-land .ld-stickynav {
  background: rgba(5,6,20,.80) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
#s-land .ld-stickynav .brand,
#s-land .ld-stickynav .brand * { color: #f8fafc !important; }
#s-land .ld-stickynav .signin {
  color: #f8fafc !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
#s-land .ld-stickynav .start {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
  color: #050614 !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 24px rgba(6,182,212,.30) !important;
}

/* FLOATING BOTTOM CTA */
#s-land .ld-floatcta {
  background: rgba(15,17,28,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.50) !important;
  color: #f8fafc !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#s-land .ld-floatcta .l1 { color: #f8fafc !important; }
#s-land .ld-floatcta .l2 { color: rgba(248,250,252,.55) !important; }
#s-land .ld-floatcta .btn-go {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
  color: #050614 !important;
  font-weight: 700 !important;
}

/* BUILT-FOR STRIP */
#s-land .ld-builtfor {
  background: rgba(255,255,255,.02) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
#s-land .ld-builtfor-label { color: rgba(248,250,252,.45) !important; }
#s-land .ld-builtfor-item { color: rgba(248,250,252,.75) !important; }

/* CARDS — features, plans, partners, FAQ */
#s-land .ld-plan,
#s-land .ld-card,
#s-land .ld-feature,
#s-land .ld-feature-card,
#s-land .ld-partner,
#s-land .ld-faq-q,
#s-land .ld-quote-card,
#s-land .ld-step,
#s-land .ld-pbl-item,
#s-land .ld-problem-card {
  background: rgba(15,17,28,.65) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #f8fafc !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#s-land .ld-feature h3,
#s-land .ld-feature-name,
#s-land .ld-faq-q h3,
#s-land .ld-step-title,
#s-land .ld-pbl-title,
#s-land .ld-partner-name,
#s-land .ld-plan-name {
  color: #f8fafc !important;
}
#s-land .ld-plan-blurb,
#s-land .ld-feature-blurb,
#s-land .ld-step-blurb,
#s-land .ld-pbl-body,
#s-land .ld-partner-kind {
  color: rgba(248,250,252,.65) !important;
}
#s-land .ld-plan-price { color: #f8fafc !important; }
#s-land .ld-plan-price small { color: rgba(248,250,252,.55) !important; }
#s-land .ld-plan-list li,
#s-land .ld-partner-list li {
  color: rgba(248,250,252,.75) !important;
}
#s-land .ld-plan--featured {
  background: linear-gradient(180deg, rgba(17,20,46,.95) 0%, rgba(11,15,40,.95) 100%) !important;
  border-color: rgba(6,182,212,.45) !important;
  box-shadow: 0 30px 90px rgba(6,182,212,.18), 0 0 0 1px rgba(6,182,212,.18) inset !important;
}
#s-land .ld-plan-tag {
  background: #06b6d4 !important;
  color: #050614 !important;
  font-weight: 800 !important;
}

/* CODES ALIGNMENT — keep dark band tight */
#s-land .ld-codes { padding-top: 96px !important; padding-bottom: 96px !important; }
#s-land .ld-code-tag {
  background: rgba(6,182,212,.12) !important;
  color: #67e8f9 !important;
  border: 1px solid rgba(6,182,212,.30) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

/* PROVENANCE */
#s-land .ld-provenance {
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(6,182,212,.08) 0%, transparent 70%),
    #0a0d22 !important;
  color: #f8fafc !important;
}
#s-land .ld-provenance-quote { color: #f8fafc !important; }
#s-land .ld-provenance-sub { color: rgba(248,250,252,.55) !important; }
#s-land .ld-provenance-sub a { color: #67e8f9 !important; }

/* EDITORIAL SECTIONS — kept but recolored cinematic */
#s-land .ld-editorial {
  background: #050614 !important;
}
#s-land .ld-editorial-bg {
  filter: brightness(.55) saturate(1.1);
}
#s-land .ld-editorial-quote { color: #f8fafc !important; }
#s-land .ld-editorial-sub { color: rgba(248,250,252,.75) !important; }

/* FINAL CTA */
#s-land .ld-finalcta-wrap {
  background: #050614 !important;
}
#s-land .ld-finalcta {
  background:
    radial-gradient(ellipse 50% 80% at 50% 0%, rgba(6,182,212,.20) 0%, transparent 60%),
    linear-gradient(180deg, #0a0d22 0%, #050614 100%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 40px 100px rgba(0,0,0,.55) !important;
}
#s-land .ld-finalcta h2 { color: #f8fafc !important; }
#s-land .ld-finalcta p { color: rgba(248,250,252,.70) !important; }

/* FOOTER */
#s-land .ld-footer {
  background: #050614 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(248,250,252,.55) !important;
}
#s-land .ld-footer h4 { color: #f8fafc !important; }
#s-land .ld-footer a { color: rgba(248,250,252,.65) !important; text-decoration: none; }
#s-land .ld-footer a:hover { color: #67e8f9 !important; }
#s-land .ld-footer-disclaimer {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  color: rgba(248,250,252,.55) !important;
}
#s-land .ld-footer-bot {
  color: rgba(248,250,252,.40) !important;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* PHONE MOCK — elevate with cyan glow */
#s-land .ld-mock {
  filter: drop-shadow(0 40px 80px rgba(6,182,212,.20)) drop-shadow(0 20px 40px rgba(0,0,0,.50));
}
#s-land .ld-mock-screen {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 30px 60px rgba(0,0,0,.5);
}

/* DIVIDERS / RULES inside dark sections */
#s-land hr,
#s-land .ld-rule { border-color: rgba(255,255,255,.10) !important; }

/* SECTION HEADINGS rhythm — more breathing room */
@media (min-width: 768px) {
  #s-land .ld-section { padding-top: 120px !important; padding-bottom: 120px !important; }
}

/* CINEMATIC PATCH — additional landing classes that the first sweep
   missed. These selectors had hardcoded `background: #fff` and were
   rendering as bright white panels on the now-dark canvas, with the
   inner text invisible because the text colours had already been
   flipped to white by the cinematic overlay. */

/* Problem cards (5. Problem section). Class is .ld-pcard (NOT
   .ld-problem-card as the first sweep guessed). */
#s-land .ld-pcard {
  background: rgba(15,17,28,.65) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#s-land .ld-pcard:hover {
  border-color: rgba(6,182,212,.35) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.30) !important;
}
#s-land .ld-pcard h3 { color: #f8fafc !important; }
#s-land .ld-pcard p  { color: rgba(248,250,252,.70) !important; }

/* Irish PBL pill chips (4. PBL moat section). Class is .ld-pbl-chip. */
#s-land .ld-pbl-chip {
  background: rgba(15,17,28,.65) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(248,250,252,.75) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#s-land .ld-pbl-chip strong {
  background: rgba(6,182,212,.16) !important;
  color: #67e8f9 !important;
}

/* Final CTA wrapper had a light grey background that became a
   bright slab in dark mode. */
#s-land .ld-finalcta-wrap {
  background: #050614 !important;
}

/* Hero "Sign in" pill hover — was flashing to white on hover. */
#s-land .ld-hero-signin:hover {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
}

/* ════════════════════════════════════════════════════════════════
   PHONE MOCK — rebuild to mirror the actual s-home screen.
   Replaces the old "On course" green-ring + white-vessel-card mock
   with the live operator home: orange warn ring, "4 items adrift",
   red urgent badge, Inspection pack CTA, three urgent action cards,
   labelled bottom-nav. Whole device dark; no white slabs.
   ════════════════════════════════════════════════════════════════ */

/* Device shell — slightly larger to fit the new content */
#s-land .ld-mock { max-width: 290px !important; }
#s-land .ld-mock-screen {
  background: #0a0d22 !important;
}

/* Header bar */
#s-land .ld-mock-status {
  background: #050614 !important;
  padding: 30px 14px 12px !important;
}
#s-land .ld-mock-greet {
  font-size: 10px !important;
  color: rgba(255,255,255,.55) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
#s-land .ld-mock-h {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -.4px !important;
  color: #fff !important;
  margin-top: 2px !important;
}
#s-land .ld-mock-iconrow {
  display: flex; align-items: center; gap: 6px;
}
#s-land .ld-mock-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  color: rgba(255,255,255,.85);
}
#s-land .ld-mock-avatar {
  width: 26px !important; height: 26px !important;
  font-size: 9px !important;
  background: #67e8f9 !important;
  color: #050614 !important;
  margin-left: 2px;
}

/* Compliance hero card */
#s-land .ld-mock-hero {
  background: linear-gradient(180deg, #0F4C5C 0%, #0a3845 100%) !important;
  padding: 14px 14px 14px !important;
  margin: 10px 10px 0 !important;
  border-radius: 14px !important;
}
#s-land .ld-mock-ring {
  width: 70px !important; height: 70px !important;
}
#s-land .ld-mock-ring--warn {
  background: conic-gradient(#f97316 0deg 295deg, rgba(255,255,255,.10) 295deg 360deg) !important;
}
#s-land .ld-mock-ring::after {
  background: #0F4C5C !important;
  inset: 5px !important;
}
#s-land .ld-mock-ring-text {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #fff !important;
}
#s-land .ld-mock-ring-text span {
  font-size: 9px !important;
  color: rgba(255,255,255,.65) !important;
}
#s-land .ld-mock-summary .label {
  font-size: 8px !important;
  color: rgba(255,255,255,.55) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}
#s-land .ld-mock-summary .headline {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.2px;
}
#s-land .ld-mock-summary .sub {
  font-size: 9px !important;
  color: rgba(255,255,255,.65) !important;
  line-height: 1.4;
  margin-top: 3px;
}
#s-land .ld-mock-urgent-badge {
  display: inline-block;
  margin: 8px 0 12px;
  padding: 4px 9px;
  font-size: 9px; font-weight: 700;
  background: rgba(220,38,38,.18);
  color: #fca5a5;
  border: 1px solid rgba(220,38,38,.35);
  border-radius: 6px;
  letter-spacing: .02em;
}
#s-land .ld-mock-tiles { gap: 5px !important; margin-bottom: 10px; }
#s-land .ld-mock-tile {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px;
  padding: 8px 4px;
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
}
#s-land .ld-mock-tile .l {
  color: rgba(255,255,255,.55) !important;
}
#s-land .ld-mock-pack {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 11px; font-weight: 700;
}
#s-land .ld-mock-pack-icon { font-size: 13px; }
#s-land .ld-mock-pack-label { flex: 1; letter-spacing: -.01em; }
#s-land .ld-mock-pack-arrow { font-size: 14px; opacity: .85; }

/* Action cards section */
#s-land .ld-mock-section {
  padding: 14px 10px 0 !important;
  background: transparent !important;
}
#s-land .ld-mock-section-lbl {
  color: rgba(255,255,255,.50) !important;
  letter-spacing: .12em !important;
  font-size: 9px !important;
  padding: 0 4px;
}
#s-land .ld-mock-action {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 8px 8px 8px 10px;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
#s-land .ld-mock-action-ic {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
#s-land .ld-mock-action-ic--red {
  background: rgba(220,38,38,.16);
  border: 1px solid rgba(220,38,38,.30);
}
#s-land .ld-mock-action-body {
  flex: 1; min-width: 0;
}
#s-land .ld-mock-action-name {
  font-size: 10px; font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#s-land .ld-mock-action-sub {
  font-size: 8px;
  color: rgba(255,255,255,.55);
  margin-top: 1px;
}
#s-land .ld-mock-action-cta {
  font-size: 8px; font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
  padding: 5px 7px;
  border-radius: 5px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Labelled bottom nav (matches the live operator home) */
#s-land .ld-mock-bnav {
  background: #050614 !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  margin-top: 10px !important;
  padding: 6px 4px 10px !important;
}
#s-land .ld-mock-bnav-item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 12px !important;
  opacity: 1 !important;
  color: rgba(255,255,255,.40) !important;
  flex: 1;
}
#s-land .ld-mock-bnav-item em {
  font-size: 7px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: capitalize;
  color: rgba(255,255,255,.40);
}
#s-land .ld-mock-bnav-item.on {
  color: #67e8f9 !important;
}
#s-land .ld-mock-bnav-item.on em {
  color: #67e8f9;
}

/* ════════════════════════════════════════════════════════════════
   LANDING v6 — "Deep Sea Technical"
   Premium industrial-SaaS skin: abyss navy, blueprint grid overlay,
   glassmorphism bento cards, mono trust signals, naval-blue primary
   CTAs with outer glow, scrollytelling section with sticky phone.
   ════════════════════════════════════════════════════════════════ */

#s-land {
  /* Deep Sea Technical palette — overrides the cinematic cyan pack */
  --ds-abyss:   #0a0f1a !important;
  --ds-hull:    #0d1424 !important;
  --ds-steel:   #1e293b !important;
  --ds-steel2:  #334155 !important;
  --ds-sonar:   #22d3ee !important;
  --ds-naval:   #1e40af !important;
  --ds-navalGl: #3b82f6 !important;
  --ds-ok:      #10b981 !important;
  --ds-warn:    #f59e0b !important;
  --ds-crit:    #ef4444 !important;
  --ds-ink:     #f1f5f9 !important;
  --ds-ash:     #94a3b8 !important;
  --ds-ash2:    #64748b !important;
  background: #0a0f1a !important;
}

/* Blueprint grid overlay — 20px squares with subtle steel hairlines.
   Radial mask fades the grid into the page edges so it's atmospheric
   rather than busy. Sits on the .scroll because that's the scroll
   context inside #s-land. */
#s-land .scroll {
  position: relative;
  background: #0a0f1a !important;
}
#s-land .scroll::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(30,41,59,.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,41,59,.45) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 100% 60% at 50% 25%, #000 35%, transparent 90%);
          mask-image: radial-gradient(ellipse 100% 60% at 50% 25%, #000 35%, transparent 90%);
  z-index: 0;
}
#s-land .scroll::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(34,211,238,.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 90%, rgba(30,64,175,.18) 0%, transparent 60%);
  z-index: 0;
}
#s-land .scroll > * { position: relative; z-index: 1; }

/* Technical trust line — mono, uppercase, monospaced numerals. The
   single rule that makes every cert ID, vessel name, date and version
   feel like instrument data instead of marketing copy. */
.ldx-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.ldx-trust {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #64748b;
}
.ldx-trust strong, .ldx-trust .v { color: #f1f5f9; font-weight: 500; margin-right: 6px; }

/* ─── HERO ─────────────────────────────────────────────────── */
#s-land .ldx-hero {
  padding: 80px 22px 100px;
  position: relative;
}
@media (min-width: 720px) {
  #s-land .ldx-hero { padding: 110px 32px 120px; }
}
#s-land .ldx-hero-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
@media (min-width: 880px) {
  #s-land .ldx-hero-inner { grid-template-columns: 1.1fr 0.9fr; gap: 80px; }
}
#s-land .ldx-hero-eyebrow-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(13,20,36,.65);
  border: 1px solid #1e293b;
  border-radius: 999px;
  padding: 7px 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#s-land .ldx-hero-eyebrow-chip svg { color: #22d3ee; }
#s-land .ldx-hero-eyebrow-chip .ldx-trust { color: rgba(34,211,238,.95); }

#s-land .ldx-h1 {
  margin-top: 28px;
  font-size: clamp(40px, 7vw, 76px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.02;
  color: #f1f5f9;
  font-family: var(--fn);
}
#s-land .ldx-h1 .grad {
  background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
#s-land .ldx-hero-sub {
  margin-top: 22px;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.55;
  color: #94a3b8;
}
#s-land .ldx-hero-ctas {
  margin-top: 32px;
  display: flex; flex-wrap: wrap; gap: 12px;
}
#s-land .ldx-hero-trust-row {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; column-gap: 22px; row-gap: 8px;
}

/* Compliance ring */
#s-land .ldx-ring-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  justify-self: center;
}
#s-land .ldx-ring {
  width: 280px; height: 280px;
  position: relative;
}
#s-land .ldx-ring::before {
  content: ''; position: absolute; inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.18) 0%, transparent 65%);
  animation: ldx-ring-ping 3s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ldx-ring-ping {
  0%   { transform: scale(1);   opacity: .55; }
  75%, 100% { transform: scale(1.35); opacity: 0; }
}
#s-land .ldx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#s-land .ldx-ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
#s-land .ldx-ring-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 56px; font-weight: 500;
  color: #f1f5f9;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#s-land .ldx-ring-num .pct { font-size: 28px; color: #94a3b8; margin-left: 2px; }
#s-land .ldx-ring-label {
  margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: #64748b;
}
#s-land .ldx-ring-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  width: 100%; max-width: 280px;
}
#s-land .ldx-ring-tile {
  background: rgba(13,20,36,.65);
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
}
#s-land .ldx-ring-tile .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
#s-land .ldx-ring-tile.crit .num { color: #ef4444; }
#s-land .ldx-ring-tile.warn .num { color: #f59e0b; }
#s-land .ldx-ring-tile.ok   .num { color: #10b981; }
#s-land .ldx-ring-tile .l { display: block; margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: #64748b; }

/* ─── BUTTONS ──────────────────────────────────────────────── */
#s-land .ldx-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 15px; font-weight: 600;
  font-family: var(--fn);
  border: 0;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.22,1,.36,1), box-shadow 180ms ease, background 180ms ease;
}
#s-land .ldx-cta:hover { transform: translateY(-2px); }
#s-land .ldx-cta-primary {
  background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(59,130,246,.35),
    0 16px 40px rgba(30,64,175,.45),
    inset 0 1px 0 rgba(255,255,255,.20);
}
#s-land .ldx-cta-primary:hover {
  box-shadow:
    0 0 0 1px rgba(59,130,246,.45),
    0 24px 56px rgba(30,64,175,.55),
    inset 0 1px 0 rgba(255,255,255,.25);
}
#s-land .ldx-cta-ghost {
  background: rgba(13,20,36,.55);
  color: #f1f5f9;
  border: 1px solid #1e293b;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#s-land .ldx-cta-ghost:hover { background: rgba(13,20,36,.85); border-color: #334155; }

/* ─── BENTO GRID ───────────────────────────────────────────── */
#s-land .ldx-bento {
  padding: 80px 22px;
  max-width: 1240px;
  margin: 0 auto;
}
@media (min-width: 720px) { #s-land .ldx-bento { padding: 100px 32px; } }
#s-land .ldx-bento-head { margin-bottom: 48px; max-width: 720px; }
#s-land .ldx-bento-head .ldx-trust { color: #22d3ee; }
#s-land .ldx-bento-head h2 {
  margin-top: 14px;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: #f1f5f9;
}
#s-land .ldx-bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 880px) {
  #s-land .ldx-bento-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 290px;
  }
  #s-land .ldx-bento-a { grid-column: span 2; }
  #s-land .ldx-bento-d { grid-column: span 2; }
}
#s-land .ldx-cell {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid #1e293b;
  background: linear-gradient(180deg, rgba(15,23,42,.55) 0%, rgba(13,20,36,.65) 100%);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  padding: 24px;
  display: flex; flex-direction: column;
  transition: border-color 240ms ease, transform 240ms ease;
}
#s-land .ldx-cell:hover { border-color: #334155; transform: translateY(-2px); }
#s-land .ldx-cell-head {
  display: flex; align-items: center; gap: 10px;
  color: #22d3ee;
}
#s-land .ldx-cell-ic {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid #1e293b;
  background: #0d1424;
}
#s-land .ldx-cell h3 {
  margin-top: 18px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: #f1f5f9;
}
#s-land .ldx-cell p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: #94a3b8;
}

/* Bento-A visual: vessel status panel */
#s-land .ldx-vessel-panel {
  margin-top: auto;
  border: 1px solid #1e293b;
  background: rgba(10,15,26,.75);
  border-radius: 12px;
  padding: 14px 16px;
}
#s-land .ldx-vessel-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
#s-land .ldx-vessel-name {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; color: #f1f5f9;
}
#s-land .ldx-vessel-name svg { color: #22d3ee; }
#s-land .ldx-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase;
}
#s-land .ldx-pill.ok   { background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.35); color: #10b981; }
#s-land .ldx-pill.warn { background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.35); color: #f59e0b; }
#s-land .ldx-pill.crit { background: rgba(239,68,68,.15);  border: 1px solid rgba(239,68,68,.35);  color: #ef4444; }
#s-land .ldx-vessel-list {
  margin-top: 12px; list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
#s-land .ldx-vessel-list li {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
#s-land .ldx-vessel-list .k { color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#s-land .ldx-vessel-list .v { letter-spacing: .12em; text-transform: uppercase; font-size: 10px; }
#s-land .ldx-vessel-list .v.ok   { color: #10b981; }
#s-land .ldx-vessel-list .v.warn { color: #f59e0b; }
#s-land .ldx-vessel-list .v.crit { color: #ef4444; }

/* Bento-B visual: offline sync indicator */
#s-land .ldx-sync {
  margin-top: auto;
  border: 1px solid #1e293b;
  background: rgba(10,15,26,.75);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
}
#s-land .ldx-sync-ic {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid #1e293b;
  background: #0d1424;
  display: grid; place-items: center;
  color: #22d3ee;
  animation: ldx-spin 3s linear infinite;
}
@keyframes ldx-spin { to { transform: rotate(360deg); } }
#s-land .ldx-sync-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; color: #f1f5f9;
}
#s-land .ldx-sync-sub {
  margin-top: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: #64748b;
}

/* Bento-C visual: code toggle */
#s-land .ldx-codetabs {
  align-self: flex-start;
  display: inline-flex;
  margin-top: 16px;
  border: 1px solid #1e293b;
  border-radius: 10px;
  background: #0a0f1a;
  padding: 4px;
}
#s-land .ldx-codetab {
  padding: 7px 12px;
  border-radius: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase;
  background: transparent;
  border: 0; color: #94a3b8; cursor: pointer;
  transition: all 180ms ease;
}
#s-land .ldx-codetab.on { background: #22d3ee; color: #0a0f1a; }
#s-land .ldx-codelist {
  margin-top: auto;
  border: 1px solid #1e293b;
  background: rgba(10,15,26,.75);
  border-radius: 12px;
  padding: 14px 16px;
  list-style: none;
  display: flex; flex-direction: column; gap: 8px;
}
#s-land .ldx-codelist li {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
}
#s-land .ldx-codelist .k { color: #94a3b8; }
#s-land .ldx-codelist .v { letter-spacing: .12em; text-transform: uppercase; font-size: 10px; }
#s-land .ldx-codelist .v.ok   { color: #10b981; }
#s-land .ldx-codelist .v.warn { color: #f59e0b; }
#s-land [data-code-view] { display: none; }
#s-land [data-code-view].on { display: flex; }

/* Bento-D visual: AI scanner */
#s-land .ldx-scan-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 879px) {
  #s-land .ldx-scan-grid { grid-template-columns: 1fr; }
}
#s-land .ldx-scan-paper {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #1e293b;
  background: #f8f5ec;
  color: #1a1a1a;
  padding: 14px;
  min-height: 150px;
}
#s-land .ldx-scan-paper .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: #475569;
}
#s-land .ldx-scan-paper .row {
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; line-height: 1.5;
}
#s-land .ldx-scan-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, #22d3ee 50%, transparent 100%);
  box-shadow: 0 0 18px rgba(34,211,238,.8);
  animation: ldx-scan 2s linear infinite;
}
@keyframes ldx-scan {
  0%   { top: 0; }
  100% { top: 100%; }
}
#s-land .ldx-scan-json {
  margin: 0; padding: 14px;
  border-radius: 12px;
  border: 1px solid #1e293b;
  background: rgba(10,15,26,.85);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; line-height: 1.6;
  color: #94a3b8;
  overflow: hidden;
}
#s-land .ldx-scan-json .key { color: #67e8f9; }
#s-land .ldx-scan-json .str { color: #a5b4fc; }
#s-land .ldx-scan-json .num { color: #fbbf24; }

/* ─── SCROLLYTELLING ───────────────────────────────────────── */
#s-land .ldx-scrolly {
  padding: 80px 22px 120px;
  max-width: 1240px;
  margin: 0 auto;
}
@media (min-width: 720px) { #s-land .ldx-scrolly { padding: 100px 32px 140px; } }
#s-land .ldx-scrolly-head { max-width: 720px; margin-bottom: 48px; }
#s-land .ldx-scrolly-head .ldx-trust { color: #22d3ee; }
#s-land .ldx-scrolly-head h2 {
  margin-top: 14px;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: #f1f5f9;
}
#s-land .ldx-scrolly-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
}
@media (min-width: 880px) {
  #s-land .ldx-scrolly-grid { grid-template-columns: 1fr 1fr; gap: 80px; }
}
#s-land .ldx-scrolly-steps { display: flex; flex-direction: column; }
#s-land .ldx-step {
  min-height: 70vh;
  display: flex; flex-direction: column; justify-content: center;
  opacity: .30;
  transition: opacity 480ms ease;
}
#s-land .ldx-step.on { opacity: 1; }
#s-land .ldx-step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: .22em;
  color: #22d3ee;
}
#s-land .ldx-step h3 {
  margin-top: 12px;
  font-size: 32px; font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: #f1f5f9;
}
#s-land .ldx-step p {
  margin-top: 14px;
  max-width: 460px;
  font-size: 16px; line-height: 1.6;
  color: #94a3b8;
}
#s-land .ldx-scrolly-phone-wrap { display: none; }
@media (min-width: 880px) {
  #s-land .ldx-scrolly-phone-wrap { display: block; }
}
#s-land .ldx-scrolly-phone-sticky {
  position: sticky;
  top: 14vh;
}
#s-land .ldx-scrolly-phone {
  margin: 0 auto;
  width: 300px;
  height: 600px;
  border-radius: 42px;
  border: 1px solid #1e293b;
  background: #050614;
  position: relative;
  box-shadow: 0 50px 120px rgba(0,0,0,.50), 0 0 0 1px rgba(255,255,255,.04);
  transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
}
#s-land .ldx-scrolly-phone-screen {
  position: absolute; inset: 6px;
  border-radius: 36px;
  background: #0d1424;
  overflow: hidden;
  padding: 36px 18px 18px;
}
#s-land .ldx-scrolly-phone-notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 22px; border-radius: 0 0 14px 14px;
  background: #050614;
}
#s-land .ldx-scrolly-card {
  margin-bottom: 12px;
  border: 1px solid #1e293b;
  background: rgba(10,15,26,.65);
  border-radius: 12px;
  padding: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 540ms ease, transform 540ms ease;
}
#s-land .ldx-scrolly-card.on { opacity: 1; transform: none; }
#s-land .ldx-scrolly-card.ok { border-color: rgba(16,185,129,.40); background: rgba(16,185,129,.08); }
#s-land .ldx-scrolly-card .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase;
  color: #22d3ee;
}
#s-land .ldx-scrolly-card .body {
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; color: #f1f5f9;
}
#s-land .ldx-scrolly-card .sub {
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase;
  color: #64748b;
}
#s-land .ldx-scrolly-card.ok .lbl { color: #10b981; }
#s-land .ldx-scrolly-card.ok .body { color: #10b981; }

/* ─── FINAL CTA (Deep Sea) ─────────────────────────────────── */
#s-land .ldx-finalcta-wrap {
  padding: 80px 22px 120px;
}
#s-land .ldx-finalcta-card {
  max-width: 1000px;
  margin: 0 auto;
  border: 1px solid #1e293b;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(15,23,42,.55) 0%, rgba(13,20,36,.65) 100%);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  padding: 64px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#s-land .ldx-finalcta-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(34,211,238,.18) 0%, transparent 60%);
  pointer-events: none;
}
#s-land .ldx-finalcta-card > * { position: relative; }
#s-land .ldx-finalcta-card .ldx-trust { color: #22d3ee; }
#s-land .ldx-finalcta-card h2 {
  margin-top: 14px;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: #f1f5f9;
}
#s-land .ldx-finalcta-card p {
  margin: 22px auto 0;
  max-width: 580px;
  font-size: 17px;
  line-height: 1.55;
  color: #94a3b8;
}
#s-land .ldx-finalcta-card .ldx-hero-ctas {
  margin-top: 32px;
  justify-content: center;
}