/* Tidi — tidi.fyi
   Restrained: neutral ground, Royal Violet the single accent.
   Switzer carries the page; the system face appears only inside app chrome,
   so the simulated window reads as the same material as the Mac app. */

/* ---------- Faces ---------- */
@font-face { font-family: Switzer; src: url("../fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; font-style: normal; }
@font-face { font-family: Switzer; src: url("../fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-display: swap; font-style: normal; }
@font-face { font-family: Switzer; src: url("../fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-display: swap; font-style: normal; }
@font-face { font-family: Switzer; src: url("../fonts/switzer-700.woff2") format("woff2"); font-weight: 700; font-display: swap; font-style: normal; }
@font-face { font-family: Switzer; src: url("../fonts/switzer-800.woff2") format("woff2"); font-weight: 800; font-display: swap; font-style: normal; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  --ground:      #FCFCFD;
  --surface:     #FFFFFF;
  --sunken:      #F4F4F6;
  --sunken-2:    #EDEDF0;

  --ink:         #18181B;
  --ink-2:       #56565F;
  --ink-3:       #72727C;

  --violet:      #6D28D9;
  --violet-deep: #5B21B6;
  --violet-lift: #7C3AED;
  --violet-tint: #F5F3FF;
  --violet-line: #E4DDFB;

  --line:        rgba(24, 24, 27, .09);
  --line-2:      rgba(24, 24, 27, .14);

  --shadow-sm:   0 1px 2px rgba(24,24,27,.05), 0 1px 1px rgba(24,24,27,.04);
  --shadow-md:   0 6px 16px -4px rgba(24,24,27,.08), 0 2px 5px -2px rgba(24,24,27,.06);
  --shadow-win:  0 40px 72px -24px rgba(24,24,27,.24), 0 14px 28px -12px rgba(24,24,27,.12), 0 0 0 1px rgba(24,24,27,.05);
  --shadow-btn:  0 2px 5px -1px rgba(91,33,182,.34), 0 6px 18px -6px rgba(91,33,182,.42);

  --ease:        cubic-bezier(.16, 1, .3, 1);
  --ease-in:     cubic-bezier(.5, 0, .75, 0);

  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(20px, 5vw, 72px);
  --shell: 1240px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
svg[hidden] { display: none; }  /* the UA `[hidden]` rule is HTML-only; the icon sprite would otherwise take a 300x150 box */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: Switzer, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }

/* Browser surfaces the design still owns. */
::selection { background: #DDD1FB; color: #2E1065; }
:root { caret-color: var(--violet); accent-color: var(--violet); }
* { scrollbar-color: var(--line-2) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(24,24,27,.18); border-radius: 99px; border: 3px solid var(--ground); }
::-webkit-scrollbar-thumb:hover { background: rgba(24,24,27,.3); }

:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------- Type ---------- */
.display {
  font-size: clamp(2.6rem, 5.9vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -.038em;
  font-weight: 700;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(1.85rem, 3.1vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 650;
  text-wrap: balance;
}
.h3 { font-size: 1.1875rem; line-height: 1.35; letter-spacing: -.019em; font-weight: 600; }
.lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.52;
  letter-spacing: -.011em;
  color: var(--ink-2);
  max-width: 34ch;
}
.prose { max-width: 68ch; color: var(--ink-2); }
.prose p + p, .prose + .prose { margin-top: 1.1em; }
.h2 + .prose { margin-top: 18px; }
.prose + .micro { margin-top: 24px; }
.micro + .btn { margin-top: 26px; }
.mark + .micro { margin-top: 10px; }
.micro { font-size: .8125rem; line-height: 1.5; color: var(--ink-3); letter-spacing: -.004em; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
code {
  font-family: var(--mono); font-size: .875em; letter-spacing: 0;
  padding: .1em .36em; border-radius: 5px; overflow-wrap: anywhere;
  background: rgba(24, 24, 27, .045); box-shadow: inset 0 0 0 1px var(--line);
}
.callout code { background: rgba(109, 40, 217, .07); box-shadow: inset 0 0 0 1px var(--violet-line); color: var(--violet-deep); }

a { color: var(--violet); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--violet-deep); }

/* ---------- Shell ---------- */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 20px; height: 20px; flex: none; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.nav[data-stuck="true"] { border-bottom-color: var(--line); }
.nav__in { display: flex; align-items: center; gap: 28px; height: 62px; }
.mark { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; font-size: 1.0625rem; letter-spacing: -.026em; color: var(--ink); text-decoration: none; }
.mark svg { width: 25px; height: 25px; color: var(--violet); }
.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav__links a { color: var(--ink-2); text-decoration: none; font-size: .9375rem; font-weight: 500; letter-spacing: -.011em; transition: color .18s var(--ease); }
.nav__links a:hover { color: var(--ink); }

@media (max-width: 460px) {
  .nav__in { gap: 14px; }
  .nav__links { gap: 16px; }
  .nav__links a { font-size: .875rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: 11px;
  padding: 0 22px; height: 48px;
  font-size: 1rem; font-weight: 600; letter-spacing: -.014em;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease), color .18s var(--ease);
}
.btn--primary { background: var(--violet); color: #fff; box-shadow: var(--shadow-btn); }
.btn--primary:hover { background: var(--violet-lift); color: #fff; transform: translateY(-1px); }
.btn--primary:active { background: var(--violet-deep); transform: translateY(0); box-shadow: 0 1px 3px rgba(91,33,182,.4); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-sm); color: var(--ink); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(48px, 7vw, 92px) clamp(56px, 8vw, 104px); }
.hero__grid { display: grid; gap: clamp(44px, 5vw, 60px); align-items: center; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: clamp(48px, 5vw, 72px); } }

.hero__sub { margin-top: 20px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* Three facts never fit the 432px hero column on one line, and a separator dot
   would orphan at the start of the wrapped line, so the row separates on space. */
.hero__terms { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }

/* ---------- macOS window ---------- */
.win {
  background: var(--surface);
  border-radius: 13px;
  box-shadow: var(--shadow-win);
  overflow: hidden;
  font-family: var(--ui);
  letter-spacing: -.006em;
  container-type: inline-size;
}
.win__bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #FAFAFB; border-bottom: 1px solid var(--line); }
.lights { display: flex; gap: 7px; }
.lights i { width: 11px; height: 11px; border-radius: 99px; display: block; }
.lights i:nth-child(1) { background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }
.lights i:nth-child(2) { background: #FEBC2E; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }
.lights i:nth-child(3) { background: #28C840; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }
.win__title { margin-inline: auto; font-size: .8125rem; font-weight: 590; color: var(--ink-2); padding-right: 40px; }

.tabs { display: flex; gap: 6px; padding: 11px 14px; background: #FAFAFB; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
@container (max-width: 560px) {
  .tabs { mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
}
.tab { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 99px; font-size: .8125rem; font-weight: 550; color: var(--ink-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.tab svg { width: 15px; height: 15px; }
.tab[data-active] { background: var(--violet); color: #fff; box-shadow: none; }

/* Organize header row */
.organize { display: flex; align-items: center; gap: 14px; padding: 16px; border-bottom: 1px solid var(--line); }
.organize__glyph { width: 42px; height: 42px; border-radius: 12px; background: var(--violet-tint); color: var(--violet); display: grid; place-items: center; flex: none; }
.organize__glyph svg { width: 21px; height: 21px; }
.organize__txt { min-width: 0; }
.organize__txt strong { display: block; font-size: .9375rem; font-weight: 620; letter-spacing: -.014em; }
.organize__txt span { display: block; font-size: .8125rem; color: var(--ink-2); }
.sweep-btn {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 17px; border: 0; border-radius: 99px;
  background: var(--violet); color: #fff;
  font-family: var(--ui); font-size: .875rem; font-weight: 600; letter-spacing: -.008em;
  cursor: pointer; box-shadow: var(--shadow-btn);
  transition: background-color .18s var(--ease), transform .14s var(--ease), box-shadow .18s var(--ease);
}
.sweep-btn svg { width: 16px; height: 16px; }
.sweep-btn:hover { background: var(--violet-lift); transform: translateY(-1px); }
.sweep-btn:active { background: var(--violet-deep); transform: translateY(0); }
.sweep-btn[data-busy] { pointer-events: none; opacity: .58; }
.sweep-btn--undo { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.sweep-btn--undo:hover { background: var(--sunken); }

/* Stage */
.stage { position: relative; height: 367px; overflow: hidden; background: var(--surface); }
@container (max-width: 460px) { .stage { height: 291px; } }
.stage__pane { position: absolute; inset: 0; overflow: hidden; }
/* The folder holds more than the window shows — which is the point — but a hard
   edge sliced the tenth row through its own text and read as a bug. Fading the
   last rows makes the list continue past the frame the way it actually does. */
#sweep-rows {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 54px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 54px), transparent);
}

/* file rows */
.rows { padding: 6px 0; }
.row {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; height: 38px;
  will-change: transform, opacity;
}
.row__ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; background: var(--sunken); color: var(--ink-2); }
.row__ico svg { width: 15px; height: 15px; }
.row__ico[data-kind="receipt"]  { background: #F3EEFE; color: #6D28D9; }
.row__ico[data-kind="shot"]     { background: #EAF1FD; color: #2563EB; }
.row__ico[data-kind="installer"]{ background: #FDF0E7; color: #C2570C; }
.row__ico[data-kind="archive"]  { background: #FAF0DE; color: #A16207; }
.row__ico[data-kind="media"]    { background: #E9F6EF; color: #15803D; }
.row__name { font-size: .8125rem; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__size { margin-left: auto; font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
.row__to {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 8px; border-radius: 6px;
  background: var(--violet-tint); color: var(--violet-deep);
  font-size: .6875rem; font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.row__to svg { width: 11px; height: 11px; }
.row[data-tagged] .row__to { opacity: 1; transform: none; }
.row[data-tagged] .row__size { opacity: 0; transition: opacity .2s var(--ease); }
@container (max-width: 460px) { .row__size { display: none; } }
.row[data-scanning] { background: linear-gradient(90deg, var(--violet-tint), transparent 72%); }

/* destination tiles */
/* One column, five rows, name left and count right — deliberately the same
   shape as the file list it replaces, so the sweep reads as fourteen lines
   collapsing into five rather than as a different screen. Two columns left a
   ragged fifth cell and filled barely half the pane. */
.bins { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 14px 16px;
  height: 100%; align-content: center; }
.bin {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 11px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  opacity: 0; transform: translateY(9px) scale(.985);
  transition: opacity .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.bin[data-in] { opacity: 1; transform: none; }
.bin[data-hit] { box-shadow: inset 0 0 0 1px var(--violet-line), 0 4px 12px -4px rgba(109,40,217,.18); }
.bin__ico { width: 30px; height: 30px; border-radius: 9px; background: var(--violet-tint); color: var(--violet); display: grid; place-items: center; flex: none; }
/* Same palette as .row__ico — the tile a file lands in should look like the
   file that landed in it. */
.bin__ico[data-kind="receipt"]  { background: #F3EEFE; color: #6D28D9; }
.bin__ico[data-kind="shot"]     { background: #EAF1FD; color: #2563EB; }
.bin__ico[data-kind="installer"]{ background: #FDF0E7; color: #C2570C; }
.bin__ico[data-kind="archive"]  { background: #FAF0DE; color: #A16207; }
.bin__ico[data-kind="media"]    { background: #E9F6EF; color: #15803D; }
.bin__ico svg { width: 17px; height: 17px; }
.bin__name { flex: 1 1 auto; min-width: 0; font-size: .8125rem; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bin__count { flex: none; font-size: .75rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Five rows at desktop metrics overflow the shorter mobile stage, so tighten
   them rather than letting the last tile fall out of the window. */
@container (max-width: 460px) {
  .bins { gap: 6px; padding: 10px 12px; }
  .bin { padding: 8px 11px; gap: 9px; }
  .bin__ico { width: 26px; height: 26px; border-radius: 8px; }
  .bin__ico svg { width: 15px; height: 15px; }
}

/* status bar */
.win__foot { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--line); background: #FAFAFB; min-height: 46px; }
.win__stat { font-size: .8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.win__stat b { color: var(--ink); font-weight: 600; }
.win__foot .sweep-btn { height: 30px; padding: 0 13px; font-size: .8125rem; margin-left: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
.synthetic { margin-left: auto; font-size: .6875rem; color: var(--ink-3); letter-spacing: .01em; white-space: nowrap; }
.win__foot[data-done] .synthetic { margin-left: 0; }
/* Three items on one 390px line broke "5 folders" and "Demo data" across
   lines each. Give the sentence its own row and let the rest share the next. */
@container (max-width: 460px) {
  .win__foot { flex-wrap: wrap; row-gap: 9px; }
  .win__stat { flex: 1 0 100%; }
  .win__foot[data-done] .synthetic { margin-left: 0; }
  .win__foot .sweep-btn { margin-left: auto; }
}

/* ---------- Reversible ledger (simulated app screen) ---------- */
/* Mirrors TransactionLedgerView, using that screen's own shipped strings. */
.ledger__guarantee { display: flex; gap: 13px; padding: 14px 17px; background: var(--violet-tint); border-bottom: 1px solid var(--line); }
.ledger__shield { flex: none; color: var(--violet); }
.ledger__shield svg { width: 23px; height: 23px; display: block; }
.ledger__gtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 650; letter-spacing: -.013em; }
.ledger__count { font-size: .6875rem; font-weight: 620; color: var(--violet-deep); background: rgba(109, 40, 217, .12); padding: 2px 8px; border-radius: 99px; font-variant-numeric: tabular-nums; }
.ledger__gdesc { margin-top: 4px; font-size: .75rem; line-height: 1.45; color: var(--ink-2); max-width: 52ch; }

.ledger__list { display: grid; gap: 10px; padding: 14px; }
.lcard { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.lcard__ico { width: 34px; height: 34px; border-radius: 99px; display: grid; place-items: center; flex: none; background: var(--violet-tint); color: var(--violet); }
.lcard__ico svg { width: 17px; height: 17px; }
.lcard__ico[data-kind="trash"] { background: #FDF0E7; color: #C2570C; }
.lcard__main { min-width: 0; }
.lcard__head { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 620; letter-spacing: -.013em; }
.lcard__meta { margin-top: 4px; font-size: .6875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pill { font-size: .625rem; font-weight: 700; letter-spacing: .012em; padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
.pill--move { color: var(--violet-deep); background: rgba(109, 40, 217, .12); }
.pill--trash { color: #9A4708; background: rgba(194, 87, 12, .13); }
.pill--ok { color: #15803D; background: rgba(21, 128, 61, .13); }
.pill--done { color: var(--ink-2); background: var(--sunken-2); }
/* A depiction, not a control: styled as the app's button but inert and unfocusable. */
.lcard__act { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border-radius: 99px; background: var(--violet); color: #fff; font-size: .6875rem; font-weight: 650; letter-spacing: -.004em; white-space: nowrap; box-shadow: var(--shadow-btn); }
.lcard__act svg { width: 12px; height: 12px; }
.lcard[data-reversed] { background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); }
.lcard[data-reversed] .lcard__ico { background: var(--sunken-2); color: var(--ink-2); }

/* Wrapping with flex let a long title push the icon onto its own line in some
   cards but not others. A fixed 2-column grid keeps every icon in column 1 and
   drops the action under the text instead. */
@container (max-width: 460px) {
  .lcard { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: center; }
  .lcard__act { grid-column: 2; justify-self: start; margin-left: 0; margin-top: 9px; }
}

/* ---------- Sections ---------- */
section { scroll-margin-top: 78px; }
.band { padding-block: clamp(64px, 8.5vw, 116px); }
.band--tint { background: var(--surface); border-block: 1px solid var(--line); }

.split { display: grid; gap: clamp(32px, 4.5vw, 64px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); } .split--flip > :first-child { order: 2; } }
.split__body .h2 + p { margin-top: 18px; }

/* ---------- Rules panel (simulated app screen) ---------- */
/* This was a 980px screenshot. At 390 it rendered at 0.36 scale, which made the
   app's 11px labels about 4px tall, and the crop cut the fifth rule off while
   the alt text claimed five. Rebuilt from SmartRule.defaultPresets so it stays
   legible at every width and cannot disagree with what ships. */
.rulespanel { border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-win); overflow: hidden; }
.rulebar { display: flex; align-items: center; gap: 10px; padding: 13px 15px; }
.rulebar__ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: var(--violet-tint); color: var(--violet); }
.rulebar__ico svg { width: 15px; height: 15px; }
.rulebar__t { font-size: .875rem; font-weight: 650; letter-spacing: -.014em; }
.rulebar__alt { margin-left: auto; flex: none; font-size: .75rem; font-weight: 600; color: var(--violet-deep);
  background: var(--violet-tint); border-radius: 99px; padding: 5px 11px; }

.rulefield { display: flex; align-items: center; gap: 10px; padding: 0 15px 14px; }
.rulefield__in { flex: 1 1 auto; min-width: 0; height: 36px; line-height: 36px; padding: 0 12px;
  border-radius: 9px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line);
  font-size: .8125rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rulefield__go { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px;
  border-radius: 99px; background: var(--violet-tint); color: var(--violet-deep);
  font-size: .8125rem; font-weight: 600; }
.rulefield__go svg { width: 13px; height: 13px; }

.rulehead { display: flex; align-items: center; gap: 9px; padding: 11px 15px;
  border-top: 1px solid var(--line); background: #FAFAFB; }
.rulehead__t { font-size: .75rem; font-weight: 650; letter-spacing: .01em; text-transform: uppercase; color: var(--ink-2); }
.rulehead__n { font-size: .6875rem; font-weight: 620; color: var(--violet-deep);
  background: rgba(109, 40, 217, .12); padding: 2px 8px; border-radius: 99px; }

.rulelist { border-top: 1px solid var(--line); }
.rule { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; }
.rule + .rule { border-top: 1px solid var(--line); }
/* The shipped presets all arrive enabled, so every switch reads as on. */
.rule__sw { flex: none; width: 32px; height: 19px; margin-top: 1px; border-radius: 99px; background: var(--violet); position: relative; }
.rule__sw::after { content: ""; position: absolute; top: 2px; right: 2px; width: 15px; height: 15px; border-radius: 99px; background: #fff; }
.rule__body { min-width: 0; }
.rule__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rule__name { font-size: .8125rem; font-weight: 600; letter-spacing: -.01em; }
.rule__dest { display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: .6875rem; font-weight: 600; color: var(--violet-deep);
  background: var(--violet-tint); border-radius: 6px; padding: 3px 8px; }
.rule__dest svg { width: 11px; height: 11px; }
.rule__cond { display: block; margin-top: 5px; font-size: .75rem; line-height: 1.45; color: var(--ink-3); }
.rulecap { padding: 12px 15px 14px; border-top: 1px solid var(--line); background: #FAFAFB;
  font-size: .75rem; line-height: 1.5; color: var(--ink-3); }

/* claim list — hairline rows, not cards */
.claims { margin-top: 40px; border-top: 1px solid var(--line); }
.claim { display: grid; gap: 4px 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .claim { grid-template-columns: 15.5rem minmax(0, 1fr); align-items: baseline; } }
.claim dt { font-weight: 600; letter-spacing: -.017em; }
.claim dd { margin: 0; color: var(--ink-2); max-width: 60ch; }

/* privacy statement band */
.statement { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) { .statement { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; } }
.ledger { border-top: 1px solid var(--line); }
.ledger li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.ledger svg { width: 17px; height: 17px; color: var(--violet); flex: none; }
.ledger b { font-weight: 600; }

/* shortcuts */
.keys { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 28px; }
.key { display: inline-flex; align-items: center; gap: 8px; }
kbd {
  font-family: var(--ui); font-size: .8125rem; font-weight: 550;
  padding: 5px 9px; border-radius: 7px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 1px rgba(24,24,27,.05);
  color: var(--ink);
}

/* pricing */
.price { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 860px) { .price { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.price__lines { border-top: 1px solid var(--line); }
.price__line { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.price__line dt { font-weight: 600; letter-spacing: -.017em; flex: none; width: 8.5rem; }
.price__line dd { margin: 0; color: var(--ink-2); }
.price__amount { font-size: clamp(3rem, 6vw, 4.25rem); font-weight: 700; letter-spacing: -.042em; line-height: 1; font-variant-numeric: tabular-nums; }
.price__once { margin-top: 10px; color: var(--ink-2); }

/* footer */
.foot { border-top: 1px solid var(--line); padding-block: 48px 56px; }
.foot__in { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start; }
.foot__links { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto; }
.foot__links a { color: var(--ink-2); text-decoration: none; font-size: .9375rem; }
.foot__links a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Document pages ---------- */
.doc { padding-block: clamp(48px, 6vw, 80px) clamp(64px, 8vw, 104px); }
.doc__head { max-width: 60ch; }
.doc__head .lead { max-width: 47ch; }
.doc__meta { margin-top: 14px; }
.doc__meta + .micro { margin-top: 18px; }
.doc__body { max-width: 68ch; margin-top: clamp(36px, 4vw, 52px); }

/* At 1440 the 68ch measure left roughly six hundred pixels of nothing to its
   right, which read as a layout failure rather than as a considered column.
   Above 1040 the title block becomes a sticky rail and the two share the width;
   below it the page stays a single stacked column. */
@media (min-width: 1040px) {
  .doc__grid { display: grid; grid-template-columns: minmax(230px, 292px) minmax(0, 68ch);
    justify-content: space-between; column-gap: clamp(48px, 5vw, 88px); align-items: start; }
  .doc__grid > .doc__head { position: sticky; top: 94px; grid-column: 1; }
  .doc__grid > :not(.doc__head) { grid-column: 2; }
  .doc__grid > .doc__body, .doc__grid > .faq { margin-top: 0; }
  .doc__head { max-width: none; }
  .doc__head .doc__meta, .doc__head .lead { max-width: none; }
}

.doc__toc { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.doc__toct { font-size: .6875rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.doc__toc ol { margin-top: 11px; counter-reset: toc; }
.doc__toc li { counter-increment: toc; }
.doc__toc li + li { margin-top: 7px; }
.doc__toc a { display: flex; gap: 10px; font-size: .875rem; color: var(--ink-2); text-decoration: none;
  transition: color .18s var(--ease); }
.doc__toc a::before { content: counter(toc, decimal-leading-zero); flex: none;
  font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.doc__toc a:hover { color: var(--violet-deep); }
/* The rail is only tall enough to sit still on a real desktop viewport. */
@media (max-width: 1039px) { .doc__toc { display: none; } }
.doc__body h2 { scroll-margin-top: 86px; }
.doc__body h2 { font-size: 1.3125rem; font-weight: 650; letter-spacing: -.022em; line-height: 1.3; margin-top: 44px; }
.doc__body h2:first-child { margin-top: 0; }
.doc__body p, .doc__body li { color: var(--ink-2); }
.doc__body p { margin-top: 14px; }
.doc__body ul { margin-top: 14px; }
.doc__body li { position: relative; padding-left: 22px; margin-top: 9px; }
.doc__body li::before { content: ""; position: absolute; left: 4px; top: .68em; width: 5px; height: 5px; border-radius: 99px; background: var(--violet); }
.doc__body strong { color: var(--ink); font-weight: 600; }
.callout { margin-top: 24px; padding: 18px 20px; border-radius: 12px; background: var(--violet-tint); box-shadow: inset 0 0 0 1px var(--violet-line); }
.callout p { color: #4C1D95; margin: 0; }

/* support */
.faq { border-top: 1px solid var(--line); margin-top: clamp(36px, 4vw, 52px); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; align-items: center; gap: 16px; padding: 22px 0; background: none; border: 0; text-align: left; cursor: pointer; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.019em; }
.faq__q svg { width: 18px; height: 18px; margin-left: auto; flex: none; color: var(--ink-3); transition: transform .32s var(--ease), color .2s var(--ease); }
.faq__q:hover svg { color: var(--ink); }
.faq__item[open] .faq__q svg { transform: rotate(45deg); }
.faq__a { padding-bottom: 24px; max-width: 66ch; color: var(--ink-2); }
.faq__a p + p { margin-top: 12px; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Lives in the doc rail, so it sits beside the questions rather than after
   them — the answer to "mine isn't listed" should not require scrolling first. */
.contact { margin-top: clamp(30px, 3.6vw, 40px); padding: 22px; border-radius: 14px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-md); }
.contact__t { font-size: 1rem; font-weight: 650; letter-spacing: -.018em; }
.contact__p { margin-top: 8px; font-size: .875rem; line-height: 1.55; color: var(--ink-2); }
.contact a.btn { margin-top: 18px; }

/* ---------- Motion opt-out ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}