/* ============================================================
   SECTION MANAGER — marketing site
   Single self-contained file. Hash-routed views.
   Palette taken from the add-on itself:
     primaryColor   #235280
     secondaryColor #EBB522
     level ramp     #235280 → #F3F8FB (Heading 1 → 6)
   Edit CONFIG at the top of the <script> block for business
   details, prices, links and endpoints.
   ============================================================ */

:root{
  /* --- the add-on's own colours --- */
  --brand:      #235280;
  --brand-dk:   #1A3F63;
  --brand-deep: #14263B;
  --gold:       #EBB522;
  --gold-dk:    #D6A11D;
  --gold-ink:   #3D2E00;
  --ink:        #1B2A3D;
  --sidebar:    #DCE7F0;

  /* Heading and button colours, exactly as the sidebar draws them.
     These are the slots the add-on lets people customise, so the demo
     on this page overwrites the --c-* values at runtime and everything
     downstream follows. */
  --c-h-title: #14263B;
  --c-h-1: #235280;
  --c-h-2: #4C7FAC;
  --c-h-3: #8CB4D6;
  --c-h-4: #C3DAEC;
  --c-h-5: #E1EDF6;
  --c-h-6: #F3F8FB;
  --c-h-1-text: #FFFFFF;
  --c-h-2-text: #FFFFFF;
  --c-h-3-text: #FFFFFF;
  --c-h-4-text: #14263B;
  --c-h-5-text: #14263B;
  --c-h-6-text: #14263B;
  --c-h-1-border: #1A3F63;
  --c-h-2-border: #3D6994;
  --c-h-3-border: #6D97B8;
  --c-h-4-border: #A9C3D8;
  --c-h-5-border: #C6D5E0;
  --c-h-6-border: #DCE7F0;

  --c-b-refresh: #1E824C;
  --c-b-clear:   #EBB522;
  --c-b-level:   #235280;
  --c-b-delete:  #C0392B;
  --c-b-insert:  #1D9E75;
  --c-b-refresh-text: #FFFFFF;
  --c-b-clear-text:   #3D2E00;
  --c-b-level-text:   #FFFFFF;
  --c-b-delete-text:  #FFFFFF;
  --c-b-insert-text:  #FFFFFF;

  /* aliases so existing rules follow the customisable slots */
  --lv1: var(--c-h-1);
  --lv2: var(--c-h-2);
  --lv3: var(--c-h-3);
  --lv4: var(--c-h-4);
  --lv5: var(--c-h-5);
  --lv6: var(--c-h-6);
  --lv1-edge: var(--c-h-1-border);
  --lv2-edge: var(--c-h-2-border);
  --lv3-edge: var(--c-h-3-border);
  --lv4-edge: var(--c-h-4-border);

  /* semantic, also from the add-on */
  --danger:  #C0392B;
  --danger-dk: #A8291C;
  --go:      #1D9E75;
  --go-dk:   #17805F;
  --refresh: #1E824C;

  /* neutrals, biased toward the brand blue */
  --paper:   #FFFFFF;
  --mist:    #F2F6FA;
  --line:    #D5E1EC;
  --line-dk: #24384F;
  --muted:   #5D7189;

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --docFont: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --uiFont: "Google Sans", "IBM Plex Sans", Arial, sans-serif;

  --step--1: clamp(0.80rem, 0.78rem + 0.1vw, 0.85rem);
  --step-0:  clamp(0.98rem, 0.95rem + 0.15vw, 1.06rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.33rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.70vw, 1.85rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.30vw, 2.60rem);
  --step-4:  clamp(2.05rem, 1.62rem + 1.90vw, 3.10rem);

  --wrap: 1140px;
  --radius: 10px;
  --radius-lg: 16px;

  /* --- surfaces and states, derived from the two brand colours ---
     Everything above is the add-on's own palette and is not to be
     changed; everything here is site chrome only. */
  --tint:      #EEF4F9;   /* resting interactive surface */
  --tint-2:    #E3EDF5;   /* hover / selected surface   */
  --tint-edge: #C6D9E8;
  --ink-soft:  #3A506B;
  --paper-2:   #FAFCFD;

  /* Free vs Pro get their own accents so the comparison reads at a glance */
  --free:      #1E824C;
  --free-tint: #E7F4EC;
  --pro:       #8A6510;   /* gold, darkened until it is legible as text */
  --pro-tint:  #FDF4DC;
  --pro-edge:  #EBD9A4;

  --shadow-sm: 0 1px 2px rgba(20,38,59,.06), 0 3px 10px -4px rgba(20,38,59,.12);
  --shadow-md: 0 2px 4px rgba(20,38,59,.06), 0 14px 32px -14px rgba(20,38,59,.30);
}

*,*::before,*::after{ box-sizing:border-box; }
/* Safari on iPhone inflates text in a rotated or narrow layout unless
   you tell it not to, which breaks a measured type scale. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--step-0); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ margin:0; line-height:1.15; text-wrap:balance; font-weight:600; letter-spacing:-0.02em; }
h1{ font-size:var(--step-4); font-weight:700; letter-spacing:-0.035em; line-height:1.08; text-wrap:balance; }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-1); }
p{ margin:0; }
a{ color:var(--brand); }
a:hover{ text-decoration:underline; }
img{ max-width:100%; }
[hidden]{ display:none !important; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.band{ padding-block:clamp(56px,7vw,104px); }
.band--mist{ background:var(--mist); }
.band--tight{ padding-block:clamp(40px,4.5vw,64px); }
.stack{ display:flex; flex-direction:column; }
.gap-8{gap:8px} .gap-12{gap:12px} .gap-16{gap:16px} .gap-20{gap:20px} .gap-24{gap:24px} .gap-32{gap:32px} .gap-40{gap:40px}
.centered{ text-align:center; margin-inline:auto; }

.eyebrow{ font-family:var(--mono); font-size:var(--step--1); font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--brand); }
.eyebrow--gold{ color:var(--gold); }
.lede{ font-size:var(--step-1); color:var(--muted); max-width:62ch; line-height:1.6; }
.muted{ color:var(--muted); }
.small{ font-size:var(--step--1); }
.tick{ flex:none; width:14px; height:14px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:var(--step-0); font-weight:700;
  padding:13px 22px; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap; line-height:1.2;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn:hover{ text-decoration:none; }
.btn--primary{ background:var(--brand); color:#fff; }
.btn--primary:hover{ background:var(--brand-dk); color:#fff; }
.btn--gold{ background:var(--gold); color:var(--gold-ink); }
.btn--gold:hover{ background:var(--gold-dk); color:var(--gold-ink); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--muted); background:var(--mist); }
.btn--onDark{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.26); }
.btn--onDark:hover{ background:rgba(255,255,255,.16); color:#fff; }
.btn--block{ width:100%; }
.btn[disabled],.btn.is-disabled{ opacity:.55; cursor:not-allowed; }

/* ---------- header ---------- */
.masthead{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:60;
  /* An opaque background, deliberately. This used to be a translucent
     white over backdrop-filter:saturate(180%) blur(12px) — which meant
     the browser re-blurred the strip of page behind the header on every
     scroll frame, at device pixel density. That one declaration was the
     largest single cost on the page. Everything behind the header is
     white or --mist anyway, so the frosted version and this one are
     almost indistinguishable. */
  background:#fff;
  border-bottom:1px solid var(--line);
}
.masthead__inner{ display:flex; align-items:center; gap:28px; height:66px; }
.brand{ display:flex; align-items:center; gap:11px; color:var(--ink); font-weight:700; letter-spacing:-0.02em; font-size:1.06rem; text-decoration:none; }
.brand:hover{ text-decoration:none; }
/* the add-on's own SM badge */
.smBadge{ flex:none; width:28px; height:28px; display:block; }

/* The hero shot is a picture of the product as it ships. The live demo lower
   down writes --c-h-* onto :root and --lv* alias those, so without this lock
   the screenshot repainted itself whenever anyone touched the colour picker. */
.shot{
  --brand:#235280; --brand-deep:#14263B; --ink:#1B2A3D;
  --gold:#EBB522; --gold-ink:#3D2E00; --sidebar:#DCE7F0;
  --lv1:#235280; --lv2:#4C7FAC; --lv3:#8CB4D6; --lv4:#C3DAEC;
  --lv1-edge:#1A3F63; --lv2-edge:#3D6994; --lv3-edge:#6D97B8; --lv4-edge:#A9C3D8;
}

/* the mark riding the top-right corner of the hero shot */
.shotWrap{ position:relative; }
.shotBadge{
  position:absolute; top:-28px; right:-28px; z-index:3;
  width:104px; height:104px; border-radius:26px;
  background:var(--gold);
  display:grid; place-items:center;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.6);
  animation:badgeIn .7s cubic-bezier(.22,1,.36,1) both .5s;
}
.shotBadge svg{ width:78px; height:78px; display:block; }
@keyframes badgeIn{ from{ opacity:0; transform:scale(.7) rotate(-8deg) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .shotBadge{ animation:none } }
.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav a{ color:var(--ink); font-weight:500; font-size:0.96rem; padding:8px 13px; border-radius:7px; text-decoration:none; transition:background .15s ease, color .15s ease; }
.nav a:hover{ background:var(--mist); text-decoration:none; }
.nav a[aria-current="page"]{ color:var(--brand); background:#E4EEF6; }
/* .nav a is more specific than .btn--primary — restate or the CTA goes dark */
.nav a.btn--primary{ color:#fff; background:var(--brand); }
.nav a.btn--primary:hover{ color:#fff; background:var(--brand-dk); }
.masthead .btn{ padding:10px 18px; font-size:0.95rem; }
.navToggle{ display:none; margin-left:auto; background:transparent; border:1px solid var(--line); border-radius:8px; padding:9px 11px; cursor:pointer; }
.navToggle span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; }
.navToggle span + span{ margin-top:4px; }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--brand-deep); color:#fff;
  padding-block:clamp(56px,6.5vw,92px); border-bottom:1px solid var(--line-dk);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(140,180,214,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140,180,214,.08) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 90% 70% at 25% 30%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 25% 30%, #000 30%, transparent 78%);
}
.hero__inner{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,5vw,60px); align-items:center; }
.hero h1{ color:#fff; }
.hero .lede{ color:#B4C6D8; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.hero__trust{ display:flex; flex-wrap:wrap; gap:8px 22px; color:#8FA6BE; font-size:var(--step--1); }
.hero__trust span{ display:inline-flex; align-items:center; gap:7px; }

/* ---------- static product shot ---------- */
.shot{
  position:relative; pointer-events:none; user-select:none;
  border-radius:14px; overflow:hidden; background:#fff;
  border:1px solid rgba(140,180,214,.35);
  box-shadow:0 34px 70px -26px rgba(0,0,0,.8);
  font-size:11px; line-height:1.5;
}
.shot__bar{ display:flex; align-items:center; gap:8px; padding:9px 12px; background:#F1F3F4; border-bottom:1px solid #E1E4E8; }
.shot__docIcon{ flex:none; width:15px; height:19px; border-radius:2px; background:var(--brand); }
.shot__title{ font-family:var(--docFont); font-size:12px; color:#3C4043; }
.shot__menus{ display:flex; gap:11px; padding:5px 12px 7px 39px; background:#F1F3F4; font-family:var(--docFont); font-size:10.5px; color:#5F6368; }
.shot__tools{ display:flex; align-items:center; gap:7px; padding:6px 12px; background:#EDF2FA; border-bottom:1px solid #E1E4E8; }
.shot__tool{ width:13px; height:13px; border-radius:3px; background:#C6CDD6; }
.shot__tool.wide{ width:46px; border-radius:4px; background:#D7DDE6; }
.shot__body{ display:grid; grid-template-columns:minmax(0,1fr) 186px; background:#F8F9FA; min-height:280px; }
.shot__page{ margin:14px 10px 0 14px; background:#fff; border:1px solid #E6E9ED; border-radius:2px; padding:18px 20px; font-family:var(--docFont); }
.shot__h1{ font-size:15px; color:var(--brand); margin-bottom:6px; }
.shot__h2{ font-size:12.5px; font-weight:700; color:var(--lv2); margin:11px 0 5px; }
.shot__p{ height:5px; border-radius:3px; background:#E3E6EA; margin-bottom:5px; }
.shot__panel{ background:var(--sidebar); border-left:1px solid #C6D5E0; padding:9px 9px 11px; display:flex; flex-direction:column; gap:6px; }
.shot__panelHead{ display:flex; align-items:center; gap:7px; }
.shot__panelHead b{ font-size:11px; font-weight:700; color:var(--ink); }
.shot__smBadge{ flex:none; width:24px; height:24px; display:block; }
.shot__tabs{ display:flex; gap:3px; padding:2px; background:rgba(27,42,61,.06); border-radius:7px; }
.shot__tabs span{ flex:1; text-align:center; padding:3px 2px; font-size:9px; font-weight:700; color:rgba(27,42,61,.55); border-radius:5px; }
.shot__tabs span.on{ background:var(--brand); color:#fff; }
.shot__sum{ display:flex; justify-content:space-between; font-size:8.5px; color:var(--ink); background:rgba(27,42,61,.1); border-radius:4px; padding:3px 6px; }
.shot__row{ display:flex; align-items:center; gap:5px; padding:4px 6px; border-radius:5px; border-left:4px solid; font-size:9.5px; font-weight:700; }
.shot__cb{ flex:none; width:8px; height:8px; border-radius:2px; background:#fff; border:1px solid rgba(0,0,0,.25); }
.r1{ background:var(--lv1); border-left-color:var(--lv1-edge); color:#fff }
.r2{ background:var(--lv2); border-left-color:var(--lv2-edge); color:#fff; margin-left:9px }
.r3{ background:var(--lv3); border-left-color:var(--lv3-edge); color:#fff; margin-left:18px }
.r4{ background:var(--lv4); border-left-color:var(--lv4-edge); color:var(--brand-deep); margin-left:27px }
.shot__del{ margin-top:auto; display:flex; gap:5px; }
.shot__del i{ flex:1; height:16px; border-radius:5px; font-style:normal; font-size:8.5px; font-weight:700; color:#fff; display:grid; place-items:center; }

/* ============================================================
   LIVE SIMULATION — a faithful rebuild of the real sidebar
   ============================================================ */
.simBand{
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, rgba(76,127,172,.40), transparent 70%),
    var(--brand-deep);
  color:#fff;
  border-block:1px solid var(--line-dk);
}
.simBand h2{ color:#fff; }
.simBand .lede{ color:#B4C6D8; }
.simBand .eyebrow{ color:var(--gold); }
.simBand .eyebrow::before{ background:var(--gold); }
.simBand .secChip{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.2); }
.simBand .small.muted{ color:#8FA6BE; }
.simBand .small.muted strong{ color:#DCE7F0; }
/* the demo frame, lifted off the dark */
.simBand .sim{ box-shadow:0 40px 80px -34px rgba(0,0,0,.75); }
/* the recolour strip sits on the dark band too */
.simBand .themeBar{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#DCE7F0;
}
.simBand .themeBar__label{ color:#B4C6D8; }
.simBand .themeReset{ color:#DCE7F0; border-color:rgba(255,255,255,.28); background:transparent; }
.simBand .themeReset:hover{ background:rgba(255,255,255,.1); }
.simBand .darkToggle{ color:#DCE7F0; }
.sim{
  /* position:relative is load-bearing, not decoration. Every modal in the
     demo is `position:absolute; inset:0`, and without a positioned
     ancestor they resolved against the initial containing block — so the
     settings, export and scan modals rendered full-viewport at the top of
     the page instead of over the demo, and the gear looked broken. */
  position:relative;
  border-radius:var(--radius-lg); overflow:hidden; background:#fff;
  border:1px solid #C6D5E0; box-shadow:0 30px 64px -34px rgba(20,38,59,.55);
}
.sim.is-hinting{ box-shadow:0 30px 64px -34px rgba(20,38,59,.55), 0 0 0 2px rgba(235,181,34,.65); }

.simBar{ display:flex; align-items:center; gap:9px; padding:10px 14px; background:#F1F3F4; border-bottom:1px solid #E1E4E8; }
.simBar__icon{ flex:none; width:17px; height:22px; border-radius:2px; background:var(--brand); }
.simBar__title{ font-family:var(--docFont); font-size:14px; color:#3C4043; }
.simBar__live{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:0.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--brand); }
.simBar__live i{ width:7px; height:7px; border-radius:50%; background:var(--gold); animation:spark 2s ease-out infinite; }
/* was an animated box-shadow, which repaints every frame. Same look from
   a ring that scales and fades, which the compositor can do on its own. */
.simBar__live i{ position:relative; }
.simBar__live i::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 9px rgba(235,181,34,.7);
  transform:scale(.001); opacity:1; animation:spark 2s ease-out infinite;
}
@keyframes spark{ 0%{ transform:scale(.001); opacity:.7 } 70%{ transform:scale(1); opacity:0 } 100%{ transform:scale(1); opacity:0 } }
.simMenus{ display:flex; flex-wrap:wrap; gap:14px; padding:4px 14px 7px 42px; background:#F1F3F4; font-family:var(--docFont); font-size:12px; color:#5F6368; }
.simMenus span.on{ color:var(--brand); font-weight:700; }
.simTools{ display:flex; align-items:center; gap:9px; padding:7px 14px; background:#EDF2FA; border-bottom:1px solid #E1E4E8; }
.simTools i{ display:block; width:15px; height:15px; border-radius:3px; background:#C6CDD6; }
.simTools i.wide{ width:58px; border-radius:4px; background:#D7DDE6; }

.simBody{ display:grid; grid-template-columns:minmax(0,1fr) 316px; background:#F8F9FA; }

/* document */
.simDocWrap{ max-height:660px; overflow-y:auto; scroll-behavior:smooth; padding:22px 18px 40px; }
.simPage{
  background:#fff; border:1px solid #E6E9ED; border-radius:3px;
  padding:clamp(26px,3.4vw,48px) clamp(24px,4vw,58px);
  font-family:var(--docFont); color:#202124; font-size:13.5px; line-height:1.75;
  max-width:720px; margin-inline:auto; box-shadow:0 1px 3px rgba(60,64,67,.12);
}
.simPage__title{ font-size:23px; color:#202124; margin-bottom:4px; }
.simPage__sub{ font-size:12px; color:#80868B; margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid #EDF0F3; }
.docSec{ animation:rise .24s ease both; scroll-margin-top:16px; }
.docSec + .docSec{ margin-top:18px; }
@keyframes rise{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.docSec h3{ font-family:var(--docFont); letter-spacing:0; text-wrap:initial; margin-bottom:7px; display:flex; align-items:center; gap:9px; }
.docSec h3::before{ content:""; flex:none; width:4px; align-self:stretch; border-radius:2px; }
.docSec.d1 h3{ font-size:19px; font-weight:400; color:var(--lv1) } .docSec.d1 h3::before{ background:var(--lv1) }
.docSec.d2 h3{ font-size:15.5px; font-weight:700; color:var(--lv2) } .docSec.d2 h3::before{ background:var(--lv2) }
.docSec.d3 h3{ font-size:13.5px; font-weight:700; color:#5B86AC } .docSec.d3 h3::before{ background:var(--lv3) }
.docSec.d4 h3{ font-size:13px; font-weight:700; color:#7C9BB5 } .docSec.d4 h3::before{ background:var(--lv4) }
.docSec.d2{ margin-left:14px } .docSec.d3{ margin-left:28px } .docSec.d4{ margin-left:42px }
.docSec.flash h3{ background:#FDF3D8; box-shadow:0 0 0 4px #FDF3D8; border-radius:2px; }
.simEmpty{ text-align:center; color:#9AA0A6; font-family:var(--docFont); font-size:13px; padding:38px 10px; }

/* sidebar — the add-on's own chrome */
.simPanel{
  background:var(--sidebar); border-left:1px solid #C6D5E0;
  display:flex; flex-direction:column; max-height:660px;
  font-family:var(--uiFont); color:var(--ink); font-weight:700;
}
/* Everything except the list is fixed furniture. Without this, flexbox
   solves a tall footer by squashing the toolbar and the search box to
   nothing and then overflowing anyway. */
.simTop, .simTabs, .simToolbar, .simSearch, .simFoot{ flex:none; }
/* The footer paints above the rows. .srow is position:relative, so rows
   sit in the positioned layer and would otherwise cover any drawer. */
.simFoot{ position:relative; z-index:6; }
.simPane{ min-height:0; }
.simTop{ padding:10px 14px 8px; border-bottom:1px solid rgba(27,42,61,.18); display:flex; align-items:flex-start; gap:10px; }
.simTop h4{ font-size:15px; font-weight:700; margin:0 0 2px; letter-spacing:-.01em; }
.simTop p{ font-size:12px; color:var(--muted); font-weight:400; margin:0; }
.simTop .gear{ margin-left:auto; flex:none; width:22px; height:22px; border-radius:50%; border:1px solid #C6D5E0; background:#fff; color:var(--muted); display:grid; place-items:center; font-size:11px; }

.simTabs{ display:flex; gap:4px; margin:8px 14px 0; padding:3px; background:rgba(27,42,61,.06); border-radius:10px; }
.simTab{
  flex:1; padding:6px 4px; border:0; border-radius:8px; background:transparent; cursor:pointer;
  font-family:var(--uiFont); font-size:13px; font-weight:700; color:rgba(27,42,61,.55);
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  transition:color .15s ease, background .15s ease;
}
.simTab:hover{ background:rgba(27,42,61,.1); color:var(--ink); }
.simTab[aria-selected="true"]{ color:#fff; background:var(--brand); box-shadow:0 2px 6px rgba(27,42,61,.25); }
.tabBadge{ background:var(--danger); color:#fff; font-size:9.5px; font-weight:700; padding:1px 5px; border-radius:8px; }

.simSummary{ margin:8px 14px 5px; padding:6px 10px; background:rgba(27,42,61,.12); border-radius:6px; display:flex; justify-content:space-between; font-size:13px; }
.simSearch{ position:relative; margin:0 12px 6px; }
.simSearch input{
  width:100%; box-sizing:border-box; border:1px solid #C6D5E0; border-radius:8px;
  padding:6px 10px 6px 28px; font-size:12.5px; font-family:var(--uiFont); color:var(--ink); background:#fff;
}
.simSearch input:focus{ outline:none; border-color:var(--brand); }
.simSearch svg{ position:absolute; left:8px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:#8195A6; }
.simToolbar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 12px 6px; font-size:11px; color:#475569; font-weight:400; }
.simToolbar label{ display:flex; align-items:center; gap:4px; cursor:pointer; }
.simToolbar button{ border:1px solid #C6D5E0; background:#fff; color:#475569; font-size:11px; padding:3px 8px; border-radius:5px; cursor:pointer; font-family:var(--uiFont); }
.simToolbar select{ border:1px solid #C6D5E0; background:#fff; color:#475569; font-size:11px; padding:3px 4px; border-radius:5px; margin-left:auto; font-family:var(--uiFont); }

/* min-height:0, not 190px: the list is the part that gives way when a
   drawer opens, and it keeps its own scrollbar while it does. */
.simList{ flex:1 1 auto; overflow-y:auto; padding:0 12px 10px; min-height:0; }
.srow{
  display:flex; align-items:center; gap:8px; padding:7px 10px;
  border-left:6px solid transparent; border-radius:8px; margin-bottom:6px;
  cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease, background .2s ease, filter .18s ease;
  font-size:14px; font-weight:700;
}
.srow:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.18); filter:brightness(1.08); }
.srow.hint{ animation:hintPulse 2.2s ease-in-out infinite; }
/* same again: a static ring on a pseudo-element, faded in and out */
.srow.hint::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 3px var(--gold); opacity:0; animation:hintPulse 2.2s ease-in-out infinite;
}
@keyframes hintPulse{ 0%,100%{ opacity:0 } 50%{ opacity:1 } }
.srow.checked{ background:var(--danger) !important; box-shadow:0 2px 6px rgba(160,40,25,.4); }
.srow.checked .slabel{ color:#fff; text-decoration:line-through; }
.srow.checked .sjump, .srow.checked .smeta{ color:#fff; }
.srow.leaving{ opacity:0; transform:translateX(14px); }
.s1{ background:var(--c-h-1); border-left-color:var(--c-h-1-border); color:var(--c-h-1-text) }
.s2{ background:var(--c-h-2); border-left-color:var(--c-h-2-border); color:var(--c-h-2-text); margin-left:16px }
.s3{ background:var(--c-h-3); border-left-color:var(--c-h-3-border); color:var(--c-h-3-text); margin-left:32px }
.s4{ background:var(--c-h-4); border-left-color:var(--c-h-4-border); color:var(--c-h-4-text); margin-left:48px }
.s5{ background:var(--c-h-5); border-left-color:var(--c-h-5-border); color:var(--c-h-5-text); margin-left:64px }
.s6{ background:var(--c-h-6); border-left-color:var(--c-h-6-border); color:var(--c-h-6-text); margin-left:80px }
.stoggle{ flex:none; width:16px; height:16px; border:0; background:rgba(255,255,255,.5); border-radius:4px; color:inherit; font-size:12px; font-weight:700; line-height:1; cursor:pointer; padding:0; display:grid; place-items:center; }
.sspacer{ flex:none; width:16px; }
.srow input[type=checkbox]{ accent-color:var(--brand-dk); width:16px; height:16px; flex:none; }
.slabel{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.smeta{ font-size:12px; color:rgba(27,42,61,.55); white-space:nowrap; font-weight:400; }
.sjump{ border:0; background:none; cursor:pointer; font-size:15px; padding:2px 5px; flex:none; color:inherit; }
.sjump:active{ transform:scale(.85); }

.simFoot{ background:var(--sidebar); box-shadow:0 -2px 4px rgba(0,0,0,.1); }
.simConfirm{ margin:0 14px 10px; padding:11px; border:1px solid #EECCC4; background:#FBE9E4; border-radius:10px; font-size:13.5px; color:#7A3226; }
.simConfirm .btns{ display:flex; gap:10px; margin-top:12px; }
.simConfirm button{ flex:1; padding:9px; border-radius:8px; border:1px solid #C6D5E0; background:#fff; color:#334155; cursor:pointer; font-size:13px; font-weight:700; font-family:var(--uiFont); }
.simConfirm button.go{ background:#A32D2D; color:#fff; border-color:#A32D2D; }
.simWarn{ margin-top:9px; font-size:12.5px; }
.simActions{ display:flex; gap:8px; padding:10px 14px; border-top:1px solid rgba(27,42,61,.18); }
.simActions button{
  flex:1; padding:10px 6px; border-radius:8px; border:0; cursor:pointer;
  font-size:13px; font-weight:700; font-family:var(--uiFont);
  box-shadow:0 1px 2px rgba(0,0,0,.08); transition:transform .12s ease, background .15s ease;
}
.simActions button:hover{ transform:translateY(-1px); }
.simActions button[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }
.bRefresh{ background:var(--c-b-refresh); color:var(--c-b-refresh-text) }
.bClear{ background:var(--c-b-clear); color:var(--c-b-clear-text) }
.bLevel{ background:var(--c-b-level); color:var(--c-b-level-text); flex:0 0 auto !important; padding:0 12px !important; font-size:12px !important }
.bDelete{ background:var(--c-b-delete); color:var(--c-b-delete-text) }
.bInsert{ background:var(--c-b-insert); color:var(--c-b-insert-text) }
.simActions button:hover{ filter:brightness(1.1); }

.levelPop{ padding:12px 14px; border-top:1px solid rgba(27,42,61,.18); }
.levelPop p{ margin:0 0 8px; font-size:11.5px; color:var(--muted); font-weight:600; }
.levelOpts{ display:flex; flex-direction:column; gap:6px; }
.levelOpt{
  border:0; border-radius:7px; padding:8px 10px; font-size:13px; font-weight:700;
  text-align:left; cursor:pointer; font-family:var(--uiFont); box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.levelOpt.current{ box-shadow:0 0 0 3px var(--gold); }
.o1{ background:var(--c-h-1); color:var(--c-h-1-text) } .o2{ background:var(--c-h-2); color:var(--c-h-2-text) } .o3{ background:var(--c-h-3); color:var(--c-h-3-text) }
.o4{ background:var(--c-h-4); color:var(--c-h-4-text) } .o5{ background:var(--c-h-5); color:var(--c-h-5-text) } .o6{ background:var(--c-h-6); color:var(--c-h-6-text) }
.levelCancel{ margin-top:8px; width:100%; border:1px solid #C6D5E0; background:#fff; color:#475569; font-size:12px; font-weight:600; padding:6px; border-radius:6px; cursor:pointer; font-family:var(--uiFont); }

.simToast{
  margin:0 14px 8px; padding:8px 10px; border-radius:8px; background:var(--go); color:#fff;
  font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:8px;
  box-shadow:0 2px 6px rgba(15,110,86,.4);
}
.simToast button{ flex:none; border:0; background:rgba(255,255,255,.25); color:#fff; font-size:11px; font-weight:700; padding:5px 10px; border-radius:6px; cursor:pointer; font-family:var(--uiFont); }
.simEmptyState{ padding:26px 20px; text-align:center; font-weight:400; }
.simEmptyState b{ display:block; font-size:13px; color:var(--ink); margin-bottom:4px; }
.simEmptyState span{ font-size:12px; color:var(--muted); }

/* ---------- features ---------- */
.sectionHead{ max-width:64ch; }
.grid{ display:grid; gap:20px; }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.feature{
  display:flex; flex-direction:column; gap:13px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px 22px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -26px rgba(20,38,59,.42); border-color:#B4CBDE; }
.feature__tile{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:#E4EEF6; color:var(--brand); }
.feature__tile svg{ width:23px; height:23px; }
.feature__tile.t-gold{ background:#FDF3D8; color:#8A6508; }
.feature__tile.t-deep{ background:#DCE7F0; color:var(--brand-deep); }
.feature h3{ font-size:1.06rem; }
/* .feature is a column flexbox, so a badge stretches edge to edge unless it
   is told not to — and sitting between the tile and the title it pushes the
   title down, so badged and unbadged cards in a row stop lining up. Corner it. */
.feature{ position:relative; }
.feature > .pill{ position:absolute; top:24px; right:20px; align-self:flex-start; }
.feature__tile{ margin-right:92px; }
@media (max-width:520px){
  .feature > .pill{ position:static; }
  .feature__tile{ margin-right:0; }
}
.feature p{ color:var(--muted); font-size:0.96rem; }

/* ---------- level ramp strip ---------- */
.ramp{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.rampCell{ border-radius:10px; padding:16px 12px 18px; border-left:6px solid; }
.rampCell b{ display:block; font-size:0.94rem; }
.rampCell span{ font-family:var(--mono); font-size:0.66rem; opacity:.85; }
.c1{ background:var(--c-h-1); border-left-color:var(--c-h-1-border); color:var(--c-h-1-text) }
.c2{ background:var(--c-h-2); border-left-color:var(--c-h-2-border); color:var(--c-h-2-text) }
.c3{ background:var(--c-h-3); border-left-color:var(--c-h-3-border); color:var(--c-h-3-text) }
.c4{ background:var(--c-h-4); border-left-color:var(--c-h-4-border); color:var(--c-h-4-text) }
.c5{ background:var(--c-h-5); border-left-color:var(--c-h-5-border); color:var(--c-h-5-text) }
.c6{ background:var(--c-h-6); border-left-color:var(--c-h-6-border); color:var(--c-h-6-text) }
.rampCell span{ font-variant-numeric:tabular-nums; }

/* ---------- theme bar: recolour + dark mode, as the add-on does ---------- */
.themeBar{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:16px 20px;
}
.themeBar__label{ font-family:var(--mono); font-size:0.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.swatches{ display:flex; gap:8px; flex-wrap:wrap; }
.swatch{
  width:30px; height:30px; border-radius:9px; border:2px solid transparent; cursor:pointer; padding:0;
  box-shadow:0 2px 6px -2px rgba(20,38,59,.5); transition:transform .18s ease, border-color .18s ease;
}
.swatch:hover{ transform:translateY(-3px) scale(1.06); }
.swatch[aria-pressed="true"]{ border-color:var(--ink); }
.themePick{
  width:38px; height:32px; padding:2px; border:1px solid var(--line);
  border-radius:8px; background:#fff; cursor:pointer;
}
.themeBar__spacer{ flex:1; min-width:0; }
.darkToggle{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-size:0.9rem; font-weight:600; color:var(--ink);
}
.darkToggle input{ position:absolute; opacity:0; width:0; height:0; }
.darkToggle .track{
  width:44px; height:25px; border-radius:20px; background:#C6D5E0; position:relative;
  transition:background .22s ease;
}
.darkToggle .track::after{
  content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .22s cubic-bezier(.34,1.4,.64,1);
}
.darkToggle input:checked + .track{ background:var(--c-b-level); }
.darkToggle input:checked + .track::after{ transform:translateX(19px); }
.darkToggle input:focus-visible + .track{ outline:3px solid var(--gold); outline-offset:2px; }
.themeReset{
  border:1px solid var(--line); background:#fff; color:var(--muted);
  font-family:var(--sans); font-size:0.84rem; font-weight:600;
  padding:7px 13px; border-radius:8px; cursor:pointer;
}
.themeReset:hover{ border-color:var(--muted); color:var(--ink); }

/* the sidebar's own dark theme — values taken from the add-on */
.sim.is-dark .simPanel{ background:#1A1F26; color:#E8ECF1; border-left-color:#3A4451; }
.sim.is-dark .simTop{ border-bottom-color:rgba(255,255,255,.14); }
.sim.is-dark .simTop p{ color:#97A3B4; }
.sim.is-dark .simTop .gear{ background:#262D38; border-color:#3A4451; color:#97A3B4; }
.sim.is-dark .simTabs{ background:rgba(255,255,255,.06); }
.sim.is-dark .simTab{ color:#AEB9C7; }
.sim.is-dark .simTab:hover{ background:rgba(255,255,255,.08); color:#E8ECF1; }
.sim.is-dark .simSummary{ background:rgba(255,255,255,.08); color:#E8ECF1; }
.sim.is-dark .simSearch input{ background:#1F2530; color:#E8ECF1; border-color:#3A4451; }
.sim.is-dark .simSearch input::placeholder{ color:#7C8797; }
.sim.is-dark .simToolbar{ color:#AEB9C7; }
.sim.is-dark .simToolbar button,.sim.is-dark .simToolbar select{ background:#262D38; color:#AEB9C7; border-color:#3A4451; }
.sim.is-dark .simFoot{ background:#1A1F26; }
.sim.is-dark .simActions{ border-top-color:rgba(255,255,255,.14); }
.sim.is-dark .levelPop{ border-top-color:rgba(255,255,255,.14); }
.sim.is-dark .levelPop p{ color:#97A3B4; }
.sim.is-dark .levelCancel{ background:#262D38; color:#AEB9C7; border-color:#3A4451; }
.sim.is-dark .simEmptyState b{ color:#E8ECF1; }
.sim.is-dark .simEmptyState span{ color:#97A3B4; }
.sim.is-dark .smeta{ color:#97A3B4; }
.sim.is-dark .stoggle{ background:rgba(255,255,255,.12); }
.sim.is-dark .simConfirm button{ background:#262D38; color:#AEB9C7; border-color:#3A4451; }

/* ---------- permissions callout ---------- */
.scopeCard{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:start;
  background:#fff; border:1px solid var(--line); border-left:5px solid var(--go);
  border-radius:var(--radius-lg); padding:26px 28px;
}
.scopeCard svg{ width:34px; height:34px; color:var(--go); }
.scopeCard code{ font-family:var(--mono); font-size:0.88em; background:var(--mist); padding:2px 6px; border-radius:4px; color:var(--brand-dk); }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,30px); counter-reset:step; }
.step{ position:relative; display:flex; flex-direction:column; gap:15px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 24px 28px; counter-increment:step; }
.step__art{ background:linear-gradient(160deg,#EDF3F9 0%,#DCE7F0 100%); border:1px solid #CBDCEA; border-radius:12px; padding:14px; display:grid; place-items:center; min-height:132px; }
.step__art svg{ width:100%; height:auto; max-width:190px; display:block; }
.step__n{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:0.7rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); }
.step__n::before{ content:counter(step,decimal-leading-zero); display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:var(--brand); color:#fff; font-size:0.68rem; letter-spacing:0; }
.step h3{ font-size:1.04rem; }
.step p{ color:var(--muted); font-size:0.95rem; }
.step:not(:last-child)::after{
  content:""; position:absolute; top:88px; right:-22px; z-index:2; width:20px; height:12px; background:var(--brand);
  clip-path:polygon(0 38%,60% 38%,60% 0,100% 50%,60% 100%,60% 62%,0 62%); opacity:.5;
}

/* ---------- video ---------- */
.videoBand{ position:relative; overflow:hidden; background:var(--brand-deep); color:#fff; padding-block:clamp(56px,7vw,100px); }
.videoBand::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 12%, rgba(76,127,172,.34) 0%, transparent 70%),
             radial-gradient(40% 40% at 82% 88%, rgba(235,181,34,.12) 0%, transparent 70%);
}
.videoBand__inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:34px; text-align:center; }
.videoBand h2{ color:#fff; }
.videoBand .lede{ color:#B4C6D8; margin-inline:auto; }
.videoFrame{
  position:relative; width:100%; max-width:860px; aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  background:#0E1B2B; border:1px solid rgba(140,180,214,.32); box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
}
.videoFrame iframe{ width:100%; height:100%; border:0; display:block; }
.videoStage{ position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(150deg,#1D3A5A 0%,#0D1B2A 55%,#14263B 100%); }
.videoStage__mock{ position:absolute; inset:0; opacity:.5; }
.playBtn{
  position:relative; z-index:2; display:grid; place-items:center; width:78px; height:78px; border-radius:50%;
  cursor:pointer; background:var(--gold); border:0; color:var(--gold-ink); box-shadow:0 14px 34px -10px rgba(235,181,34,.7);
  transition:transform .18s ease, background .18s ease;
}
.playBtn::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(235,181,34,.6); animation:ripple 2.6s ease-out infinite; }
@keyframes ripple{ 0%{transform:scale(.92); opacity:.85} 70%{transform:scale(1.35); opacity:0} 100%{opacity:0} }
.playBtn:hover{ transform:scale(1.06); background:var(--gold-dk); }
.playBtn svg{ width:27px; height:27px; margin-left:4px; }
.videoCap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 18px; font-family:var(--mono); font-size:0.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:#B4C6D8; background:linear-gradient(to top, rgba(8,14,24,.92), transparent);
}
.videoBand__meta{ display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; color:#8FA6BE; font-size:var(--step--1); }
.videoBand__meta span{ display:inline-flex; align-items:center; gap:7px; }

/* ---------- pricing ---------- */
.tiers{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; max-width:760px; margin-inline:auto; }
.tiers--3{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1020px; }
@media (max-width:900px){ .tiers--3{ grid-template-columns:minmax(0,1fr); max-width:520px; } }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.stripeNote{
  max-width:1020px; margin-inline:auto; display:flex; gap:12px; align-items:flex-start;
  background:var(--pro-tint); border:1px solid var(--pro-edge); border-left:4px solid var(--gold);
  border-radius:var(--radius); padding:14px 18px; font-size:var(--step--1); color:var(--ink-soft);
}
.stripeNote strong{ color:var(--ink); }
.tier{ display:flex; flex-direction:column; gap:18px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 24px; }
.tier--now{ border-color:var(--brand); box-shadow:0 18px 44px -28px rgba(35,82,128,.6); }
.tier__tag{ align-self:flex-start; font-family:var(--mono); font-size:0.66rem; letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; border-radius:5px; background:#E4EEF6; color:var(--brand-dk); }
.tier__tag--soon{ background:#FDF3D8; color:#8A6508; }
.tier__name{ font-size:1.14rem; font-weight:700; }
.tier__price{ display:flex; align-items:baseline; gap:7px; font-variant-numeric:tabular-nums; }
.tier__amt{ font-size:2.3rem; font-weight:700; letter-spacing:-0.045em; line-height:1; }
.tier__per{ color:var(--muted); font-size:0.9rem; }
.tier__note{ color:var(--muted); font-size:0.9rem; }
.tier ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.tier li{ display:flex; gap:10px; font-size:0.94rem; color:var(--ink); line-height:1.5; }
.tier li svg{ flex:none; width:16px; height:16px; margin-top:4px; color:var(--brand); }
.payNote{ display:flex; gap:12px; align-items:flex-start; background:var(--mist); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; max-width:760px; margin-inline:auto; }
.payNote svg{ flex:none; width:18px; height:18px; color:var(--muted); margin-top:3px; }

/* ---------- faq / limits ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; padding:20px 44px 20px 0; position:relative; font-weight:600; font-size:1.02rem; letter-spacing:-0.01em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:8px; top:27px; width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .18s ease; }
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq details p{ padding-bottom:20px; color:var(--muted); max-width:70ch; }
.faq details p + p{ padding-bottom:20px; margin-top:-8px; }

.limits{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.limit{ display:flex; gap:12px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; }
.limit svg{ flex:none; width:19px; height:19px; color:var(--gold); margin-top:3px; }
.limit b{ display:block; font-size:0.97rem; margin-bottom:3px; }
.limit span{ font-size:0.92rem; color:var(--muted); }

/* ---------- CTA ---------- */
.cta{ background:var(--brand-deep); color:#fff; border-radius:var(--radius-lg); padding:clamp(32px,4.5vw,52px); text-align:center; }
.cta h2{ color:#fff; }
.cta p{ color:#B4C6D8; margin-inline:auto; max-width:52ch; }
.cta__row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ---------- contact ---------- */
.contactGrid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,4vw,56px); align-items:start; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-weight:500; font-size:0.92rem; }
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink); padding:11px 13px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); width:100%;
  transition:border-color .15s ease;
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--brand); outline:none; box-shadow:0 0 0 3px #E4EEF6; }
.formMsg{ padding:13px 16px; border-radius:var(--radius); font-size:0.94rem; }
.formMsg--ok{ background:#E6F6F0; color:#0B6B4B; border:1px solid #BFE5D6; }
.formMsg--err{ background:#FBE9E4; color:#7A3226; border:1px solid #EECCC4; }
.infoCard{ background:var(--mist); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; }
.infoRow{ display:flex; flex-direction:column; gap:3px; padding-block:13px; border-top:1px solid var(--line); }
.infoRow:first-of-type{ border-top:0; padding-top:0; }
.infoRow dt{ font-family:var(--mono); font-size:0.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.infoRow dd{ margin:0; font-size:0.97rem; }

/* ---------- legal ---------- */
.legal{ max-width:74ch; }
.legal h2{ font-size:var(--step-2); margin-top:44px; }
.legal h2:first-of-type{ margin-top:0; }
.legal h3{ font-size:1.04rem; margin-top:26px; }
.legal p{ margin-top:13px; color:var(--ink); }
.legal ul{ margin:13px 0 0; padding-left:22px; color:var(--ink); display:flex; flex-direction:column; gap:8px; }
.legal a{ text-decoration:underline; }
.legal code{ font-family:var(--mono); font-size:0.88em; background:var(--mist); padding:2px 6px; border-radius:4px; color:var(--brand-dk); }
.legalMeta{ font-family:var(--mono); font-size:var(--step--1); color:var(--muted); border-left:2px solid var(--brand); padding-left:14px; margin-bottom:34px; }
.toc{ background:var(--mist); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; margin-bottom:34px; }
.toc ol{ margin:10px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:6px; font-size:0.94rem; }
.keyPoint{ background:#E6F6F0; border:1px solid #BFE5D6; border-radius:var(--radius); padding:18px 22px; margin-top:20px; }
.keyPoint p{ margin-top:0; color:#0B4D38; }

/* ---------- footer ---------- */
.foot{ background:var(--brand-deep); color:#93A9C0; padding-block:clamp(44px,5vw,68px) 32px; font-size:0.94rem; }
.foot__grid{ display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:32px; }
.foot h4{ font-family:var(--mono); font-size:0.66rem; letter-spacing:.12em; text-transform:uppercase; color:#7089A4; margin-bottom:14px; font-weight:500; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.foot a{ color:#BACCDE; text-decoration:none; }
.foot a:hover{ color:#fff; text-decoration:underline; }
.foot .brand{ color:#fff; margin-bottom:12px; }
.foot__legal{ margin-top:38px; padding-top:22px; border-top:1px solid var(--line-dk); display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; font-size:0.84rem; color:#7089A4; }
.foot__legal p{ max-width:66ch; }

/* ============================================================
   MOTION
   Nothing is hidden by default. JS adds .js-anim to <html>, which
   arms the reveal states; without JS the page renders complete
   and static. prefers-reduced-motion disarms all of it.
   ============================================================ */
.progress{
  /* Full width, scaled horizontally, rather than a width that changes.
     Width is a layout property: setting it on every scroll frame made the
     browser re-lay-out on every frame. A transform is compositor-only. */
  position:fixed; top:0; left:0; height:3px; width:100%; z-index:80;
  background:linear-gradient(90deg, var(--brand) 0%, var(--lv3) 55%, var(--gold) 100%);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .12s linear;
}
.masthead{ transition:box-shadow .25s ease; }
.masthead.is-scrolled{ box-shadow:0 8px 24px -14px rgba(20,38,59,.45); }
/* The header used to shrink from 66px to 58px on scroll. Animating height
   is a layout animation, and it re-ran every time the scroll position
   crossed the threshold — so scrolling gently around that point thrashed
   layout. The shadow alone gives the same "lifted" cue for nothing. */

.js-anim .reveal{ opacity:0; transform:translateY(18px); }
.js-anim .reveal.in{
  opacity:1; transform:none;
  transition:opacity .62s cubic-bezier(.22,.72,.3,1), transform .62s cubic-bezier(.22,.72,.3,1);
}
.js-anim .stagger > *{ opacity:0; transform:translateY(14px); }
.js-anim .stagger.in > *{
  opacity:1; transform:none;
  transition:opacity .55s cubic-bezier(.22,.72,.3,1), transform .55s cubic-bezier(.22,.72,.3,1);
}
.js-anim .stagger.in > *:nth-child(1){ transition-delay:.04s }
.js-anim .stagger.in > *:nth-child(2){ transition-delay:.10s }
.js-anim .stagger.in > *:nth-child(3){ transition-delay:.16s }
.js-anim .stagger.in > *:nth-child(4){ transition-delay:.22s }
.js-anim .stagger.in > *:nth-child(5){ transition-delay:.28s }
.js-anim .stagger.in > *:nth-child(6){ transition-delay:.34s }
.js-anim .stagger.in > *:nth-child(7){ transition-delay:.40s }
.js-anim .stagger.in > *:nth-child(8){ transition-delay:.46s }

/* hero atmosphere */
/* was background-position, which repaints the whole masked grid every
   frame. Translating the layer instead is compositor-only; the mask
   travels with it, but 52px over 26 seconds on a soft radial mask is
   not something an eye can catch. The extra inset keeps the grid's own
   edges outside the hero while it drifts. */
@keyframes gridDrift{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(52px,52px,0) } }
.hero::before{ inset:-60px; animation:gridDrift 26s linear infinite; }
.hero::after{
  content:""; position:absolute; right:-12%; top:-25%; width:58%; height:130%;
  background:radial-gradient(circle at 50% 50%, rgba(235,181,34,.15), transparent 62%);
  pointer-events:none; animation:glowPulse 10s ease-in-out infinite;
}
@keyframes glowPulse{ 0%,100%{ opacity:.65; transform:scale(1) } 50%{ opacity:1; transform:scale(1.09) } }

/* a slow shine across the gold CTA */
.btn--gold{ position:relative; overflow:hidden; }
.btn--gold::after{
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform:skewX(-18deg); animation:shine 5.5s ease-in-out infinite;
}
/* `left` is a layout property — this one made the browser re-lay-out the
   CTA on every frame of every pass, forever. Same sweep from a transform. */
@keyframes shine{ 0%,70%{ transform:skewX(-18deg) translateX(-130%) } 92%,100%{ transform:skewX(-18deg) translateX(140%) } }

/* section chips — an icon for every section */
.secChip{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  color:#fff; box-shadow:0 8px 18px -10px rgba(20,38,59,.6);
  animation:chipFloat 5.5s ease-in-out infinite;
}
.secChip svg{ width:21px; height:21px; }
@keyframes chipFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } }
.chip-brand{ background:linear-gradient(145deg,#2E66A0,#1A3F63) }
.chip-lv2{ background:linear-gradient(145deg,#5E90BC,#3D6994) }
.chip-lv3{ background:linear-gradient(145deg,#9CC0DE,#6D97B8) }
.chip-gold{ background:linear-gradient(145deg,#F3C44D,#D6A11D); color:var(--gold-ink) }
.chip-go{ background:linear-gradient(145deg,#28B486,#17805F) }
.chip-danger{ background:linear-gradient(145deg,#D4503F,#A8291C) }
.centered .secChip{ margin-inline:auto; }

/* eyebrows get a gold rule that draws itself in */
.eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.eyebrow::before{ content:""; width:24px; height:3px; border-radius:2px; background:var(--gold); transition:width .6s ease .2s; }
.centered .eyebrow{ justify-content:center; }
.js-anim .reveal .eyebrow::before{ width:0; }
.js-anim .reveal.in .eyebrow::before{ width:24px; }

/* feature tiles: solid add-on colours, and they react on hover */
.feature__tile{
  position:relative; overflow:hidden; color:#fff;
  transition:transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s ease;
  box-shadow:0 8px 18px -10px rgba(20,38,59,.55);
}
.feature:hover .feature__tile{ transform:translateY(-3px) rotate(-5deg) scale(1.08); }
.feature__tile svg{ position:relative; z-index:1; transition:transform .3s ease; }
.feature:hover .feature__tile svg{ transform:scale(1.08); }
.tile-1{ background:linear-gradient(145deg,#2E66A0,#1A3F63) }
.tile-2{ background:linear-gradient(145deg,#5E90BC,#3D6994) }
.tile-3{ background:linear-gradient(145deg,#F3C44D,#D6A11D); color:var(--gold-ink) }
.tile-4{ background:linear-gradient(145deg,#9CC0DE,#6D97B8) }
.tile-5{ background:linear-gradient(145deg,#28B486,#17805F) }
.tile-6{ background:linear-gradient(145deg,#D4503F,#A8291C) }
/* a coloured hairline appears along the card's top edge on hover */
.feature{ position:relative; overflow:hidden; }
.feature::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--brand), var(--gold));
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.feature:hover::before{ transform:scaleX(1); }

/* level ramp cells lift in sequence */
.rampCell{ transition:transform .28s cubic-bezier(.34,1.4,.64,1), box-shadow .28s ease; }
.rampCell:hover{ transform:translateY(-6px); box-shadow:0 16px 30px -18px rgba(20,38,59,.6); }

/* limits get ramp-coloured edges */
.limit{ border-left-width:4px; transition:transform .22s ease, box-shadow .22s ease; }
.limit:hover{ transform:translateX(3px); box-shadow:0 12px 26px -20px rgba(20,38,59,.5); }
.lim-1{ border-left-color:var(--lv1) } .lim-2{ border-left-color:var(--lv2) }
.lim-3{ border-left-color:var(--lv3) } .lim-4{ border-left-color:var(--gold) }
.lim-5{ border-left-color:var(--go) }  .lim-6{ border-left-color:var(--danger) }

/* steps: the connector arrow travels */
.step:not(:last-child)::after{ animation:arrowNudge 2.6s ease-in-out infinite; }
@keyframes arrowNudge{ 0%,100%{ transform:translateX(0); opacity:.4 } 50%{ transform:translateX(5px); opacity:.85 } }
.step{ transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.step:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -28px rgba(20,38,59,.5); border-color:#B4CBDE; }
.step__art svg{ transition:transform .35s cubic-bezier(.34,1.4,.64,1); }
.step:hover .step__art svg{ transform:scale(1.05); }

/* CTA band gets depth */
.cta{ background:linear-gradient(140deg,#1B3554 0%,#14263B 52%,#0E1B2B 100%); position:relative; overflow:hidden; }
.cta::after{
  content:""; position:absolute; left:-10%; bottom:-60%; width:60%; height:140%;
  background:radial-gradient(circle at 50% 50%, rgba(235,181,34,.14), transparent 62%);
  pointer-events:none;
}
.cta > *{ position:relative; z-index:1; }

/* faq rows tint as you open them */
.faq details{ transition:background .25s ease; border-left:3px solid transparent; }
.faq details[open]{ background:#F7FAFD; border-left-color:var(--gold); }
.faq details[open] summary{ color:var(--brand); }
.faq summary{ transition:color .2s ease, padding-left .25s ease; padding-left:0; }
.faq details[open] summary,.faq summary:hover{ padding-left:12px; }
.faq details p{ padding-left:12px; }

/* scope card pulses its shield once on reveal */
.scopeCard svg{ transition:transform .4s cubic-bezier(.34,1.4,.64,1); }
.scopeCard:hover svg{ transform:scale(1.1) rotate(-4deg); }

/* ============================================================
   HELP · ADMINS · INDEX · COMPARISON · GALLERY
   ============================================================ */
.quickNav{ display:flex; flex-wrap:wrap; gap:10px; }
.quickNav a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:#fff; border:1px solid var(--line); border-radius:99px;
  padding:9px 16px; font-size:0.9rem; font-weight:600; color:var(--ink);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.quickNav a:hover{ border-color:var(--brand); transform:translateY(-2px); box-shadow:0 10px 22px -16px rgba(20,38,59,.6); text-decoration:none; }
.quickNav a::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); }

.howBlock{ display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:20px; align-items:start; padding-block:24px; border-top:1px solid var(--line); }
.howBlock:first-of-type{ border-top:0; }
.howBlock h3{ font-size:1.02rem; }
.howBlock p{ color:var(--muted); margin-top:8px; }
.howBlock ul{ margin:10px 0 0; padding-left:20px; color:var(--muted); display:flex; flex-direction:column; gap:7px; }
.howBlock .pill{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--uiFont); font-size:0.82rem; font-weight:700;
  padding:7px 14px; border-radius:8px; color:#fff;
}

/* troubleshooting */
.tshoot{ display:flex; flex-direction:column; gap:14px; }
.tsItem{ background:#fff; border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:var(--radius); padding:18px 22px; }
.tsItem b{ display:block; font-size:0.98rem; margin-bottom:6px; }
.tsItem .quote{
  font-family:var(--mono); font-size:0.82rem; color:var(--danger);
  background:#FBE9E4; border-radius:6px; padding:7px 11px; display:inline-block; margin-bottom:9px;
}
.tsItem p{ color:var(--muted); font-size:0.94rem; }
.tsItem p + p{ margin-top:8px; }

/* scopes table */
.tableWrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; }
table.scopes{ width:100%; border-collapse:collapse; min-width:620px; font-size:0.93rem; }
table.scopes th,table.scopes td{ text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top; }
table.scopes thead th{ background:var(--mist); font-family:var(--mono); font-size:0.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:500; }
table.scopes tbody tr:last-child td{ border-bottom:0; }
table.scopes code{ font-family:var(--mono); font-size:0.84em; color:var(--brand-dk); word-break:break-word; }
.notRequested{ background:#E6F6F0; border:1px solid #BFE5D6; border-radius:var(--radius); padding:18px 22px; }
.notRequested p{ color:#0B4D38; }
.notRequested ul{ margin:10px 0 0; padding-left:20px; color:#0B4D38; display:flex; flex-direction:column; gap:6px; font-size:0.93rem; }

.qa{ display:flex; flex-direction:column; gap:18px; }
.qaItem{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 24px; }
.qaItem b{ display:block; font-size:1rem; margin-bottom:8px; color:var(--brand); }
.qaItem p{ color:var(--ink); font-size:0.95rem; }
.qaItem p + p{ margin-top:9px; }

/* built-in outline comparison */
.vs{ display:grid; grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr)); gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff; }
.vs > div{ padding:15px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:9px; font-size:0.94rem; }
.vs > div:nth-child(3n+2),.vs > div:nth-child(3n){ justify-content:center; text-align:center; }
.vs__head{ background:var(--mist); font-family:var(--mono); font-size:0.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.vs__head.is-ours{ background:var(--brand); color:#fff; }
.vs > div:nth-last-child(-n+3){ border-bottom:0; }
.vs svg{ width:19px; height:19px; }
.yes{ color:var(--go); } .no{ color:#C3CEDA; }
.vs__label{ font-weight:600; }

/* gallery */
.gallery{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.shotCard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; }
.shotCard__frame{ background:var(--mist); padding:18px; display:grid; place-items:center; min-height:212px; }
.shotCard__cap{ padding:16px 20px 20px; border-top:1px solid var(--line); }
.shotCard__cap b{ display:block; font-size:0.98rem; margin-bottom:5px; }
.shotCard__cap span{ font-size:0.9rem; color:var(--muted); }

/* miniature sidebar used in the gallery */
.mini{ width:100%; max-width:230px; border-radius:10px; overflow:hidden; border:1px solid #C6D5E0; font-family:var(--uiFont); font-size:11px; font-weight:700; }
.mini__top{ display:flex; align-items:center; gap:7px; padding:8px 9px; background:var(--sidebar); }
.mini__top .smBadge{ width:22px; height:22px; }
.mini__body{ background:var(--sidebar); padding:0 9px 9px; display:flex; flex-direction:column; gap:5px; }
.mini__tabs{ display:flex; gap:3px; padding:2px; background:rgba(27,42,61,.06); border-radius:7px; }
.mini__tabs span{ flex:1; text-align:center; padding:3px 2px; font-size:9px; border-radius:5px; color:rgba(27,42,61,.55); }
.mini__tabs span.on{ background:var(--brand); color:#fff; }
.mini__row{ display:flex; align-items:center; gap:5px; padding:5px 7px; border-radius:6px; border-left:4px solid; font-size:9.5px; }
.mini__cb{ width:8px; height:8px; border-radius:2px; background:#fff; border:1px solid rgba(0,0,0,.25); flex:none; }
.mini__btns{ display:flex; gap:4px; margin-top:3px; }
.mini__btns i{ flex:1; height:17px; border-radius:5px; font-style:normal; font-size:8.5px; display:grid; place-items:center; color:#fff; }
.mini__meta{ margin-left:auto; font-size:8px; font-weight:400; opacity:.75; }
.mini.is-dark .mini__top,.mini.is-dark .mini__body{ background:#1A1F26; color:#E8ECF1; }
.mini.is-dark{ border-color:#3A4451; }
.mini.is-dark .mini__tabs{ background:rgba(255,255,255,.06); }
.mini.is-dark .mini__tabs span{ color:#AEB9C7; }
.mini__swatchRow{ display:flex; align-items:center; gap:6px; padding:4px 2px; font-size:9px; font-weight:600; }
.mini__swatch{ width:14px; height:14px; border-radius:4px; flex:none; border:1px solid rgba(0,0,0,.15); }
.mini__hex{ margin-left:auto; font-family:var(--mono); font-size:8px; font-weight:400; opacity:.7; }
.mini__warn{ background:#FBE9E4; border:1px solid #EECCC4; border-radius:6px; padding:7px 8px; font-size:8.5px; font-weight:600; color:#7A3226; line-height:1.45; }

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .simBody{ grid-template-columns:minmax(0,1fr) 290px; }
}
@media (max-width:980px){
  .hero__inner{ grid-template-columns:minmax(0,1fr); }
  /* the corner badge hangs outside the shot; pull it in so it isn't clipped */
  .shotBadge{ width:74px; height:74px; top:-16px; right:-8px; border-radius:19px; }
  .shotBadge svg{ width:55px; height:55px; }
  .grid--3,.steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contactGrid{ grid-template-columns:minmax(0,1fr); }
  .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ramp{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .step:not(:last-child)::after{ display:none; }
}
@media (max-width:760px){
  .navToggle{ display:block; }
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:2px; background:var(--paper); border-bottom:1px solid var(--line); padding:12px 20px 18px;
  }
  .nav.is-open{ display:flex; }
  .nav .btn{ margin-top:8px; }
  .masthead__inner{ position:relative; gap:12px; }
  .grid--3,.steps,.tiers,.limits{ grid-template-columns:minmax(0,1fr); }
  .ramp{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot__grid{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .playBtn{ width:60px; height:60px; }
  .playBtn svg{ width:21px; height:21px; }
  .videoCap{ font-size:0.64rem; padding:11px 13px; }
  /* 1fr is minmax(auto,1fr): the panel's min-content width beat the
     frame and the right edge of every row was clipped away. */
  .simBody{ grid-template-columns:minmax(0,1fr); }
  .simPanel{ border-left:0; border-bottom:1px solid #C6D5E0; order:-1; max-height:none; }
  .simDocWrap{ max-height:400px; padding:14px 10px 24px; }
  .simPage{ padding:22px 20px; }
  .simMenus{ padding-left:14px; }
  .shot__body{ grid-template-columns:minmax(0,1fr) 150px; }
  .shot{ max-width:100%; }
  .scopeCard{ grid-template-columns:minmax(0,1fr); gap:12px; padding:22px; }
  .gallery{ grid-template-columns:minmax(0,1fr); }
  .howBlock{ grid-template-columns:minmax(0,1fr); gap:10px; padding-block:20px; }
  .vs{ grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,52px)); }
  .vs > div{ padding:12px 11px; font-size:0.88rem; }
  .vs__head{ font-size:0.58rem; letter-spacing:.06em; }
  .release{ padding-left:26px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .simDocWrap{ scroll-behavior:auto; }
  /* never leave anything mid-reveal when motion is off */
  .js-anim .reveal,.js-anim .stagger > *{ opacity:1 !important; transform:none !important; }
  .js-anim .reveal .eyebrow::before{ width:24px; }
  .btn--gold::after{ display:none; }
  .progress{ display:none; }
}
/* ============================================================
   COMPACTION COMPONENTS
   Tabs, accordions and the comparison table. Everything here is
   progressive: with JS off the tabs render as stacked sections
   and the accordions are plain <details>, so nothing is lost.
   ============================================================ */

/* ---------- tabset ---------- */
.tabset{ display:block; }
.tabset__bar{
  display:flex; gap:6px; flex-wrap:wrap;
  padding:6px; border-radius:calc(var(--radius) + 4px);
  background:var(--tint); border:1px solid var(--tint-edge);
}
.band--mist .tabset__bar{ background:var(--paper); }
.tabset__tab{
  appearance:none; border:1px solid transparent; background:transparent;
  font-family:var(--sans); font-size:var(--step--1); font-weight:600;
  color:var(--ink-soft); letter-spacing:-0.01em;
  padding:9px 15px; border-radius:var(--radius); cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; line-height:1.3;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.tabset__tab:hover{ background:var(--tint-2); color:var(--ink); }
.tabset__tab[aria-selected="true"]{
  background:var(--paper); color:var(--brand);
  border-color:var(--tint-edge); box-shadow:var(--shadow-sm);
}
.band--mist .tabset__tab[aria-selected="true"]{ background:var(--tint-2); }
.tabset__tab svg{ width:16px; height:16px; flex:none; }
.tabset__tab .num{
  font-family:var(--mono); font-size:11px; font-weight:500;
  background:var(--tint-2); color:var(--ink-soft);
  padding:1px 6px; border-radius:99px;
}
.tabset__tab[aria-selected="true"] .num{ background:var(--brand); color:#fff; }
.tabset__panes{ margin-top:24px; }
.tabset__pane[hidden]{ display:none !important; }
.js-anim .tabset__pane:not([hidden]){ animation:paneIn .28s cubic-bezier(.22,1,.36,1) both; }
@keyframes paneIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .tabset__pane{ animation:none !important } }
/* no JS: show every pane, and the bar is meaningless */
html:not(.js-tabs) .tabset__bar{ display:none; }
html:not(.js-tabs) .tabset__pane{ display:block !important; margin-bottom:32px; }

/* the pane body most tabs use */
.paneGrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.paneSplit{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,48px); align-items:start; }
@media (max-width:820px){ .paneSplit{ grid-template-columns:minmax(0,1fr); } }

/* ---------- accordion ---------- */
.acc{ border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--paper); }
.acc__item{ border-top:1px solid var(--line); }
.acc__item:first-child{ border-top:0; }
.acc__item > summary{
  list-style:none; cursor:pointer; padding:17px 22px; padding-right:52px;
  position:relative; font-weight:600; color:var(--ink); line-height:1.4;
  display:block; transition:background .15s ease;
}
.acc__item > summary::-webkit-details-marker{ display:none; }
.acc__item > summary:hover{ background:var(--tint); }
.acc__item > summary::after{
  content:""; position:absolute; right:22px; top:50%;
  width:10px; height:10px; margin-top:-5px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translateY(-2px); transform-origin:center;
  transition:transform .2s ease;
}
.acc__item[open] > summary{ background:var(--tint); color:var(--brand); }
.acc__item[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); border-color:var(--brand); }
.acc__body{ padding:2px 22px 20px; color:var(--muted); }
.acc__body > * + *{ margin-top:12px; }
.acc__body p{ max-width:76ch; }
.acc__body ul{ margin:0; padding-left:20px; }
.acc__body li + li{ margin-top:6px; }
.acc--plain{ border:0; border-radius:0; }
.acc--plain .acc__item{ border-top:1px solid var(--line); }

/* ---------- comparison table ---------- */
.cmpWrap{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper); overflow:hidden; box-shadow:var(--shadow-sm); }
.cmpHead{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--line); background:var(--paper-2);
}
.cmpHead p{ font-size:var(--step--1); color:var(--muted); }
.seg{ display:inline-flex; padding:4px; gap:4px; background:var(--tint); border:1px solid var(--tint-edge); border-radius:99px; }
.seg button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-family:var(--sans); font-size:var(--step--1); font-weight:600; color:var(--ink-soft);
  padding:6px 14px; border-radius:99px; transition:background .15s ease, color .15s ease;
}
.seg button:hover{ color:var(--ink); }
.seg button[aria-pressed="true"]{ background:var(--brand); color:#fff; }
.cmpScroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.cmp{ width:100%; border-collapse:collapse; font-size:var(--step--1); min-width:540px; }
table.cmp th, table.cmp td{ padding:11px 16px; text-align:left; vertical-align:top; border-top:1px solid var(--line); }
table.cmp thead th{
  position:sticky; top:0; z-index:2; background:var(--paper);
  border-top:0; border-bottom:1px solid var(--line);
  font-size:var(--step--1); font-weight:700; letter-spacing:-0.01em; white-space:nowrap;
}
table.cmp tbody tr:hover{ background:var(--tint); }
table.cmp td:nth-child(2), table.cmp td:nth-child(3),
table.cmp th:nth-child(2), table.cmp th:nth-child(3){ text-align:center; width:132px; }
table.cmp th:nth-child(2){ color:var(--free); }
table.cmp th:nth-child(3){ color:var(--pro); }
table.cmp tbody th{ font-weight:600; color:var(--ink); }
.cmp .grp th{
  background:var(--brand-deep); color:#fff; font-weight:600;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding-block:8px;
}
.cmp .grp th::after{ content:none; }
.cmp small{ display:block; color:var(--muted); font-weight:400; margin-top:2px; line-height:1.45; }
.yes, .no, .lim{ display:inline-flex; align-items:center; justify-content:center; gap:5px; font-weight:600; }
.yes{ color:var(--free); }
.lim{ color:var(--pro); }
.no{ color:#9AA9B8; }
.yes svg, .no svg, .lim svg{ width:15px; height:15px; flex:none; }
.cmpVal{ font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--ink-soft); }
tr.is-off{ display:none; }

/* ---------- small building blocks used across the new pages ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:99px; border:1px solid var(--tint-edge);
  background:var(--tint); color:var(--ink-soft); white-space:nowrap;
}
.pill--free{ background:var(--free-tint); border-color:#BFE0CC; color:var(--free); }
.pill--pro{ background:var(--pro-tint); border-color:var(--pro-edge); color:var(--pro); }

.fcard{
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper);
  padding:20px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.fcard:hover{ border-color:var(--tint-edge); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.fcard__top{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.fcard > .pill{ align-self:flex-start; }
.fcard__top h3{ min-width:0; }
.fcard h3{ font-size:var(--step-1); }
.fcard h4{ font-size:var(--step-0); font-weight:700; }
.fcard p{ color:var(--muted); font-size:var(--step--1); line-height:1.6; }
.fcard__ico{ flex:none; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--tint); color:var(--brand); }
.fcard__ico svg{ width:19px; height:19px; }
.fcard--pro .fcard__ico{ background:var(--pro-tint); color:var(--pro); }

.keyval{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:var(--step--1); }
.keyval dt{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap; padding-top:3px; }
.keyval dd{ margin:0; color:var(--ink); }

.callout{
  border:1px solid var(--tint-edge); border-left:4px solid var(--brand);
  background:var(--tint); border-radius:var(--radius);
  padding:14px 18px; font-size:var(--step--1); color:var(--ink-soft);
}
.callout--pro{ border-left-color:var(--gold); background:var(--pro-tint); border-color:var(--pro-edge); }
.callout--warn{ border-left-color:var(--danger); background:#FDEEEC; border-color:#F3CFCA; }
.callout strong{ color:var(--ink); }

/* ---------- /teams bits ---------- */
.stepList{ counter-reset:st; list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.stepList li{
  counter-increment:st; position:relative; padding:16px 20px 16px 60px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
  color:var(--muted); font-size:var(--step--1); line-height:1.6;
}
.stepList li b{ color:var(--ink); display:block; margin-bottom:2px; font-size:var(--step-0); }
.stepList li::before{
  content:counter(st); position:absolute; left:18px; top:16px;
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  background:var(--brand); color:#fff; font-family:var(--mono); font-size:13px; font-weight:600;
}
.layerStack{ display:grid; gap:10px; }
.layer{
  border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px;
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:center;
}
.layer b{ font-size:var(--step-0); }
.layer p{ grid-column:2; color:var(--muted); font-size:var(--step--1); }
.layer--1{ background:var(--pro-tint); border-color:var(--pro-edge); }
.layer--2{ background:var(--tint); border-color:var(--tint-edge); margin-inline-start:22px; }
.layer--3{ background:var(--paper-2); margin-inline-start:44px; }
@media (max-width:620px){ .layer--2,.layer--3{ margin-inline-start:0; } }

/* legal pages as accordions */
.legalTools{ display:flex; gap:8px; margin-bottom:14px; }
.miniBtn{
  appearance:none; cursor:pointer; font-family:var(--sans); font-size:var(--step--1); font-weight:600;
  color:var(--ink-soft); background:var(--paper); border:1px solid var(--line);
  border-radius:99px; padding:6px 14px; transition:background .15s ease, border-color .15s ease;
}
.miniBtn:hover{ background:var(--tint); border-color:var(--tint-edge); color:var(--ink); }
.acc--legal summary{ font-size:var(--step-0); }
.acc--legal .acc__body{ color:var(--muted); }
.acc--legal .acc__body p + p{ margin-top:12px; }
.acc--legal .acc__body ul, .acc--legal .acc__body ol{ margin:12px 0 0; padding-left:22px; }
.acc--legal .acc__body li + li{ margin-top:7px; }
.acc--legal .acc__body table{ margin-top:12px; }
.legal .acc{ margin-bottom:8px; }

/* one gallery card at a time */
.galleryPanes .shotCard{ max-width:620px; margin-inline:auto; }

/* Printing and Ctrl-F both need the whole document, so nothing stays shut. */
@media print{
  .acc__item{ break-inside:avoid; }
  .acc__item > summary{ font-weight:700; }
  .acc__body{ display:block !important; }
  .legalTools, .tabset__bar{ display:none !important; }
  .tabset__pane{ display:block !important; }
}

/* the help pills sat on their own dark backgrounds before .pill existed */
.howBlock .pill{ border:0; text-transform:none; letter-spacing:0; }

/* the 'try this' chips above the demo */
.tryChips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:4px; }
.tryChips span{
  font-family:var(--mono); font-size:11px; letter-spacing:.02em;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.88); padding:5px 11px; border-radius:99px;
}
.tryChips em{ font-style:normal; color:var(--gold); }

/* ---------- demo additions ---------- */
.simToolbar--2{ border-top:0; padding-top:0; }
.simToolbar--2 .numToggle{ display:inline-flex; align-items:center; gap:5px; }
.simToolbar--2 select[disabled]{ opacity:.45; }
.srow .snum{
  flex:none; font-family:var(--mono); font-size:10.5px; font-weight:500;
  color:rgba(255,255,255,.82); min-width:30px; text-align:right;
}
.srow.s4 .snum, .srow.s5 .snum, .srow.s6 .snum{ color:rgba(20,38,59,.6); }
.stag{
  flex:0 1 auto; min-width:0; max-width:86px; overflow:hidden; text-overflow:ellipsis;
  font-size:8.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 5px; border-radius:4px; line-height:1.4; white-space:nowrap;
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.2); color:#fff;
}
/* the name matters more than the tag, so the name gets the room first */
.srow .slabel{ flex:1 1 auto; min-width:0; }
.srow.s4 .stag, .srow.s5 .stag, .srow.s6 .stag{ border-color:rgba(20,38,59,.22); background:rgba(20,38,59,.08); color:#14263B; }
.stag[data-t="approved"]{ background:#1D9E75; border-color:#1D9E75; color:#fff; }
.stag[data-t="review"]{ background:#EBB522; border-color:#EBB522; color:#3D2E00; }
.stag[data-t="draft"]{ background:#5D7189; border-color:#5D7189; color:#fff; }
.stag[data-t="blocked"]{ background:#C0392B; border-color:#C0392B; color:#fff; }

.srow[draggable="true"]{ cursor:grab; }
.srow.is-dragging{ opacity:.35; }
.srow.dropBefore{ box-shadow:inset 0 3px 0 0 #EBB522; }
.srow.dropAfter{ box-shadow:inset 0 -3px 0 0 #EBB522; }
.srow.dropInto{ outline:2px dashed #EBB522; outline-offset:-2px; }
.sgrip{ flex:none; width:12px; opacity:.55; font-size:11px; line-height:1; cursor:grab; }

.simPop{
  background:#fff; border:1px solid #CBDCEA; border-radius:10px; padding:12px;
  box-shadow:0 18px 40px -18px rgba(20,38,59,.55); display:flex; flex-direction:column; gap:9px;
  max-height:330px; overflow:auto;
}
.is-dark .simPop{ background:#16283C; border-color:#2C455F; color:#E7EFF6; }
.is-dark .simPop p.popHint, .is-dark .simPop label.fld{ color:#9FB6CC; }
.is-dark .simPop .popBtn{ background:#1E3450; border-color:#2C455F; color:#E7EFF6; }
.is-dark .simPop pre{ background:#12243A; border-color:#2C455F; color:#D8E6F2; }
.is-dark .simPop input[type=text], .is-dark .simPop textarea, .is-dark .simPop select{ background:#12243A; border-color:#2C455F; color:#E7EFF6; }
.simPop p.popHint{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:#5D7189; }
.simPop label.fld{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:600; color:#3A506B; }
.simPop input[type=text], .simPop textarea, .simPop select{
  font-family:var(--uiFont); font-size:12.5px; padding:7px 9px;
  border:1px solid #CBDCEA; border-radius:6px; background:#fff; color:#1B2A3D; width:100%;
}
.simPop textarea{ min-height:62px; resize:vertical; font-family:var(--mono); font-size:11.5px; }
.popRow{ display:flex; gap:7px; flex-wrap:wrap; }
.popBtn{
  appearance:none; cursor:pointer; border:1px solid #CBDCEA; background:#F2F6FA; color:#1B2A3D;
  font-family:var(--uiFont); font-size:12px; font-weight:600; padding:7px 11px; border-radius:6px;
  display:inline-flex; align-items:center; gap:6px; text-align:left;
}
.popBtn:hover{ background:#E3EDF5; }
.popBtn.go{ background:#1D9E75; border-color:#1D9E75; color:#fff; }
.popBtn.go:hover{ background:#17805F; }
.popBtn.wide{ width:100%; justify-content:flex-start; }
.popBtn .sub{ display:block; font-weight:400; font-size:10.5px; color:#5D7189; }
.popBtn.go .sub{ color:rgba(255,255,255,.8); }
.popBtn[disabled]{ opacity:.5; cursor:not-allowed; }
.popPro{ font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:#EBB522; color:#3D2E00; padding:2px 5px; border-radius:3px; margin-left:auto; }
.popNote{ font-size:11px; color:#5D7189; line-height:1.5; }
.tagDot{ width:10px; height:10px; border-radius:3px; flex:none; }
.simPop pre{
  margin:0; font-family:var(--mono); font-size:11px; line-height:1.55; color:#1B2A3D;
  background:#F2F6FA; border:1px solid #CBDCEA; border-radius:6px; padding:10px; max-height:150px; overflow:auto; white-space:pre;
}

/* home: the compact Free/Pro strip */
.fpList{ display:grid; gap:8px; }
.fpRow{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper); padding:12px 16px; font-size:var(--step--1);
}
.fpRow span:first-child{ color:var(--ink); font-weight:500; }
.stepList--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:860px){ .stepList--3{ grid-template-columns:minmax(0,1fr); } }
.stepList--3 li{ padding-top:52px; padding-left:20px; }
.stepList--3 li::before{ top:16px; left:20px; }

/* a tighter section head for the compacted pages */
.headRow{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.headRow .lede{ margin-top:6px; }
.band--snug{ padding-block:clamp(36px,4vw,56px); }
.videoBand--snug{ padding-block:clamp(40px,4.5vw,64px); }

/* ============================================================
   LIVE DEMO — geometry and colour taken from the add-on's own
   Sidebar.html rather than approximated. Anything with a pixel
   value in here matches a value in that file.
   ============================================================ */
/* Declared on .sim, not on .simPanel. The modals are children of .sim,
   so scoping these to the panel left every one of them with unresolved
   backgrounds and borders — which is to say invisible ones. */
.sim{ --sb-panel:#fff; --sb-input:#fff; --sb-ink:#1F2A37; --sb-border:#C6D5E0;
           --sb-muted:#64748B; --sb-muted2:#475569; --sb-sub:rgba(27,42,61,.18);
           --sb-summary:rgba(27,42,61,.12); --sb-track:rgba(27,42,61,.06); --sb-hover:rgba(27,42,61,.1); }
.sim.is-dark{ --sb-panel:#262D38; --sb-input:#1F2530; --sb-ink:#E8ECF1; --sb-border:#3A4451;
           --sb-muted:#97A3B4; --sb-muted2:#AEB9C7; --sb-sub:rgba(255,255,255,.14);
           --sb-summary:rgba(255,255,255,.08); --sb-track:rgba(255,255,255,.06); --sb-hover:rgba(255,255,255,.08); }

.simTop__txt{ flex:1; min-width:0; }
.simIconBtn{
  flex:none; width:22px; height:22px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid var(--sb-border); background:var(--sb-panel); color:var(--sb-muted);
  display:grid; place-items:center;
}
.simIconBtn:hover{ background:var(--sb-hover); border-color:#94A9BB; }
.simIconBtn svg{ width:14px; height:14px; }
.simIconBtn.is-on{ border-color:var(--brand); color:var(--brand); }
.tabBadge{ margin-left:5px; background:#C0392B; color:#fff; font-size:9.5px; font-weight:700; padding:1px 5px; border-radius:8px; }
.simPane{ flex:1; min-height:0; display:flex; flex-direction:column; }

/* The real sidebar puts the toolbar above the search box. It keeps that
   order here, but wraps onto a second line rather than scrolling: at this
   panel width a scrolling line cuts "0 selected" off mid-word, and a
   half-word reads as a broken page rather than as something to scroll. */
.simToolbar{ margin:8px 12px 6px; flex-wrap:wrap; row-gap:5px; overflow:visible; }
.simToolbar label, .simToolbar button, .simToolbar select{ flex:none; white-space:nowrap; }
.simToolbar select{ margin-left:auto; }
/* the two counters take the second line together */
.simToolbar #simCount{ flex:none; white-space:nowrap; margin-left:2px; }
.simToolbar #simSize{ flex:none; white-space:nowrap; margin-left:auto; color:var(--muted); }
.simToolbar select{ margin-left:auto; }

/* ---------- a row, exactly as the add-on draws one ---------- */
.rowWrap{ position:relative; }
.guideLine{ position:absolute; top:0; width:1.5px; background:var(--sb-muted2); pointer-events:none; opacity:.55; }
.guideLine.full{ height:calc(100% + 8px); }
.guideLine.half{ height:50%; }
.guideElbow{ position:absolute; top:50%; height:1.5px; width:8px; background:var(--sb-muted2); pointer-events:none; opacity:.55; }

.srow{
  display:flex; align-items:center; gap:0;
  padding:7px 8px 7px 26px; margin-bottom:8px; border-radius:8px;
  position:relative; cursor:pointer; overflow:hidden; max-height:54px;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  transition:max-height .32s ease, opacity .32s ease, transform .18s ease,
             padding .32s ease, margin .32s ease, background .2s ease, box-shadow .18s ease;
}
.srow::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:20px; background:transparent; }
.srow:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.18); filter:brightness(1.08); }
.srow.leaving{ max-height:0 !important; opacity:0 !important; transform:translateX(14px) !important;
  padding-top:0 !important; padding-bottom:0 !important; margin:0 !important; }

.sgrip{ flex:none; width:12px; height:20px; display:flex; align-items:center; justify-content:center;
  cursor:grab; opacity:.65; margin-right:2px; color:inherit; }
.sgrip:hover{ opacity:.9; }
.sgrip svg{ width:10px; height:16px; fill:currentColor; }

.tagDot{
  flex:none; width:9px; height:9px; border-radius:50%; padding:0; margin-right:3px;
  cursor:pointer; border:1.5px solid var(--sb-border); background:transparent;
  opacity:.55; transition:opacity .15s ease, transform .1s ease;
}
.tagDot:hover{ opacity:1; transform:scale(1.15); }
.tagDot.tagged{ opacity:1; }

.stoggle{
  position:absolute; left:4px; top:50%; transform:translateY(-50%); z-index:2;
  width:12px; height:12px; border:none; background:rgba(255,255,255,.55);
  border-radius:3px; color:#14263B; font-size:10px; font-weight:700; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.stoggle:hover{ background:rgba(255,255,255,.8); }

.srow .slabel{
  flex:1; position:relative; font-size:14px; font-weight:700; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-left:6px;
}
.srow .slabel::after{
  content:''; position:absolute; left:0; top:50%; height:2px; width:0%;
  background:rgba(255,255,255,.35); transform:translateY(-50%);
  transition:width .45s ease, background-color .45s ease;
}
.srow.checked .slabel::after{ width:100%; background:#fff; }
.srow .smeta{ font-size:12px; color:rgba(27,42,61,.55); margin-left:6px; margin-right:4px; white-space:nowrap; }

.srow input[type=checkbox]{
  -webkit-appearance:none; appearance:none; width:16px; height:16px; flex:none; margin-left:6px;
  border:1.5px solid var(--sb-border); border-radius:4px; background:var(--sb-input);
  cursor:pointer; position:relative; transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.srow input[type=checkbox]:checked{ background:#2A5C8A; border-color:#2A5C8A; }
.srow input[type=checkbox]:checked::after{
  content:''; position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.srow.checked{ background:#C0392B !important; box-shadow:0 2px 6px rgba(160,40,25,.4); }
.srow.checked .slabel, .srow.checked .sjump, .srow.checked .smeta{ color:#fff !important; }
.srow.checked input[type=checkbox]{ background:#fff; border-color:#fff; }
.srow.checked input[type=checkbox]::after{ border-color:#C0392B; }

.srow .sjump{ border:none; background:none; font-weight:700; cursor:pointer; font-size:13px;
  padding:2px 3px; margin-left:4px; flex:none; transition:transform .12s ease; }
.srow .sjump:active{ transform:scale(.85); }

.srow.s1{ background:var(--lv1); } .srow.s1::before{ background:var(--lv1-edge); }
.srow.s1 .slabel, .srow.s1 .sjump{ color:var(--c-h-1-text,#fff); }
.srow.s2{ background:var(--lv2); } .srow.s2::before{ background:var(--lv2-edge); }
.srow.s2 .slabel, .srow.s2 .sjump{ color:var(--c-h-2-text,#fff); }
.srow.s3{ background:var(--lv3); } .srow.s3::before{ background:var(--lv3-edge); }
.srow.s3 .slabel, .srow.s3 .sjump{ color:var(--c-h-3-text,#fff); }
.srow.s4{ background:var(--lv4); } .srow.s4::before{ background:var(--lv4-edge); }
.srow.s4 .slabel, .srow.s4 .sjump{ color:var(--c-h-4-text,#14263B); }
.srow.s5{ background:var(--c-h-5); } .srow.s5::before{ background:var(--c-h-5-border); }
.srow.s5 .slabel, .srow.s5 .sjump{ color:var(--c-h-5-text,#14263B); }
.srow.s6{ background:var(--c-h-6); } .srow.s6::before{ background:var(--c-h-6-border); }
.srow.s6 .slabel, .srow.s6 .sjump{ color:var(--c-h-6-text,#14263B); }
.srow.s4 .stoggle, .srow.s5 .stoggle, .srow.s6 .stoggle{ background:rgba(20,38,59,.14); }

.srow.dragging{ opacity:.55; box-shadow:0 8px 18px rgba(0,0,0,.3) !important; z-index:20; }
.srow.drop-before{ box-shadow:inset 0 3px 0 0 #EBB522 !important; }
.srow.drop-after{ box-shadow:inset 0 -3px 0 0 #EBB522 !important; }

/* ---------- insert section ---------- */
.insertOuter{ padding-top:6px; }
.insertToggle{
  width:calc(100% - 28px); margin:0 14px 4px; border:none; cursor:pointer;
  background:#6B4FA0; color:#fff; padding:3px 6px; border-radius:8px 8px 3px 3px;
  font-family:var(--uiFont); font-size:10.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.insertToggle:hover{ background:#5A4188; }
.insertToggle .chev{ width:6px; height:6px; border-right:1.5px solid #fff; border-bottom:1.5px solid #fff;
  transform:rotate(-45deg); margin-top:-1px; transition:transform .25s ease; }
.insertToggle[aria-expanded="true"] .chev{ transform:rotate(135deg); margin-top:1px; }
.insertDrawer{
  background:var(--sb-panel); border:1px solid var(--sb-border); border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,.18); padding:14px; margin:0 12px 8px;
  display:flex; flex-direction:column;
  /* a belt-and-braces ceiling: whatever the panel height ends up being,
     a drawer scrolls inside itself rather than out of the sidebar */
  max-height:360px; overflow-y:auto; overscroll-behavior:contain;
}
.insertHint{ margin:0 0 10px; font-size:12px; font-weight:600; color:var(--sb-muted); line-height:1.5; }
.insertDrawer select, .insertDrawer input[type=text], .insertDrawer textarea{
  width:100%; box-sizing:border-box; font-family:var(--uiFont); font-size:13px;
  color:var(--sb-ink); background:var(--sb-input); border:1px solid var(--sb-border);
  border-radius:8px; padding:8px 10px; margin:0 0 8px;
}
.insertDrawer select{ font-weight:600; cursor:pointer; }
.insertDrawer input[type=text]{ font-weight:600; }
.insertDrawer textarea{ font-weight:400; min-height:76px; resize:vertical; padding:8px; }
.insertDrawer #btnInsGo{
  width:100%; border:none; background:#1D9E75; color:#fff; padding:9px 6px; border-radius:8px;
  cursor:pointer; font-family:var(--uiFont); font-size:13px; font-weight:700;
}
.insertDrawer #btnInsGo:hover{ background:#17805F; }

/* ---------- popups ---------- */
.sbPop{
  background:var(--sb-panel); border:1px solid var(--sb-border); border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,.18); padding:10px; margin:0 12px 10px; color:var(--sb-ink);
  animation:popIn .18s cubic-bezier(.34,1.56,.64,1);
  max-height:340px; overflow-y:auto; overscroll-behavior:contain;
}
/* a drawer that scrolls should say so at its edge rather than just
   ending mid-row */
.insertDrawer::-webkit-scrollbar, .sbPop::-webkit-scrollbar{ width:8px; }
.insertDrawer::-webkit-scrollbar-thumb, .sbPop::-webkit-scrollbar-thumb{
  background:var(--sb-sub); border-radius:4px;
}
@keyframes popIn{ from{ opacity:0; transform:scale(.92) translateY(4px) } to{ opacity:1; transform:none } }
.sbPop .popHint{ margin:0 0 8px; font-size:11.5px; font-weight:600; color:var(--sb-muted); }
.levelGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.levelOpt{
  border:none; border-radius:7px; padding:0; font-family:var(--uiFont); font-size:12px; font-weight:700;
  height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.levelOpt.current{ box-shadow:0 0 0 3px #EBB522; }
.levelOpt.o1{ background:var(--lv1); color:var(--c-h-1-text,#fff); }
.levelOpt.o2{ background:var(--lv2); color:var(--c-h-2-text,#fff); }
.levelOpt.o3{ background:var(--lv3); color:var(--c-h-3-text,#fff); }
.levelOpt.o4{ background:var(--lv4); color:var(--c-h-4-text,#14263B); }
.levelOpt.o5{ background:var(--c-h-5); color:var(--c-h-5-text,#14263B); }
.levelOpt.o6{ background:var(--c-h-6); color:var(--c-h-6-text,#14263B); }
.popCancel{
  margin-top:8px; width:100%; border:1px solid var(--sb-border); background:var(--sb-panel);
  color:var(--sb-muted2); font-family:var(--uiFont); font-size:12px; font-weight:600;
  padding:6px; border-radius:6px; cursor:pointer;
}

/* the picker is a small card, not a full-width band across the footer */
.tagPop{ width:max-content; min-width:168px; max-width:calc(100% - 24px); padding:5px; }
.tagOpt{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none;
  background:none; padding:6px 8px; border-radius:6px; font-family:var(--uiFont);
  font-size:12.5px; color:var(--sb-ink); cursor:pointer;
}
.tagOpt:hover{ background:var(--sb-summary); }
.tagSwatch{ flex:none; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--sb-border); background:transparent; }

/* ---------- templates drawer ---------- */
.tplDrawer{ padding:14px; }
.tplDrawer h5{ margin:0 0 8px; font-size:14px; font-weight:700; color:var(--sb-ink); }
.tplHint{ margin:0 0 12px; font-size:11.5px; font-weight:500; color:var(--sb-muted2); line-height:1.5; }
.tplSave{
  width:100%; border:none; background:#1D9E75; color:#fff; padding:9px 8px; border-radius:8px;
  cursor:pointer; font-family:var(--uiFont); font-size:12.5px; font-weight:700;
}
.tplSave:hover{ background:#17805F; }
.tplSaveHint{ margin:0; font-size:11.5px; color:var(--sb-muted2); text-align:center; padding:6px 0; }
.tplDivider{ border-top:1px solid var(--sb-sub); margin:12px 0; }
.tplRow{ display:flex; align-items:center; gap:8px; padding:8px; margin-bottom:6px;
  border-radius:8px; background:var(--sb-summary); }
.tplRow:last-child{ margin-bottom:0; }
.tplInfo{ flex:1; min-width:0; }
.tplName{ font-size:12.5px; font-weight:600; color:var(--sb-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tplMeta{ font-size:11px; color:var(--sb-muted2); margin-top:1px; }
.tplIns{ flex:none; border:none; background:#1D9E75; color:#fff; padding:6px 12px; border-radius:6px;
  font-family:var(--uiFont); font-size:11.5px; font-weight:700; cursor:pointer; }
.tplIns:hover{ background:#17805F; }
.tplDel{ flex:none; border:none; background:none; color:var(--sb-muted2); font-family:var(--uiFont);
  font-size:11px; font-weight:600; cursor:pointer; padding:6px 8px; border-radius:6px; }
.tplDel:hover{ background:rgba(160,40,25,.12); color:#a32d2d; }
.tplEmpty{ font-size:12px; color:var(--sb-muted2); text-align:center; padding:22px 10px; line-height:1.5; }

/* ---------- settings modal ---------- */
.sbModal{ position:absolute; inset:0; background:rgba(15,23,32,.45); display:flex;
  align-items:flex-start; justify-content:center; padding:24px 14px; z-index:9; }
.sbModal__inner{
  background:#fff; background:var(--sb-panel); border-radius:12px; padding:38px 18px 16px; width:100%;
  max-width:300px; position:relative; box-shadow:0 8px 24px rgba(0,0,0,.18);
  max-height:100%; display:flex; flex-direction:column; color:var(--sb-ink);
  animation:popIn .2s cubic-bezier(.34,1.56,.64,1);
}
.sbModal__close{ position:absolute; top:6px; right:6px; border:none; background:transparent;
  color:#94A3B8; font-size:16px; cursor:pointer; padding:8px; line-height:1; }
.sbModal__tabs{ display:flex; gap:4px; padding:4px; background:var(--sb-track); border-radius:8px; margin:0 0 14px; flex:none; }
.sbModal__tabs button{ flex:1; border:none; background:transparent; padding:7px 6px; border-radius:6px;
  font-family:var(--uiFont); font-size:12px; font-weight:500; color:var(--sb-muted); cursor:pointer; }
.sbModal__tabs button[aria-selected="true"]{ background:var(--brand); color:#fff; }
.sbModal__body{ flex:1; min-height:0; overflow-y:auto; }
.catHead{
  display:flex; align-items:center; gap:6px; font-family:var(--uiFont);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--sb-muted2); margin:20px 0 10px; padding-bottom:5px; border-bottom:1px solid var(--sb-sub);
}
.catHead:first-child{ margin-top:0; }
.catHead::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--cat,#6B7280); flex:none; }
.setRow{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--sb-ink); cursor:pointer; margin-top:12px; }
.setRow:first-of-type{ margin-top:0; }
.setRow input[type=checkbox]{ width:14px; height:14px; accent-color:var(--brand); }
.setSub{ display:flex; align-items:center; gap:8px; margin:8px 0 0 24px; font-size:12px; color:var(--sb-muted2); }
.setSub select{ font-family:var(--uiFont); font-size:12.5px; color:var(--sb-ink); background:var(--sb-input);
  border:1px solid var(--sb-border); border-radius:6px; padding:4px 8px; cursor:pointer; }
.setLink{ display:block; margin:12px 0 0; padding-top:12px; border-top:1px solid var(--sb-sub);
  font-size:12.5px; color:var(--brand); cursor:pointer; background:none; border-left:0; border-right:0; border-bottom:0;
  font-family:var(--uiFont); text-align:left; width:100%; }
.setLink:hover{ text-decoration:underline; }
.proBlock{ background:var(--sb-summary); border-radius:8px; padding:10px; }
.proBlock p{ margin:0 0 8px; font-size:12.5px; font-weight:700; }
.proBlock .keyRow{ display:flex; gap:6px; }
.proBlock input{ flex:1; min-width:0; font-family:var(--uiFont); font-size:12.5px; color:var(--sb-ink);
  background:var(--sb-input); border:1px solid var(--sb-border); border-radius:6px; padding:6px 8px; }
.proBlock button{ border:none; background:var(--brand); color:#fff; font-family:var(--uiFont);
  font-size:12px; font-weight:700; padding:8px 10px; border-radius:6px; cursor:pointer; white-space:nowrap; }
.exportBox{
  width:100%; box-sizing:border-box; height:150px; font-family:var(--mono); font-size:11.5px;
  color:var(--sb-ink); background:var(--sb-input); border:1px solid var(--sb-border);
  border-radius:8px; padding:8px; resize:vertical; margin-bottom:10px;
}

/* ---------- toasts ---------- */
.simToast .prog{ width:100%; text-align:left; }
.simToast .progLabel{ display:block; font-size:12px; font-weight:700; margin-bottom:6px; }
.simToast .progTrack{ width:100%; height:8px; background:rgba(255,255,255,.25); border-radius:4px; overflow:hidden; }
.simToast .progFill{ height:100%; width:0%; background:#4ADE80; border-radius:4px; transition:width .35s ease; }
.simToast .okWrap{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; }

/* An element out of view stops animating; .anim-idle is set by the
   observer in the script block. Pseudo-elements are covered too, which
   is where most of these animations actually live. */
.anim-idle, .anim-idle::before, .anim-idle::after{ animation-play-state:paused !important; }
/* ============================================================
   The capability index at /everything
   ============================================================ */
.idxGrid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); }
.idxCard{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px 22px 18px; display:flex; flex-direction:column; gap:14px;
  box-shadow:0 1px 2px rgba(20,38,59,.05);
}
.idxCard__head{ display:flex; gap:14px; align-items:flex-start; }
.idxCard__head h3{ font-size:1.06rem; margin:0 0 3px; letter-spacing:-.01em; }
.idxCard__head p{ margin:0; font-size:.88rem; color:var(--muted); line-height:1.45; }
.idxCard__tile{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center; color:#fff;
  box-shadow:0 7px 16px -10px rgba(20,38,59,.6);
}
.idxCard__tile.tile-3{ color:var(--gold-ink); }
.idxCard__tile.tile-4{ color:var(--brand-deep); }
.idxCard__tile svg{ width:23px; height:23px; }
.idxList{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.idxList li{
  display:grid; grid-template-columns:1fr auto; gap:2px 10px;
  padding-top:11px; border-top:1px solid var(--line);
}
.idxList li b{ font-size:.93rem; font-weight:650; }
.idxList li .pill{ grid-column:2; grid-row:1; align-self:start; }
.idxList li span{ grid-column:1 / -1; font-size:.875rem; color:var(--muted); line-height:1.5; }
.idxList li code{ font-size:.82em; }
/* ---------- lines in the demo document that look like headings ---------- */
.docPseudo{ margin:13px 0 6px; color:#202124; font-size:11.5px; line-height:1.55; }
.docPseudo.is-bold{ font-weight:700; }
.docPseudo.is-under{ text-decoration:underline; text-underline-offset:2px; }
.docPseudo.is-big{ font-size:13.5px; }
.docPseudo__tail{ display:inline; font-weight:400; font-size:11.5px; text-decoration:none; color:#3C4043; }
.sim.is-dark .docPseudo{ color:#E8ECF1; }
.sim.is-dark .docPseudo__tail{ color:#AEB9C7; }

/* ---------- the scan modal ---------- */
.scanNote{ font-size:12px; line-height:1.55; color:var(--sb-muted2); margin:0 0 10px; }
.scanModal{ max-width:390px; }
.scanList{ display:flex; flex-direction:column; gap:7px; margin:12px 0 14px; }
.scanRow{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px; align-items:start;
  padding:10px 11px; border:1px solid var(--sb-border); border-radius:8px;
  background:var(--sb-panel); cursor:pointer;
}
.scanRow.is-strong{ border-color:#EBB522; background:rgba(235,181,34,.08); }
.scanRow input{ margin-top:3px; }
.scanRow__mid{ min-width:0; }
.scanRow__head{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.scanRow__t{ font-size:12.5px; font-weight:650; color:var(--sb-ink); line-height:1.35; }
.scanRow__meta{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.scanSig{
  font-size:9.5px; letter-spacing:.03em; text-transform:uppercase;
  padding:2px 6px; border-radius:4px; background:rgba(35,82,128,.1); color:#235280;
}
.sim.is-dark .scanSig{ background:rgba(255,255,255,.1); color:#AEB9C7; }
.scanSplit{
  font-size:10.5px; line-height:1.45; color:#8A6508; margin:7px 0 0;
  padding:5px 7px; border-radius:6px; background:rgba(235,181,34,.14);
}
.sim.is-dark .scanSplit{ color:#F3C44D; }
.scanBadge{
  font-size:9.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:3px 7px; border-radius:99px; background:#EBB522; color:#3D2E00; white-space:nowrap;
}
#scanGo[disabled]{ opacity:.45; cursor:default; }
/* ============================================================
   Polish pass.

   Rules for everything below: a gradient that never moves is painted
   once and costs nothing afterwards; transform and opacity are handed
   to the compositor. No animation here touches a layout or paint
   property, so none of it can come back as scroll jank.
   ============================================================ */

/* --- a brand hairline under the header instead of a flat grey line --- */
.masthead{ border-bottom:0; }
.masthead::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,
    var(--line) 0%, var(--tint-edge) 18%, rgba(35,82,128,.45) 50%,
    var(--tint-edge) 82%, var(--line) 100%);
}
.masthead{ position:sticky; }

/* --- keyboard focus, everywhere, and only for the keyboard --- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, details:focus-visible,
summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:6px;
}
.btn:focus-visible{ outline-offset:3px; }

/* --- buttons get a little more presence --- */
.btn--primary, .btn--gold{
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -8px rgba(20,38,59,.6);
}
.btn--primary:active, .btn--gold:active, .btn--ghost:active, .btn--onDark:active{
  transform:translateY(1px);
}
.btn--ghost{ transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.btn--ghost:hover{ transform:translateY(-1px); }

/* --- feature cards: a colour wash that fades in rather than paints in --- */
.feature{ transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease; }
.feature::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(160deg, rgba(35,82,128,.06), rgba(235,181,34,.05) 70%, transparent);
  opacity:0; transition:opacity .28s ease;
}
.feature:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -24px rgba(20,38,59,.7); }
.feature:hover::after{ opacity:1; }

/* --- the tab bar: the selected pill gets a gold underline --- */
.tabset__tab{ position:relative; transition:background .16s ease, color .16s ease; }
.tabset__tab[aria-selected="true"]::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  border-radius:2px; background:var(--gold);
  transform:scaleX(1); transform-origin:50% 50%;
  animation:tabUnderline .28s cubic-bezier(.22,1,.36,1);
}
@keyframes tabUnderline{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@media (prefers-reduced-motion:reduce){ .tabset__tab[aria-selected="true"]::after{ animation:none } }

/* --- section eyebrows sit on a tinted chip --- */
.sectionHead .eyebrow, .headRow .eyebrow{ font-weight:600; }

/* --- the capability index reads as columns, not a ragged grid --- */
.idxGrid{
  display:block;
  column-count:3; column-gap:18px;
}
.idxCard{
  display:block; break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 18px;
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;
}
.idxCard:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -24px rgba(20,38,59,.65); }
.idxCard__head{ margin-bottom:14px; }
.idxList li .pill{ font-size:.62rem; padding:2px 7px; align-self:center; }
@media (max-width:1080px){ .idxGrid{ column-count:2; } }
@media (max-width:720px){ .idxGrid{ column-count:1; } }

/* --- the hero shot floats a little --- */
.shotWrap{ position:relative; }
.shotWrap::after{
  content:""; position:absolute; left:8%; right:8%; bottom:-26px; height:38px;
  border-radius:50%; background:rgba(0,0,0,.42); filter:blur(18px);
  pointer-events:none; z-index:-1;
}
.shot{ transition:transform .5s cubic-bezier(.22,1,.36,1); }
.shotWrap:hover .shot{ transform:translateY(-4px); }

/* --- pricing: the recommended plan should look recommended --- */
.tier{ position:relative; transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease; }
.tier:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -26px rgba(20,38,59,.6); }
.tier--now::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(140deg, var(--brand), var(--gold));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; padding:2px;
}
.tier--now .tier__tag{ background:var(--gold); color:var(--gold-ink); }

/* --- quiet, consistent card chrome everywhere else --- */
.infoCard, .qaItem, .tsItem, .scopeCard, .shotCard{
  transition:box-shadow .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
.shotCard:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -24px rgba(20,38,59,.65); }

/* --- selection colour, because the details are the polish --- */
::selection{ background:rgba(235,181,34,.35); color:var(--ink); }

/* ============================================================
   Phones.

   Everything here was measured at 390x844 before it was written.
   ============================================================ */

/* --- tap targets. 44px is the number, and a link in a sentence is
       exempt because making prose 44px tall is not an improvement. --- */
@media (pointer:coarse){
  .tabset__tab{ min-height:44px; }
  .miniBtn, .seg button, .acc__ctl button, .quickNav a{ min-height:42px; }
  .nav a{ min-height:44px; display:flex; align-items:center; }
  .foot a{ display:inline-block; padding-block:4px; }
  details > summary{ min-height:44px; display:flex; align-items:center; gap:10px; }
  .simIconBtn{ width:30px; height:30px; }
  .simTab{ min-height:38px; }
  .srow input[type=checkbox]{ width:17px; height:17px; }

  /* The dot and the magnifier stay the size they are in the add-on. What
     grows is the area your thumb has to land on, which is invisible. */
  .tagDot, .srow .jump, .sgrip, .collapseToggle{ position:relative; }
  .tagDot::after, .srow .jump::after, .sgrip::after, .collapseToggle::after{
    content:""; position:absolute; inset:-8px;
  }

  /* the toolbar above the search box is four controls in a 12px strip */
  .simToolbar label, .simToolbar button, .simToolbar select{ min-height:32px; }
  .simToolbar button, .simToolbar select{ padding-block:7px; }
  .simToolbar input[type=checkbox]{ width:16px; height:16px; }
}
*{ -webkit-tap-highlight-color:rgba(35,82,128,.14); }

/* --- a row of tabs should scroll, not wrap into four lines --- */
@media (max-width:760px){
  .tabset__bar{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .tabset__bar::-webkit-scrollbar{ display:none; }
  .tabset__tab{ flex:none; }
}

@media (max-width:560px){
  /* long centred lines are hard to track on a narrow screen */
  .lede.centered, .sectionHead.centered .lede{ text-align:left; }
  .sectionHead.centered, .centered .eyebrow{ text-align:left; }
  .sectionHead.centered .eyebrow{ justify-content:flex-start; }
  .lede{ font-size:var(--step-0); }

  .hero{ padding-block:38px 44px; }
  .hero__trust{ flex-direction:column; gap:9px; }
  .hero__cta .btn{ width:100%; }

  .wrap{ padding-inline:16px; }
  .band{ padding-block:44px; }

  .idxCard{ padding:18px 16px 14px; }
  .tryChips{ gap:7px; }
  .tryChips span{ font-size:0.66rem; }

  /* --- the demo --- */
  /* Google Docs' menu bar and toolbar are scene-setting on a laptop and
     a third of the screen on a phone. The sidebar is the product. */
  .simMenus, .simTools{ display:none; }
  .simDocWrap{ max-height:260px; padding:12px 8px 18px; }
  .simPage{ padding:18px 16px; }
  .simToolbar{
    flex-wrap:wrap; white-space:normal; overflow-x:visible; row-gap:6px;
  }
  .simToolbar select{ margin-left:0; }
  .simFoot{ padding-bottom:10px; }
  .sbModal{ padding:14px 10px; }
  .sbModal__inner, .scanModal{ max-width:100%; }

  /* iOS zooms the page when you focus an input smaller than 16px.
     Bump the ones you can actually type in; the rest stay as they are. */
  .simSearch input, #insHeading, #insBody, .keyRow input,
  .exportBox, .field input, .field select, .field textarea{
    font-size:16px;
  }
  .simSearch input{ padding-block:9px; }

  /* the comparison table keeps its own horizontal scroll, but give it
     a visible edge so it is obvious that it scrolls */
  .cmpScroll{
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent);
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
}

@media (max-width:400px){
  .simTop__txt p{ display:none; }   /* the subtitle wraps to three lines */
  .idxCard__head{ gap:11px; }
  .idxCard__tile{ width:36px; height:36px; border-radius:10px; }
  .idxCard__tile svg{ width:20px; height:20px; }
}