/* ============================================================
   CardBridge design system — "Instrument"
   ------------------------------------------------------------
   Direction: the card as a precision object. Cool zinc paper,
   ultramarine as the only saturated colour, Archivo Expanded
   for display, Martian Mono for data labels and field keys.
   ============================================================
   1. Tokens
   2. Reset + base
   3. Layout primitives
   4. Type
   5. Buttons
   6. Forms
   7. Surfaces: card, panel, table, badge
   8. Components: nav, drawer, tabs, accordion, modal, toast
   9. Motion + reveal
  10. Product visuals: business card, phone sheet
  11. Utilities
  12. Responsive
   ============================================================ */

/* ---------- 1. Tokens ---------- */

:root {
  /* card stocks — object colours, shared by .bizcard and .stock-chip */
  --stock-bone:     linear-gradient(158deg, #FBFBF9 0%, #F1F1EC 100%);
  --stock-ink:      linear-gradient(158deg, #1A1C22 0%, #12141A 100%);
  --stock-graphite: linear-gradient(158deg, #454A57 0%, #333744 100%);
  --stock-forest:   linear-gradient(158deg, #123A2D 0%, #0B2620 100%);
  --stock-oxblood:  linear-gradient(158deg, #43171A 0%, #2C0E11 100%);

  /* colour */
  --ink: #14151A;
  --graphite: #3A3E49;
  --slate: #5C6270;   /* 5.1:1 on --zinc, 6.1:1 on white */
  --hair: #D6D8DE;
  --hair-soft: #E4E6EA;
  --zinc: #E9EAEE;
  --zinc-deep: #DDDFE5;
  --surface: #FFFFFF;
  --void: #0E0F13;
  --void-lift: #1A1C22;

  --ultra: #2A31D8;
  --ultra-dark: #1F26AE;
  --ultra-soft: #E7E9FF;
  --ultra-halo: #B9BEFF;

  --good: #0A7350;    /* 5.1:1 on --good-soft, 5.9:1 on white */
  --good-soft: #DEF5EB;
  --warn: #8A5810;    /* 5.2:1 on --warn-soft */
  --warn-soft: #FBF0DC;
  --bad: #C0342C;
  --bad-soft: #FBE6E4;

  /* space — 4px base */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 136px;

  /* radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-full: 999px;

  /* elevation */
  --e1: 0 1px 2px rgba(20, 21, 26, .06);
  --e2: 0 2px 4px rgba(20, 21, 26, .05), 0 8px 20px -12px rgba(20, 21, 26, .18);
  --e3: 0 4px 8px rgba(20, 21, 26, .06), 0 24px 48px -24px rgba(20, 21, 26, .34);
  --e-ultra: 0 18px 40px -22px rgba(42, 49, 216, .55);

  /* type */
  --display: "Archivo", "Helvetica Neue", sans-serif;
  --body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --data: "Martian Mono", ui-monospace, "SF Mono", monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.15rem, 1.05rem + 0.45vw, 1.375rem);
  --t-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --t-2xl: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --t-3xl: clamp(2.6rem, 1.7rem + 4.2vw, 4.75rem);

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fast: 140ms;
  --mid: 260ms;
  --slow: 620ms;

  --wrap: 1240px;
  --gutter: 200px; /* sticky section-label column */
}

/* ---------- 2. Reset + base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--zinc);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-md);
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 112%;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}

/* Size is a class, level is semantics. Use the class that matches the design and
   the heading level that matches the document outline — they need not agree. */
h1, .h1 { font-size: var(--t-3xl); letter-spacing: -0.045em; }
h2, .h2 { font-size: var(--t-2xl); letter-spacing: -0.04em; }
h3, .h3 { font-size: var(--t-xl); letter-spacing: -0.03em; }
h4, .h4 { font-size: var(--t-lg); font-stretch: 105%; letter-spacing: -0.02em; }
h5, .h5 { font-size: var(--t-base); font-stretch: 100%; letter-spacing: -0.01em; }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: var(--ultra); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ultra-dark); }

code, kbd {
  font-family: var(--data);
  font-size: 0.82em;
  background: var(--surface);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-sm);
  padding: 1px 5px;
}

img, svg, video { max-width: 100%; display: block; }

hr { border: 0; border-top: 1px solid var(--hair); margin: var(--s7) 0; }

::selection { background: var(--ultra); color: #fff; }

:focus-visible {
  outline: 2px solid var(--ultra);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: fixed; top: var(--s3); left: var(--s3);
  transform: translateY(-160%);
  background: var(--ink); color: #fff;
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  z-index: 200; text-decoration: none; font-size: var(--t-sm);
  transition: transform var(--fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* ---------- 3. Layout primitives ---------- */

.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s5);
}

.section { padding-block: var(--s9); }
.section--tight { padding-block: var(--s7); }
.section--flush-top { padding-top: var(--s7); }
.section--rule { border-top: 1px solid var(--hair); }

.section--dark { background: var(--void); color: #D9DBE3; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4, .section--dark h5,
.section--dark .h1, .section--dark .h2, .section--dark .h3, .section--dark .h4, .section--dark .h5 { color: #fff; }
.section--dark a:not(.btn) { color: var(--ultra-halo); }
.section--dark .lede { color: #A9ADBA; }
.section--dark .label { color: var(--ultra-halo); }

/* gutter layout: sticky mono label in the left column */
.gutter {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  gap: var(--s7);
  align-items: start;
}
.gutter > .gutter-label { position: sticky; top: 108px; }

.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.split { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: var(--s8); align-items: center; }

.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s6); }
.row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.row--between { justify-content: space-between; }

.measure { max-width: 64ch; }
.measure-sm { max-width: 46ch; }

/* ---------- 4. Type ---------- */

.label {
  margin: 0;
  font-family: var(--data);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ultra);
  display: block;
}

.label--mute { color: var(--slate); }

.lede {
  font-size: var(--t-lg);
  line-height: 1.42;
  letter-spacing: -0.015em;
  color: var(--graphite);
}

.eyebrow-rule {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s5);
}
.eyebrow-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--hair);
}
.section--dark .eyebrow-rule::after { background: rgba(255,255,255,.16); }

.mute { color: var(--slate); }
.sm { font-size: var(--t-sm); line-height: 1.55; }
.xs { font-size: var(--t-xs); line-height: 1.5; }

.head { margin-bottom: var(--s7); }
.head > .lede { margin-top: var(--s4); }

/* ---------- 5. Buttons ---------- */

.btn {
  --btn-pad-y: 12px;
  --btn-pad-x: 22px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--body);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.2;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), transform var(--fast) var(--ease),
              box-shadow var(--mid) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--primary { background: var(--ultra); color: #fff; }
.btn--primary:hover { background: var(--ultra-dark); color: #fff; box-shadow: var(--e-ultra); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--void); color: #fff; box-shadow: var(--e2); }

.btn--outline { border-color: var(--hair); background: transparent; color: var(--ink); }
.btn--outline:hover { border-color: var(--ink); background: var(--surface); color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); padding-inline: var(--s3); }
.btn--ghost:hover { background: rgba(20,21,26,.06); color: var(--ink); }

/* fixed, not tokenised: this button is always white, so its text is always
   ink — 18.2:1, and 10.3:1 on the halo hover */
.btn--onDark { background: #fff; color: #14151A; }
.btn--onDark:hover { background: var(--ultra-halo); color: #14151A; }
.btn--onDarkLine { border-color: rgba(255,255,255,.28); color: #fff; }
.btn--onDarkLine:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

.btn--sm { --btn-pad-y: 8px; --btn-pad-x: 15px; font-size: var(--t-xs); }
.btn--lg { --btn-pad-y: 15px; --btn-pad-x: 28px; font-size: var(--t-base); }
.btn--block { width: 100%; }

/* loading state */
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: #fff;
  animation: spin .7s linear infinite;
}
.btn--outline.is-loading::after, .btn--ghost.is-loading::after { color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* link with sliding arrow */
.arrow-link {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-sm); font-weight: 600; text-decoration: none;
}
.arrow-link span:last-child { transition: transform var(--fast) var(--ease); }
.arrow-link:hover span:last-child { transform: translateX(4px); }

/* ---------- 6. Forms ---------- */

.field-group { display: block; margin-bottom: var(--s4); }
.field-label {
  display: block;
  font-size: var(--t-sm); font-weight: 600;
  margin-bottom: var(--s2);
}
.field-hint { display: block; font-size: var(--t-xs); color: var(--slate); margin-top: var(--s2); }

.input, .select, .textarea {
  width: 100%;
  font-family: var(--body); font-size: var(--t-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 11px 14px;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.textarea { min-height: 116px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: #9AA0AB; }
.input:hover, .select:hover, .textarea:hover { border-color: #B9BDC7; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--ultra);
  box-shadow: 0 0 0 3px var(--ultra-soft);
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235C6270' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 38px;
}

.field-group.is-invalid .input,
.field-group.is-invalid .select,
.field-group.is-invalid .textarea { border-color: var(--bad); }
.field-group.is-invalid .input:focus { box-shadow: 0 0 0 3px var(--bad-soft); }
.field-error {
  display: none;
  font-size: var(--t-xs); color: var(--bad);
  margin-top: var(--s2);
}
.field-group.is-invalid .field-error { display: flex; gap: 6px; align-items: center; }
.field-group.is-valid .input { border-color: var(--good); }

.switch {
  display: inline-flex; align-items: center; gap: var(--s3);
  cursor: pointer; font-size: var(--t-sm); user-select: none;
}
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track {
  width: 40px; height: 23px; border-radius: var(--r-full);
  background: var(--zinc-deep); border: 1px solid var(--hair);
  position: relative; transition: background var(--fast) var(--ease);
  flex: none;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: var(--e1);
  transition: transform var(--mid) var(--ease);
}
.switch input:checked + .track { background: var(--ultra); border-color: var(--ultra); }
.switch input:checked + .track::after { transform: translateX(17px); }
.switch input:focus-visible + .track { outline: 2px solid var(--ultra); outline-offset: 3px; }

.checkline { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--t-sm); cursor: pointer; }
.checkline input { margin-top: 4px; accent-color: var(--ultra); width: 16px; height: 16px; flex: none; }

/* ---------- 7. Surfaces ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-lg);
  padding: var(--s5);
  transition: border-color var(--mid) var(--ease), transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.card--hover:hover { border-color: var(--hair); transform: translateY(-3px); box-shadow: var(--e2); }
.card--flat { background: transparent; border-color: var(--hair); }
.card > .label { margin-bottom: var(--s3); }
.card h4, .card .h4 { margin-bottom: var(--s2); }
.card p { color: var(--slate); font-size: var(--t-sm); }

.section--dark .card {
  background: var(--void-lift);
  border-color: rgba(255,255,255,.1);
}
.section--dark .card p { color: #9AA0AE; }

.panel {
  background: var(--surface);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.panel-head {
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--hair-soft);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.panel-body { padding: var(--s5); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--data); font-size: 0.62rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-full);
  background: var(--ultra-soft); color: var(--ultra-dark);
}
.badge--good { background: var(--good-soft); color: var(--good); }
.badge--warn { background: var(--warn-soft); color: var(--warn); }
.badge--bad { background: var(--bad-soft); color: var(--bad); }
.badge--quiet { background: var(--zinc-deep); color: var(--graphite); }

.datatable { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.datatable th, .datatable td {
  text-align: left; padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--hair-soft);
  vertical-align: top;
}
.datatable th {
  font-family: var(--data); font-size: 0.64rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--slate);
  background: #F6F7F9;
  white-space: nowrap;
}
.datatable tbody tr { transition: background var(--fast) var(--ease); }
.datatable tbody tr:hover { background: #F8F9FB; }
.datatable tbody tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* datasheet — key/value spec rows */
.spec { border-top: 1px solid var(--hair); }
.spec-row {
  display: grid; grid-template-columns: 116px 1fr;
  gap: var(--s5);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}
.spec-row--sm { padding: var(--s4) 0; }
.no-rule { border-bottom: 0 !important; }
.spec-row h4 { margin-bottom: var(--s2); }
.spec-row p { color: var(--slate); font-size: var(--t-sm); margin: 0; }
.spec-key { font-family: var(--data); font-size: 0.66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ultra); }

/* ---------- 8. Components ---------- */

/* masthead */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(233, 234, 238, .82);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--mid) var(--ease), background var(--mid) var(--ease);
}
.masthead.is-stuck { border-bottom-color: var(--hair); background: rgba(233, 234, 238, .94); }
.masthead-bar { display: flex; align-items: center; gap: var(--s6); min-height: 72px; }

.brand {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--display); font-stretch: 112%;
  font-weight: 700; font-size: 1.06rem; letter-spacing: -0.045em;
  color: var(--ink); text-decoration: none; margin-right: auto;
}
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--ultra);
  display: grid; place-items: center; flex: none;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.2);
}
.brand-mark svg { width: 16px; height: 16px; }

.nav { display: flex; align-items: center; gap: var(--s5); }
.nav-link {
  position: relative;
  font-size: var(--t-sm); font-weight: 500;
  color: var(--graphite); text-decoration: none;
  padding: var(--s2) 0;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: var(--ultra);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--mid) var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-link[aria-current="page"]::after { transform: scaleX(1); background: var(--ink); }

.icon-btn.nav-toggle { display: none; }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 90;
  background: var(--zinc);
  padding: var(--s5);
  display: flex; flex-direction: column;
  transform: translateY(-8px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease),
              visibility 0s linear var(--mid);
}
.drawer.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease),
              visibility 0s;
}
.drawer-top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.drawer-nav { margin-top: var(--s7); display: flex; flex-direction: column; }
.drawer-nav a {
  font-family: var(--display); font-stretch: 108%; font-weight: 600;
  font-size: 1.7rem; letter-spacing: -0.035em;
  color: var(--ink); text-decoration: none;
  padding: var(--s4) 0; border-bottom: 1px solid var(--hair);
}
.drawer-nav a:hover { color: var(--ultra); }
.drawer-foot { margin-top: auto; padding-top: var(--s5); }

.icon-btn {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--hair);
  border-radius: var(--r-md); cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.icon-btn:hover { background: var(--surface); border-color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }

/* tabs */
.tabs { border-bottom: 1px solid var(--hair); display: flex; gap: var(--s5); overflow-x: auto; }
.tab {
  position: relative; background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-size: var(--t-sm); font-weight: 600;
  color: var(--slate); padding: var(--s3) 0 var(--s4);
  white-space: nowrap;
  transition: color var(--fast) var(--ease);
}
.tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--ultra);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--mid) var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tabpanel { padding-top: var(--s6); }
.tabpanel[hidden] { display: none; }

/* accordion */
.acc { border-top: 1px solid var(--hair); }
.acc-item { border-bottom: 1px solid var(--hair); }
.acc-trigger {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) 0;
  font-family: var(--body); font-size: var(--t-base); font-weight: 600;
  color: var(--ink); text-align: left; letter-spacing: -0.015em;
}
.acc-trigger:hover { color: var(--ultra); }
.acc-sign { position: relative; width: 14px; height: 14px; flex: none; }
.acc-sign::before, .acc-sign::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform var(--mid) var(--ease), opacity var(--mid) var(--ease);
}
.acc-sign::before { top: 6px; left: 0; width: 14px; height: 1.5px; }
.acc-sign::after { left: 6px; top: 0; width: 1.5px; height: 14px; }
.acc-trigger[aria-expanded="true"] .acc-sign::after { transform: rotate(90deg); opacity: 0; }
.acc-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--slow) var(--ease-out);
}
/* app.js also sets [inert]; this keeps collapsed copy out of the a11y tree
   for engines that only honour visibility. */
.acc-body[inert] { visibility: hidden; }
.acc-body:not([inert]) { visibility: visible; }
.acc-body-inner { padding-bottom: var(--s5); color: var(--slate); font-size: var(--t-sm); max-width: 68ch; }

/* modal */
.modal-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(14, 15, 19, .58);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: var(--s5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--mid) var(--ease), visibility 0s linear var(--mid);
}
.modal-scrim.is-open {
  opacity: 1; visibility: visible;
  transition: opacity var(--mid) var(--ease), visibility 0s;
}
.modal {
  width: 100%; max-width: 468px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--e3);
  padding: var(--s6);
  transform: translateY(14px) scale(.985);
  transition: transform var(--mid) var(--ease-out);
  max-height: 88vh; overflow-y: auto;
}
.modal-scrim.is-open .modal { transform: none; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.modal h3 { margin: 0; }

/* toast */
.toast-region {
  position: fixed; z-index: 120;
  bottom: var(--s5); right: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  pointer-events: none;
  max-width: min(360px, calc(100vw - 32px));
}
.toast {
  pointer-events: auto;
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--ink); color: #fff;
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  box-shadow: var(--e3);
  font-size: var(--t-sm);
  animation: toast-in var(--mid) var(--ease-out);
}
.toast--good { background: #0B5F45; }
.toast--bad { background: #8E241E; }
.toast.is-out { animation: toast-out var(--fast) var(--ease) forwards; }
.toast-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-top: 7px; flex: none; opacity: .8; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(12px); } }

/* skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--zinc-deep) 25%, #F0F1F4 50%, var(--zinc-deep) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite linear;
  border-radius: var(--r-sm);
  height: 12px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* footer */
.footer { background: var(--void); color: #9AA0AE; padding: var(--s9) 0 var(--s5); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s6); }
.footer .footer-head {
  font-family: var(--data); font-weight: 500;
  font-size: 0.64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ultra-halo); margin-bottom: var(--s4);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li + li { margin-top: var(--s3); }
.footer a { color: #D9DBE3; text-decoration: none; font-size: var(--t-sm); }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer .brand { color: #fff; margin: 0 0 var(--s4); }
.footer p { font-size: var(--t-sm); max-width: 32ch; color: #8A909E; }
.footer-base {
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between;
  font-size: var(--t-xs); color: #757C8B;
}

/* ---------- 9. Motion + reveal ---------- */

/* Gated on .js (set by an inline script in <head>): with scripting off the
   reveal never starts, so the content is simply visible instead of invisible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 10. Product visuals ---------- */

/* The card is a physical object: its stock colour is chosen, not themed, so
   these tokens deliberately do NOT change with prefers-color-scheme.
   Every pairing below is >=5.3:1 for the smallest type on the card. */
.bizcard {
  --card-bg: var(--stock-bone);
  --card-fg: #14151A;
  --card-mute: #5C6270;
  --card-accent: #2A31D8;
  --card-hair: rgba(20,21,26,.10);
  --card-panel-fg: #FFFFFF;
  --card-etch: rgba(20,21,26,.16);
  --card-etch-firm: rgba(20,21,26,.34);
  --card-guilloche: url("guilloche-ink.svg");
  --card-sheen: rgba(255,255,255,.85);
  position: relative;
  container-type: inline-size;
  width: 100%; max-width: 430px;
  aspect-ratio: 1.65 / 1;
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: var(--e3), inset 0 0 0 1px var(--card-hair);
  padding: var(--s5);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
  transform: rotate(-1.6deg);
  transition: transform var(--slow) var(--ease-out);
}
.bizcard::before {
  /* engraving layer — see "card patterns" below */
  content: ""; position: absolute; inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: var(--tap-x, calc(100% - 35px)) var(--tap-y, calc(100% - 41px));
  -webkit-mask-image: radial-gradient(circle at var(--tap-x, calc(100% - 35px)) var(--tap-y, calc(100% - 41px)),
    rgba(0,0,0,1) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,0) 92%);
          mask-image: radial-gradient(circle at var(--tap-x, calc(100% - 35px)) var(--tap-y, calc(100% - 41px)),
    rgba(0,0,0,1) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,0) 92%);
  transition: background-position 1.4s var(--ease-out), opacity var(--mid) var(--ease);
}
.bizcard::after {
  /* foil sheen */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, var(--card-sheen) 47%, transparent 56%);
  opacity: .55; pointer-events: none;
  transform: translateX(-30%);
  transition: transform 1.1s var(--ease-out);
}
.bizcard:hover::after { transform: translateX(30%); }

.bizcard-name {
  font-family: var(--display); font-stretch: 108%; font-weight: 600;
  font-size: clamp(15px, 5.8cqw, 26px); letter-spacing: -0.04em; line-height: 1.04;
  color: var(--card-fg);
  min-height: 1.1em;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bizcard-role {
  font-size: clamp(10px, 3.2cqw, 15px); color: var(--card-mute);
  margin-top: 3px; min-height: 1.4em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bizcard-body { min-width: 0; }
.bizcard-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); }
.bizcard-badge { display: none; }
.bizcard-org {
  font-family: var(--data); font-size: clamp(7px, 2.25cqw, 11px); letter-spacing: .11em;
  text-transform: uppercase; color: var(--card-accent); min-height: 1em;
  overflow-wrap: anywhere;
}

.nfc {
  width: clamp(20px, 7cqw, 32px); height: clamp(20px, 7cqw, 32px); flex: none; position: relative;
  display: grid; place-items: center;
}
.nfc-core {
  width: clamp(5px, 1.7cqw, 8px); height: clamp(5px, 1.7cqw, 8px);
  border-radius: 50%; background: var(--card-accent);
}
.nfc-wave {
  position: absolute; inset: 0; margin: auto;
  width: clamp(9px, 2.9cqw, 13px); height: clamp(9px, 2.9cqw, 13px); border-radius: 50%;
  /* the mark belongs to the card, so it takes the stock's accent — not the
     interface token, which flips with the reader's colour scheme */
  border: 1.5px solid var(--card-accent);
  opacity: 0;
  animation: nfc 2.8s var(--ease-out) infinite;
}
.nfc-wave:nth-child(2) { animation-delay: .55s; }
.nfc-wave:nth-child(3) { animation-delay: 1.1s; }
@keyframes nfc {
  0%   { opacity: .7; transform: scale(.6); }
  70%  { opacity: 0;  transform: scale(2.5); }
  100% { opacity: 0;  transform: scale(2.5); }
}

/* phone contact sheet */
.phone {
  width: 100%; max-width: 232px;
  aspect-ratio: 9 / 18.5;
  background: var(--void);
  border-radius: 30px;
  padding: 8px;
  box-shadow: var(--e3);
  transform: rotate(2.2deg);
}
.phone-screen {
  height: 100%; background: #fff; border-radius: 23px;
  padding: var(--s5) var(--s4) var(--s4);
  display: flex; flex-direction: column; gap: var(--s3);
  overflow: hidden;
}
.phone-notch {
  width: 44px; height: 4px; border-radius: 4px; background: #E2E4E9;
  margin: 0 auto var(--s2);
}
.sheet-name { font-family: var(--display); font-stretch: 106%; font-weight: 600; font-size: 1rem; letter-spacing: -0.03em; }
.sheet-sub { font-size: 0.68rem; color: var(--slate); margin-top: 1px; }
.sheet-rows { margin-top: var(--s2); border-top: 1px solid var(--hair-soft); }
.sheet-row { padding: 7px 0; border-bottom: 1px solid var(--hair-soft); }
.sheet-key { font-family: var(--data); font-size: 0.5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.sheet-val { font-size: 0.72rem; color: var(--ink); word-break: break-word; }
.sheet-cta {
  margin-top: auto;
  background: var(--ultra); color: #fff;
  border-radius: var(--r-md);
  text-align: center; padding: 9px;
  font-size: 0.7rem; font-weight: 600;
}

/* hero builder */
.builder { display: grid; gap: var(--s4); }
.builder-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.builder .input { font-size: var(--t-sm); }

.stage {
  position: relative;
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s5); align-items: center;
}
.stage-glow {
  position: absolute; z-index: -1;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(42,49,216,.16), transparent 68%);
  top: 50%; left: 30%; transform: translate(-50%, -50%);
  filter: blur(6px);
}

/* logo strip */
.strip { display: flex; flex-wrap: wrap; gap: var(--s6); align-items: center; }
.strip span {
  font-family: var(--display); font-stretch: 96%; font-weight: 600;
  font-size: 0.95rem; letter-spacing: -0.02em; color: var(--slate);
  opacity: .8;
}

/* stat */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.stat-n {
  font-family: var(--display); font-stretch: 118%; font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); letter-spacing: -0.05em; line-height: 1;
}

/* ---------- 11. Utilities ---------- */

.center { text-align: center; }
.center .lede, .center .measure, .center .measure-sm { margin-inline: auto; }
.center .row { justify-content: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--s2); }
.row--gap4 { gap: var(--s4); }
.row--gap5 { gap: var(--s5); }
.w-40 { width: 40%; }
.w-60 { width: 60%; }
.w-85 { width: 85%; }

/* design-system swatch chips — no inline styles anywhere, so the shipped CSP can
   refuse inline styles outright */
.token-chip { height: 56px; border-radius: 8px; }
.token-chip--ultra { background: var(--ultra); }
.token-chip--ink   { background: var(--ink); }
.token-chip--void  { background: var(--void); }
.token-chip--zinc  { background: var(--zinc); border: 1px solid var(--hair); }
.stock-chip { height: 56px; border-radius: 8px; }
.stock-chip[data-base="bone"]     { background: var(--stock-bone);
                                    box-shadow: inset 0 0 0 1px rgba(20,21,26,.12); }
.stock-chip[data-base="ink"]      { background: var(--stock-ink); }
.stock-chip[data-base="graphite"] { background: var(--stock-graphite); }
.stock-chip[data-base="forest"]   { background: var(--stock-forest); }
.stock-chip[data-base="oxblood"]  { background: var(--stock-oxblood); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fill { width: 100%; }

/* prose for legal pages */
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--t-xl); margin-top: 2em; }
.prose h3 { font-size: var(--t-base); font-family: var(--body); font-weight: 600; margin-top: 1.7em; margin-bottom: .4em; letter-spacing: -0.01em; }
.prose ul, .prose ol { padding-left: 20px; margin: 0 0 var(--s4); }
.prose li { margin-bottom: var(--s2); }
.prose .datatable { margin-bottom: var(--s5); }
.prose > .callout { margin-block: var(--s5); }

.callout {
  background: var(--ultra-soft);
  border-radius: var(--r-md);
  border-left: 3px solid var(--ultra);
  padding: var(--s4) var(--s5);
  font-size: var(--t-sm);
}
.callout--warn { background: var(--warn-soft); border-left-color: var(--warn); }

.stamp {
  font-family: var(--data); font-size: var(--t-xs);
  color: var(--slate); line-height: 1.9;
  border-left: 2px solid var(--hair);
  padding-left: var(--s4);
  margin-bottom: var(--s6);
}

/* ---------- 12. Responsive ---------- */

@media (max-width: 1080px) {
  .gutter { grid-template-columns: 1fr; gap: var(--s5); }
  .gutter > .gutter-label { position: static; }
  .split { gap: var(--s7); }
}

@media (max-width: 900px) {
  :root { --s9: 72px; --s10: 88px; }
  .split { grid-template-columns: 1fr; }
  .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
  .icon-btn.nav-toggle { display: grid; }
  .stage { grid-template-columns: 1fr; justify-items: center; }
  .phone { display: none; }
  .bizcard { transform: none; }
}

@media (max-width: 620px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; gap: var(--s4); }
  .footer-grid { grid-template-columns: 1fr; }
  .spec-row { grid-template-columns: 1fr; gap: var(--s2); }
  .builder-inputs { grid-template-columns: 1fr; }
  .toast-region { left: var(--s4); right: var(--s4); bottom: var(--s4); max-width: none; }
  .modal { padding: var(--s5); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .masthead, .footer, .toast-region, .drawer { display: none; }
  body { background: #fff; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .acc-body { max-height: none !important; }
}

/* ============================================================
   13. Automatic dark mode
   Tokens only — no component overrides needed below this point.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #EDEEF2;
    --graphite: #B4B8C4;
    --slate: #8B91A0;
    --hair: #2E3140;
    --hair-soft: #23262F;
    --zinc: #0E0F13;
    --zinc-deep: #1A1C22;
    --surface: #16181E;
    --void: #08090C;
    --void-lift: #1A1C22;

    --ultra: #7C84FF;
    --ultra-dark: #9AA0FF;
    --ultra-soft: #1C1F35;
    --ultra-halo: #B9BEFF;

    --good: #3ED39B;
    --good-soft: #12291F;
    --warn: #E0A94A;
    --warn-soft: #2B2113;
    --bad: #FF7A70;
    --bad-soft: #2E1614;

    --e1: 0 1px 2px rgba(0,0,0,.4);
    --e2: 0 2px 4px rgba(0,0,0,.3), 0 8px 20px -12px rgba(0,0,0,.7);
    --e3: 0 4px 8px rgba(0,0,0,.4), 0 24px 48px -24px rgba(0,0,0,.9);
  }
  .masthead { background: rgba(14,15,19,.82); }
  .masthead.is-stuck { background: rgba(14,15,19,.94); }
  .datatable th { background: #1B1E26; }
  .datatable tbody tr:hover { background: #1B1E26; }
  .phone-screen { background: #16181E; }
  .phone-notch { background: #2E3140; }
  .toast { background: #23262F; }
  .btn--dark { background: var(--surface); color: var(--ink); border-color: var(--hair); }
  .btn--dark:hover { background: var(--zinc-deep); color: var(--ink); }
  /* --ultra is lightened for dark backgrounds, so button text flips to ink:
     white on #7C84FF is 3.2:1, ink on it is 5.7:1. */
  .btn--primary, .btn--primary:hover { color: #0B0C10; }
  .sheet-cta { color: #0B0C10; }
  .btn--primary.is-loading::after { color: #0B0C10; }
  ::selection { background: var(--ultra); color: #0B0C10; }
  .section--dark { background: #050609; }
}

/* ============================================================
   14. Verification simulator
   ============================================================ */

.verify-sim {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--s6); align-items: start;
}

.verify-phone {
  background: var(--void); border-radius: 34px; padding: 9px;
  box-shadow: var(--e3); border: 1px solid rgba(255,255,255,.08);
}
.verify-screen {
  background: var(--surface); border-radius: 26px;
  padding: var(--s5) var(--s4) var(--s4);
  min-height: 460px; display: flex; flex-direction: column; gap: var(--s4);
  transition: background var(--mid) var(--ease);
}

.verify-org {
  font-family: var(--data); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate); text-align: center;
}

.verify-status {
  border-radius: var(--r-md); padding: var(--s4);
  text-align: center;
  transition: background var(--mid) var(--ease), color var(--mid) var(--ease);
}
.verify-status[data-state="ok"]      { background: var(--good-soft); color: var(--good); }
.verify-status[data-state="revoked"] { background: var(--bad-soft);  color: var(--bad); }
.verify-status[data-state="expired"] { background: var(--warn-soft); color: var(--warn); }

.verify-state-line {
  font-family: var(--display); font-stretch: 112%; font-weight: 700;
  font-size: 1.06rem; letter-spacing: -.02em; line-height: 1.1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.verify-since { font-size: .64rem; margin-top: 5px; opacity: .85; font-family: var(--data); }

.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
  position: relative;
}
.live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: 0;
  animation: ping 2s ease-out infinite;
}

.verify-person { display: flex; gap: var(--s3); align-items: center; }
.verify-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: var(--ultra-soft); color: var(--ultra);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: .95rem; font-stretch: 110%;
}
.verify-name { font-family: var(--display); font-stretch: 108%; font-weight: 600; font-size: 1rem; letter-spacing: -.03em; }
.verify-role { font-size: .72rem; color: var(--slate); }

.verify-fields { border-top: 1px solid var(--hair-soft); }
.verify-field {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding: 8px 0; border-bottom: 1px solid var(--hair-soft);
  font-size: .72rem;
}
.verify-field dt { font-family: var(--data); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.verify-field dd { margin: 0; text-align: right; font-weight: 500; }
.verify-fields dl { margin: 0; }

.verify-foot { margin-top: auto; font-size: .6rem; color: var(--slate); text-align: center; font-family: var(--data); line-height: 1.6; }

.verify-log {
  font-family: var(--data); font-size: .68rem; line-height: 1.9;
  background: var(--void); color: #96E6C3;
  border-radius: var(--r-md); padding: var(--s4);
  max-height: 168px; overflow-y: auto;
  border: 1px solid rgba(255,255,255,.08);
}
.verify-log div { display: flex; gap: var(--s3); }
.verify-log .t { color: #78899A; flex: none; }   /* 5.3:1 on the log surface */
.verify-log .warn { color: #FFB4AC; }

/* ============================================================
   15. Card designer
   ============================================================ */

.swatches { display: flex; gap: var(--s2); flex-wrap: wrap; }
.swatch-group { min-width: 0; }
.swatch {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; padding: 0;
  /* neutral outer ring so near-black and near-white swatches stay visible
     against both the light surface and the dark-mode one */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 1px rgba(128,132,145,.5);
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] { border-color: var(--ink); }

.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* the design tour: a 5s progress bar that also drives the cycle, so the bar and
   the card can never drift apart (app.js advances on animationiteration) */
.cycle {
  display: inline-flex; align-items: center; gap: var(--s2); flex: none;
  font-family: var(--data); font-size: 0.58rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate); background: transparent;
  border: 1px solid var(--hair); border-radius: var(--r-full);
  /* 24px is the WCAG 2.5.8 minimum target size; this lands at 27 */
  padding: 7px 12px 7px 9px; cursor: pointer;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.cycle:hover { color: var(--ink); border-color: var(--ink); }
.cycle-bar {
  width: 22px; height: 3px; border-radius: 2px; flex: none;
  background: var(--hair-soft); overflow: hidden;
}
.cycle-bar > span {
  display: block; height: 100%; width: 100%;
  background: var(--ultra); transform: scaleX(0); transform-origin: left;
}
.cycle.is-cycling .cycle-bar > span { animation: cycle-fill 5s linear infinite; }
@keyframes cycle-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.chip {
  font-family: var(--body); font-size: var(--t-xs); font-weight: 600;
  padding: 7px 13px; border-radius: var(--r-full);
  border: 1px solid var(--hair); background: transparent; color: var(--graphite);
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--zinc); }

/* ---------- card patterns ----------
   Printed treatments, not decoration for its own sake: a deboss you would feel
   with a thumb. Every one is drawn from the stock's own colour at low alpha, so
   it reads as the surface catching light rather than as ink on top of it.
   The default, Ripple, radiates from the chip — the pattern marks where to tap. */

.bizcard[data-pattern="ripple"]::before {
  background-image: repeating-radial-gradient(circle at var(--tap-x, calc(100% - 35px)) var(--tap-y, calc(100% - 41px)),
    transparent 0 6.5px, var(--card-etch) 6.5px 7.5px);
  background-position: 0 0;
}
.bizcard[data-pattern="guilloche"]::before {
  background-image: var(--card-guilloche);
  background-size: 64%;
  background-position: right -13% bottom -24%;
  opacity: .5;
}
.bizcard[data-pattern="halftone"]::before {
  background-image: radial-gradient(var(--card-etch-firm) 1.7px, transparent 1.8px);
  background-size: 7px 7px;
  background-position: 0 0;
  /* the shared rule is no-repeat for the guilloche rosette; a dot screen is the
     one pattern that genuinely needs tiling */
  background-repeat: repeat;
}
.bizcard[data-pattern="moire"]::before {
  /* two hairline rulings a fraction of a degree apart — the interference is the
     point, and it drifts on hover */
  background-image:
    repeating-linear-gradient(90deg, var(--card-etch) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90.7deg, var(--card-etch) 0 1px, transparent 1px 7px);
  background-position: 0 0;
  opacity: .7;
}
.bizcard[data-pattern="moire"]:hover::before { background-position: 4px 0; }
.bizcard[data-pattern="contour"]::before {
  background-image: repeating-radial-gradient(ellipse 155% 105% at -14% 118%,
    transparent 0 10px, var(--card-etch) 10px 11px);
  background-position: 0 0;
  opacity: 1;
}
.bizcard[data-pattern="grid"]::before {
  background-image:
    repeating-linear-gradient(0deg, var(--card-etch) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(90deg, var(--card-etch) 0 1px, transparent 1px 11px);
  background-position: 0 0;
  opacity: .55;
}

/* ---------- card layouts ----------
   Six compositions over one set of fields. Only the monogram element is
   layout-specific; everything else is the same four bits of text moved,
   re-scaled and re-labelled. Edge paint (::before) and lamination sheen
   (::after) are already spoken for, so the Panel block is painted as an
   extra background layer rather than a third pseudo-element. */

/* the chip sits in a different corner per layout, so the ripple origin moves
   with it — the rings always radiate from the actual tap point */
.bizcard[data-layout="plate"] { --tap-x: 50%;                  --tap-y: calc(100% - 49px); }
.bizcard[data-layout="spec"]  { --tap-x: calc(100% - 35px);    --tap-y: calc(100% - 33px); }
.bizcard[data-layout="stack"] { --tap-x: calc(100% - 44px);    --tap-y: 19%; }

/* 2. Plate — centred and engraved, rule above the company line */
.bizcard[data-layout="plate"] {
  justify-content: center; align-items: center; text-align: center;
  gap: var(--s4); padding-inline: var(--s6);
}
.bizcard[data-layout="plate"] .bizcard-name {
  font-size: clamp(13px, 4.8cqw, 22px); font-stretch: 100%; letter-spacing: -0.015em;
}
.bizcard[data-layout="plate"] .bizcard-role { margin-top: 5px; }
.bizcard[data-layout="plate"] .bizcard-foot {
  flex-direction: column; align-items: center; gap: 8px;
  width: 66%; padding-top: var(--s3); border-top: 1px solid var(--card-hair);
}

/* 3. Panel — accent block down the left, company set vertically in it */
.bizcard[data-layout="panel"] {
  background-image: linear-gradient(90deg, var(--card-accent) 0 62px, transparent 62px), var(--card-bg);
  padding-left: calc(62px + var(--s5));
}
.bizcard[data-layout="panel"] .bizcard-org {
  position: absolute; left: 0; top: 0; bottom: 0; width: 62px;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  color: var(--card-panel-fg); letter-spacing: .14em;
}
.bizcard[data-layout="panel"] .bizcard-foot { justify-content: flex-end; }

/* 4. Spec — a specification sheet: mono keys left, values right */
.bizcard[data-layout="spec"] { justify-content: space-between; padding-block: var(--s4); }
.bizcard[data-layout="spec"] .bizcard-body { display: contents; }
.bizcard[data-layout="spec"] .bizcard-name {
  display: flex; -webkit-line-clamp: none; overflow: visible;
}
.bizcard[data-layout="spec"] .bizcard-role { white-space: normal; overflow: visible; }
.bizcard[data-layout="spec"] .bizcard-name,
.bizcard[data-layout="spec"] .bizcard-role,
.bizcard[data-layout="spec"] .bizcard-org {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5);
  padding-block: 11px; border-bottom: 1px solid var(--card-hair);
  font-family: var(--body); font-size: clamp(11px, 3.5cqw, 16px); font-weight: 500;
  letter-spacing: -0.01em; text-transform: none; text-align: right;
  color: var(--card-fg); min-height: 0; margin: 0;
}
.bizcard[data-layout="spec"] .bizcard-name::before,
.bizcard[data-layout="spec"] .bizcard-role::before,
.bizcard[data-layout="spec"] .bizcard-org::before {
  font-family: var(--data); font-size: clamp(6px, 1.9cqw, 9px); font-weight: 400;
  letter-spacing: .12em; color: var(--card-mute); flex: none;
}
.bizcard[data-layout="spec"] .bizcard-name::before { content: "NAME"; }
.bizcard[data-layout="spec"] .bizcard-role::before { content: "ROLE"; }
.bizcard[data-layout="spec"] .bizcard-org::before { content: "COMPANY"; }
.bizcard[data-layout="spec"] .bizcard-org { border-bottom: 0; padding-right: 42px; }
.bizcard[data-layout="spec"] .bizcard-foot { display: block; }
.bizcard[data-layout="spec"] .nfc { position: absolute; right: var(--s5); bottom: var(--s4); }

/* 5. Monogram — initials as a credential disc, name set beside it */
.bizcard[data-layout="badge"] {
  flex-direction: row; flex-wrap: wrap; align-items: flex-start;
  align-content: space-between; gap: var(--s4);
}
.bizcard[data-layout="badge"] .bizcard-badge {
  display: grid; place-items: center; flex: none;
  width: clamp(38px, 13.5cqw, 62px); height: clamp(38px, 13.5cqw, 62px); border-radius: 50%;
  background: var(--card-accent); color: var(--card-panel-fg);
  font-family: var(--display); font-stretch: 105%; font-weight: 600;
  font-size: clamp(12px, 4.4cqw, 21px); letter-spacing: -0.02em;
}
.bizcard[data-layout="badge"] .bizcard-body { flex: 1 1 120px; padding-top: 4px; }
.bizcard[data-layout="badge"] .bizcard-name { font-size: clamp(13px, 4.8cqw, 22px); }
.bizcard[data-layout="badge"] .bizcard-foot { flex: 1 1 100%; }

/* 6. Stack — the name at poster scale, everything else a baseline of data */
.bizcard[data-layout="stack"] { justify-content: flex-end; }
.bizcard[data-layout="stack"] .bizcard-name {
  font-size: clamp(19px, 7.2cqw, 33px); font-stretch: 118%; line-height: .96;
  letter-spacing: -0.05em;
}
.bizcard[data-layout="stack"] .bizcard-role {
  font-family: var(--data); font-size: clamp(6px, 2.05cqw, 10px); letter-spacing: .11em;
  text-transform: uppercase; margin-top: var(--s3);
}
.bizcard[data-layout="stack"] .bizcard-foot {
  margin-top: var(--s4); padding-top: 10px; border-top: 1px solid var(--card-hair);
}
.bizcard[data-layout="stack"] .nfc {
  position: absolute; top: var(--s5); right: calc(var(--s5) + 6px);
}

/* ---------- card stocks ---------- */
.bizcard[data-base="ink"] {
  --card-bg: var(--stock-ink);
  --card-panel-fg: #101216;
  --card-etch: rgba(255,255,255,.15);
  --card-etch-firm: rgba(255,255,255,.32);
  --card-guilloche: url("guilloche-light.svg");
  --card-fg: #F5F6F9; --card-mute: #A8AEBD; --card-accent: #8E95FF;
  --card-hair: rgba(255,255,255,.10); --card-sheen: rgba(255,255,255,.30);
}
.bizcard[data-base="graphite"] {
  --card-bg: var(--stock-graphite);
  --card-panel-fg: #101216;
  --card-etch: rgba(255,255,255,.15);
  --card-etch-firm: rgba(255,255,255,.32);
  --card-guilloche: url("guilloche-light.svg");
  --card-fg: #FFFFFF; --card-mute: #D2D5DD; --card-accent: #C3C8FF;
  --card-hair: rgba(255,255,255,.12); --card-sheen: rgba(255,255,255,.34);
}
.bizcard[data-base="forest"] {
  --card-bg: var(--stock-forest);
  --card-panel-fg: #101216;
  --card-etch: rgba(255,255,255,.15);
  --card-etch-firm: rgba(255,255,255,.32);
  --card-guilloche: url("guilloche-light.svg");
  --card-fg: #EDF6F1; --card-mute: #9FC4B4; --card-accent: #7FE3B8;
  --card-hair: rgba(255,255,255,.10); --card-sheen: rgba(255,255,255,.28);
}
.bizcard[data-base="oxblood"] {
  --card-bg: var(--stock-oxblood);
  --card-panel-fg: #101216;
  --card-etch: rgba(255,255,255,.15);
  --card-etch-firm: rgba(255,255,255,.32);
  --card-guilloche: url("guilloche-light.svg");
  --card-fg: #F9EDEC; --card-mute: #D2A9A7; --card-accent: #FFAFA8;
  --card-hair: rgba(255,255,255,.10); --card-sheen: rgba(255,255,255,.28);
}

.bizcard[data-finish="gloss"]::after { opacity: .95; }
.bizcard[data-finish="soft"]::after { opacity: .16; }
.bizcard[data-finish="matte"]::after { opacity: .45; }

/* ============================================================
   16. Calculator
   ============================================================ */

.calc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
.calc-out {
  background: var(--void); color: #fff;
  border-radius: var(--r-lg); padding: var(--s6);
}
.calc-out .label { color: var(--ultra-halo); }
.calc-big {
  font-family: var(--display); font-stretch: 118%; font-weight: 700;
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  letter-spacing: -.05em; line-height: 1; margin: var(--s3) 0;
}
.calc-line {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: 11px 0; border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--t-sm); color: #A9AEBC;
}
.calc-line strong { color: #fff; font-weight: 600; }
.calc-sub { color: #A9AEBC; }
.range { width: 100%; accent-color: var(--ultra); margin-top: var(--s2); }
.range-val { font-family: var(--data); font-size: var(--t-xs); color: var(--ultra); }

/* ============================================================
   17. Comparison table
   ============================================================ */

.compare { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.compare th, .compare td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--hair-soft); }
.compare thead th {
  font-family: var(--data); font-size: .6rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--slate); white-space: nowrap; vertical-align: bottom;
}
.compare tbody th { font-weight: 600; }
.compare td { text-align: center; }
.compare .own { background: var(--ultra-soft); }
.compare thead .own { color: var(--ultra); }
.yes { color: var(--good); font-weight: 700; }
.no  { color: var(--slate); }

/* ============================================================
   18. Tier grid (4 plans)
   ============================================================ */

.tiers { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s4); align-items: stretch; }
.tier { display: flex; flex-direction: column; }
.tier ul { list-style: none; padding: 0; margin: var(--s5) 0 var(--s5); }
.tier li { font-size: var(--t-sm); padding: 6px 0 6px 20px; position: relative; color: var(--graphite); }
.tier li::before {
  content: ""; position: absolute; left: 2px; top: 14px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--ultra);
}
.tier .btn { margin-top: auto; }
.tier--feature { border-color: var(--ultra); box-shadow: var(--e2); }

@media (max-width: 1080px) {
  .tiers { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .verify-sim { grid-template-columns: 1fr; justify-items: center; }
  .verify-phone { max-width: 300px; }
  .calc { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .tiers { grid-template-columns: 1fr; }
  .compare { font-size: var(--t-xs); }
  .compare th, .compare td { padding: var(--s2) var(--s3); }
}