/* ==========================================================================
   Crew Pass - design system
   tokens > base > layout > components > product crops > pages > utilities > motion
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/PlusJakartaSans-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/PlusJakartaSans-Variable.woff2') format('woff2');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/Manrope-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/Manrope-Variable.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root{
  /* colour */
  --ink: #0E1F33;
  --ink-2: #142A44;
  --signal: #12B5A0;
  --signal-dark: #0F9A88;
  --signal-tint: #D6F4EF;
  --amber: #FFB547;
  --amber-tint: #FFF1D6;
  --amber-text: #8A5A00;
  --error: #E14B4B;
  --error-tint: #F9E3E3;
  --cloud: #F3F6F9;
  --white: #FFFFFF;
  --slate: #45566B;
  --steel: #8A97A6;
  --mist: #D8E0E8;

  /* type */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --fs-display: clamp(2.5rem, 1.55rem + 4.3vw, 4.75rem);
  --fs-h1: clamp(2.125rem, 1.55rem + 2.6vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h3: clamp(1.3rem, 1.2rem + 0.35vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-label: 0.78125rem;

  /* spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --sp-11: 160px;

  /* mobile rhythm: 48px each side of a boundary reads as the brief's 72-88px
     gap between sections once two paddings meet */
  --section-pad: 2.75rem;
  --container-w: 1200px;
  --container-pad: 16px;
  --measure-narrow: 720px;

  /* radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* elevation */
  --shadow-card: 0 1px 2px rgba(14,31,51,.04), 0 8px 24px -8px rgba(14,31,51,.08), 0 32px 64px -32px rgba(14,31,51,.12);

  /* easing */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-ui: cubic-bezier(.25,.46,.45,.94);
  --dur-enter: 640ms;
  --dur-ui: 160ms;
}

@media (min-width: 768px){
  :root{
    --container-pad: 24px;
    --section-pad: clamp(8rem, 4vw + 6.5rem, 10rem);
  }
}

/* ---------- reset / base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
body{
  margin: 0;
  background: var(--cloud);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 700; margin: 0; color: var(--ink); text-wrap: balance; }
p{ margin: 0; }
p, li{ text-wrap: pretty; }
strong, b{ font-weight: 700; }

html.no-scroll, body.no-scroll{ overflow: hidden; }

/* header is fixed and overlays the page; pages without a bleed-under Ink
   hero need top padding so content doesn't sit under the bar */
body.page-offset{ padding-top: 68px; }
@media (min-width: 768px){
  body.page-offset{ padding-top: 76px; }
}

/* focus */
:focus-visible{ outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 4px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible){ outline: none; }

.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link{
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--white); padding: 12px 20px;
  border-radius: var(--r-md); font-weight: 600; font-family: var(--font-display);
  transition: top var(--dur-ui) var(--ease-ui);
}
.skip-link:focus{ top: 16px; }

/* ---------- layout ---------- */
.container{
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
main{ display: block; }

section{ padding-block: var(--section-pad); }
.section-tight{ padding-block: calc(var(--section-pad) * .84); }
@media (min-width: 768px){
  .section-tight{ padding-block: calc(var(--section-pad) * .62); }
}
.section-flush-top{ padding-top: 0; }

/* ONE eyebrow style, two colour variants. 12.5px / 600 / .08em caps.
   .text-label is the same treatment without the block margin, for labels
   inside components. */
.eyebrow, .text-label{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-label);
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eyebrow{
  display: block;
  /* light variant: signal-dark on a light surface is under 4.5:1 at this
     size (the brand kit itself reserves teal text for 16px+); slate keeps
     AA and still reads as a distinct label tone. */
  color: var(--slate);
  margin-bottom: var(--sp-4);
}
/* dark variant: teal on Ink clears 6.4:1 */
.section-dark .eyebrow, .eyebrow-on-dark{ color: var(--signal); }

.section-head{ max-width: 640px; margin-bottom: var(--sp-8); }
.section-head.center{ margin-inline: auto; text-align: center; }
.section-head h2{ font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: var(--sp-4); max-width: 20ch; }
.section-head p{ font-size: var(--fs-lead); line-height: 1.55; color: var(--slate); max-width: 52ch; }
.section-dark .section-head p{ color: rgba(255,255,255,.72); }

.measure{ max-width: var(--measure-narrow); }
.measure-center{ max-width: var(--measure-narrow); margin-inline: auto; text-align: center; }

/* dark section surface */
.section-dark{
  background: var(--ink);
  color: var(--white);
  position: relative;
  isolation: isolate;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4{ color: var(--white); }
.section-dark p{ color: rgba(255,255,255,.72); }

/* decorative fx layer: separately clipped so the section itself can stay
   overflow:visible (needed for the hero visual to bleed past its edge) */
.ink-fx{ position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.ink-fx::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/grain.svg');
  background-size: 220px 220px;
  opacity: .035;
  mix-blend-mode: overlay;
}
.ink-fx.has-glow::before{
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  width: min(1100px, 92vw);
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(18,181,160,.18), rgba(18,181,160,0) 70%);
}
.section-dark > .container{ position: relative; z-index: 1; }

/* ---------- type utilities ---------- */
h1{ font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.035em; }
h2{ font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.03em; }
h3{ font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; }
.text-display{ font-size: var(--fs-display); line-height: .98; letter-spacing: -0.035em; font-weight: 700; }
.text-lead{ font-size: var(--fs-lead); line-height: 1.55; color: var(--slate); }
.text-small{ font-size: var(--fs-small); }
.text-label{ font-family: var(--font-body); font-weight: 600; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; }
.text-muted{ color: var(--slate); }
.text-steel{ color: var(--slate); }

/* ---------- grid / layout helpers ---------- */
.grid{ display: grid; gap: var(--sp-5); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
}

.stack-row{ display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  border-radius: var(--r-pill);
  padding: 13px 24px;
  border: 1px solid transparent;
  transition: transform var(--dur-ui) var(--ease-ui), background-color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui), box-shadow var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui);
  min-height: 44px;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn-primary{ background: var(--signal); color: var(--ink); }
.btn-primary:hover{ background: var(--signal-dark); }

.btn-dark{ background: var(--ink); color: var(--white); }
.btn-dark:hover{ background: var(--ink-2); }

.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--mist); }
.btn-ghost:hover{ border-color: var(--steel); background: rgba(14,31,51,.03); }

.btn-ghost-on-dark{ background: transparent; color: var(--white); border-color: rgba(255,255,255,.28); }
.btn-ghost-on-dark:hover{ border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }

.btn-sm{ padding: 9px 18px; font-size: .875rem; min-height: 36px; }
.btn-lg{ padding: 16px 28px; font-size: 1rem; width: 100%; }
.btn-block{ width: 100%; }

.link-quiet{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--ink);
  padding-block: 4px;
  position: relative;
}
.link-quiet .arrow{ transition: transform var(--dur-ui) var(--ease-ui); }
.link-quiet:hover .arrow{ transform: translateX(3px); }
.link-quiet::after{
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -1px;
  height: 1px;
  background: currentColor;
  transition: right var(--dur-ui) var(--ease-ui);
}
.link-quiet:hover::after{ right: 0; }
.link-on-dark{ color: var(--white); }
.link-teal{ color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mist); }

/* ---------- header / nav ---------- */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-block: 12px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--mist);
  transition: background-color var(--dur-ui) var(--ease-ui), backdrop-filter var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui), padding-block var(--dur-ui) var(--ease-ui);
}
/* .is-transparent is added by JS only, for the homepage hero, before scroll */
.site-header.is-transparent{
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  padding-block: 18px;
}
.site-header.is-solid{
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--mist);
  padding-block: 12px;
}
.nav-bar{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }

.brand{ display: inline-flex; align-items: center; }
.brand-logo{ height: 26px; width: auto; display: block; }
.brand-logo-light{ display: none; }
.is-transparent .brand-logo-dark{ display: none; }
.is-transparent .brand-logo-light{ display: block; }
.brand-word{ font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; color: var(--ink); }
.is-transparent .brand-word{ color: var(--white); }
.brand-mark{ flex-shrink: 0; }

.nav-links{ display: none; align-items: center; gap: var(--sp-6); }
.nav-links a{
  font-family: var(--font-display); font-weight: 600; font-size: .9375rem;
  color: var(--ink); position: relative; padding-block: 4px;
}
.is-transparent .nav-links a{ color: rgba(255,255,255,.88); }
.nav-links a::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: currentColor; transition: right var(--dur-ui) var(--ease-ui);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ right: 0; }

.nav-actions{ display: none; align-items: center; gap: 10px; }
.is-transparent .nav-actions .btn-ghost{ color: var(--white); border-color: rgba(255,255,255,.32); }
.is-transparent .nav-actions .btn-ghost:hover{ border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); }

.nav-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-md);
}
.nav-toggle-bars{ position: relative; width: 20px; height: 14px; display: block; }
.nav-toggle-bars span{
  position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 1px;
  background: var(--ink); transition: transform var(--dur-ui) var(--ease-ui), opacity var(--dur-ui) var(--ease-ui);
}
.is-transparent .nav-toggle-bars span{ background: var(--white); }
.nav-toggle-bars span:first-child{ top: 0; }
.nav-toggle-bars span:last-child{ bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child{ transform: translateY(6.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child{ transform: translateY(-6.25px) rotate(-45deg); }

.nav-sheet{
  position: fixed; inset: 0; z-index: 150;
  background: var(--ink);
  display: flex; flex-direction: column;
  padding: 18px var(--container-pad) max(24px, env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-ui) var(--ease-ui), visibility 0s linear var(--dur-ui);
}
.nav-sheet[data-open="true"]{
  opacity: 1; visibility: visible;
  transition: opacity 280ms var(--ease-out), visibility 0s;
}
.nav-sheet-head{ display: flex; align-items: center; justify-content: space-between; padding-block: 6px 8px; }
.nav-sheet-close{ width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); }
.nav-sheet-close svg{ stroke: var(--white); }

.nav-sheet-links{ display: flex; flex-direction: column; margin-top: var(--sp-6); }
.nav-sheet-links a{
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em;
  color: var(--white); padding-block: 15px; min-height: 56px; display: flex; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.nav-sheet-links a[aria-current="page"]{ color: var(--signal); }

.nav-sheet-actions{
  margin-top: auto;
  padding-top: var(--sp-6);
  display: flex; flex-direction: column; gap: 12px;
}

/* ---------- footer ---------- */
.site-footer{ background: var(--ink); color: rgba(255,255,255,.6); padding-block: var(--sp-9) var(--sp-6); }
.footer-grid{ display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-7); border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand{ display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-4); }
.footer-tag{ max-width: 34ch; font-size: var(--fs-small); line-height: 1.6; }
.footer-col h4{ font-family: var(--font-body); font-weight: 700; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: var(--sp-4); }
.footer-col ul{ display: flex; flex-direction: column; gap: 10px; }
.footer-col a{ font-size: var(--fs-small); color: rgba(255,255,255,.72); }
.footer-col a:hover{ color: var(--white); }
.footer-bottom{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-top: var(--sp-5); font-size: var(--fs-small); flex-wrap: wrap; }
.footer-bottom a{ color: rgba(255,255,255,.85); }
.footer-bottom a:hover{ color: var(--white); }
@media (max-width: 860px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px){
  .footer-grid{ grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* ---------- cards ---------- */
.card{
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-ui) var(--ease-ui);
  position: relative;
}
.card::before{
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--mist);
  pointer-events: none;
  transition: box-shadow var(--dur-ui) var(--ease-ui);
}
.card:hover::before{ box-shadow: inset 0 0 0 1px var(--steel); }
.card h3{ margin-bottom: var(--sp-2); }
.card p{ color: var(--slate); font-size: var(--fs-small); line-height: 1.6; }

.card-dark{
  background: rgba(255,255,255,.04);
  box-shadow: none;
}
.card-dark::before{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.card-dark::after{
  content: "";
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
.card-dark:hover::before{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.card-dark h3{ color: var(--white); }
.card-dark p{ color: rgba(255,255,255,.68); }
.card p.card-link{ margin-top: var(--sp-3); font-weight: 700; }
.card p.card-link a{ display: inline-flex; align-items: center; gap: 6px; }
.card p.card-link .arrow{ transition: transform var(--dur-ui) var(--ease-ui); }
.card p.card-link a:hover .arrow{ transform: translateX(3px); }
.card-dark p.card-link a{ color: var(--white); }

.card-icon{ width: 40px; height: 40px; margin-bottom: var(--sp-4); }
.card-icon svg{ width: 100%; height: 100%; }

/* ---------- pills ---------- */
.pill{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: .75rem;
  padding: 5px 11px; border-radius: var(--r-pill); line-height: 1.3;
}
.pill-dot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
/* pill text uses --ink rather than the hue-matched token: at this small
   size (~12px bold) the hue-matched text (signal-dark/error) reads under
   4.5:1 on its own tint. Ink on any tint clears 13:1+; the tint itself
   still carries the colour meaning. amber-text already clears AA and is
   kept for warmth. */
.pill-good{ background: var(--signal-tint); color: var(--ink); }
.pill-warn{ background: var(--amber-tint); color: var(--amber-text); }
.pill-bad{ background: var(--error-tint); color: var(--ink); }
.pill-neutral{ background: var(--cloud); color: var(--slate); box-shadow: inset 0 0 0 1px var(--mist); }
.pill-live{ background: rgba(18,181,160,.14); color: var(--ink); }
.pill-live .pill-dot{ animation: pulse-dot 2.2s var(--ease-ui) infinite; }

/* ---------- icons ---------- */
.icon{ width: 22px; height: 22px; }
.icon path, .icon circle, .icon rect, .icon line{ vector-effect: non-scaling-stroke; }

/* ==========================================================================
   Product visual library (UI crops)

   House rules for every crop in here:
   - one hairline weight (1px --mist, drawn as an inset shadow so it never
     shifts layout), one shadow stack (--shadow-card) and one padding grid
     (8 / 12 / 16 / 24).
   - product frames: 28 outer radius, 20 inner panels, 12 inset surfaces.
   - a crop either fits entirely inside its container, or bleeds off exactly
     ONE edge behind a gradient fade mask (.crop-scroll). Never a hard slice.
   - numbers, times, dates and licence numbers are tabular.
   ========================================================================== */

/* These crops are styled exactly like the product: white surfaces with dark
   ink text, regardless of whether the section they sit in is light or Ink.
   Reset colour explicitly so nothing silently inherits white-on-dark text
   from a .section-dark ancestor. Text that intentionally sits on a dark
   sub-surface (.certificate, avatars, pills) sets its own colour. */
.phone-frame, .pass-card, .win-frame, .licence-panel, .induction-card,
.roster, .timesheet, .qr-block, .phone-next, .panel, .minimap{
  color: var(--ink);
}

/* shared surfaces ------------------------------------------------------- */

/* inset surface used INSIDE a card (bento cells, panels). Never a card on a
   card: no shadow, Cloud fill, hairline, 12 radius. */
.panel{
  background: var(--cloud);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--mist);
  padding: var(--sp-4);
}

/* deliberate one-edge crop: where the content is genuinely wider than the box
   it scrolls and fades out on the right rather than being sliced. The fade is
   only applied at widths where the content really does overflow, so it never
   dims content that fits. */
.crop-scroll{ overflow-x: auto; scrollbar-width: none; }
.crop-scroll::-webkit-scrollbar{ display: none; }

/* -- mini map (shared: hero board, geofence cell, attendance panel) ------ */
.minimap{
  position: relative;
  border-radius: var(--r-md);
  background: var(--cloud) url('/assets/img/map-grid.svg') center / cover no-repeat;
  box-shadow: inset 0 0 0 1px var(--mist);
  height: 168px;
  overflow: hidden;
}
.mm-site{ position: absolute; }
.mm-fence{
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(15,154,136,.45);
  background: rgba(18,181,160,.09);
}
.mm-dot{
  position: absolute;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(18,181,160,.2);
}
.mm-site .mm-dot{ top: 50%; left: 50%; margin: -4.5px 0 0 -4.5px; }
.mm-site .mm-dot.mm-off{ top: 34%; left: 30%; }
.mm-chip{
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--white);
  color: var(--ink);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--mist), 0 1px 2px rgba(14,31,51,.06);
}
.mm-a{ left: 4%; top: 32%; width: 104px; height: 104px; }
.mm-b{ left: 39%; top: 6%; width: 84px; height: 84px; }
.mm-c{ right: 5%; top: 40%; width: 92px; height: 92px; }
/* the story dot: one guard outside a fence */
.mm-loose{
  position: absolute;
  right: 30%; top: 16%;
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(255,181,71,.22);
}
.mm-note{
  position: absolute;
  left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white);
  font-size: .6875rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--mist), 0 1px 2px rgba(14,31,51,.06);
}
.mm-note .mm-note-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex-shrink: 0; }
.mm-pulse{ animation: geo-pulse 2.6s var(--ease-ui) infinite; }

/* -- crew pass card (phone) --------------------------------------------- */
.phone-frame{
  width: 100%;
  max-width: 300px;
  background: var(--ink);
  border-radius: 38px;
  padding: 10px;
  box-shadow: var(--shadow-card);
}
.phone-screen{
  background: var(--cloud);
  border-radius: 29px;
  padding: 0 14px 16px;
  position: relative;
  overflow: hidden;
}
.phone-statusbar{
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 4px 10px;
  font-size: .625rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.phone-statusbar .sb-right{ display: flex; align-items: center; gap: 5px; }
.sb-bars{ display: flex; align-items: flex-end; gap: 1.5px; height: 8px; }
.sb-bars i{ display: block; width: 2px; background: rgba(14,31,51,.55); border-radius: 1px; }
.sb-bars i:nth-child(1){ height: 3px; }
.sb-bars i:nth-child(2){ height: 5px; }
.sb-bars i:nth-child(3){ height: 6.5px; }
.sb-bars i:nth-child(4){ height: 8px; }
.sb-batt{
  position: relative;
  width: 17px; height: 9px; border-radius: 2.5px;
  box-shadow: inset 0 0 0 1px rgba(14,31,51,.35);
}
.sb-batt::before{
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; right: 5px;
  background: rgba(14,31,51,.55); border-radius: 1px;
}
.sb-batt::after{
  content: ""; position: absolute; right: -3px; top: 3px;
  width: 2px; height: 3px; border-radius: 0 1px 1px 0;
  background: rgba(14,31,51,.3);
}

.phone-appbar{
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 4px 4px 12px;
}
.phone-appbar > span:first-child{
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: -0.02em;
}
.phone-appbar-date{
  font-size: .625rem; font-weight: 700; color: var(--slate);
  font-variant-numeric: tabular-nums;
}

/* lanyard slot echoes the mark's cut-out */
.lanyard-slot{
  width: 46px; height: 7px;
  background: var(--ink);
  border-radius: var(--r-pill);
  margin: 2px auto 12px;
  opacity: .12;
}

.pass-card{
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: 0 1px 2px rgba(14,31,51,.05), 0 10px 24px -12px rgba(14,31,51,.16);
  position: relative;
}
.pass-card::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--mist); pointer-events: none;
}
.pass-top{ display: flex; align-items: center; gap: 10px; padding-bottom: 12px; }
.pass-avatar{
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: .8125rem;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.pass-id{ min-width: 0; }
.pass-name{
  font-family: var(--font-display); font-weight: 700; font-size: .9375rem;
  letter-spacing: -0.015em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pass-role{
  font-size: .6875rem; color: var(--slate); margin-top: 2px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pass-rows{ display: flex; flex-direction: column; }
.pass-row{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--cloud);
  padding: 9px 0;
  font-size: .6875rem;
  line-height: 1.3;
}
.pass-row > span{ color: var(--slate); font-weight: 600; flex-shrink: 0; }
.pass-row > strong{
  font-family: var(--font-body); font-weight: 700; color: var(--ink);
  font-size: .75rem; text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pass-row .pill{ font-size: .625rem; padding: 4px 8px; }
.pass-row .status-swap{ flex-shrink: 0; }

.qr-wrap{
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--cloud);
  padding-top: 12px;
}
.qr-block{
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 1.5px;
  width: 68px; height: 68px;
  padding: 6px;
  flex-shrink: 0;
  background: var(--white);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--mist);
}
.qr-block span{ background: var(--ink); border-radius: 1px; }
.qr-block span.off{ background: transparent; }
.qr-copy{ min-width: 0; }
.qr-copy .qr-label{
  font-size: .5625rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 3px;
}
.qr-copy p{ font-size: .6875rem; color: var(--ink); font-weight: 600; line-height: 1.35; }

.pass-action{
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 12px;
  background: var(--ink); color: var(--white);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-family: var(--font-display); font-weight: 600; font-size: .8125rem;
  letter-spacing: -0.01em;
}
.pass-action svg{ stroke: var(--signal); flex-shrink: 0; }
.phone-screen .pass-action-note{
  font-size: .625rem; color: var(--slate); text-align: center;
  margin-top: 7px; font-variant-numeric: tabular-nums;
}

.tick-path{ stroke-dasharray: 24; stroke-dashoffset: 24; }
.js-anim [data-motion-run] .tick-path{ transition: stroke-dashoffset 420ms var(--ease-out) 120ms; }
.js-anim [data-motion-run].tick-run .tick-path{ stroke-dashoffset: 0; }
html:not(.js-anim) .tick-path,
.no-motion .tick-path{ stroke-dashoffset: 0; }

.status-swap{ position: relative; display: inline-block; }
.status-swap .pill{ transition: opacity 200ms var(--ease-ui); white-space: nowrap; }
.js-anim [data-motion-run] .status-checking{ opacity: 1; position: static; }
.js-anim [data-motion-run] .status-verified{ opacity: 0; position: absolute; inset: 0; }
.js-anim [data-motion-run].tick-run .status-checking{ opacity: 0; position: absolute; inset: 0; }
.js-anim [data-motion-run].tick-run .status-verified{ opacity: 1; position: static; }
html:not(.js-anim) .status-checking, .no-motion .status-checking{ display: none; }
html:not(.js-anim) .status-verified, .no-motion .status-verified{ opacity: 1; position: static; display: inline-flex; }

.phone-next{
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: var(--r-md);
  background: rgba(14,31,51,.05);
}
.phone-next-label{
  font-size: .5625rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 3px;
}
.phone-next p{
  font-size: .6875rem; color: var(--ink); font-weight: 600; line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

/* -- desktop window frame (live ops board) ------------------------------- */
.win-frame{
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  position: relative;
}
.win-frame::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--mist); pointer-events: none; z-index: 2;
}
.win-titlebar{
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 16px var(--sp-5);
  border-bottom: 1px solid var(--mist);
}
.win-breadcrumb{
  font-size: .8125rem; color: var(--slate); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-breadcrumb strong{ color: var(--ink); font-weight: 700; }
.win-right{ display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.win-meta{
  /* slate, not steel: steel on white is 2.98:1 and would fail AA */
  font-size: .6875rem; color: var(--slate); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.win-body{ padding: var(--sp-5); }
@media (max-width: 560px){ .win-meta{ display: none; } }

.stat-row{ display: flex; gap: var(--sp-6); margin-bottom: var(--sp-4); }
.stat{ display: flex; flex-direction: column; gap: 1px; }
.stat-value{
  font-family: var(--font-display); font-weight: 700; font-size: 1.375rem;
  letter-spacing: -0.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-label{
  font-size: .625rem; color: var(--slate); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
}
@media (max-width: 620px){
  .stat-row{ gap: var(--sp-4); }
  .stat-value{ font-size: 1.25rem; }
  .stat-label{ font-size: .5625rem; letter-spacing: .05em; }
}

.ops-table{
  display: flex; flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--mist);
}
.ops-row{
  display: grid;
  grid-template-columns: minmax(0, .74fr) minmax(0, 1.2fr) minmax(0, .92fr) minmax(0, .96fr);
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  background: var(--white);
}
.ops-row + .ops-row{ border-top: 1px solid var(--cloud); }
.ops-row > span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-name{ font-weight: 700; font-size: .8125rem; }
.ops-site{ font-size: .75rem; color: var(--slate); }
.ops-time{ font-size: .75rem; color: var(--slate); font-variant-numeric: tabular-nums; }
.ops-row .pill, .ops-row .pill-flip{ justify-self: end; }
.ops-row .pill{ font-size: .6875rem; padding: 4px 9px; }
.win-body .minimap{ margin-top: var(--sp-4); }

/* the time column is the first thing a real board drops when it narrows */
@media (max-width: 900px){
  .ops-row{ grid-template-columns: minmax(0, .82fr) minmax(0, 1.2fr) minmax(0, .96fr); }
  .ops-time{ display: none; }
}

/* -- licence register check panel --------------------------------------- */
.licence-panel{
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: var(--sp-6);
  position: relative;
}
.licence-panel::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--mist); pointer-events: none;
}
.licence-head{
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  margin-bottom: var(--sp-5); padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--mist);
}
.licence-holder{ font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.015em; line-height: 1.2; }
.licence-number{ font-size: .8125rem; color: var(--slate); margin-top: 3px; font-variant-numeric: tabular-nums; }
.licence-grid{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.licence-field{ display: flex; flex-direction: column; }
.licence-field-label{
  font-size: .625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--slate);
  line-height: 1.2; margin-bottom: 5px;
}
.licence-field-value{
  font-size: .875rem; font-weight: 700; line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.licence-check-line{
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .8125rem; color: var(--slate);
  font-variant-numeric: tabular-nums;
  padding-top: var(--sp-4); border-top: 1px solid var(--mist);
}
.licence-check-line .timeline-dot{ width: 6px; height: 6px; margin-top: 7px; }
.licence-timeline{ display: flex; flex-direction: column; gap: 9px; margin-top: var(--sp-4); }
.timeline-item{
  display: flex; align-items: center; gap: 10px;
  font-size: .8125rem; color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.timeline-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex-shrink: 0; }
.timeline-dot.muted{ background: var(--mist); }

/* -- roster week grid ---------------------------------------------------- */
.roster{
  display: grid;
  grid-template-columns: 92px repeat(7, minmax(66px, 1fr));
  gap: 4px;
  min-width: 586px;
  font-variant-numeric: tabular-nums;
}
.roster-head{
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding-bottom: 6px;
  font-size: .5625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--slate); line-height: 1.2;
}
.roster-head b{ font-family: var(--font-display); font-size: .6875rem; color: var(--ink); letter-spacing: -0.01em; }
.roster-row-label{
  display: flex; align-items: center;
  font-size: .6875rem; font-weight: 700; line-height: 1.25;
  padding-right: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.roster-cell{
  min-height: 46px;
  background: var(--cloud);
  border-radius: var(--r-sm);
  padding: 4px;
  display: flex; flex-direction: column; gap: 4px;
}
.shift-chip{
  display: block;
  background: var(--white);
  border-radius: 6px;
  padding: 6px;
  font-size: .625rem; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 0 0 0 1px var(--mist);
}
.shift-chip b{ font-weight: 700; }
.shift-chip i{ font-style: normal; font-weight: 600; color: var(--slate); }
.shift-chip.unfilled{ background: var(--amber-tint); color: var(--amber-text); box-shadow: inset 0 0 0 1px rgba(138,90,0,.2); }
.shift-chip.unfilled i{ color: var(--amber-text); }
/* the tray sits outside the scrolling grid so it is always fully readable,
   even when the week itself is cropped on a phone */
.roster-tray{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 12px;
  border-top: 1px solid var(--mist);
}
@media (max-width: 620px){
  .roster{ grid-template-columns: 84px repeat(7, 68px); min-width: 0; }
  .roster-scroll{
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
  }
}
.roster-tray-label{
  font-size: .5625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--slate);
}
.tray-chip{
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  font-size: .625rem; font-weight: 700; line-height: 1;
  padding: 6px 9px; border-radius: var(--r-sm);
}
.tray-chip.blocked{ background: var(--error-tint); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(225,75,75,.22); }
.tray-chip.blocked .tray-dot{ background: var(--error); }
.tray-chip.unfilled{ background: var(--amber-tint); color: var(--amber-text); box-shadow: inset 0 0 0 1px rgba(138,90,0,.2); }
.tray-chip.unfilled .tray-dot{ background: var(--amber); }
.tray-dot{ width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* -- induction slide (phone width) ---------------------------------------
   The slide sits on a Cloud inset panel, never as a white card on a white
   bento cell. */
.induction-stage{ display: flex; align-items: center; justify-content: center; padding: var(--sp-5) var(--sp-4); }
/* wide stages get the course outline beside the slide, so the panel is never
   a small card floating in empty space */
.induction-split{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: var(--sp-5); align-items: center; padding: var(--sp-5); }
.induction-split .induction-card{ margin-inline: 0; }
.course-steps-head{ margin-bottom: var(--sp-4); }
.course-steps-head strong{ display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; margin-top: 4px; }
.course-list{ display: flex; flex-direction: column; gap: 2px; }
.course-list li{
  display: flex; align-items: center; gap: 10px;
  font-size: .8125rem; font-weight: 600; color: var(--slate);
  padding: 8px 10px; border-radius: var(--r-sm);
}
.course-mark{
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .625rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--mist);
  color: var(--slate);
}
.course-list .is-done{ color: var(--ink); }
.course-list .is-done .course-mark{ background: var(--signal-tint); color: var(--ink); box-shadow: none; }
.course-list .is-now{ background: var(--white); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1px var(--mist); }
.course-list .is-now .course-mark{ background: var(--ink); color: var(--white); box-shadow: none; }
.course-steps .course-note{ font-size: .75rem; color: var(--slate); margin-top: var(--sp-4); }
@media (max-width: 860px){
  .induction-split{ grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .induction-split .induction-card{ margin-inline: auto; }
}
.induction-card{
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 16px;
  position: relative;
  box-shadow: 0 1px 2px rgba(14,31,51,.05), 0 10px 24px -12px rgba(14,31,51,.16);
}
.induction-card::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--mist); pointer-events: none;
}
.induction-head{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.induction-step{
  font-size: .5625rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.induction-site{
  font-size: .5625rem; font-weight: 700; letter-spacing: .02em;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.progress-track{ height: 4px; border-radius: var(--r-pill); background: var(--cloud); overflow: hidden; margin-bottom: 14px; }
.progress-fill{ height: 100%; background: var(--signal); border-radius: inherit; }
.induction-card .induction-q{
  font-family: var(--font-display); font-weight: 700; font-size: .875rem;
  letter-spacing: -0.015em; line-height: 1.3; margin-bottom: 10px;
}
.induction-opt{
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--mist);
  font-size: .75rem; font-weight: 600; line-height: 1.25;
}
.induction-opt + .induction-opt{ margin-top: 6px; }
.induction-opt .opt-dot{
  width: 14px; height: 14px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--mist); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.induction-opt.correct{ background: var(--signal-tint); box-shadow: inset 0 0 0 1px rgba(15,154,136,.26); }
.induction-opt.correct .opt-dot{ background: var(--signal); box-shadow: none; }
.induction-opt.correct .opt-dot svg{ stroke: var(--ink); }

.cert-chip{
  display: flex; align-items: center; gap: 9px;
  margin-top: 12px;
  background: linear-gradient(135deg, var(--ink), var(--ink-2));
  border-radius: var(--r-md);
  padding: 10px 12px;
  color: var(--white);
}
.cert-chip-mark{
  width: 26px; height: 26px; border-radius: var(--r-sm); flex-shrink: 0;
  background: rgba(18,181,160,.22);
  display: flex; align-items: center; justify-content: center;
}
.cert-chip-mark svg{ stroke: var(--signal); }
.cert-chip-label{
  font-size: .5rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--signal);
  line-height: 1.2;
}
.cert-chip-title{
  font-family: var(--font-display); font-weight: 600; font-size: .75rem;
  line-height: 1.25; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cert-chip-body{ min-width: 0; }

/* -- timesheet ----------------------------------------------------------- */
.timesheet{
  display: flex; flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--mist);
  background: var(--white);
  font-variant-numeric: tabular-nums;
}
.ts-row{
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr) minmax(0, .42fr) minmax(0, .6fr);
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  font-size: .75rem;
}
.ts-row > span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-row + .ts-row{ border-top: 1px solid var(--cloud); }
.ts-row.head{
  background: var(--cloud);
  font-size: .5625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--slate);
}
.ts-row .ts-name{ font-weight: 700; }
.ts-row .ts-site{ color: var(--slate); }
.ts-row .ts-hours{ font-weight: 700; text-align: right; }
.ts-row.head .ts-status{ text-align: right; }
.ts-row .pill, .ts-row .pill-flip{ justify-self: end; }
.ts-row .pill{ font-size: .625rem; padding: 4px 8px; }
.ts-row.total{
  background: var(--cloud);
  border-top: 1px solid var(--mist);
  font-weight: 700;
}
.ts-row.total .ts-hours{ font-family: var(--font-display); font-size: .8125rem; }
.ts-row.total .ts-name{ font-size: .6875rem; text-transform: uppercase; letter-spacing: .07em; color: var(--slate); }

.ts-exports{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ts-export{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--mist);
  padding: 9px 12px;
  min-width: 0;
}
.ts-export > span:first-child{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts-export-name{ display: block; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.ts-export-meta{
  display: block;
  font-size: .625rem; color: var(--slate); font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ts-export .pill{ font-size: .625rem; padding: 4px 8px; flex-shrink: 0; }
.ts-export .pill-flip{ flex-shrink: 0; }
/* the site column is the first thing this table drops when it narrows,
   rather than being sliced or ellipsised into nonsense */
@media (max-width: 520px){
  .ts-row{ grid-template-columns: minmax(0, 1fr) minmax(0, .4fr) minmax(0, .7fr); }
  .ts-site{ display: none; }
  .ts-row{ padding-inline: 12px; gap: 10px; }
}
@media (max-width: 560px){
  .ts-exports{ grid-template-columns: 1fr; }
}

/* -- report verification footer (security) ------------------------------- */
.verify-grid{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
}
.verify-label{
  font-size: .625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--slate); margin-bottom: 5px; line-height: 1.2;
}
.verify-value{
  font-size: .875rem; font-weight: 700; line-height: 1.25;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-body .verify-note{
  font-size: .75rem; color: var(--slate); line-height: 1.5;
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--mist);
}

/* -- access table (security) --------------------------------------------- */
.access-table{
  display: flex; flex-direction: column;
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
}
.access-table::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--mist); pointer-events: none;
}
.acc-row{
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 12px; align-items: center;
  padding: 14px var(--sp-5);
  font-size: .8125rem; color: var(--slate);
}
.acc-row + .acc-row{ border-top: 1px solid var(--cloud); }
.acc-row > span{ min-width: 0; }
.acc-row.head{
  background: var(--cloud); color: var(--slate);
  font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding-block: 10px;
}
.acc-role{ font-weight: 700; color: var(--ink); font-size: .875rem; }
.acc-foot{
  display: flex; align-items: center; gap: 8px;
  padding: 12px var(--sp-5);
  background: var(--cloud);
  border-top: 1px solid var(--mist);
  font-size: .75rem; color: var(--slate); font-weight: 600;
}
@media (max-width: 560px){
  .acc-row{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .acc-row > span:last-child{ grid-column: 1 / -1; color: var(--ink); font-weight: 600; }
  .acc-row.head > span:last-child{ display: none; }
}

/* -- record list (security) ---------------------------------------------- */
.record-list{
  display: flex; flex-direction: column;
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
}
.record-list::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--mist); pointer-events: none;
}
.record-row{
  display: grid; grid-template-columns: 9px minmax(0, 1fr) max-content;
  gap: 12px; align-items: center;
  padding: 14px var(--sp-5);
}
.record-row + .record-row{ border-top: 1px solid var(--cloud); }
.record-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal); margin-left: 1px;
  box-shadow: 0 0 0 3px rgba(18,181,160,.16);
}
.record-dot.amber{ background: var(--amber); box-shadow: 0 0 0 3px rgba(255,181,71,.2); }
.record-main{
  font-size: .8125rem; color: var(--slate); line-height: 1.35;
  min-width: 0;
}
.record-main strong{ color: var(--ink); font-weight: 700; display: block; }
.record-time{
  font-size: .75rem; color: var(--slate); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* -- numbered steps (contact) -------------------------------------------- */
.steps{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.step{ display: flex; flex-direction: column; gap: 8px; padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.14); }
.step-num{ font-family: var(--font-display); font-weight: 700; font-size: .8125rem; color: var(--signal); }
.step h3{ font-size: 1.0625rem; }
.step p{ font-size: .9375rem; line-height: 1.55; max-width: 34ch; }
@media (max-width: 860px){
  .steps{ grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* ==========================================================================
   Homepage-specific sections
   ========================================================================== */

/* hero -------------------------------------------------------------------
   Composition: one object made of two parts. The board is the large piece,
   right-aligned and allowed to bleed past the container towards the viewport
   edge so its rows always have room to be complete. The phone sits to its
   left and overlaps ONLY the board's outer frame gutter (26px), never a
   column of content.
   ------------------------------------------------------------------------- */
.hero{ position: relative; z-index: 5; padding-top: clamp(5.5rem, 4vw, 7rem); padding-bottom: var(--sp-5); }
.hero-grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); align-items: center; }
.hero-copy{ max-width: 660px; }
.hero-copy h1{ margin-bottom: var(--sp-5); max-width: 15ch; font-size: clamp(2.5rem, 1.7rem + 2.9vw, 3.375rem); }
.hero-copy .text-lead{ color: rgba(255,255,255,.76); margin-bottom: var(--sp-6); max-width: 44ch; }
.hero-ctas{ display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.hero-fine{ font-size: .8125rem; color: rgba(255,255,255,.5); }

/* the visual box is a touch shorter than the phone so the phone bleeds over
   the Ink/Cloud edge, as the brief asks, without reaching the fact strip */
.hero-visual{ position: relative; z-index: 1; height: 612px; }
.hero-board{ position: absolute; top: 0; right: 0; width: calc(100% - 250px); z-index: 1; }
/* the board carries a slightly deeper left inset so the phone can overlap its
   frame edge without ever touching a column of content */
@media (min-width: 700px){
  .hero-board .win-titlebar, .hero-board .win-body{ padding-left: 34px; }
}
.hero-phone{ position: absolute; top: 62px; left: 0; width: 270px; z-index: 2; }
/* on Ink the shadow reads as depth, not as a grey halo */
.hero-visual .phone-frame{ box-shadow: 0 28px 56px -20px rgba(0,0,0,.55), 0 10px 24px -10px rgba(0,0,0,.35); }
.hero-visual .win-frame{ box-shadow: 0 36px 72px -28px rgba(0,0,0,.5), 0 14px 32px -14px rgba(0,0,0,.32); }
.hero-visual .win-frame::before{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 0 1px var(--mist); }

@media (min-width: 1280px){
  .hero-grid{
    grid-template-columns: minmax(0, .64fr) minmax(0, 1fr);
    gap: var(--sp-7);
  }
  /* pull the visual towards the viewport edge (capped) so the board can be
     wide enough to show whole rows at 1280, 1440 and 1920 alike */
  .hero-visual{ margin-right: calc(-1 * clamp(0px, (100vw - var(--container-w)) / 2 + 24px, 112px)); }
}

/* tablet / small laptop: the visual takes the full container under the copy.
   Same object, same rules, more room than a squeezed two-column grid. */
@media (max-width: 1279px){
  .hero-copy{ max-width: 100%; }
  .hero-copy h1{ max-width: 17ch; }
  .hero-visual{ height: 620px; }
  .hero-board{ width: calc(100% - 232px); }
  .hero-phone{ width: 252px; top: 54px; }
}

/* phone: the pass card is the hero object. The board stays behind it but
   shows only complete elements (title bar + stat row); its table and map are
   dropped rather than sliced, and the frame fades out at the bottom. */
@media (max-width: 699px){
  .hero-visual{ height: 690px; margin-inline: 0; }
  .hero-board{
    width: 100%; right: 0; top: 0;
    opacity: .55;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }
  .hero-board .win-body{ padding-bottom: var(--sp-6); }
  .hero-board .ops-table, .hero-board .minimap{ display: none; }
  .hero-phone{ top: 128px; left: 50%; transform: translateX(-50%); width: 258px; }
}
@media (max-width: 380px){
  .hero-visual{ height: 672px; }
  .hero-phone{ width: 240px; }
}

/* fact strip: four facts, hairline dividers, a supporting line under each */
.fact-strip{ padding-block: var(--sp-7); }
.fact-list{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact-item{
  padding: 0 var(--sp-5);
  border-left: 1px solid var(--mist);
}
.fact-item:first-child{ border-left: 0; padding-left: 0; }
.fact-item b{
  display: block;
  font-family: var(--font-display); font-weight: 700; font-size: .9375rem;
  letter-spacing: -0.015em; line-height: 1.3;
  margin-bottom: 5px;
}
.fact-item span{
  display: block;
  font-size: .8125rem; line-height: 1.45; color: var(--slate);
}
@media (max-width: 860px){
  .fact-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5) 0;
  }
  .fact-item{ padding: 0 var(--sp-4); }
  .fact-item:nth-child(odd){ border-left: 0; padding-left: 0; }
  /* hairline between the two rows, matched to the vertical dividers */
  .fact-item:nth-child(n+3){ padding-top: var(--sp-5); border-top: 1px solid var(--mist); }
  .fact-item:nth-child(3){ margin-right: -1px; }
}

/* problem statement */
.problem{ }
.problem-statement{ font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.03em; max-width: 16ch; margin-bottom: var(--sp-7); }
.problem-statement strong{ color: var(--slate); font-weight: 700; }
.problem-lines{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); border-top: 1px solid var(--mist); padding-top: var(--sp-6); }
.problem-line-num{ font-family: var(--font-display); font-weight: 700; color: var(--slate); font-size: .8125rem; margin-bottom: var(--sp-2); }
.problem-line p{ font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.45; max-width: 30ch; }
@media (max-width: 860px){
  .problem-lines{ grid-template-columns: 1fr; }
}

/* bento */
.bento{ display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-5); }
.bento-cell{
  background: var(--white); border-radius: var(--r-xl); box-shadow: var(--shadow-card);
  padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5);
  position: relative; min-width: 0;
}
.bento-cell::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--mist); pointer-events: none; transition: box-shadow var(--dur-ui) var(--ease-ui); }
.bento-cell:hover::before{ box-shadow: inset 0 0 0 1px var(--steel); }
.bento-a{ grid-column: span 5; }
.bento-b{ grid-column: span 7; }
.bento-c{ grid-column: span 7; }
.bento-d{ grid-column: span 5; }
.bento-e{ grid-column: span 12; }
.bento-text{ display: flex; flex-direction: column; gap: 6px; }
.bento-text h3{ font-size: 1.0625rem; }
.bento-text p{ font-size: .875rem; color: var(--slate); line-height: 1.5; max-width: 46ch; }
.bento-visual{ flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; min-width: 0; max-width: 100%; }
.bento-visual > *{ width: 100%; }
/* the map is the cell's own content, so it fills the cell rather than
   floating in a band of empty white */
.bento-d .bento-visual{ align-items: stretch; }
.bento-d .minimap{ flex: 1; min-height: 190px; }
/* the full-width cell reads as copy beside the visual, not stacked */
.bento-wide{ flex-direction: row; align-items: stretch; gap: var(--sp-7); }
.bento-wide .bento-text{ width: 268px; flex-shrink: 0; justify-content: center; }
.bento-wide .bento-visual{ justify-content: center; }

@media (max-width: 1099px){
  .bento{ grid-template-columns: 1fr; }
  .bento-a, .bento-b, .bento-c, .bento-d, .bento-e{ grid-column: span 1; }
  .bento-wide{ flex-direction: column; gap: var(--sp-5); }
  .bento-wide .bento-text{ width: auto; }
}

/* licence spotlight wedge */
.wedge-grid{ display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--sp-8); align-items: center; }
.wedge-copy h2{ max-width: 14ch; margin-bottom: var(--sp-4); }
.wedge-list{ display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-6); }
.wedge-list li{ display: flex; gap: 12px; font-size: .9375rem; color: rgba(255,255,255,.76); line-height: 1.5; }
.wedge-list svg{ flex-shrink: 0; margin-top: 3px; stroke: var(--signal); }
@media (max-width: 900px){
  .wedge-grid{ grid-template-columns: 1fr; }
}

/* feature switcher */
.switcher{ display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--sp-7); align-items: start; }
.switcher-tabs{ display: flex; flex-direction: column; }
.switcher-tab{
  display: flex; flex-direction: column; gap: 6px; text-align: left; padding: var(--sp-4) 0;
  border-top: 1px solid var(--mist); position: relative;
}
.switcher-tab:last-child{ border-bottom: 1px solid var(--mist); }
.switcher-tab-title{ font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.015em; color: var(--slate); transition: color var(--dur-ui) var(--ease-ui); }
.switcher-tab[aria-selected="true"] .switcher-tab-title{ color: var(--ink); }
.switcher-tab-desc{ font-size: .8125rem; color: var(--slate); max-width: 40ch; display: none; }
.switcher-tab[aria-selected="true"] .switcher-tab-desc{ display: block; }
.switcher-progress{ position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--signal); }
.js-anim .switcher-tab[aria-selected="true"].is-animating .switcher-progress{ animation: switcher-progress 6s linear forwards; }
.switcher.is-paused .switcher-tab[aria-selected="true"] .switcher-progress{ animation-play-state: paused; }
@keyframes switcher-progress{ from{ width: 0; } to{ width: 100%; } }

.switcher-stage{ position: relative; min-height: 380px; min-width: 0; }
.switcher-panel{ display: none; min-width: 0; max-width: 100%; overflow-x: auto; }
.switcher-panel[data-active="true"]{ display: block; animation: none; }
.js-anim .switcher-panel[data-active="true"]{ animation: switcher-fade 240ms var(--ease-ui); }

@media (max-width: 860px){
  .switcher{ grid-template-columns: 1fr; }
  .switcher-tabs{ display: none; }
  .switcher-stack{ display: flex; flex-direction: column; gap: var(--sp-6); }
  .switcher-stack .switcher-panel{ display: block; }
  .switcher-stack-head{ margin-bottom: var(--sp-4); }
  .switcher-stack-head h3{ font-size: 1.0625rem; margin-bottom: 4px; }
  .switcher-stack-head p{ font-size: .8125rem; color: var(--slate); }
}
@media (min-width: 861px){
  .js-anim .switcher-stack-head{ display: none; }
}
/* without JS the tabs cannot switch anything, so the switcher falls back to
   the same stacked list it uses on a phone: every panel readable, no dead
   controls */
html:not(.js-anim) .switcher{ grid-template-columns: minmax(0, 1fr); }
html:not(.js-anim) .switcher-tabs{ display: none; }
html:not(.js-anim) .switcher-stack{ display: flex; flex-direction: column; gap: var(--sp-7); }
html:not(.js-anim) .switcher-panel{ display: block; }
html:not(.js-anim) .switcher-stack-head{ display: block; margin-bottom: var(--sp-4); }
html:not(.js-anim) .switcher-stack-head h3{ font-size: 1.0625rem; margin-bottom: 4px; }
html:not(.js-anim) .switcher-stack-head p{ font-size: .8125rem; color: var(--slate); }

/* two audiences */
.audience-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.audience-item{ display: flex; flex-direction: column; gap: var(--sp-4); }
.audience-icon{ width: 44px; height: 44px; border-radius: var(--r-md); background: var(--signal-tint); display: flex; align-items: center; justify-content: center; }
.audience-icon svg{ width: 22px; height: 22px; stroke: var(--signal-dark); }
.audience-item h3{ font-size: 1.0625rem; }
.audience-item p{ font-size: .9375rem; color: var(--slate); line-height: 1.55; max-width: 32ch; }
@media (max-width: 860px){
  .audience-grid{ grid-template-columns: 1fr; gap: var(--sp-7); }
}

/* pricing teaser */
.pricing-teaser{ display: grid; grid-template-columns: 1fr auto; gap: var(--sp-7); align-items: center; background: var(--white); border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: var(--sp-7); }
.pricing-teaser-amount{ font-family: var(--font-display); font-weight: 700; font-size: 3rem; letter-spacing: -0.03em; }
.pricing-teaser-amount span{ font-size: 1rem; font-weight: 600; color: var(--slate); letter-spacing: 0; margin-left: 6px; }
.pricing-teaser-note{ font-size: .875rem; color: var(--slate); margin-top: 6px; }
@media (max-width: 700px){
  .pricing-teaser{ grid-template-columns: 1fr; text-align: left; }
}

/* FAQ */
.faq-list{ display: flex; flex-direction: column; }
.faq-item{ border-top: 1px solid var(--mist); padding-block: var(--sp-4); }
.faq-list .faq-item:last-child{ border-bottom: 1px solid var(--mist); }
.faq-item summary{
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; padding-block: 4px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary .plus{ position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq-item summary .plus::before, .faq-item summary .plus::after{ content: ""; position: absolute; background: var(--ink); border-radius: 1px; }
.faq-item summary .plus::before{ left: 0; top: 8px; width: 18px; height: 1.5px; }
.faq-item summary .plus::after{ left: 8px; top: 0; width: 1.5px; height: 18px; transition: transform var(--dur-ui) var(--ease-ui); }
.faq-item[open] summary .plus::after{ transform: rotate(90deg); }
.faq-item p{ font-size: .9375rem; color: var(--slate); line-height: 1.6; margin-top: var(--sp-3); max-width: 62ch; }

/* CTA band */
.cta-band{ text-align: center; position: relative; }
.cta-band h2{ max-width: 18ch; margin-inline: auto; margin-bottom: var(--sp-4); }
.cta-band p{ color: rgba(255,255,255,.72); margin-bottom: var(--sp-6); }
.cta-band .hero-ctas{ justify-content: center; margin-bottom: 0; }
/* variant for a CTA band sitting on a light (Cloud) section rather than Ink */
.cta-band-light p{ color: var(--slate); }

/* mobile sticky CTA */
.sticky-cta{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 12px var(--container-pad) max(12px, env(safe-area-inset-bottom));
  background: rgba(243,246,249,.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--mist);
  transform: translateY(110%);
  transition: transform 280ms var(--ease-out);
}
.sticky-cta[data-visible="true"]{ transform: translateY(0); }
.sticky-cta .btn{ width: 100%; }
@media (min-width: 861px){ .sticky-cta{ display: none; } }

/* ==========================================================================
   Other pages
   ========================================================================== */

/* generic page hero (features/pricing/security/contact) */
.page-hero{ padding-bottom: var(--sp-8); }
.page-hero .measure{ }
.page-hero h1{ margin-bottom: var(--sp-4); max-width: 18ch; }
.page-hero .text-lead{ max-width: 50ch; }

/* features page */
.subnav{ position: sticky; top: 68px; z-index: 40; background: rgba(243,246,249,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--mist); }
.subnav-list{ display: flex; gap: var(--sp-6); overflow-x: auto; padding-block: 14px; scrollbar-width: none; }
.subnav-list::-webkit-scrollbar{ display: none; }
.subnav-list a{ font-size: .8125rem; font-weight: 700; color: var(--slate); white-space: nowrap; }
.subnav-list a:hover, .subnav-list a.is-active{ color: var(--ink); }

.feature-block{ scroll-margin-top: 128px; }
.feature-block-grid{ display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--sp-8); align-items: center; }
.feature-block-grid > *{ min-width: 0; }
.feature-block:nth-child(even) .feature-block-grid{ direction: rtl; }
.feature-block:nth-child(even) .feature-block-grid > *{ direction: ltr; }
.feature-block-copy .eyebrow{ margin-bottom: var(--sp-3); }
.feature-block-copy h2{ margin-bottom: var(--sp-4); max-width: 16ch; }
.feature-block-copy ul{ display: flex; flex-direction: column; gap: 10px; margin-top: var(--sp-5); }
.feature-block-copy ul li{ display: flex; gap: 10px; font-size: .9375rem; line-height: 1.5; }
.feature-block-copy ul svg{ flex-shrink: 0; margin-top: 3px; stroke: var(--signal-dark); }
.section-dark .feature-block-copy ul svg{ stroke: var(--signal); }
/* explicit sides, for pages where the section order does not line up with
   the nth-child alternation */
.feature-block.fb-copy-left .feature-block-grid{ direction: ltr; }
.feature-block.fb-copy-right .feature-block-grid{ direction: rtl; }
.feature-block.fb-copy-right .feature-block-grid > *{ direction: ltr; }
@media (max-width: 900px){
  .feature-block-grid{ grid-template-columns: 1fr !important; direction: ltr !important; }
}

.feature-index{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 860px){ .feature-index{ grid-template-columns: 1fr; } }

/* pricing page */
.price-card{ max-width: 460px; margin-inline: auto; background: var(--white); border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: var(--sp-7); }
.price-amount-row{ display: flex; align-items: baseline; gap: 8px; margin-block: var(--sp-4) var(--sp-2); }
.price-amount{ font-family: var(--font-display); font-weight: 700; font-size: 3.25rem; letter-spacing: -0.03em; }
.price-period{ color: var(--slate); font-weight: 600; font-size: .9375rem; }
.price-included{ color: var(--slate); font-size: .9375rem; margin-bottom: var(--sp-5); }
.price-list{ display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--mist); }
.price-list li{ display: flex; gap: 10px; font-size: .875rem; line-height: 1.5; }
.price-list svg{ flex-shrink: 0; margin-top: 2px; stroke: var(--signal-dark); }
.price-note{ font-size: .75rem; color: var(--slate); text-align: center; margin-top: var(--sp-4); }

.overage-example{ background: var(--cloud); border-radius: var(--r-lg); padding: var(--sp-6); }
.overage-row{ display: flex; align-items: center; justify-content: space-between; padding-block: 10px; font-size: .9375rem; }
.overage-row + .overage-row{ border-top: 1px solid var(--mist); }
.overage-row.total{ font-weight: 700; font-family: var(--font-display); font-size: 1.0625rem; padding-top: var(--sp-4); margin-top: 4px; border-top: 1px solid var(--ink); }
.overage-row span:first-child{ color: var(--slate); }

.included-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-6); }
.included-grid li{ display: flex; gap: 10px; font-size: .9375rem; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--mist); }
.included-grid svg{ flex-shrink: 0; margin-top: 3px; stroke: var(--signal-dark); }
@media (max-width: 700px){ .included-grid{ grid-template-columns: 1fr; } }

/* security page */
.security-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
@media (max-width: 600px){ .security-grid{ grid-template-columns: 1fr; } }
.security-icon{ width: 36px; height: 36px; margin-bottom: var(--sp-4); color: var(--signal-dark); }
.security-icon svg{ stroke: var(--signal-dark); }

.honesty-panel{ max-width: 720px; }
.honesty-panel p{ font-size: 1.0625rem; line-height: 1.65; }

/* contact page */
.contact-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
@media (max-width: 700px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-card a{ color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mist); }
.contact-card p + p{ margin-top: var(--sp-3); }
.contact-checklist{ margin-top: var(--sp-4); display: flex; flex-direction: column; gap: 8px; }
.contact-checklist li{ font-size: .8125rem; color: var(--slate); display: flex; gap: 8px; }
.contact-checklist svg{ flex-shrink: 0; margin-top: 2px; stroke: var(--steel); }

/* error pages */
.error-stage{ min-height: 82vh; display: flex; align-items: center; padding-top: clamp(5.5rem, 4vw, 7rem); padding-bottom: var(--sp-8); }
.error-inner{ max-width: 460px; margin-inline: auto; text-align: center; }
.error-mark{ width: 64px; height: 64px; margin: 0 auto var(--sp-6); }
.error-code{ font-family: var(--font-body); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8125rem; color: var(--signal); margin-bottom: var(--sp-4); }
.error-inner h1{ margin-bottom: var(--sp-4); }
.error-inner p{ margin-bottom: var(--sp-7); }
.error-pass{ margin: 0 auto var(--sp-7); max-width: 280px; }
.error-inner .hero-ctas{ justify-content: center; }

/* ==========================================================================
   utilities
   ========================================================================== */
/* static width utilities for decorative progress/QR fills (no inline style) */
.w-60{ width: 60%; }

.mt-0{ margin-top: 0 !important; }
.mb-0{ margin-bottom: 0 !important; }
.mt-3{ margin-top: 12px; }
.mt-4{ margin-top: 16px; }
.mx-auto{ margin-inline: auto; }
.center{ text-align: center; }
.hide-mobile{ }
.hide-desktop{ display: none; }
@media (max-width: 860px){
  .hide-mobile{ display: none !important; }
  .hide-desktop{ display: block; }
}

/* ==========================================================================
   motion / reveal
   ========================================================================== */
.js-anim [data-reveal]{ opacity: 0; transform: translateY(16px); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); }
.js-anim [data-reveal].is-visible{ opacity: 1; transform: translateY(0); }
.js-anim [data-reveal-stagger] > *{ opacity: 0; transform: translateY(16px); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); }
.js-anim [data-reveal-stagger].is-visible > *{ opacity: 1; transform: translateY(0); }
.js-anim [data-reveal-stagger].is-visible > *:nth-child(1){ transition-delay: 0ms; }
.js-anim [data-reveal-stagger].is-visible > *:nth-child(2){ transition-delay: 50ms; }
.js-anim [data-reveal-stagger].is-visible > *:nth-child(3){ transition-delay: 100ms; }
.js-anim [data-reveal-stagger].is-visible > *:nth-child(4){ transition-delay: 150ms; }
.js-anim [data-reveal-stagger].is-visible > *:nth-child(5){ transition-delay: 200ms; }
.js-anim [data-reveal-stagger].is-visible > *:nth-child(6){ transition-delay: 250ms; }

/* hero entrance stagger (opacity + 12px, 60ms stagger, 600ms, once) */
.js-anim [data-hero-in]{ opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js-anim [data-hero-in].is-in{ opacity: 1; transform: translateY(0); }
.js-anim [data-hero-in="1"].is-in{ transition-delay: 0ms; }
.js-anim [data-hero-in="2"].is-in{ transition-delay: 60ms; }
.js-anim [data-hero-in="3"].is-in{ transition-delay: 120ms; }
.js-anim [data-hero-in="4"].is-in{ transition-delay: 180ms; }
.js-anim [data-hero-in="5"].is-in{ transition-delay: 240ms; }

.no-motion [data-reveal], .no-motion [data-reveal-stagger] > *, .no-motion [data-hero-in]{
  opacity: 1 !important; transform: none !important; transition: none !important;
}

@keyframes pulse-dot{ 0%, 100%{ opacity: 1; } 50%{ opacity: .35; } }
@keyframes geo-pulse{ 0%{ box-shadow: 0 0 0 0 rgba(18,181,160,.35); } 100%{ box-shadow: 0 0 0 14px rgba(18,181,160,0); } }
@keyframes switcher-fade{ from{ opacity: 0; } to{ opacity: 1; } }

/* ==========================================================================
   responsive: nav breakpoint + hero collapse
   ========================================================================== */
@media (min-width: 901px){
  .nav-links{ display: flex; }
  .nav-actions{ display: flex; }
  .nav-toggle{ display: none; }
}
@media (max-width: 900px){
  .nav-sheet{ padding-top: max(18px, env(safe-area-inset-top)); }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .js-anim [data-reveal], .js-anim [data-reveal-stagger] > *, .js-anim [data-hero-in]{ opacity: 1 !important; transform: none !important; }
}
/* ==========================================================================
   Motion layer (see DESIGN-BRIEF.md "Motion budget")

   Rules that apply to everything below:
   - transform and opacity only, no layout properties, no scroll-jacking
   - every scroll-linked value is a unitless 0-1 custom property, written
     either by a CSS scroll-driven animation (where supported) or by one
     shared rAF-throttled writer in main.js. Both paths produce the same
     numbers, so WebKit and Chromium render identically.
   - nothing here runs without JS (`.js-anim`) or under reduced motion
   ========================================================================== */

/* ---- 1. cross-document view transitions --------------------------------- */
@view-transition{ navigation: auto; }

/* the bar and the logo keep their own names, so they are treated as the same
   element across documents and never flicker or cross-fade */
.site-header{ view-transition-name: cp-header; }
.site-header .brand{ view-transition-name: cp-logo; }
main{ view-transition-name: cp-main; }

@keyframes cp-vt-out{ to{ opacity: 0; transform: translate3d(0, -6px, 0); } }
@keyframes cp-vt-in{ from{ opacity: 0; transform: translate3d(0, 8px, 0); } }

::view-transition-old(cp-main){ animation: cp-vt-out 220ms var(--ease-ui) both; }
::view-transition-new(cp-main){ animation: cp-vt-in 260ms var(--ease-out) both; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration: 240ms; }

@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation: none !important; }
}

/* ---- 2. hero depth parallax --------------------------------------------- */
/* --cp-hero runs 0 at rest to 1 when the hero has scrolled one viewport. */
.hero-board{
  transform: translate3d(0, calc(var(--cp-hero, 0) * -24px), 0);
}
.hero-phone{
  transform: translate3d(var(--cp-phone-x, 0px), calc(var(--cp-hero, 0) * -56px), 0);
}
.hero-copy{
  transform: translate3d(0, calc(var(--cp-hero, 0) * -18px), 0);
  opacity: calc(1 - var(--cp-hero, 0) * 0.45);
}
.hero .ink-fx.has-glow::before{
  transform: translate3d(-50%, calc(var(--cp-hero, 0) * 40px), 0);
}
.js-anim .hero-board, .js-anim .hero-phone{ will-change: transform; }

@media (max-width: 699px){
  .hero-phone{ --cp-phone-x: -50%; }
}

/* ---- 5. ink section background drift ------------------------------------ */
[data-ink-parallax]::before{
  transform: translate3d(-50%, calc(var(--cp-ink, 0) * 40px), 0);
}
[data-ink-parallax]:not(.has-glow)::before{ transform: none; }
[data-ink-parallax]::after{
  transform: translate3d(0, calc(var(--cp-ink, 0) * 24px), 0);
}

/* Where the browser can drive a timeline itself, it does: the animation wins
   over the base transform above and JS never registers a writer. */
@supports (animation-timeline: scroll()){
  /* --cp-amp halves every amplitude on touch, matching the JS writer */
  :root{ --cp-amp: 1; }
  @media (pointer: coarse){ :root{ --cp-amp: .5; } }

  @keyframes cp-hero-board{ to{ transform: translate3d(0, calc(var(--cp-amp) * -24px), 0); } }
  @keyframes cp-hero-phone{ to{ transform: translate3d(var(--cp-phone-x, 0px), calc(var(--cp-amp) * -56px), 0); } }
  @keyframes cp-hero-copy{ to{ transform: translate3d(0, calc(var(--cp-amp) * -18px), 0); opacity: calc(1 - var(--cp-amp) * .45); } }
  @keyframes cp-hero-glow{ to{ transform: translate3d(-50%, calc(var(--cp-amp) * 40px), 0); } }
  @keyframes cp-ink-glow{ from{ transform: translate3d(-50%, calc(var(--cp-amp) * -20px), 0); } to{ transform: translate3d(-50%, calc(var(--cp-amp) * 20px), 0); } }
  @keyframes cp-ink-grain{ from{ transform: translate3d(0, calc(var(--cp-amp) * -12px), 0); } to{ transform: translate3d(0, calc(var(--cp-amp) * 12px), 0); } }

  @media (prefers-reduced-motion: no-preference){
    .js-anim:not(.no-motion) .hero-board,
    .js-anim:not(.no-motion) .hero-phone,
    .js-anim:not(.no-motion) .hero-copy,
    .js-anim:not(.no-motion) .hero .ink-fx.has-glow::before{
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-duration: 1ms;
    }
    .js-anim:not(.no-motion) .hero-board{ animation-name: cp-hero-board; }
    .js-anim:not(.no-motion) .hero-phone{ animation-name: cp-hero-phone; }
    .js-anim:not(.no-motion) .hero-copy{ animation-name: cp-hero-copy; }
    .js-anim:not(.no-motion) .hero .ink-fx.has-glow::before{ animation-name: cp-hero-glow; }

    /* a named view timeline on the layer itself: a view() function written
       directly on a pseudo-element is not honoured by either engine */
    .js-anim:not(.no-motion) [data-ink-parallax]{ view-timeline: --cp-ink-tl block; }
    .js-anim:not(.no-motion) [data-ink-parallax].has-glow::before,
    .js-anim:not(.no-motion) [data-ink-parallax]::after{
      animation-timeline: --cp-ink-tl;
      animation-range: cover 0% cover 100%;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-duration: 1ms;
    }
    .js-anim:not(.no-motion) [data-ink-parallax].has-glow::before{ animation-name: cp-ink-glow; }
    .js-anim:not(.no-motion) [data-ink-parallax]::after{ animation-name: cp-ink-grain; }
  }
}

/* ---- 3. headline line reveal -------------------------------------------- */
.js-anim [data-lines] .ln{
  display: block;
  overflow: hidden;
  /* keep descenders off the mask edge */
  padding-bottom: .1em;
  margin-bottom: -.1em;
}
.js-anim [data-lines] .ln > span{
  display: block;
  transform: translate3d(0, 106%, 0);
  opacity: 0;
  transition: transform 700ms var(--ease-out), opacity 700ms var(--ease-out);
}
.js-anim [data-lines].is-visible .ln > span{ transform: none; opacity: 1; }
.js-anim [data-lines].is-visible .ln:nth-child(1) > span{ transition-delay: 0ms; }
.js-anim [data-lines].is-visible .ln:nth-child(2) > span{ transition-delay: 70ms; }
.js-anim [data-lines].is-visible .ln:nth-child(3) > span{ transition-delay: 140ms; }
.js-anim [data-lines].is-visible .ln:nth-child(4) > span{ transition-delay: 210ms; }
.js-anim [data-lines].is-visible .ln:nth-child(5) > span{ transition-delay: 280ms; }
.js-anim [data-lines].is-visible .ln:nth-child(n+6) > span{ transition-delay: 350ms; }

/* ---- 4. crops coming alive ---------------------------------------------- */
/* live board: rows settle top to bottom */
.js-anim [data-crop-ops] .ops-row{
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js-anim [data-crop-ops].is-live .ops-row{ opacity: 1; transform: none; }

/* roster: chips populate column by column */
.js-anim [data-crop-roster] .shift-chip{
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js-anim [data-crop-roster] .shift-chip.unfilled{ transition-delay: calc(var(--i, 0) * 60ms + 140ms); }
.js-anim [data-crop-roster].is-live .shift-chip{ opacity: 1; transform: none; }

/* licence panel: the check timeline ticks in, the verdict lands last */
.js-anim [data-crop-licence] .timeline-item,
.js-anim [data-crop-licence] .licence-check-line{
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 160ms);
}
.js-anim [data-crop-licence].is-live .timeline-item,
.js-anim [data-crop-licence].is-live .licence-check-line{ opacity: 1; }
.js-anim [data-crop-licence] .licence-head .pill{
  opacity: 0;
  transform: scale(.94);
  transition: opacity 280ms var(--ease-out) 620ms, transform 280ms var(--ease-out) 620ms;
}
.js-anim [data-crop-licence].is-live .licence-head .pill{ opacity: 1; transform: none; }

/* record list (security): same tick-in treatment */
.js-anim [data-crop-record] .record-row{
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js-anim [data-crop-record].is-live .record-row{ opacity: 1; transform: none; }

/* a pill that resolves from one state to another, once */
.pill-flip{ position: relative; display: inline-block; }
.pill-flip .pill{ transition: opacity 220ms var(--ease-ui), transform 220ms var(--ease-ui); white-space: nowrap; }
.js-anim .pill-flip .flip-a{ opacity: 1; position: static; }
.js-anim .pill-flip .flip-b{ opacity: 0; position: absolute; inset: 0; transform: scale(.96); }
.js-anim .pill-flip.is-flipped .flip-a{ opacity: 0; position: absolute; inset: 0; }
.js-anim .pill-flip.is-flipped .flip-b{ opacity: 1; position: static; transform: none; }
html:not(.js-anim) .pill-flip .flip-a,
.no-motion .pill-flip .flip-a{ display: none; }
html:not(.js-anim) .pill-flip .flip-b,
.no-motion .pill-flip .flip-b{ opacity: 1; position: static; transform: none; display: inline-flex; }

/* ---- 6. bento pointer sheen (fine pointers only) ------------------------ */
@media (hover: hover) and (pointer: fine){
  .js-anim .bento-cell::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(18,181,160,.12), rgba(18,181,160,0) 68%);
    opacity: 0;
    transition: opacity 240ms var(--ease-ui);
  }
  .js-anim .bento-cell:hover::after{ opacity: 1; }
}

/* ---- 7. final CTA mark: the tick draws once ----------------------------- */
.cta-mark{ width: 56px; height: 56px; margin: 0 auto var(--sp-5); }
.cta-mark svg{ width: 100%; height: 100%; }
.js-anim .cta-mark .cta-tick{ stroke-dasharray: 42; stroke-dashoffset: 42; }
.js-anim .cta-mark.is-live .cta-tick{
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 620ms var(--ease-out) 120ms;
}

/* ---- nothing above survives reduced motion or the static screenshot mode - */
.no-motion [data-lines] .ln > span,
.no-motion [data-crop-ops] .ops-row,
.no-motion [data-crop-roster] .shift-chip,
.no-motion [data-crop-licence] .timeline-item,
.no-motion [data-crop-licence] .licence-check-line,
.no-motion [data-crop-licence] .licence-head .pill,
.no-motion [data-crop-record] .record-row{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.no-motion .cta-mark .cta-tick{ stroke-dashoffset: 0 !important; }

@media (prefers-reduced-motion: reduce){
  .js-anim [data-lines] .ln > span,
  .js-anim [data-crop-ops] .ops-row,
  .js-anim [data-crop-roster] .shift-chip,
  .js-anim [data-crop-licence] .timeline-item,
  .js-anim [data-crop-licence] .licence-check-line,
  .js-anim [data-crop-licence] .licence-head .pill,
  .js-anim [data-crop-record] .record-row{
    opacity: 1 !important;
    transform: none !important;
  }
  .js-anim .cta-mark .cta-tick{ stroke-dashoffset: 0 !important; }
  .js-anim .bento-cell::after{ display: none; }
}