/*! cards.place — © 2026 Ryan Rood & Chad Chilvers. All rights reserved.
    Proprietary. Not open source. See COPYRIGHT in the repository root. */
/* ============================================================================
   cards.place — marketing site
   Aesthetic: a lit display case. Deep warm black, gold, and the card as the
   unit of layout. Type pairs Fraunces (warm, slightly antique — old cardboard)
   with IBM Plex Mono for anything that reads like slab-label data.
   ========================================================================== */

:root {
  --ink:      #0b0c0f;
  --ink-2:    #101217;
  --panel:    #15181f;
  --panel-2:  #1b1f28;
  --line:     rgba(238, 232, 220, .10);
  --line-2:   rgba(238, 232, 220, .18);

  --text:     #ece7dc;
  --muted:    #9d978a;
  --faint:    #6d6961;

  --gold:     #d9a441;
  --gold-lit: #f2c877;
  --gold-dim: rgba(217, 164, 65, .14);

  --cream:    #f2ede2;
  --red:      #c4544a;
  --green:    #6fae82;

  --display: "Fraunces", Georgia, serif;
  --body:    "Archivo", -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --wrap: 1180px;
  --r: 14px;

  --nav-bg: rgba(11, 12, 15, .72);
}

/* ---- light theme -----------------------------------------------------------
   The page chrome flips to warm paper; the product mocks (.app, .panel-ui,
   .slab, .binder) deliberately stay dark, because they depict the app and the
   cards, not page surfaces. Default follows the visitor's system preference;
   the header toggle writes an explicit data-theme that wins and is remembered.
   Values are duplicated across the two selectors on purpose - custom properties
   cannot be shared between unrelated selectors without a wrapper element. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink: #f5f1e8;  --ink-2: #ece4d5;  --panel: #fffdf9;  --panel-2: #f2ebdd;
    --line: rgba(30, 26, 18, .12);  --line-2: rgba(30, 26, 18, .22);
    --text: #23201a;  --muted: #5c574c;  --faint: #8b8577;
    --gold: #9a6a10;  --gold-lit: #7d570c;  --gold-dim: rgba(154, 106, 16, .15);
    --nav-bg: rgba(245, 241, 232, .82);
  }
}
:root[data-theme="light"] {
  --ink: #f5f1e8;  --ink-2: #ece4d5;  --panel: #fffdf9;  --panel-2: #f2ebdd;
  --line: rgba(30, 26, 18, .12);  --line-2: rgba(30, 26, 18, .22);
  --text: #23201a;  --muted: #5c574c;  --faint: #8b8577;
  --gold: #9a6a10;  --gold-lit: #7d570c;  --gold-dim: rgba(154, 106, 16, .15);
  --nav-bg: rgba(245, 241, 232, .82);
}

/* Product mocks re-pin the dark palette locally, so they render dark inside a
   light page exactly as a screenshot would. .app already carries its own --a-*
   tokens; these use the shared token names, so re-declaring them here is enough. */
.panel-ui, .slab, .binder {
  --ink: #0b0c0f;  --ink-2: #101217;  --panel: #15181f;  --panel-2: #1b1f28;
  --line: rgba(238, 232, 220, .10);  --line-2: rgba(238, 232, 220, .18);
  --text: #ece7dc;  --muted: #9d978a;  --faint: #6d6961;
  --gold: #d9a441;  --gold-lit: #f2c877;  --gold-dim: rgba(217, 164, 65, .14);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* Clears the sticky bar, which an in-page anchor otherwise scrolls the
     section underneath. The bands' generous padding hid this by luck. */
  scroll-padding-top: 84px;
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.02; letter-spacing: -.02em; margin: 0; }
h1 { font-size: clamp(2.9rem, 7.2vw, 5.1rem); font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 130; }
h1 em { font-style: italic; color: var(--gold-lit); font-variation-settings: "WONK" 1; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
p  { margin: 0 0 1em; }
.mono { font-family: var(--mono); font-size: .92em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.wrap.narrow { max-width: 780px; }

.eyebrow {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 1.1rem;
}
.section-h { margin-bottom: .5rem; }
.section-sub { color: var(--muted); margin-bottom: 2.6rem; }
.micro { font-size: .82rem; color: var(--faint); margin-top: 1rem; }
.hl { color: var(--gold-lit); font-family: var(--mono); font-size: .9em; white-space: nowrap; }

/* ---------------------------------------------------------- atmosphere */
.atmos { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.glow-a { width: 760px; height: 520px; top: -240px; right: -120px;
  background: radial-gradient(closest-side, rgba(217,164,65,.20), transparent); }
.glow-b { width: 620px; height: 620px; bottom: -280px; left: -180px;
  background: radial-gradient(closest-side, rgba(90,120,180,.12), transparent); }

/* Faint binder-page pockets, the substrate the whole site sits on. */
.pockets {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 118px 165px;   /* 5:7, a card */
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
}
.grain {
  position: absolute; inset: 0; opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: var(--nav-bg); border-bottom: 1px solid var(--line);
}
.theme-toggle {
  width: 38px; height: 38px; flex: none; display: inline-grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--line-2); background: transparent;
  color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer;
  transition: color .18s, border-color .18s;
}
.theme-toggle:hover { color: var(--gold-lit); border-color: var(--gold); }
.nav-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.mark { display: flex; align-items: center; gap: 10px; font-family: var(--mono);
  font-size: .95rem; letter-spacing: .01em; }
.mark-chip {
  width: 34px; height: 22px; flex: none;
  background: url("/assets/img/mono-dark.png") center / contain no-repeat;
}
:root[data-theme="light"] .mark-chip { background-image: url("/assets/img/mono-light.png"); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .mark-chip { background-image: url("/assets/img/mono-light.png"); }
}
.mark-chip.sm { width: 24px; height: 16px; }
.mark-text { font-weight: 500; }
.dot { color: var(--gold); }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: .93rem; color: var(--muted); }
.nav-links a { transition: color .18s; position: relative; white-space: nowrap; padding: 4px 0; }
.nav-links a:hover { color: var(--text); }
/* Where you are on a long single page. Set by the scroll spy in site.js; with
   no JS there is simply no marker and every link still works. */
.nav-links a.on { color: var(--text); }
.nav-links a.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; border-radius: 2px; background: var(--gold);
}
.nav-signin { color: var(--muted); font-size: .93rem; white-space: nowrap; }
.nav-signin:hover { color: var(--text); }
.nav-cta { margin-left: 0; padding: 10px 18px; }
/* The trial button carries two labels; the short one only appears on the
   narrowest phones. See the 420px block below. */
.nav-cta .cta-short { display: none; }

/* The bar was 68px of logo, toggle and Sign in below 860px - the links were
   display:none with nothing in their place, so Pricing was a full-page scroll
   away on a phone. They become a scrolling strip on a second row instead: no
   overlay, no focus trap, no scroll lock (the app's settings sub-nav does the
   same thing at the same width). Costs about 36px of sticky header. */
@media (max-width: 860px) {
  /* .nav-in IS the .wrap - the element carries both classes - so a padding
     shorthand here silently replaced the "0 28px" gutter every other section
     on the page has. The logo sat flush against the left edge of the phone
     while the content below it was inset 28px. Keep the horizontal value. */
  .nav-in { flex-wrap: wrap; height: auto; padding: 10px 28px 6px; row-gap: 10px; gap: 14px; }
  .nav-links {
    order: 3; flex: 1 0 100%; margin-left: 0; gap: 20px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
    /* Full-bleed scroller, gutter-aligned contents: pull out to the screen
       edges so the strip can scroll edge to edge, then pad back in so the
       first and last links line up with everything else. Without this the
       strip is inset and the last link looks arbitrarily clipped. */
    margin-inline: -28px; padding-inline: 28px;
    /* Fades at both ends, so it is visible that the row continues. It was cut
       flush at the screen edge with nothing to suggest scrolling. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px,
                        #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 20px,
                #000 calc(100% - 20px), transparent 100%);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-signin { margin-left: auto; }
  .nav-cta { padding: 9px 15px; font-size: .9rem; }
}
/* Below this the logo, the theme toggle and the trial button cannot share a
   row once the 28px gutters are honoured, and the button wrapped onto a third
   line - a 169px sticky header on an 812px screen. The toggle is the one that
   can go: the page already follows the system light/dark setting, so it is an
   override rather than the only way to get the right theme, and it returns
   above this width. */
@media (max-width: 420px) { .theme-toggle { display: none; } }

/* The short trial label, and a tighter button, up to 520px.
   ------------------------------------------------------------------
   Measured rather than guessed. The top row wants, at 430px:
     logo 146 + toggle 34 + Sign in 49 + "Start a free trial" 151 + 3 gaps 42
       = 421.6, against 374 inside the gutters - 48px short, three rows, a
       169px sticky header. WORSE than the 320px case the ticket describes,
       because above 420 the toggle comes back and the long label with it.
   "Free trial" and 14px of side padding instead of 22 take the row to 349.6,
   and a 10px gap gives another 12. It fits from 320 up with headroom in double
   figures at every width, rather than by a pixel or two that the next font
   change would spend. */
@media (max-width: 520px) {
  .nav-cta .cta-long { display: none; }
  .nav-cta .cta-short { display: inline; }
  .nav-in .nav-cta { padding-inline: 14px; }
  .nav-in { column-gap: 10px; }
}

@media (max-width: 380px) {
  .nav-signin { display: none; }
  /* Sign in carried the margin-left:auto that pushed the row right. Hiding it
     took the push with it, so the trial button drifted back to the middle of
     the header next to the theme toggle. */
  .nav-cta { margin-left: auto; }
}

/* ---------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--body); font-weight: 500; font-size: .95rem;
  padding: 13px 22px; border-radius: 999px; border: 1px solid var(--line-2);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), background .18s, border-color .18s, box-shadow .18s;
  white-space: nowrap; cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold {
  background: linear-gradient(170deg, var(--gold-lit), var(--gold));
  color: #241a06; border-color: transparent; font-weight: 600;
}
.btn-gold:hover { box-shadow: 0 10px 30px -10px rgba(217,164,65,.65); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-lit); }
.btn.full { width: 100%; margin-top: auto; }

/* ---------------------------------------------------------- reveal */
.reveal { opacity: 0; transform: translateY(16px); animation: rise .8s cubic-bezier(.2,.8,.3,1) forwards; animation-delay: var(--d, 0ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------- hero */
.hero { padding: clamp(56px, 9vw, 108px) 0 clamp(60px, 8vw, 112px); }
.hero-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
@media (max-width: 980px) { .hero-in { grid-template-columns: 1fr; gap: 54px; } }
.lede { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--muted); max-width: 52ch; margin-top: 1.5rem; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2rem; }
.hero-cta.center { justify-content: center; }

/* ---------------------------------------------------------- the slab */
.hero-art { display: grid; place-items: center; perspective: 1400px; }
.slab {
  position: relative; width: min(340px, 84vw); aspect-ratio: 5 / 7.6;
  border-radius: 12px; padding: 12px;
  background: linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 42%, rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25);
  transform: rotateY(-13deg) rotateX(6deg) rotateZ(-1.5deg);
  transition: transform .7s cubic-bezier(.2,.8,.3,1);
  display: flex; flex-direction: column; gap: 10px;
  animation: float 7s ease-in-out infinite;
}
.slab:hover { transform: rotateY(-4deg) rotateX(2deg) rotateZ(0deg) translateY(-6px); }
@keyframes float { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.slab-label {
  background: var(--cream); color: #17181b; border-radius: 6px;
  padding: 9px 11px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.slab-brand { grid-column: 1; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .16em; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.slab-brand .dot { color: #b8860b; }
.slab-meta { grid-column: 1; display: grid; }
.slab-meta .k { font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: -.01em; }
.slab-meta .v { font-family: var(--mono); font-size: .56rem; color: #5c5b58; letter-spacing: .06em; }
.slab-grade {
  grid-row: 1 / span 2; grid-column: 2; text-align: center;
  border-left: 1px solid rgba(0,0,0,.16); padding-left: 11px; min-width: 58px;
}
.g-word { display: block; font-family: var(--mono); font-size: .5rem; letter-spacing: .18em; color: #6a6863; }
.g-num  { display: block; font-family: var(--display); font-size: 2.1rem; font-weight: 700; line-height: .95; color: #17181b; }

.slab-window {
  position: relative; flex: 1; border-radius: 7px; overflow: hidden;
  background: #0e1015; border: 1px solid rgba(0,0,0,.6);
}
/* A chrome refractor: a slow rainbow sheen, kept low-opacity so it reads as
   finish rather than decoration. */
.refractor {
  position: absolute; inset: 0; opacity: .62;
  background: conic-gradient(from 200deg at 32% 22%,
    #2f6fa8, #8a5bc4, #d05f8f, #e0a24a, #4fbf9a, #3a86c8, #2f6fa8);
  filter: blur(3px) saturate(1.5);
  animation: sheen 14s linear infinite;
}
@keyframes sheen { to { transform: rotate(360deg) scale(1.5); } }
.slab-window::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,16,.25), rgba(10,12,16,.86));
}

.card-face { position: absolute; inset: 0; z-index: 2; padding: 16px; display: flex; flex-direction: column; }
.cf-top { display: flex; justify-content: space-between; align-items: center; }
.cf-no { font-family: var(--mono); font-size: .68rem; color: rgba(255,255,255,.62); letter-spacing: .1em; }
.cf-tag {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; padding: 2px 6px;
  border-radius: 3px; background: var(--gold); color: #241a06; font-weight: 500;
}
.cf-name { margin-top: auto; }
.cf-first { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .26em; color: var(--gold-lit); }
.cf-last  { display: block; font-family: var(--display); font-size: 1.62rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.cf-rule { height: 1px; background: linear-gradient(90deg, var(--gold), transparent); margin: 10px 0 9px; }
.cf-stats { display: flex; flex-direction: column; gap: 3px; font-family: var(--mono); font-size: .6rem; color: rgba(255,255,255,.66); letter-spacing: .05em; }
.cf-stats b { color: var(--gold); font-weight: 500; margin-right: 6px; }

.slab-cert {
  font-family: var(--mono); font-size: .55rem; letter-spacing: .2em;
  color: rgba(255,255,255,.4); text-align: center;
}
.slab-cert span { color: rgba(255,255,255,.72); }
.slab-shine {
  position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 45%, transparent 58%);
}

/* ---------------------------------------------------------- bands */
.band { padding: clamp(64px, 8vw, 110px) 0; border-top: 1px solid var(--line); }
.band.alt { background: linear-gradient(180deg, var(--ink-2), rgba(16,18,23,0)); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 22px; } }
.split-body { color: var(--muted); }

/* spreadsheet tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 42px 0 0; }
.tabs span {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  padding: 7px 12px; border: 1px solid var(--line); border-bottom: none;
  border-radius: 7px 7px 0 0; background: var(--panel); color: var(--faint);
}
.tabs span.on { color: var(--gold-lit); border-color: var(--gold-dim); background: var(--panel-2); }
.arrow { display: grid; place-items: center; color: var(--gold); opacity: .5; margin: 22px 0 8px; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 760px) { .stat-row { grid-template-columns: 1fr; } }
.stat { border-left: 2px solid var(--gold); padding-left: 16px; }
.stat b { display: block; font-family: var(--display); font-size: 2.3rem; font-weight: 700; line-height: 1; }
.stat span { font-size: .88rem; color: var(--muted); }

/* ---------------------------------------------------------- binder */
.binder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .binder { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .binder { grid-template-columns: 1fr; } }
.pocket {
  background: linear-gradient(165deg, var(--panel), var(--ink-2));
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 20px 24px; position: relative; overflow: hidden;
  transition: border-color .25s, transform .25s;
}
.pocket::before {
  content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity .3s;
}
.pocket:hover { border-color: var(--line-2); transform: translateY(-3px); }
.pocket:hover::before { opacity: .7; }
.pocket h3 { margin-bottom: 8px; }
.pocket p { color: var(--muted); font-size: .94rem; margin: 0; }

/* ---------------------------------------------------------- feature rows */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.feature.reverse .feature-copy { order: 2; }
@media (max-width: 940px) {
  .feature { grid-template-columns: 1fr; gap: 36px; }
  .feature.reverse .feature-copy { order: 0; }
}
.feature-copy p { color: var(--muted); }
.feature-copy h2 { margin-bottom: 1rem; }
.feature-copy em { color: var(--text); font-style: italic; }

.ticks { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; color: var(--muted); font-size: .95rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px;
  border-radius: 2px; background: var(--gold); box-shadow: 0 0 10px rgba(217,164,65,.5);
}
.ticks.lg li { font-size: 1rem; padding-left: 30px; margin-bottom: 2px; }
.ticks.lg b { color: var(--text); font-weight: 600; }

/* app screenshot stand-in */
.panel-ui {
  border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden;
  background: var(--ink-2); box-shadow: 0 30px 70px -34px rgba(0,0,0,.95);
}
.pui-head { display: flex; gap: 6px; padding: 11px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.pui-head span { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.pui-body { display: grid; grid-template-columns: 190px 1fr; min-height: 288px; }
@media (max-width: 520px) { .pui-body { grid-template-columns: 1fr; } .pui-side { display: none; } }
.pui-side { border-right: 1px solid var(--line); padding: 14px 10px; background: rgba(0,0,0,.18); }
.pui-label { font-family: var(--mono); font-size: .58rem; letter-spacing: .18em; color: var(--faint); text-transform: uppercase; margin: 0 0 10px 8px; }
.pui-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
  font-size: .78rem; color: var(--muted);
}
.pui-item span { color: var(--faint); width: 14px; text-align: center; font-size: .7rem; }
.pui-item b { margin-left: auto; font-family: var(--mono); font-size: .68rem; font-weight: 400; color: var(--faint); }
.pui-item.on { background: var(--gold-dim); color: var(--gold-lit); }
.pui-item.on span, .pui-item.on b { color: var(--gold); }
.pui-main { padding: 14px 16px; }
.pui-row {
  display: grid; grid-template-columns: 1.5fr .7fr 1fr .8fr; gap: 10px;
  padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: .8rem;
}
.pui-row .r { text-align: right; font-family: var(--mono); font-size: .74rem; color: var(--gold-lit); }
.pui-head-row { color: var(--faint); font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }
.pui-head-row .r { color: var(--faint); }
.pui-row.dim { opacity: .45; }

/* stat tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tile {
  background: linear-gradient(165deg, var(--panel), var(--ink-2));
  border: 1px solid var(--line); border-radius: var(--r); padding: 20px;
}
.tile .k { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); }
.tile .v { display: block; font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 700; line-height: 1.1; margin: 6px 0 2px; }
.tile .v .c { font-size: .6em; color: var(--muted); }
.tile .s { display: block; font-size: .8rem; color: var(--muted); }
.tile.gold { border-color: var(--gold-dim); background: linear-gradient(165deg, rgba(217,164,65,.10), var(--ink-2)); }
.tile.gold .v { color: var(--gold-lit); }

/* ---------------------------------------------------------- pricing slabs */
/* stretch, not start: the tiers have different numbers of features, and a
   pricing table where the buttons sit at three different heights looks broken. */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 940px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.plan {
  display: flex; flex-direction: column;
  position: relative; border-radius: var(--r); padding: 11px;
  background: linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 45%, rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 26px 60px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s;
}
.plan:hover { transform: translateY(-5px); box-shadow: 0 36px 70px -32px rgba(0,0,0,.95); }
.plan.featured { border-color: var(--gold-dim); box-shadow: 0 26px 60px -30px rgba(217,164,65,.35), inset 0 1px 0 rgba(255,255,255,.2); }
.ribbon {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  background: var(--gold); color: #241a06; padding: 4px 12px; border-radius: 999px; font-weight: 500;
  white-space: nowrap;
}
.plan-label {
  background: var(--cream); color: #17181b; border-radius: 7px; padding: 12px 14px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.pl-brand { grid-column: 1; display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; }
.pl-brand .dot { color: #b8860b; }
.pl-name { grid-column: 1; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.pl-grade {
  grid-row: 1 / span 2; grid-column: 2; text-align: center; min-width: 70px;
  border-left: 1px solid rgba(0,0,0,.16); padding-left: 12px;
  font-family: var(--display); font-weight: 700; font-size: 2.5rem; line-height: .9; color: #17181b;
}
.pl-grade span { font-size: .45em; vertical-align: super; color: #6a6863; }
.plan-body { padding: 20px 12px 8px; flex: 1; display: flex; flex-direction: column; }
.plan-line { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 14px; }
.plan-body ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; align-content: start; flex: 1; }
.plan-body li { position: relative; padding-left: 24px; font-size: .92rem; color: var(--text); }
.plan-body li::before {
  content: "✓"; position: absolute; left: 0; top: -1px; color: var(--gold); font-size: .9rem;
}
.plan-body li.no { color: var(--faint); }
.plan-body li.no::before { content: "—"; color: var(--faint); }
.plan-body li.soon::before { content: "◷"; color: var(--muted); }
.plan-body li.soon span {
  font-family: var(--mono); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; margin-left: 6px; color: var(--muted);
}

/* ---------------------------------------------------------- faq */
details {
  border-bottom: 1px solid var(--line); padding: 18px 0;
}
details summary {
  cursor: pointer; list-style: none; font-family: var(--display); font-size: 1.12rem;
  font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; color: var(--gold); font-family: var(--mono); font-size: 1.2rem; flex: none;
  transition: transform .25s;
}
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--muted); margin: 12px 0 0; font-size: .96rem; max-width: 68ch; }

/* ---------------------------------------------------------- closer + foot */
.closer { padding: clamp(72px, 10vw, 128px) 0; text-align: center; border-top: 1px solid var(--line);
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(217,164,65,.10), transparent 70%); }
.closer h2 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); }
.closer p { color: var(--muted); margin-top: .7rem; }

.foot { border-top: 1px solid var(--line); padding: 34px 0 46px; }
.foot-in { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot-mark { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .9rem; }
.foot-legal { color: var(--faint); font-size: .82rem; margin: 0; }
.foot-nav { margin-left: auto; display: flex; gap: 22px; font-size: .88rem; color: var(--muted); }
/* ============================================================ PHASE 1
   Homepage conversion redesign, 2026-08-23. Hierarchy and density only - the
   palette, type and grid are untouched, which is what the brief asked for. */

/* Three reassurances under the primary CTA. A list, not three divs: it IS a
   list, and a screen reader saying "list, 3 items" is the right summary. */
.trust {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.trust li { display: flex; flex-direction: column; gap: 1px; }
.trust b { font-size: .84rem; font-weight: 650; }
.trust span { font-size: .76rem; color: var(--muted); }

/* The three outcomes. Equal columns on desktop, stacked on a phone - one per
   row, as the brief specifies, because two half-width pillars read as a grid
   again. */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 34px;
}
.pillar h3 { margin: 0 0 10px; font-size: 1.12rem; }
.pillar p { margin: 0 0 10px; color: var(--text); }
.pillar .pillar-detail { font-size: .86rem; color: var(--muted); margin-bottom: 0; }

/* The nine panels, still here, behind a disclosure. Closed by default: the
   whole point of the change is that they should not greet a first-time
   visitor. */
.more-detail { margin-top: 30px; }
.more-detail > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: var(--gold);
  padding: 8px 0;
  list-style: none;
}
.more-detail > summary::-webkit-details-marker { display: none; }
.more-detail > summary::after { content: " \2193"; transition: transform .2s ease; }
.more-detail[open] > summary::after { transform: rotate(180deg); }
.more-detail > summary:hover { color: var(--gold-lit); }
.more-detail > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.more-detail .binder { margin-top: 18px; }

/* Capacity pricing, beside the plans rather than buried under them. */
.expand-note {
  margin-top: 26px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  padding: 18px 22px;
  background: var(--card, transparent);
  max-width: 62ch;
}
.expand-note h3 { margin: 0 0 8px; font-size: 1rem; }
.expand-note p { margin: 0 0 8px; font-size: .9rem; }
.expand-note .expand-eg { margin-bottom: 0; color: var(--muted); font-size: .84rem; }

@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 720px) {
  /* The brief: the primary CTA should be full width or nearly so on a phone. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .trust { gap: 12px; }
  .trust li { flex: 1 1 100%; }
}

/* Fine print: the copyright line and the disclaimer of affiliation. Its own
   block under the footer row rather than another item inside it - .foot-in is a
   flex line whose nav is pushed right, and a third child would sit between the
   byline and the links. Narrower measure than the page so it reads as fine
   print, which is what it is. */
.foot-fine { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.foot-fine p { margin: 0; color: var(--faint); font-size: .76rem; line-height: 1.5; max-width: 62ch; }
.foot-nav a:hover { color: var(--gold-lit); }
@media (max-width: 720px) { .foot-nav { margin-left: 0; width: 100%; } }

::selection { background: var(--gold); color: #241a06; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ============================================================================
   THE APP, ACTUALLY RENDERED
   ----------------------------------------------------------------------------
   These are the real interface's own tokens and component styles, lifted from
   the application stylesheet, so what people see here is the product rather
   than an artist's impression of it. The previous hero was a CSS drawing of a
   graded slab that does not exist - handsome, and the single most artificial
   thing on the page. Software sells on being shown working.

   If the app's palette changes, these need changing with it. That is the cost
   of showing the real thing, and it is worth paying.
   ========================================================================== */
.app {
  --a-bg:       #14171f;
  --a-deep:     #0e1015;
  --a-raise:    #1a1e28;
  --a-hover:    #212632;
  --a-line:     #2a303d;
  --a-line-soft:#202634;
  --a-text:     #e8eaf0;
  --a-dim:      #98a0b3;
  --a-mute:     #6c7488;
  --a-accent:   #c8963e;
  --a-soft:     #3a2e17;
  --a-lit:      #f0c675;
  --a-good:     #4ea87a;
  --a-warn:     #d9a13b;
  --a-info:     #5b8fd0;

  display: grid;
  grid-template-columns: 158px 1fr;
  background: var(--a-bg);
  border: 1px solid var(--a-line);
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--body);
  color: var(--a-text);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .03);
}
.app * { box-sizing: border-box; }

/* --- sidebar */
.app-side { background: var(--a-deep); border-right: 1px solid var(--a-line); padding: .7rem .6rem; }
.app-brand {
  display: flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .82rem; letter-spacing: -.01em; margin-bottom: .9rem;
}
.app-brand i { width: 12px; height: 17px; border-radius: 2px; background: var(--a-accent); display: block; }
.app-nav { display: grid; gap: 1px; margin-bottom: 1rem; }
.app-nav a {
  display: flex; align-items: center; gap: .45rem;
  padding: .3rem .45rem; border-radius: 6px; color: var(--a-dim); font-size: .78rem;
}
.app-nav a.on { background: var(--a-soft); color: var(--a-lit); }
.app-sec { font-size: .64rem; text-transform: uppercase; letter-spacing: .13em; color: var(--a-mute); margin: 0 .45rem .35rem; }
.app-space {
  display: flex; align-items: center; gap: .4rem;
  padding: .26rem .45rem; border-radius: 6px; color: var(--a-dim); font-size: .78rem;
}
.app-space .n { margin-left: auto; color: var(--a-mute); font-size: .7rem; font-variant-numeric: tabular-nums; }
.app-space.on { background: var(--a-hover); color: var(--a-text); }

/* --- main pane */
.app-main { min-width: 0; padding: .8rem .9rem 1rem; }
.app-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .7rem; }
.app-head h3 { font-family: var(--body); font-size: 1.05rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.app-head .count { margin-left: auto; color: var(--a-mute); font-size: .76rem; }

/* the list switcher, as it actually appears */
.app-seg { display: inline-flex; border: 1px solid var(--a-line); border-radius: 6px; overflow: hidden; margin-bottom: .6rem; }
.app-seg span {
  display: inline-flex; align-items: baseline; gap: .35rem;
  padding: .34rem .6rem; font-size: .76rem; color: var(--a-dim); background: var(--a-raise);
}
.app-seg span + span { border-left: 1px solid var(--a-line); }
.app-seg span.on { background: var(--a-soft); color: var(--a-lit); font-weight: 600; box-shadow: inset 0 -2px 0 var(--a-accent); }
.app-seg .n { font-size: .66rem; opacity: .66; font-variant-numeric: tabular-nums; }

.app-tools { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .55rem; }
.app-pill {
  padding: .22rem .5rem; border: 1px solid var(--a-line); border-radius: 6px;
  background: var(--a-raise); color: var(--a-dim); font-size: .72rem;
}
.app-pill.on { background: var(--a-soft); color: var(--a-lit); border-color: transparent; }

/* the table */
/* Where-they-live bars, mirroring .barrow/.bartrack/.barfill in the app's own
   stylesheet (see the note at the top of .app: when the app's palette moves,
   these move with it). Label and count on one line, the track spanning under
   both, widths relative to the fullest bin - exactly as the app draws it. */
.app-bars { display: grid; gap: .5rem; }
.app-bar { display: grid; grid-template-columns: 1fr auto; gap: .25rem .6rem; align-items: center; }
.app-bar .bl { font-size: .76rem; color: var(--a-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-bar .bv { font-size: .72rem; color: var(--a-mute); font-variant-numeric: tabular-nums; }
.app-bar .bartrack {
  grid-column: 1 / -1; height: 4px; border-radius: 3px;
  background: var(--a-hover); overflow: hidden;
}
.app-bar .barfill { display: block; height: 100%; border-radius: 3px; background: var(--a-accent); }

.app-table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.app-table th, .app-table td {
  padding: .34rem .3rem; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--a-line-soft);
}
.app-table thead th {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--a-mute); font-weight: 500;
}
.app-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Mirrors the app: Value in the cards table sits left under its own header,
   tabular figures kept. Only that table - the PC list and the insurance
   schedule still right-align, as they do in the app. */
.app-table td.num-left, .app-table th.num-left { text-align: left; }
.app-table tbody tr:last-child td { border-bottom: none; }
.app-table .who { color: var(--a-text); }
.app-table .sub { color: var(--a-mute); }
/* Real card thumbnails (from the actual collection) in the leading column;
   cards without a photo yet show the same muted placeholder the app does. */
.app-table td.pic { width: 1%; padding-left: .15rem; padding-right: .1rem; }
.app-table td.pic img,
.app-table td.pic .ph {
  display: block; width: 22px; height: 30px; border-radius: 3px;
}
.app-table td.pic img { object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.app-table td.pic .ph { background: var(--a-line-soft); }

.tag {
  display: inline-block; padding: .02rem .3rem; border-radius: 4px;
  font-size: .64rem; font-weight: 600; letter-spacing: .02em;
  background: var(--a-hover); color: var(--a-dim); border: 1px solid var(--a-line);
}
.tag.rc    { background: color-mix(in srgb, var(--a-info) 20%, transparent); color: var(--a-info); border-color: transparent; }
.tag.auto  { background: color-mix(in srgb, var(--a-good) 20%, transparent); color: var(--a-good); border-color: transparent; }
.tag.relic { background: color-mix(in srgb, var(--a-warn) 20%, transparent); color: var(--a-warn); border-color: transparent; }
.tag.grade { background: var(--a-soft); color: var(--a-lit); border-color: transparent; }

/* stat tiles, as the dashboard shows them */
.app-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-bottom: .7rem; }
.app-stat { background: var(--a-raise); border: 1px solid var(--a-line); border-radius: 8px; padding: .5rem .55rem; }
.app-stat .k { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--a-mute); }
.app-stat .v { font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.app-stat .v.gold { color: var(--a-lit); }

/* A caption under a rendering, so nobody has to wonder if it is a mock-up. */
.app-cap {
  margin: .6rem 0 0; font-family: var(--mono); font-size: .7rem;
  color: var(--faint); letter-spacing: .02em;
}

/* On a phone the sidebar is noise; the table is the point. */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; font-size: 12px; }
  .app-side { display: none; }
  .app-stats { grid-template-columns: repeat(2, 1fr); }
  .app-table .hide-sm { display: none; }
}

/* The mock's main pane sits right of a 190px sidebar, so it is far narrower than
   the panel itself - not enough for all seven columns whatever the screen width.
   So the hero mock shows a compact five-column table (Year + Parallel dropped,
   long names ellipsised), and its scroll container hides the bar as a final
   guarantee that a stray pixel of overflow can never draw a scrollbar. The real
   app in the product keeps every column; this is illustration only. */
.app-table .hide-sm { display: none; }
.app-table .who { max-width: 13ch; overflow: hidden; text-overflow: ellipsis; }

/* In the tight two-column hero band the panel is narrow, so give the whole
   width to the table by dropping the mock sidebar (as the app itself does on
   smaller screens) - otherwise the sidebar squeezes the last column off. */
@media (min-width: 981px) and (max-width: 1240px) {
  .app { grid-template-columns: 1fr; }
  .app-side { display: none; }
}

/* Lets a wide table sit without forcing the page sideways - and with no visible
   bar, since nobody scrolls a static hero illustration. */
.app-scroll, .app-main { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.app-scroll::-webkit-scrollbar, .app-main::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Belt and braces: any table inside a rendering can scroll on its own, so a
   long line (an insurance description runs to 60-odd characters) never pushes
   the frame wider than the column it sits in. */
.app-main { overflow-x: auto; }

/* Long descriptions truncate rather than stretch - which is exactly what the
   real table does with its .wide columns. */
.app-table td.wide { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .app-table td.wide { max-width: 22ch; } }

/* ============================================================================
   PRICING - plain
   The tiers used to be drawn as grading labels with the price where the grade
   goes. It was the cleverest thing on the page and the least useful: people
   comparing plans want a column they can read down, not a costume.
   ========================================================================== */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.6rem; }
@media (max-width: 880px) { .tiers { grid-template-columns: 1fr; max-width: 460px; } }

.tier {
  display: flex; flex-direction: column; position: relative;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); padding: 1.4rem 1.3rem;
}
.tier.pick { border-color: rgba(217, 164, 65, .5); background: var(--panel-2); }
.tier-name { font-family: var(--mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.tier-price { display: flex; align-items: baseline; gap: .15rem; margin: .5rem 0 .1rem; }
.tier-price .amt { font-family: var(--display); font-size: 3rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.tier-price .cur { font-size: 1.1rem; color: var(--muted); }
.tier-price .per { font-size: .82rem; color: var(--faint); margin-left: .2rem; }
.tier-for { color: var(--muted); font-size: .9rem; margin: .4rem 0 1rem; min-height: 2.6em; }

/* The yearly alternative, under the monthly price rather than behind a toggle.
   This page is read to compare; hiding half the comparison behind a click is
   the one thing it should not do. */
.tier-year {
  margin: -.35rem 0 .5rem;
  font-size: .82rem;
  color: var(--muted, #8b8f98);
}
.tier-year b { color: inherit; font-weight: 650; }
.tier ul { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .45rem; font-size: .91rem; }
.tier li { padding-left: 1.35rem; position: relative; }
.tier li::before { content: "+"; position: absolute; left: .25rem; color: var(--gold); font-family: var(--mono); }
.tier li.no { color: var(--faint); }
.tier li.no::before { content: "\2013"; color: var(--faint); }
.tier .btn { margin-top: auto; }
.tier-tag {
  position: absolute; top: 1rem; right: 1rem; margin: 0;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-lit); background: var(--gold-dim); border-radius: 99px; padding: .18rem .55rem;
}

/* ============================================================================
   LEGAL PAGES  (terms.html, refunds.html)
   Long-form prose, so the job is measure and rhythm rather than decoration.
   ========================================================================== */
.legal { padding-top: .5rem; }
.legal h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); margin-bottom: .3rem; }
.legal h2 {
  font-size: 1.24rem; margin: 2.3rem 0 .6rem;
  padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: 1.8rem; }
.legal h3 {
  font-size: 1.02rem; margin: 1.4rem 0 .45rem; color: var(--gold-lit);
  font-family: var(--body); font-weight: 600; letter-spacing: 0;
}
.legal p, .legal li { color: var(--text); }
.legal .lede { font-size: 1.12rem; color: var(--text); margin: 1rem 0 1.4rem; }
.legal ul { margin: 0 0 1.1rem; padding-left: 1.1rem; }
.legal li { margin-bottom: .5rem; }
.legal a { color: var(--gold-lit); text-decoration: underline; text-underline-offset: 2px; }
/* --cream is a near-white; fine on the dark theme but invisible on the light
   paper one (it is never redefined for light). The lede, bold terms and link
   hover must track the theme, so they use --text, which does. */
.legal a:hover { color: var(--text); }
.legal b { color: var(--text); }
.legal-meta { color: var(--faint); font-size: .8rem; margin: 0 0 1.2rem; }

/* Set apart, because these are the paragraphs someone needs to notice rather
   than read past: what is not yet true, and what is not legal advice. */
.legal .note {
  margin: 2rem 0 0; padding: .9rem 1.05rem;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r); color: var(--muted); font-size: .92rem;
}