/* Jojo Express design system: Plum & Ember. Shared by every artboard and the hostable prototype. */
:root {
  --plum-950: #000000; --plum-900: #3D1746; --plum-800: #4B2E57; --plum-700: #5B1767;
  --purple-600: #830691; --purple-500: #9B2BAB; --purple-400: #B25BC2; --purple-200: #DDB8E5;
  --lilac-100: #F4E9F7; --lilac-50: #FBF6FC;
  --ember-500: #C86BD8; --ember-600: #830691; --ember-700: #6A0A7E; --ember-100: #EBD3F0; --ember-50: #F7EDF9;
  --ink: #1D1D1B; --ink-2: #3B2E40; --muted: #6E6274; --line: #E8E0EB; --line-2: #D9CEDD; --mist: #F7F4F8; --paper: #FFFFFF;
  --on-dark: #F6EEF8; --on-dark-2: #BBA8C2; --on-dark-line: rgba(255,255,255,0.12);
  --st-neutral: #5E5363; --st-neutral-bg: #EFEAF1;
  --st-booked: #6A0A7E; --st-booked-bg: #F4E9F7;
  --st-weighed: #FFFFFF; --st-weighed-bg: #3D1746;
  --st-due: #8A4B00; --st-due-bg: #FFF1D6;
  --st-batch: #3730A3; --st-batch-bg: #E8E7FB;
  --st-transit: #FFFFFF; --st-transit-bg: #830691;
  --st-customs: #075985; --st-customs-bg: #E0F2FE;
  --st-out: #0F766E; --st-out-bg: #DDF5F1;
  --st-done: #166534; --st-done-bg: #DFF5E5;
  --st-hold: #9F1239; --st-hold-bg: #FFE4E9;
  --ok: #166534; --warn: #8A4B00; --bad: #9F1239;
  --chart-1: #830691; --chart-2: #3D1746; --chart-3: #3730A3; --chart-4: #0F766E; --chart-5: #B25BC2; --chart-6: #D9A5E3; --chart-7: #9CA3AF;
  --f-display: "Gabarito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sand: #F7F2EE; --sand-line: #ECE3DC; --night: #000000;
  --r-xs: 6px; --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
  --sh-1: 0 1px 2px rgba(28,6,35,0.06), 0 1px 1px rgba(28,6,35,0.04);
  --sh-2: 0 10px 30px rgba(28,6,35,0.10);
  --sh-3: 0 24px 60px rgba(28,6,35,0.22);
}

/* Base */
.pg, .phone { font-family: var(--f-body); color: var(--ink); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; background: var(--paper); }
.pg *, .phone * { box-sizing: border-box; }
.pg { min-height: 100%; width: 100%; }
.pg-mist { background: var(--mist); }
.pg h1, .pg h2, .pg h3, .pg h4, .phone h1, .phone h2, .phone h3, .phone h4 { margin: 0; text-wrap: balance; }
.pg .h1 em, .pg .h2 em, .pg .display em, .phone .h1 em, .phone .h2 em { font-style: normal; color: var(--ember-600); }
.pg p, .phone p { margin: 0; }
.pg a, .phone a { color: var(--purple-600); text-decoration: none; }
.pg a:hover, .phone a:hover { color: var(--plum-900); }
.pg ul, .phone ul, .pg ol, .phone ol { margin: 0; padding: 0; list-style: none; }
.pg img, .phone img { max-width: 100%; display: block; }
.pg button, .phone button { font: inherit; }
.pg :focus-visible, .phone :focus-visible { outline: 3px solid var(--ember-500); outline-offset: 2px; border-radius: 6px; }

/* Type */
.display { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; color: var(--plum-900); font-size: clamp(44px, 6vw, 80px); }
.h1 { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--plum-900); font-size: clamp(36px, 4.4vw, 58px); }
.h2 { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--plum-900); font-size: clamp(30px, 3.2vw, 42px); }
.h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--plum-900); font-size: 22px; }
.h4 { font-family: var(--f-body); font-weight: 750; font-size: 17px; line-height: 1.3; color: var(--ink); }
.lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); }
.small { font-size: 14px; }
.xs { font-size: 12.5px; }
.muted { color: var(--muted); }
.strong { font-weight: 750; }
.eyebrow { font-family: var(--f-body); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember-600); }
.eyebrow.ember { color: var(--ember-600); }
.eyebrow.purple { color: var(--purple-600); }
.pill-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); width: max-content; }
.pill-badge.dark { background: rgba(20,18,21,0.62); border-color: rgba(255,255,255,0.16); color: #FFFFFF; }
.pill-badge .dot-live { box-shadow: 0 0 0 3px rgba(131,6,145,0.22); }
.serif { font-family: var(--f-display); }
.mono { font-family: var(--f-body); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; font-weight: 600; }
.tnum { font-variant-numeric: tabular-nums; }
.code-xl { font-family: var(--f-body); font-weight: 700; letter-spacing: 0.01em; line-height: 1; color: var(--plum-900); font-size: 30px; }
.num-xl { font-family: var(--f-body); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--plum-900); font-size: 36px; line-height: 1.05; }
.num-lg { font-family: var(--f-body); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--plum-900); font-size: 26px; line-height: 1.1; }
.on-dark { color: var(--on-dark); }
.on-dark .h1, .on-dark .h2, .on-dark .h3, .on-dark .display, .on-dark .num-xl, .on-dark .num-lg, .on-dark .code-xl { color: var(--on-dark); }
.on-dark .muted, .on-dark .lead { color: var(--on-dark-2); }
.on-dark .eyebrow { color: var(--on-dark-2); }
.ember-text { color: var(--ember-500); }
.purple-text { color: var(--purple-600); }

/* Layout */
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: 32px; width: 100%; }
.wrap-sm { max-width: 860px; margin: 0 auto; padding-inline: 32px; width: 100%; }
.section { padding-block: 88px; }
.section-sm { padding-block: 56px; }
.bg-mist { background: var(--mist); }
.bg-lilac { background: var(--lilac-50); }
.bg-plum { background: var(--plum-950); color: var(--on-dark); }
.bg-paper { background: var(--paper); }
.bg-sand { background: var(--sand); }
.bg-night { background: var(--night); color: var(--on-dark); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-xs { display: flex; flex-direction: column; gap: 4px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.stack-lg { display: flex; flex-direction: column; gap: 28px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-lg { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.grow { flex: 1 1 0; min-width: 0; }
.g2, .g3, .g4, .g5, .g6 { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gap-sm { gap: 12px; } .gap-md { gap: 16px; } .gap-lg { gap: 40px; }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
.split-r { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.aside-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.aside-left { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
.sec-head { display: flex; flex-direction: column; gap: 12px; max-width: 720px; margin-bottom: 40px; }
.sec-head.center { margin-inline: auto; text-align: center; align-items: center; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.hr-dash { border-top: 2px dashed var(--line); }
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; }
.w-full { width: 100%; }
.center-text { text-align: center; }
.right { text-align: right; }

/* Icons: masks so they take the text colour */
.i { display: inline-block; width: 20px; height: 20px; flex: none; background-color: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; vertical-align: -4px; }
.i-sm { width: 16px; height: 16px; vertical-align: -3px; }
.i-lg { width: 24px; height: 24px; }
.i-xl { width: 32px; height: 32px; }
.i-box { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3Cpath d='M7.5 5.5l9 5'/%3E%3C/svg%3E"); }
.i-plane { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2L16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/%3E%3C/svg%3E"); }
.i-ship { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1 .6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1'/%3E%3Cpath d='M19.4 18.9L21 12l-9-4-9 4 1.8 6.6'/%3E%3Cpath d='M12 8V3'/%3E%3Cpath d='M8 5h8'/%3E%3C/svg%3E"); }
.i-truck { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17h4V5H2v12h3'/%3E%3Cpath d='M20 17h2v-3.3a1 1 0 0 0-.2-.6l-3.4-4.2a1 1 0 0 0-.8-.4H14v8.5'/%3E%3Ccircle cx='7.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E"); }
.i-home { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-7 9 7v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.i-search { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); }
.i-pin { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.i-clock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.i-calendar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.i-user { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.i-users { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M1.5 21a7.5 7.5 0 0 1 15 0'/%3E%3Cpath d='M16 4a4 4 0 0 1 0 8M22.5 21a7 7 0 0 0-4-6.3'/%3E%3C/svg%3E"); }
.i-scale { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='14' width='18' height='7' rx='2'/%3E%3Cpath d='M7 14V9a5 5 0 0 1 10 0v5'/%3E%3Cpath d='M12 9l1.5 2'/%3E%3C/svg%3E"); }
.i-camera { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h3l2-3h6l2 3h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); }
.i-qr { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M14 14h3v3h-3zM20 14v.01M14 20h.01M17 20h4v-3'/%3E%3C/svg%3E"); }
.i-link { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E"); }
.i-share { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E"); }
.i-phone { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.i-mail { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E"); }
.i-chev-r { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"); }
.i-chev-d { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.i-chev-l { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E"); }
.i-arrow { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E"); }
.i-arrow-ur { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.i-check { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.i-x { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.i-alert { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.i-info { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }
.i-shield { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.i-star { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E"); }
.i-gift { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v9H5v-9'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E"); }
.i-wallet { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12V8H6a2 2 0 0 1 0-4h12v4'/%3E%3Cpath d='M4 6v12a2 2 0 0 0 2 2h14v-4'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4z'/%3E%3C/svg%3E"); }
.i-receipt { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l3-2 3 2 2-2 2 2 3-2 3 2V2l-3 2-3-2-2 2-2-2-3 2z'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.i-file { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.i-upload { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E"); }
.i-download { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); }
.i-bell { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
.i-sliders { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E"); }
.i-chart { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 16v-4M12 16V8M17 16v-7'/%3E%3C/svg%3E"); }
.i-pie { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.2 15.9A10 10 0 1 1 8 2.8'/%3E%3Cpath d='M22 12A10 10 0 0 0 12 2v10z'/%3E%3C/svg%3E"); }
.i-layers { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l10 5-10 5L2 7z'/%3E%3Cpath d='M2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E"); }
.i-scan { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E"); }
.i-tag { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2H2v10l9.3 9.3a1 1 0 0 0 1.4 0l8.6-8.6a1 1 0 0 0 0-1.4z'/%3E%3Ccircle cx='7' cy='7' r='1.5'/%3E%3C/svg%3E"); }
.i-printer { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Crect x='2' y='9' width='20' height='9' rx='2'/%3E%3Cpath d='M6 14h12v8H6z'/%3E%3C/svg%3E"); }
.i-filter { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3H2l8 9.5V19l4 2v-8.5z'/%3E%3C/svg%3E"); }
.i-plus { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.i-edit { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
.i-trash { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6'/%3E%3C/svg%3E"); }
.i-logout { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E"); }
.i-globe { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E"); }
.i-coins { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M18.1 10.4A6 6 0 1 1 10.3 18'/%3E%3Cpath d='M7 6h1v4'/%3E%3C/svg%3E"); }
.i-lock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.i-eye { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.i-menu { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E"); }
.i-refresh { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16M3 12a9 9 0 0 1 15-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5M3 21v-5h5'/%3E%3C/svg%3E"); }
.i-flag { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cpath d='M4 22v-7'/%3E%3C/svg%3E"); }
.i-megaphone { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l18-5v12L3 13z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); }
.i-building { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01'/%3E%3C/svg%3E"); }
.i-activity { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E"); }
.i-help { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E"); }
.i-chat { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.i-grid { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E"); }
.i-route { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='3'/%3E%3Cpath d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15'/%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3C/svg%3E"); }
.i-book { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5z'/%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5'/%3E%3C/svg%3E"); }
.i-award { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.5 13.5L17 22l-5-3-5 3 1.5-8.5'/%3E%3C/svg%3E"); }
.i-ruler { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.4 2.4 0 0 1 0-3.4l2.6-2.6a2.4 2.4 0 0 1 3.4 0z'/%3E%3Cpath d='M14.5 12.5l2-2M11.5 9.5l2-2M8.5 6.5l2-2M17.5 15.5l2-2'/%3E%3C/svg%3E"); }
.i-id { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Ccircle cx='8' cy='12' r='2.5'/%3E%3Cpath d='M13 10h5M13 14h3'/%3E%3C/svg%3E"); }
.i-wa { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.7-4.8A9 9 0 1 1 8.2 19.6z'/%3E%3Cpath fill='%23000' stroke='none' d='M8.8 8.2c.3-.6.6-.6 1-.6h.5c.2 0 .4.1.5.4l.7 1.7c.1.2 0 .4-.1.6l-.5.6c-.1.1-.2.3 0 .5.6 1 1.4 1.8 2.5 2.4.2.1.4.1.5-.1l.6-.7c.2-.2.4-.2.6-.1l1.6.8c.2.1.4.2.4.4 0 .5-.2 1.1-.6 1.4-.5.4-1.2.6-1.9.4-1.5-.4-2.8-1.2-3.9-2.3-1-1-1.8-2.2-2.2-3.5-.2-.6-.1-1.1.3-1.5z'/%3E%3C/svg%3E"); }
.i-ext { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M10 14L21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); }
.i-copy { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); }
.i-leaf { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19 2c1 2 2 4.2 2 8 0 5.5-4.8 10-10 10z'/%3E%3Cpath d='M2 21c0-3 1.9-5.4 5.2-6'/%3E%3C/svg%3E"); }
.i-shirt { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 3.5L16 2a4 4 0 0 1-8 0L3.6 3.5a2 2 0 0 0-1.3 2.2l.6 3.5a1 1 0 0 0 1 .8H6v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V10h2.1a1 1 0 0 0 1-.8l.6-3.5a2 2 0 0 0-1.3-2.2z'/%3E%3C/svg%3E"); }
.i-pill { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 20.5a5 5 0 0 1-7-7l10-10a5 5 0 0 1 7 7z'/%3E%3Cpath d='M8.5 8.5l7 7'/%3E%3C/svg%3E"); }
.i-ban { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M4.9 4.9l14.2 14.2'/%3E%3C/svg%3E"); }
.i-timer { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22h14M5 2h14M17 22v-4.2a2 2 0 0 0-.6-1.4L12 12l-4.4 4.4a2 2 0 0 0-.6 1.4V22M7 2v4.2a2 2 0 0 0 .6 1.4L12 12l4.4-4.4a2 2 0 0 0 .6-1.4V2'/%3E%3C/svg%3E"); }
.i-dots { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E"); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 15px/1 var(--f-body); padding: 14px 22px; min-height: 48px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; }
.pg a.btn, .phone a.btn { text-decoration: none; }
.btn-ember, .pg a.btn-ember, .phone a.btn-ember { background: var(--ember-600); color: #FFFFFF; }
.btn-ember:hover, .pg a.btn-ember:hover, .phone a.btn-ember:hover { background: var(--ember-700); color: #FFFFFF; }
.btn-purple, .pg a.btn-purple, .phone a.btn-purple { background: var(--purple-600); color: #FFFFFF; }
.btn-purple:hover, .pg a.btn-purple:hover, .phone a.btn-purple:hover { background: var(--plum-800); color: #FFFFFF; }
.btn-plum, .pg a.btn-plum, .phone a.btn-plum { background: var(--plum-900); color: #FFFFFF; }
.btn-ghost, .pg a.btn-ghost, .phone a.btn-ghost { background: var(--paper); color: var(--plum-900); border-color: var(--line-2); }
.btn-ghost:hover, .pg a.btn-ghost:hover, .phone a.btn-ghost:hover { border-color: var(--purple-600); color: var(--purple-600); }
.btn-soft, .pg a.btn-soft, .phone a.btn-soft { background: var(--lilac-100); color: var(--plum-900); }
.btn-dark, .pg a.btn-dark, .phone a.btn-dark { background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,0.3); }
.btn-dark:hover, .pg a.btn-dark:hover { border-color: var(--on-dark); color: #FFFFFF; }
.btn-danger, .pg a.btn-danger { background: var(--paper); color: var(--bad); border-color: #F3B6C4; }
.btn-sm { padding: 9px 16px; min-height: 40px; font-size: 14px; border-radius: 999px; gap: 8px; }
.btn-xs { padding: 6px 12px; min-height: 32px; font-size: 13px; border-radius: 999px; gap: 6px; }
.btn-lg { padding: 17px 28px; min-height: 56px; font-size: 16.5px; border-radius: 999px; }
.btn-block { display: flex; width: 100%; }
.wa-dot { width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; color: var(--ember-600); display: inline-grid; place-items: center; }
.wa-dot .i { width: 15px; height: 15px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--purple-600); }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); display: inline-grid; place-items: center; color: var(--plum-900); position: relative; }
.icon-btn .pip { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--ember-500); box-shadow: 0 0 0 2px var(--paper); }

/* Form controls */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field > .row > label, .lbl { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.field .hint { font-size: 12.5px; color: var(--muted); }
.input, .select, .textarea { width: 100%; font: 500 16px/1.3 var(--f-body); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-2); border-radius: 12px; padding: 13px 14px; min-height: 50px; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--purple-600); box-shadow: 0 0 0 4px rgba(131,6,145,0.12); }
.input.is-filled, .select.is-filled { border-color: var(--line-2); }
.input.is-focus { border-color: var(--purple-600); box-shadow: 0 0 0 4px rgba(131,6,145,0.12); }
.input.is-error { border-color: var(--bad); box-shadow: 0 0 0 4px rgba(159,18,57,0.10); }
.err { font-size: 12.5px; color: var(--bad); font-weight: 600; }
.select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6274' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.textarea { min-height: 110px; resize: vertical; }
.input-group { display: flex; align-items: stretch; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--paper); overflow: hidden; }
.input-group .input { border: 0; border-radius: 0; min-width: 0; min-height: 47px; }
.input-group .addon { display: grid; place-items: center; padding-inline: 14px; background: var(--mist); color: var(--muted); font-weight: 700; font-size: 14px; border-left: 1.5px solid var(--line-2); }
.input-group .addon.l { border-left: 0; border-right: 1.5px solid var(--line-2); }
.input-icon { position: relative; }
.input-icon .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.input-icon .input { padding-left: 44px; }
.seg { display: inline-flex; padding: 4px; background: var(--mist); border: 1.5px solid var(--line); border-radius: 12px; gap: 4px; }
.seg > a, .seg > span { padding: 9px 14px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.seg .on { background: var(--paper); color: var(--plum-900); box-shadow: var(--sh-1); }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--paper); }
.choice.on { border-color: var(--purple-600); background: var(--lilac-50); box-shadow: 0 0 0 3px rgba(131,6,145,0.10); }
.radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; margin-top: 2px; display: grid; place-items: center; }
.choice.on .radio { border-color: var(--purple-600); }
.choice.on .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--purple-600); }
.checkbox { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line-2); flex: none; display: grid; place-items: center; color: #FFFFFF; background: var(--paper); }
.checkbox.on { background: var(--purple-600); border-color: var(--purple-600); }
.checkbox.on::after { content: ""; width: 12px; height: 12px; background: #FFFFFF; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.toggle { display: inline-block; vertical-align: middle; width: 44px; height: 26px; border-radius: 999px; background: var(--line-2); position: relative; flex: none; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: var(--sh-1); }
.toggle.on { background: var(--purple-600); }
.toggle.on::after { left: 21px; }
.presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.preset { border: 1.5px solid var(--line-2); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--paper); }
.preset .box-ill { height: 36px; display: flex; align-items: flex-end; }
.preset .box-ill span { display: block; background: var(--lilac-100); border: 1.5px solid var(--purple-400); border-radius: 4px; }
.preset.on { border-color: var(--purple-600); background: var(--lilac-50); box-shadow: 0 0 0 3px rgba(131,6,145,0.10); }
.preset b { font-size: 14px; }
.preset small { font-size: 12px; color: var(--muted); }
.stepper { display: flex; align-items: center; gap: 0; border: 1.5px solid var(--line-2); border-radius: 12px; overflow: hidden; width: max-content; }
.stepper span { width: 44px; height: 44px; display: grid; place-items: center; font-weight: 800; }
.stepper span:first-child, .stepper span:last-child { background: var(--mist); color: var(--plum-900); }

/* Cards and panels */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.widget { background: var(--paper); color: var(--ink); border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(48,7,58,0.14); overflow: hidden; }
.widget-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--sand); }
.widget-tabs > a, .widget-tabs > span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; font-weight: 600; font-size: 14.5px; color: var(--muted); }
.widget-tabs .on { background: var(--paper); color: var(--plum-900); border-radius: 0 0 0 0; box-shadow: inset 0 -2px 0 var(--ember-600); }
.widget-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.steps-num { font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--ember-600); padding-bottom: 10px; border-bottom: 1.5px solid var(--sand-line); }
.callout { border: 1px solid var(--ember-100); background: var(--ember-50); padding: 14px 18px; border-radius: 10px; font-size: 14.5px; }
.cta-band { background: #000000; color: #FFFFFF; position: relative; overflow: hidden; }
.cta-band::before { content: none; }
.cta-band .btn-black, .pg .cta-band a.btn-black { background: transparent; border-color: rgba(255,255,255,0.4); color: #FFFFFF; }
.cta-band .btn-white, .pg .cta-band a.btn-white { background: var(--purple-600); color: #FFFFFF; }
.cta-band .h2 { color: #FFFFFF; }
.cta-band p { color: #D9CEDD; }
.btn-white, .pg a.btn-white { background: #FFFFFF; color: var(--plum-900); }
.btn-white:hover, .pg a.btn-white:hover { background: var(--ember-50); color: var(--plum-900); }
.btn-black, .pg a.btn-black { background: var(--night); color: #FFFFFF; }
.btn-black:hover, .pg a.btn-black:hover { background: #000000; color: #FFFFFF; }
.cta-band > .wrap { position: relative; z-index: 1; }
.card-pad { padding: 24px; }
.card-pad-lg { padding: 32px; }
.card-pad-sm { padding: 16px; }
.card-flat { background: var(--mist); border-radius: var(--r-md); }
.card-lilac { background: var(--lilac-50); border: 1px solid var(--lilac-100); border-radius: var(--r-lg); }
.card-dark { background: var(--plum-950); color: var(--on-dark); border-radius: var(--r-lg); }
.card-dark .muted { color: var(--on-dark-2); }
.card-shadow { box-shadow: var(--sh-2); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.card-head .h4 { font-size: 16px; }
.tile-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--lilac-100); color: var(--purple-600); display: grid; place-items: center; flex: none; }
.tile-ic.ember { background: var(--ember-50); color: var(--ember-600); }
.tile-ic.dark { background: var(--plum-900); color: var(--on-dark); }
.tile-ic.sm { width: 36px; height: 36px; border-radius: 10px; }
.tile-ic.sm .i { width: 18px; height: 18px; }
.ph { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--plum-800); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph-cap { position: absolute; left: 12px; bottom: 12px; font-size: 12px; color: #FFFFFF; background: rgba(28,6,35,0.7); padding: 6px 10px; border-radius: 8px; }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--lilac-50); border: 1px solid var(--lilac-100); font-size: 14.5px; }
.note .i { color: var(--purple-600); margin-top: 1px; }
.note.warn { background: #FFF8E8; border-color: #F8E2B0; }
.note.warn .i { color: var(--warn); }
.note.bad { background: #FFF1F4; border-color: #F8C9D4; }
.note.bad .i { color: var(--bad); }
.note.ok { background: #EEFAF1; border-color: #C7EBD1; }
.note.ok .i { color: var(--ok); }
.note.ember { background: var(--ember-50); border-color: var(--ember-100); }
.note.ember .i { color: var(--ember-600); }
.kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv .k { font-family: var(--f-body); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.kv .v { font-weight: 750; font-variant-numeric: tabular-nums; }
.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; font-size: 14.5px; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; font-weight: 650; }
.lines { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.line { display: flex; justify-content: space-between; gap: 16px; }
.line > span:last-child { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.line.total { padding-top: 12px; border-top: 2px dashed var(--line); font-weight: 800; }
.badge { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; background: var(--lilac-100); color: var(--plum-900); white-space: nowrap; }
.badge.ember { background: var(--ember-50); color: var(--ember-700); }
.badge.dark { background: var(--plum-900); color: var(--on-dark); }
.badge.ok { background: var(--st-done-bg); color: var(--st-done); }
.badge.warn { background: var(--st-due-bg); color: var(--st-due); }
.badge.bad { background: var(--st-hold-bg); color: var(--st-hold); }
.badge.gray { background: var(--st-neutral-bg); color: var(--st-neutral); }
.av { width: 40px; height: 40px; border-radius: 50%; background: var(--lilac-100); color: var(--plum-900); display: grid; place-items: center; text-align: center; line-height: 1; letter-spacing: 0.02em; padding-top: 1px; box-sizing: border-box; font-weight: 800; font-size: 14px; flex: none; }
.av.sm { width: 32px; height: 32px; font-size: 12px; }
.av.lg { width: 56px; height: 56px; font-size: 18px; }
.av.ember { background: var(--ember-50); color: var(--ember-700); }
.av.dark { background: var(--plum-900); color: var(--on-dark); }
.av.teal { background: var(--st-out-bg); color: var(--st-out); }
.av.blue { background: var(--st-customs-bg); color: var(--st-customs); }
.progress { height: 10px; border-radius: 999px; background: var(--lilac-100); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 999px; background: var(--purple-600); }
.progress.thin { height: 6px; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ember-500); display: inline-block; flex: none; box-shadow: 0 0 0 4px rgba(131,6,145,0.18); }
.kbd { font-family: var(--f-body); font-size: 12px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--paper); color: var(--muted); }

/* Status chips */
.st { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--f-body); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.st-neutral { color: var(--st-neutral); background: var(--st-neutral-bg); }
.st-booked { color: var(--st-booked); background: var(--st-booked-bg); }
.st-weighed { color: var(--st-weighed); background: var(--st-weighed-bg); }
.st-due { color: var(--st-due); background: var(--st-due-bg); }
.st-batch { color: var(--st-batch); background: var(--st-batch-bg); }
.st-transit { color: var(--st-transit); background: var(--st-transit-bg); }
.st-customs { color: var(--st-customs); background: var(--st-customs-bg); }
.st-out { color: var(--st-out); background: var(--st-out-bg); }
.st-done { color: var(--st-done); background: var(--st-done-bg); }
.st-hold { color: var(--st-hold); background: var(--st-hold-bg); }
.verdict { display: inline-flex; align-items: center; gap: 6px; font: 800 12.5px/1 var(--f-body); padding: 7px 10px; border-radius: 8px; white-space: nowrap; }
.verdict.yes { background: var(--st-done-bg); color: var(--st-done); }
.verdict.limit { background: var(--st-due-bg); color: var(--st-due); }
.verdict.no { background: var(--st-hold-bg); color: var(--st-hold); }

/* Cargo tag */
.tag { background: var(--paper); color: var(--ink); border-radius: 18px; border: 1px solid var(--line); overflow: hidden; }
.tag.float { border: 0; box-shadow: var(--sh-3); }
.tag-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; }
.tag-head.tint { background: var(--lilac-50); border-bottom: 1px solid var(--line); }
.tag-ref { font-family: var(--f-body); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.tag-route { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; }
.tag-route .city { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.leg { height: 2px; background-image: linear-gradient(90deg, var(--purple-400) 50%, transparent 50%); background-size: 10px 2px; position: relative; }
.leg::after { content: ""; position: absolute; left: var(--at, 60%); top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ember-500); box-shadow: 0 0 0 5px rgba(131,6,145,0.18); }
.leg.done { background-image: none; background-color: var(--purple-600); }
.leg.none::after { display: none; }
.perf { border-top: 2px dashed var(--line); margin-inline: 16px; }
.tag-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 18px 16px; }
.weights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wbox { border-radius: 12px; background: var(--mist); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.wbox .v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wbox.win { background: var(--plum-900); color: var(--on-dark); }
.wbox.win .k { color: var(--on-dark-2); }
.big-price { font-family: var(--f-body); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--plum-900); font-size: 40px; line-height: 1; }

/* Departure board */
.board { background: var(--night); border-radius: 20px; padding: 20px 22px; color: var(--on-dark); display: flex; flex-direction: column; gap: 4px; overflow-x: auto; }
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; }
.board-head .eyebrow { color: var(--on-dark-2); }
.live { font-family: var(--f-body); font-weight: 700; font-size: 12px; color: var(--ember-500); display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.1em; }
.brow { display: grid; grid-template-columns: 150px 80px 120px minmax(150px, 1fr) 150px; gap: 12px; align-items: center; min-width: 660px; font-family: var(--f-body); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.brow.h { font-size: 11px; letter-spacing: 0.1em; color: var(--on-dark-2); border-top: 0; padding: 0 0 6px; }
.flap { display: inline-flex; gap: 2px; }
.flap b { background: #2B272C; border-radius: 3px; padding: 4px 5px; font-weight: 700; min-width: 19px; text-align: center; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05); }
.count { color: var(--ember-500); font-weight: 600; font-variant-numeric: tabular-nums; }
.board .mode { font-size: 12px; color: var(--on-dark-2); }
.board .closed { color: var(--on-dark-2); }

/* Timeline */
.tl { display: flex; flex-direction: column; }
.tl li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; position: relative; padding-bottom: 20px; }
.tl li::before { content: ""; position: absolute; left: 13px; top: 22px; bottom: 0; width: 2px; background: var(--purple-600); }
.tl li.now::before, .tl li.todo::before { background: repeating-linear-gradient(180deg, var(--line-2) 0 4px, transparent 4px 8px); }
.tl li:last-child { padding-bottom: 0; }
.tl li:last-child::before { content: none; }
.tl .n { width: 28px; height: 28px; border-radius: 50%; background: var(--purple-600); color: #FFFFFF; display: grid; place-items: center; z-index: 1; }
.tl .n .i { width: 15px; height: 15px; }
.tl li.now .n { background: var(--st-customs-bg); color: var(--st-customs); box-shadow: 0 0 0 5px rgba(7,89,133,0.12); }
.tl li.now.transit .n { background: var(--ember-600); color: #FFFFFF; box-shadow: 0 0 0 5px rgba(131,6,145,0.18); }
.tl li.now.weigh .n { background: var(--purple-600); color: #FFFFFF; box-shadow: 0 0 0 5px rgba(131,6,145,0.16); }
.tl li.todo .n { background: var(--paper); border: 2px solid var(--line-2); color: var(--muted); font-size: 12px; font-weight: 700; }
.tl .what b { display: block; font-size: 15.5px; font-weight: 750; }
.tl .what span { font-size: 13.5px; color: var(--muted); }
.tl .when { font-family: var(--f-body); font-weight: 600; font-size: 12.5px; color: var(--muted); white-space: nowrap; padding-top: 3px; }
.tl li.todo .what b { color: var(--muted); font-weight: 650; }
.tl .proof { display: flex; gap: 8px; margin-top: 8px; }
.tl .proof span { width: 64px; height: 48px; border-radius: 8px; overflow: hidden; display: block; background: var(--mist); }
.tl .proof img { width: 100%; height: 100%; object-fit: cover; }
.hsteps { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 0; }
.hsteps li { display: flex; flex-direction: column; gap: 8px; position: relative; padding-right: 8px; }
.hsteps li::before { content: ""; height: 4px; border-radius: 999px; background: var(--purple-600); }
.hsteps li.now::before { background: var(--purple-600); }
.hsteps li.todo::before { background: var(--line); }
.hsteps b { font-size: 13px; }
.hsteps span { font-size: 12px; color: var(--muted); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 720px; }
.table th { text-align: left; font: 700 11.5px/1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 14px 16px; background: var(--mist); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.sel td { background: var(--lilac-50); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .mono { font-size: 13px; }
.table .who { display: flex; align-items: center; gap: 10px; }
.table .who b { display: block; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.table .who span:not(.av) { font-size: 12.5px; color: var(--muted); }
.table-compact td { padding: 10px 14px; }
.table-compact th { padding: 11px 14px; }
.table-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--line); flex-wrap: wrap; }
.tabs > a, .tabs > span { padding: 12px 14px; font-weight: 700; font-size: 14.5px; color: var(--muted); border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; display: inline-flex; gap: 8px; align-items: center; }
.tabs .on { color: var(--plum-900); border-bottom-color: var(--ember-600); }
.tabs .count-pill { font: 700 11px/1 var(--f-body); padding: 3px 6px; border-radius: 999px; background: var(--lilac-100); color: var(--plum-900); }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line-2); font-weight: 700; font-size: 13.5px; color: var(--ink-2); background: var(--paper); display: inline-flex; align-items: center; gap: 6px; }
.pill.on { background: var(--plum-900); border-color: var(--plum-900); color: #FFFFFF; }

/* Public header and footer */
.topbar { background: var(--lilac-50); color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--line); }
.topbar-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; flex-wrap: wrap; padding-block: 6px; }
.pg .topbar a { color: var(--plum-900); display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.pg .topbar a b { color: var(--ember-600); font-weight: 700; }
.sh { background: var(--paper); border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.sh-in { display: flex; align-items: center; gap: 28px; min-height: 76px; flex-wrap: wrap; padding-block: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand-mark { width: 34px; height: 41px; flex: none; display: block; font-size: 0; color: transparent; background: url("img/jojo-mark-plum.png") center / contain no-repeat; }
.brand-word { display: flex; flex-direction: column; font: 700 19px/1 "Cinzel", "Trajan Pro", Georgia, serif; letter-spacing: 0.02em; color: var(--plum-900); }
.brand-word small { font: 700 9px/1 "Cinzel", "Trajan Pro", Georgia, serif; letter-spacing: 0.2em; color: var(--plum-900); margin-top: 5px; }
.on-dark .brand-mark, .bg-plum .brand-mark, .side-dark .brand-mark, .site-footer .brand-mark { background-image: url("img/jojo-mark-white.png"); }
.on-dark .brand-word, .bg-plum .brand-word, .side-dark .brand-word, .site-footer .brand-word { color: var(--on-dark); }
.on-dark .brand-word small, .bg-plum .brand-word small, .side-dark .brand-word small, .site-footer .brand-word small { color: var(--on-dark-2); }
.card-dark .eyebrow, .bg-plum .eyebrow, .board .eyebrow { color: var(--on-dark-2); }
.card-dark .eyebrow.ember-text, .bg-plum .eyebrow.ember-text { color: var(--ember-500); }
.card-dark .h3, .card-dark .h2, .card-dark .h4, .bg-plum .h2, .bg-plum .h3, .bg-plum .h1 { color: var(--on-dark); }
.nav { display: flex; gap: 4px; flex: 1 1 auto; flex-wrap: wrap; }
.pg .nav a { padding: 9px 13px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ink-2); }
.pg .nav a:hover { color: var(--plum-900); background: var(--mist); }
.pg .nav a.on { color: var(--plum-900); background: var(--lilac-100); }
.sh-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pg .sh-act .signin { font-weight: 700; color: var(--plum-900); padding: 10px 6px; }
.site-footer { background: var(--night); color: var(--on-dark-2); padding-block: 64px 28px; font-size: 14.5px; }
.ft-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; }
.ft-grid h4 { font: 700 12px/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark); margin: 0 0 16px; }
.ft-grid ul { display: flex; flex-direction: column; gap: 10px; }
.pg .site-footer a { color: var(--on-dark-2); }
.pg .site-footer a:hover { color: #FFFFFF; }
.ft-base { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--on-dark-line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.ft-codes { font-family: var(--f-body); font-weight: 600; letter-spacing: 0.1em; font-size: 12px; color: var(--on-dark-2); }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); }
.hero::before { content: none; }
.hero::after { content: none; }
.hero > .wrap { position: relative; z-index: 1; }
.hero .display { color: var(--plum-900); }
.hero .display em, .page-hero .h1 em { font-style: normal; color: var(--ember-600); }
.hero .lead { color: var(--ink-2); }
.chip-dark { font-family: var(--f-body); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); color: var(--on-dark); display: inline-flex; gap: 8px; align-items: center; }
.page-hero { background: var(--lilac-50); color: var(--ink); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero::before { content: none; }
.page-hero > .wrap { position: relative; z-index: 1; padding-block: 56px 64px; }
.page-hero .h1 { color: var(--plum-900); }
.page-hero .lead { color: var(--ink-2); max-width: 62ch; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.pg .crumbs a { color: var(--purple-600); }
.crumbs.light { color: var(--muted); }
.pg .crumbs.light a { color: var(--muted); }
.route-svg { width: 100%; height: auto; display: block; }
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--on-dark-line); }
.stat-strip > div { padding: 22px 24px 0 0; display: flex; flex-direction: column; gap: 4px; }
.stat-strip b { font-family: var(--f-display); font-size: 30px; color: var(--on-dark); font-weight: 700; letter-spacing: -0.01em; }
.stat-strip span { font-size: 13.5px; color: var(--on-dark-2); }
.ticker { background: var(--ember-600); color: #FFFFFF; font-family: var(--f-body); font-weight: 600; font-size: 13.5px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.ticker-in { display: flex; gap: 40px; padding: 12px 0; }
.ticker-in span { display: inline-flex; gap: 12px; align-items: center; }

/* Portal shell */
.app { display: flex; flex-wrap: wrap; min-height: 100%; background: var(--mist); align-items: stretch; }
.side { flex: 1 1 260px; max-width: 272px; padding: 22px 16px; display: flex; flex-direction: column; gap: 22px; background: var(--paper); border-right: 1px solid var(--line); }
.side-dark { background: var(--plum-950); border-right: 0; color: var(--on-dark-2); }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav .grp { font: 700 11px/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 14px 12px 8px; }
.side-dark .side-nav .grp { color: var(--on-dark-2); opacity: 0.8; }
.pg .side-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-weight: 650; font-size: 14.5px; color: var(--ink-2); }
.pg .side-nav a:hover { background: var(--mist); color: var(--plum-900); }
.pg .side-nav a.on { background: var(--lilac-100); color: var(--plum-900); font-weight: 750; }
.pg .side-nav a .ct { margin-left: auto; font: 700 11px/1 var(--f-body); padding: 4px 7px; border-radius: 999px; background: var(--ember-600); color: #FFFFFF; }
.pg .side-dark .side-nav a { color: var(--on-dark-2); }
.pg .side-dark .side-nav a:hover { background: rgba(255,255,255,0.06); color: #FFFFFF; }
.pg .side-dark .side-nav a.on { background: rgba(255,255,255,0.12); color: #FFFFFF; }
.side-card { margin-top: auto; padding: 14px; border-radius: 14px; background: var(--mist); display: flex; flex-direction: column; gap: 10px; }
.side-dark .side-card { background: rgba(255,255,255,0.06); }
.mainx { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; }
.topnav { display: flex; align-items: center; gap: 14px; padding: 14px 32px; background: var(--paper); border-bottom: 1px solid var(--line); flex-wrap: wrap; min-height: 72px; }
.topnav .search { flex: 1 1 280px; max-width: 520px; }
.topnav .input { min-height: 44px; padding-block: 10px; background: var(--mist); border-color: var(--line); }
.who-chip { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper); }
.who-chip b { font-size: 14px; display: block; line-height: 1.2; }
.who-chip span:not(.av) { font-size: 12px; color: var(--muted); display: block; }
.content { padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 24px; }
.page-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-title .h2 { font-size: 32px; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kpi .k { font-size: 13px; color: var(--muted); font-weight: 650; display: flex; align-items: center; gap: 8px; }
.kpi .v { font-family: var(--f-body); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; color: var(--plum-900); font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .d { font-size: 12.5px; font-weight: 700; color: var(--ok); }
.kpi .d.down { color: var(--bad); }
.kpi .d span { color: var(--muted); font-weight: 600; }
.kpi.dark { background: var(--plum-950); border-color: var(--plum-950); }
.kpi.dark .v { color: var(--on-dark); }
.kpi.dark .k { color: var(--on-dark-2); }
.spark { height: 34px; display: flex; align-items: flex-end; gap: 3px; }
.spark i { flex: 1; background: var(--lilac-100); border-radius: 3px 3px 0 0; display: block; }
.spark i.on { background: var(--purple-600); }

/* Charts built from boxes, drawn to scale */
.bars { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
.bars-y { display: flex; flex-direction: column; justify-content: space-between; font: 600 11px/1 var(--f-body); color: var(--muted); text-align: right; height: 220px; }
.bars-plot { position: relative; height: 220px; border-bottom: 1px solid var(--line-2); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; align-items: end; background: repeating-linear-gradient(180deg, transparent 0 54px, var(--line) 54px 55px); }
.bars-plot .bar { position: relative; border-radius: 8px 8px 2px 2px; background: var(--purple-400); }
.bars-plot .bar.hi { background: var(--purple-600); }
.bars-plot .bar.best { background: var(--plum-900); }
.bars-plot .bar b { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font: 700 11px/1 var(--f-body); color: var(--ink-2); white-space: nowrap; }
.bars-x { grid-column: 2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; font: 600 11.5px/1 var(--f-body); color: var(--muted); text-align: center; }
.stackbar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; }
.stackbar i { display: block; height: 100%; }
.hbar { display: grid; grid-template-columns: 120px minmax(0, 1fr) 70px; gap: 12px; align-items: center; font-size: 14px; }
.hbar .track { height: 10px; background: var(--mist); border-radius: 999px; overflow: hidden; }
.hbar .track i { display: block; height: 100%; background: var(--purple-600); border-radius: 999px; }
.hbar .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.donut { width: 180px; height: 180px; border-radius: 50%; position: relative; flex: none; }
.donut::after { content: ""; position: absolute; top: 28px; right: 28px; bottom: 28px; left: 28px; border-radius: 50%; background: var(--paper); }
.donut-c { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; z-index: 1; text-align: center; }
.legend { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: block; }
.legend b { font-variant-numeric: tabular-nums; }
.age { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.age > div { border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.age .a1 { background: #FFF8E8; }
.age .a2 { background: #FFEDE0; }
.age .a3 { background: #FFE4E9; }

/* Kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 6px; }
.kcol { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kcol-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 6px; }
.kcard { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--paper); font-size: 14px; }
.kcard.hot { border-color: var(--purple-400); }

/* Phone */
.phone { position: relative; overflow: hidden; background: var(--paper); display: flex; flex-direction: column; }
.ph-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--paper); }
.ph-top .brand-mark { width: 28px; height: 34px; }
.ph-top .brand-word { font-size: 14px; }
.ph-top .brand-word small { font-size: 8px; }
.ph-body { padding: 18px; display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; }
.mbar { display: grid; grid-template-columns: 1fr 1fr 56px; gap: 8px; padding: 10px 12px 14px; background: var(--paper); border-top: 1px solid var(--line); }
.mbar .btn { min-height: 50px; padding: 10px; font-size: 14.5px; }
.tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 8px 6px 14px; background: var(--paper); border-top: 1px solid var(--line); }
.phone .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--muted); padding: 6px 0; }
.phone .tabbar a.on { color: var(--plum-900); }
.phone .tabbar a.on .i { color: var(--ember-600); }
.tabbar .fab { width: 46px; height: 46px; border-radius: 14px; background: var(--ember-600); color: #FFFFFF; display: grid; place-items: center; margin-top: -4px; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--paper); border-radius: 26px 26px 0 0; padding: 12px 18px 28px; box-shadow: 0 -20px 60px rgba(28,6,35,0.35); display: flex; flex-direction: column; gap: 14px; }
.grabber { width: 44px; height: 5px; border-radius: 999px; background: var(--line-2); margin: 0 auto 6px; }
.scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(28,6,35,0.55); }
.wa-fab { position: absolute; right: 16px; bottom: 92px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #FFFFFF; display: grid; place-items: center; box-shadow: var(--sh-2); }
.wa-fab .i { width: 28px; height: 28px; }

/* Misc */
.qr { width: 168px; height: 168px; background: #FFFFFF; padding: 10px; border-radius: 14px; border: 1px solid var(--line); display: grid; grid-template-columns: repeat(21, 1fr); grid-template-rows: repeat(21, 1fr); }
.qr i { display: block; background: var(--plum-950); }
.qr-img { width: 168px; height: 168px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--line); padding: 12px; }
.chat { background: #EFE7DD; border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-top { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 750; color: #111B21; }
.chat-top small { display: block; font-weight: 500; color: #667781; font-size: 12px; }
.bubble { align-self: flex-end; max-width: 92%; background: #D9FDD3; color: #111B21; border-radius: 12px 4px 12px 12px; padding: 10px 12px 6px; font-size: 14px; line-height: 1.45; white-space: pre-line; box-shadow: 0 1px 1px rgba(0,0,0,0.08); }
.bubble.in { align-self: flex-start; background: #FFFFFF; border-radius: 4px 12px 12px 12px; }
.bubble .t { display: block; text-align: right; font-size: 11px; color: #667781; margin-top: 2px; }
.scale-read { position: absolute; left: 12px; bottom: 12px; background: #0E1A12; color: #7CFF9B; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 22px; padding: 6px 10px; border-radius: 8px; letter-spacing: 0.06em; box-shadow: inset 0 0 0 2px #1F3A26; }
.label-card { width: 100%; background: #FFFFFF; border: 2px solid var(--ink); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; font-family: var(--f-body); font-weight: 600; color: var(--ink); }
.label-card .big { font-family: var(--f-body); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -0.01em; }
.barcode { height: 46px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px); }
.faq { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-weight: 750; }
.faq-a { padding: 0 20px 20px; color: var(--ink-2); font-size: 15px; }
.rating { display: inline-flex; gap: 2px; color: var(--ember-500); }
.rating .i { width: 16px; height: 16px; }
.quote-mark { font-family: var(--f-display); font-size: 72px; line-height: 0.6; color: var(--purple-200); font-weight: 700; }
.toast { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--plum-950); color: var(--on-dark); box-shadow: var(--sh-3); font-size: 14.5px; }
.toast .i { color: var(--ember-500); }
.drop { border: 2px dashed var(--purple-200); border-radius: var(--r-lg); background: var(--lilac-50); padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.swatch { height: 96px; border-radius: 14px; display: flex; align-items: flex-end; justify-content: space-between; padding: 10px 12px; font: 600 12px/1 var(--f-body); }
.ds-label { font: 700 11px/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.matrix td.yes, .matrix td.no, .matrix td.part { text-align: center; }
.mark-yes { color: var(--ok); }
.mark-no { color: var(--line-2); }
.mark-part { color: var(--warn); }
.mapbox { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--plum-950); min-height: 260px; }
.legend-line { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.legend-line span { display: inline-flex; gap: 6px; align-items: center; }
.legend-line i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Responsive: every page still works at phone width */
@media (max-width: 1100px) {
  .ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g5, .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aside-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split-r, .aside-left { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding-block: 60px; }
  .side { max-width: none; flex-basis: 100%; }
  .content, .topnav { padding-inline: 18px; }
}
@media (max-width: 600px) {
  .wrap, .wrap-sm { padding-inline: 18px; }
  .g2, .g3, .g4, .g5, .g6, .ft-grid { grid-template-columns: minmax(0, 1fr); }
  .weights, .tag-foot, .age { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav { order: 3; flex-basis: 100%; }
}

/* Phone menu: below 900px the full header folds behind a menu button; tap opens the nav as a list */
.sh-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sh-burger { display: none; cursor: pointer; }
.sh-burger .i-x { display: none; }
@media (max-width: 900px) {
  .sh-full .sh-in { gap: 10px; min-height: 64px; }
  .sh-full .brand { margin-right: auto; }
  .sh-full .sh-burger { display: inline-grid; order: 2; }
  .sh-full .nav { display: none; }
  .sh-full .sh-act { display: contents; }
  .sh-full .sh-act > * { display: none; }
  .sh-full .sh-act > .btn-ember { display: inline-flex; order: 1; }
  .sh-full .sh-toggle:checked ~ .nav { display: flex; order: 3; flex-basis: 100%; flex-direction: column; gap: 0; margin-top: 6px; border-top: 1px solid var(--line); }
  .pg .sh-full .sh-toggle:checked ~ .nav a { padding: 15px 2px; border-radius: 0; font-size: 17px; background: none; border-bottom: 1px solid var(--line); }
  .pg .sh-full .sh-toggle:checked ~ .nav a.on { color: var(--purple-600); }
  .sh-full .sh-toggle:checked ~ .sh-act > .btn-ghost, .pg .sh-full .sh-toggle:checked ~ .sh-act > .signin { display: inline-flex; order: 4; flex: 1 1 calc(50% - 5px); justify-content: center; align-items: center; min-height: 46px; margin-bottom: 12px; }
  .pg .sh-full .sh-toggle:checked ~ .sh-act > .signin { border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); }
  .sh-full .sh-toggle:checked ~ .sh-burger .i-menu { display: none; }
  .sh-full .sh-toggle:checked ~ .sh-burger .i-x { display: block; }
  .sh-full .sh-toggle:focus-visible ~ .sh-burger { outline: 2px solid var(--purple-600); outline-offset: 2px; }
  .sh-full .sh-toggle:checked ~ .nav, .sh-full .sh-toggle:checked ~ .sh-act > .btn-ghost, .sh-full .sh-toggle:checked ~ .sh-act > .signin { animation: menu-open 240ms cubic-bezier(0, 0, .2, 1) both; }
}
@keyframes menu-open { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 420px) {
  .sh-full .brand-word { font-size: 16px; }
  .sh-full .brand-word small { font-size: 8px; }
  .sh-full .sh-act > .btn-ember { padding-inline: 12px; }
}

/* Dashboard menu: below 900px the sidebar becomes a top bar with a menu button */
.side-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.side-burger { display: none; cursor: pointer; }
.side-burger .i-x { display: none; }
@media (max-width: 900px) {
  .side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side > .brand { margin-right: auto; }
  .side .side-burger { display: inline-grid; }
  .side > :not(.brand):not(.side-toggle):not(.side-burger) { display: none; }
  .side .side-toggle:checked ~ :not(.side-burger) { display: flex; flex-basis: 100%; }
  .side .side-toggle:checked ~ .side-nav { flex-direction: column; }
  .side .side-toggle:checked ~ .side-card { margin-top: 0; }
  .side .side-toggle:checked ~ .side-burger .i-menu { display: none; }
  .side .side-toggle:checked ~ .side-burger .i-x { display: block; }
  .side .side-toggle:focus-visible ~ .side-burger { outline: 2px solid var(--purple-600); outline-offset: 2px; }
  .side .side-toggle:checked ~ :not(.side-burger) { animation: menu-open 240ms cubic-bezier(0, 0, .2, 1) both; }
  [style*="grid-template-columns: minmax(0, 1fr) 3"], [style*="grid-template-columns: minmax(0, 1fr) 4"],
  [style*="grid-template-columns: 360px minmax"], [style*="grid-template-columns: 260px minmax"], [style*="grid-template-columns: 220px minmax"], .aside-layout[style] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 600px) {
  [style*="grid-template-columns: 200px minmax(0, 1fr) 80px"] { grid-template-columns: 96px minmax(0, 1fr) 64px !important; }
  .row:has(> .donut) { flex-wrap: wrap !important; }
  .topbar-in > span:first-child { display: none; }
  .pg .topbar a { display: block; }
  .topbar .dot-live { display: inline-block; vertical-align: middle; margin-right: 8px; }
  .topbar { font-size: 12px; }
}

/* Sign-in split: form beside a photo on desktop, form only on a phone */
.auth-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100svh; align-items: start; }
.auth-form { padding: 32px 64px; justify-content: space-between; min-height: 100vh; min-height: 100svh; }
.auth-photo { border-radius: 0; height: 100vh; height: 100svh; min-height: 0; position: sticky; top: 0; }
.auth-form { justify-content: flex-start; gap: 24px; }
.auth-form > :nth-child(2) { margin-block: auto; gap: 22px; }
@media (min-width: 901px) and (max-height: 820px) { .auth-form > :nth-child(2) { gap: 16px; } .auth-form { padding-block: 24px; } }
@media (max-width: 900px) {
  .auth-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth-form { padding: 20px 18px 32px; gap: 36px; min-height: 0; }
  .auth-photo { display: none; }
}

/* Link-wrapped cards keep body text colour */
.pg a.choice, .phone a.choice, .pg a.card, .phone a.card, .pg a.route-card, .pg a.kcard { color: var(--ink); }
.route-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.route-card .ph { border-radius: 0; height: 150px; }
.route-card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.hero-photo { position: relative; border-radius: 22px; overflow: hidden; min-height: 560px; background: var(--plum-800); }
.hero-photo > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after { content: none; }
.float-tl { position: absolute; z-index: 2; top: 18px; left: 18px; }
.float-bl { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; }
.mini-card { background: rgba(255,255,255,0.96); color: var(--ink); border-radius: 14px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; box-shadow: var(--sh-2); font-size: 14px; }
.feature-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-block: 28px 36px; border-top: 1px solid var(--line); }
.feature-strip > div { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: 14px; }
.feature-strip b { display: block; color: var(--ink); font-size: 15px; font-weight: 700; }
.feature-strip .i { color: var(--ember-600); margin-top: 2px; }
.check-list { display: flex; flex-direction: column; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list li > .i { color: var(--ember-600); margin-top: 2px; }
@media (max-width: 900px) { .feature-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-photo { min-height: 380px; } }

/* Inline chips never stretch inside column stacks */
.stack > .badge, .stack-sm > .badge, .stack-xs > .badge, .stack-lg > .badge, .stack > .st, .stack-sm > .st, .stack-xs > .st, .stack > .pill-badge, .stack-sm > .pill-badge, .stack-lg > .pill-badge, .stack > .verdict, .stack-sm > .verdict { align-self: flex-start; }
.pg a.card-flat, .phone a.card-flat { color: var(--ink); }
.phone .display em { font-style: normal; color: var(--ember-600); }
.table td:first-child, .table th:first-child { white-space: nowrap; }

/* Interaction polish */
.btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .12s ease, box-shadow .2s ease; }
.btn:active { transform: translateY(1px); }
.pg a.card, .pg a.route-card, .pg a.kcard, .phone a.card, .pg a.choice, .phone a.choice { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pg a.card:hover, .pg a.route-card:hover, .phone a.card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.pg a.kcard:hover, .pg a.choice:hover { border-color: var(--purple-400); }
.pg .nav a, .pg .side-nav a, .tabs > a, .pill { transition: background-color .15s ease, color .15s ease; }
@media (prefers-reduced-motion: reduce) { .btn, .pg a.card, .pg a.route-card, .pg a.kcard, .phone a.card { transition: none; } .sh-full .nav, .sh-full .sh-act > *, .side > * { animation: none !important; } }

/* Phone layout: shared dashboard and list patterns at 600px and below */
@media (max-width: 600px) {
  .content { padding: 20px 18px 40px; gap: 20px; }
  .topnav { padding: 10px 18px; gap: 10px; min-height: 0; flex-wrap: nowrap; }
  .topnav .search { flex: 1 1 auto; min-width: 0; max-width: none; }
  .topnav > .grow, .topnav > .kbd, .topnav > a.row { display: none; }
  .topnav .who-chip { padding: 2px; }
  .topnav .who-chip > span:not(.av) { display: none; }
  .tabs, .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar, .pills::-webkit-scrollbar { display: none; }
  .tabs > *, .pills > * { flex: none; }
  .tabs > a, .tabs > span { margin-bottom: 0; }
  .table th, .table td { white-space: nowrap; }
  .g3:has(> .kpi), .g4:has(> .kpi), .g5:has(> .kpi), .g6:has(> .kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpi { padding: 14px; }
  .kpi .v { font-size: 22px; }
  .hsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .hsteps[style*="--n: 4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl li { grid-template-columns: 28px minmax(0, 1fr); row-gap: 2px; }
  .tl .when { grid-column: 2; padding-top: 0; }
  .tl .when:empty { display: none; }
  .weights > .win { grid-column: 1 / -1; }
  .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .ft-grid > :first-child { grid-column: 1 / -1; }
  .card-pad-lg { padding: 22px 20px; }
  .card-pad { padding: 20px 18px; }
  .section { padding-block: 48px; }
  .lead { font-size: 17px; }
}
@media (max-width: 420px) { .feature-strip { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* Phone bottom bar: the main places one tap away, below 900px (hidden on desktop) */
.mnav { display: none; }
@media (max-width: 900px) {
  .mnav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--paper); border-top: 1px solid var(--line); padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); }
  .pg .mnav a { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 6px 0; min-height: 50px; font-size: 11px; font-weight: 700; line-height: 1.1; color: var(--muted); text-align: center; }
  .pg .mnav a.on { color: var(--plum-900); }
  .pg .mnav a.on .i { color: var(--ember-600); }
  .mnav .fab { width: 40px; height: 40px; border-radius: 12px; background: var(--ember-600); color: #FFFFFF; display: grid; place-items: center; margin-top: -10px; }
  .pg .mnav a.on .fab .i { color: #FFFFFF; }
  body:has(.mnav) { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .pg:has(.mnav) .sh-full .sh-act > .btn-ember { display: none; }
  .side { position: sticky; top: 0; z-index: 30; }
  .side:has(.side-toggle:checked) { max-height: 100dvh; overflow-y: auto; }
}

/* Small shared fixes from the polish pass */
.pg, .phone { text-wrap: pretty; }
.phone a.btn-danger, .pg a.btn-danger { color: var(--bad); }
.phone .tabbar a.on .fab .i, .pg .mnav a.on .fab .i { color: #FFFFFF; }
.table .who > span:not(.av) { font-size: inherit; color: inherit; }
.nowrap { white-space: nowrap; }

/* Home hero slider: five photos crossfade every 6 s (CSS only), copy on a dark frosted-glass panel, no gradients */
.hx { position: relative; }
.hx-stage { position: relative; height: 640px; overflow: hidden; background: var(--plum-950); }
.hx-slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; opacity: 0; animation: hx-fade 30s infinite both; }
.hx-slide picture, .hx-slide img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; }
.hx-slide img { object-fit: cover; animation: hx-zoom 30s infinite both; animation-delay: inherit; }
.hx-slide:nth-child(1) { animation-delay: -1s; } .hx-slide:nth-child(2) { animation-delay: 5s; } .hx-slide:nth-child(3) { animation-delay: 11s; } .hx-slide:nth-child(4) { animation-delay: 17s; } .hx-slide:nth-child(5) { animation-delay: 23s; }
.hx-copy { position: absolute; z-index: 2; left: max(16px, calc((100% - 1240px) / 2 + 32px)); top: 50%; transform: translateY(-58%); width: min(560px, calc(100% - 32px)); padding: 34px 36px; border-radius: 24px; background: rgba(16, 8, 20, 0.44); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(255, 255, 255, 0.16); color: #FFFFFF; display: flex; flex-direction: column; gap: 16px; }
.hx-copy > * { animation: hx-rise 30s infinite both; animation-delay: inherit; }
.hx-slide:nth-child(n) .hx-copy { animation-delay: inherit; }
.hx-kicker { font: 700 12px/1 var(--f-body); letter-spacing: 0.16em; text-transform: uppercase; color: #EBD3F0; }
.hx-title { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 56px; line-height: 1.02; letter-spacing: -0.03em; color: #FFFFFF; text-wrap: balance; }
.hx-title em { font-style: normal; color: #EBD3F0; }
.hx-sub { margin: 0; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); max-width: 42ch; }
.hx-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.pg a.btn-glass, .phone a.btn-glass { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; border: 1.5px solid rgba(255, 255, 255, 0.5); }
.pg a.btn-glass:hover, .phone a.btn-glass:hover { background: rgba(255, 255, 255, 0.22); }
.hx-dots { position: absolute; z-index: 3; left: 50%; bottom: 84px; transform: translateX(-50%); display: flex; gap: 6px; padding: 8px 10px; border-radius: 999px; background: rgba(16, 8, 20, 0.34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hx-dots i { position: relative; width: 26px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.hx-dots i::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #FFFFFF; transform-origin: left; animation: hx-dot 30s infinite linear both; }
.hx-dots i:nth-child(1)::after { animation-delay: -1s; } .hx-dots i:nth-child(2)::after { animation-delay: 5s; } .hx-dots i:nth-child(3)::after { animation-delay: 11s; } .hx-dots i:nth-child(4)::after { animation-delay: 17s; } .hx-dots i:nth-child(5)::after { animation-delay: 23s; }
.qbar { position: relative; z-index: 4; margin-top: -60px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 18px 50px rgba(28, 6, 35, 0.14); padding: 18px 20px; display: grid; grid-template-columns: 1.1fr 1.4fr 0.8fr 1fr auto; gap: 14px; align-items: end; }
.qbar .qbar-go { display: flex; gap: 10px; }
.qbar-note { grid-column: 1 / -1; margin: -2px 0 0; }
@keyframes hx-fade { 0% { opacity: 0; } 3% { opacity: 1; } 20% { opacity: 1; } 23.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hx-zoom { 0% { transform: scale(1.08); } 23.5% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes hx-rise { 0% { opacity: 0; transform: translateY(14px); } 5% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes hx-dot { 0% { transform: scaleX(0); } 20% { transform: scaleX(1); } 20.1%, 100% { transform: scaleX(0); } }
@media (max-width: 1100px) {
  .hx-stage { height: 580px; }
  .hx-title { font-size: 46px; }
  .qbar { grid-template-columns: 1fr 1fr; }
  .qbar .qbar-go { grid-column: 1 / -1; }
  .qbar .qbar-go .btn-ember { flex: 1 1 0; }
}
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) { .hx-stage { height: 700px; } }
@media (max-width: 700px) {
  .hx-stage { height: min(66svh, 580px); min-height: 500px; }
  .hx-copy { left: 16px; right: 16px; width: auto; top: auto; bottom: 64px; transform: none; padding: 18px 18px; gap: 10px; border-radius: 18px; }
  .hx-title { font-size: 28px; }
  .hx-sub { font-size: 14.5px; }
  .hx-cta .btn { flex: 1 1 0; padding-inline: 14px; min-height: 44px; padding-block: 10px; }
  .qbar .qbar-go .btn-ember { flex: 1 1 0; }
  .hx-dots { bottom: 26px; }
  .qbar { margin-top: -16px; grid-template-columns: 1fr 1fr; padding: 16px; border-radius: 20px; gap: 12px; }
  .qbar .q-from, .qbar .q-to { grid-column: 1 / -1; }
}

.phone .hx-stage { height: min(78svh, 720px); min-height: 600px; }
.phone .hx-copy { left: 16px; right: 16px; width: auto; top: auto; bottom: 92px; transform: none; padding: 22px 20px; gap: 12px; border-radius: 20px; }
.phone .hx-title { font-size: 34px; }
.phone .hx-sub { font-size: 15.5px; }
.phone .hx-cta .btn { flex: 1 1 0; padding-inline: 14px; min-height: 44px; padding-block: 10px; }
.phone .hx-dots { bottom: 52px; }
.phone .qbar { margin-top: -36px; grid-template-columns: 1fr 1fr; padding: 16px; border-radius: 20px; gap: 12px; }
.phone .qbar .q-from, .phone .qbar .q-to { grid-column: 1 / -1; }
.phone .hx-stage { height: 540px; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  .hx-slide, .hx-slide img, .hx-copy > *, .hx-dots i::after { animation: none; }
  .hx-slide:nth-child(1) { opacity: 1; }
  .hx-dots i:nth-child(1)::after { transform: none; }
  .hx-dots i::after { transform: scaleX(0); }
}