/* BidPage design system — SHARED BY EVERY PAGE.
 *
 * Transplanted from design/homepage-kit/index.html (v2 kit, which added the light theme
 * and the toggle). This is the single source of tokens, both themes, and every shared
 * component; there is no page-specific theme system anywhere. Page-specific sections
 * (hero, ideas, pricing panels) live here too rather than in a second file, because they
 * are part of the same system and one cached stylesheet beats two.
 *
 * The app components below the kit's own rules — forms, status badges, alerts, tables,
 * dialogs — are additions: the kit is a marketing page and ships no form controls.
 */
:root {
      color-scheme: dark;
      --ink: #090b10;
      --ink-soft: #0d1118;
      --surface: #11151d;
      --surface-raised: #181e29;
      --paper: #f7f8fa;
      --text: #f4f7fb;
      --muted: #9da7b6;
      --line: rgba(255,255,255,.12);
      --line-strong: rgba(255,255,255,.2);
      --cobalt: #2563ff;
      --cobalt-light: #6ea0ff;
      --lime: #c8ff38;
      --lime-ink: #111600;
      --success: #5ce1a1;
      --radius-sm: 12px;
      --radius-md: 18px;
      --radius-lg: 26px;
      --shadow: 0 28px 80px rgba(0,0,0,.35);
      --max: 1240px;
      --display: "Space Grotesk", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
      --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }

    /* The `hidden` ATTRIBUTE outranks every component's display, and this rule is what
       makes that true. The browser's own `[hidden] { display: none }` lives in the user
       agent sheet, which loses to ANY author rule — so `.alert { display: flex }` was
       enough to paint an element the markup and the JavaScript both called hidden. That
       shipped: `/new` opened with "Your auction was not created" above a blank form,
       on the front door of the funnel.

       `!important` is correct here and is not a shortcut. `hidden` is a semantic
       assertion — the element is not applicable right now — and no component's layout
       may overrule it. Anything that needs to be laid out is, by definition, not hidden.

       Do NOT hide things with opacity, visibility, off-screen positioning or emptied
       content instead; those stay in the accessibility tree and get read aloud. */
    [hidden] { display: none !important; }
    html { scroll-behavior: smooth; background: var(--ink); }
    body {
      margin: 0;
      min-width: 320px;
      background:
        radial-gradient(circle at 75% 8%, rgba(37,99,255,.12), transparent 30rem),
        var(--ink);
      color: var(--text);
      font-family: var(--body);
      font-size: 16px;
      line-height: 1.6;
      overflow-x: hidden;
    }

    img { display: block; max-width: 100%; }
    a { color: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    [id] { scroll-margin-top: 96px; }

    .skip-link {
      position: fixed;
      z-index: 999;
      top: 12px;
      left: 12px;
      padding: 10px 16px;
      border-radius: 10px;
      background: var(--lime);
      color: var(--lime-ink);
      transform: translateY(-150%);
      transition: transform .2s ease;
    }
    .skip-link:focus { transform: translateY(0); }

    .container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
    .section { padding: 112px 0; position: relative; }
    .section-rule { border-top: 1px solid var(--line); }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 18px;
      color: var(--cobalt-light);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .16em;
      line-height: 1.2;
      text-transform: uppercase;
    }
    .eyebrow::before {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: currentColor;
      content: "";
    }
    .section-title {
      max-width: 820px;
      margin: 0;
      font-family: var(--display);
      font-size: clamp(2.25rem, 5vw, 3.7rem);
      letter-spacing: -.055em;
      line-height: 1.02;
    }
    .section-intro {
      max-width: 660px;
      margin: 22px 0 0;
      color: #c5ccd6;
      font-size: 1.12rem;
      line-height: 1.7;
    }

    .button {
      display: inline-flex;
      min-height: 52px;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 21px;
      border: 1px solid transparent;
      border-radius: 999px;
      font-size: .96rem;
      font-weight: 800;
      line-height: 1.1;
      text-decoration: none;
      transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .button:hover { transform: translateY(-2px); }
    .button:active { transform: translateY(0); }
    .button-primary {
      background: var(--lime);
      color: var(--lime-ink);
      box-shadow: 0 10px 32px rgba(200,255,56,.12);
    }
    .button-primary:hover { box-shadow: 0 12px 38px rgba(200,255,56,.22); }
    .button-secondary { border-color: var(--line-strong); background: rgba(255,255,255,.03); color: white; }
    .button-secondary:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
    .button-cobalt { background: var(--cobalt); color: white; box-shadow: 0 12px 36px rgba(37,99,255,.22); }
    .button-cobalt:hover { background: #1f57e6; box-shadow: 0 14px 42px rgba(37,99,255,.3); }
    /* Tertiary: the action that should be available without competing for the eye. */
    .button-tertiary {
      background: transparent; border-color: transparent;
      color: var(--cobalt-light); padding-inline: 10px;
    }
    .button-tertiary:hover { background: rgba(110,160,255,.1); text-decoration: underline; text-underline-offset: 3px; }

    /* Disabled and loading share one look, because they mean the same thing to the person
       pressing: not now. Neither may lift on hover — a button that animates under the
       cursor is claiming it will do something. */
    .button:disabled, .button[disabled], .button[data-loading] { opacity: .55; cursor: not-allowed; box-shadow: none; }
    .button:disabled:hover, .button[disabled]:hover, .button[data-loading]:hover { transform: none; }
    .button[data-loading] { cursor: progress; }

    .button svg { width: 17px; height: 17px; }
    :focus-visible { outline: 3px solid var(--cobalt-light); outline-offset: 4px; }

    .site-header {
      position: sticky;
      z-index: 100;
      top: 0;
      border-bottom: 1px solid transparent;
      background: rgba(9,11,16,.58);
      backdrop-filter: blur(18px);
      transition: background .2s ease, border-color .2s ease;
    }
    .site-header.scrolled { border-color: var(--line); background: rgba(9,11,16,.92); }
    .header-inner { display: flex; height: 72px; align-items: center; justify-content: space-between; gap: 28px; }
    .wordmark {
      display: inline-flex;
      align-items: baseline;
      color: white;
      font-family: var(--display);
      font-size: 1.55rem;
      font-weight: 900;
      letter-spacing: -.06em;
      line-height: 1;
      text-decoration: none;
    }
    .brand-logo { display: block; width: 166px; height: auto; }
    .logo-on-light { display: none; }
    .wordmark-dot { color: var(--lime); }
    .desktop-nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
    .desktop-nav a { color: #cbd2dc; font-size: .92rem; font-weight: 650; text-decoration: none; }
    .desktop-nav a:hover { color: white; }
    .header-cta { min-height: 44px; padding: 10px 18px; }
    .theme-button {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px 13px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.045);
      color: #dce2eb;
      font: 750 .78rem/1 var(--body);
      cursor: pointer;
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }
    .theme-button:hover { transform: translateY(-1px); border-color: var(--line-strong); background: rgba(255,255,255,.08); }
    .theme-button svg { width: 18px; height: 18px; }
    .moon-icon { display: none; }
    .menu-button {
      display: none;
      width: 46px;
      height: 46px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: rgba(255,255,255,.04);
      color: white;
      cursor: pointer;
    }
    .menu-button svg { width: 22px; height: 22px; }
    .mobile-nav { display: none; padding: 0 20px 20px; }
    .mobile-nav.open { display: grid; gap: 8px; }
    .mobile-nav a:not(.button) { padding: 12px 10px; color: #d8dee7; font-weight: 700; text-decoration: none; }

    .hero { padding: 62px 0 78px; }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(460px, .96fr); align-items: center; gap: clamp(36px, 5vw, 72px); }
    .hero-pill {
      display: inline-flex;
      align-items: center;
      margin-bottom: 26px;
      padding: 8px 13px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      color: #dce2eb;
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .1em;
      line-height: 1.2;
      text-transform: uppercase;
    }
    .hero h1 {
      max-width: 700px;
      margin: 0;
      font-family: var(--display);
      font-size: clamp(3.2rem, 6.25vw, 5.55rem);
      letter-spacing: -.07em;
      line-height: .96;
    }
    .hero h1 span { color: var(--lime); }
    .hero-copy {
      max-width: 650px;
      margin: 28px 0 0;
      color: #c3cad4;
      font-size: clamp(1.08rem, 1.5vw, 1.28rem);
      line-height: 1.65;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
    .hero-note { margin: 18px 0 0; color: var(--muted); font-size: .83rem; }
    .proof-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
    .proof-item {
      display: inline-flex;
      min-height: 35px;
      align-items: center;
      gap: 8px;
      padding: 7px 11px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.025);
      color: #cbd2dc;
      font-size: .76rem;
      font-weight: 700;
    }
    .proof-item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

    .hero-visual { position: relative; min-width: 0; }
    .hero-photo-wrap {
      position: relative;
      overflow: hidden;
      aspect-ratio: 1 / 1.04;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-lg);
      background: var(--surface);
      box-shadow: var(--shadow);
    }
    .hero-photo-wrap::after {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(9,11,16,.4), transparent 34%);
      content: "";
      pointer-events: none;
    }
    .hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
    /* The floating auction card is DARK IN BOTH THEMES. It sits over the hero
       photograph, which does not lighten when the page does, so a light-theme surface
       would be white-on-white and unreadable — and it is also the product's own
       identity, the one object a visitor is meant to recognise as "a BidPage".
       It therefore carries its own component tokens rather than reading the page
       palette: nothing under html[data-theme="light"] may repaint it. */
    .auction-card {
      --card-bg: #0e121a;   /* opaque: translucent, it composited lighter over the light
                               page and dragged the smallest type to 4.25:1 */
      --card-line: rgba(255,255,255,.22);
      --card-rule: rgba(255,255,255,.14);
      --card-text: #f4f7fb;
      --card-muted: #9da7b6;   /* 7.6:1 on the card ground */
      --card-dim: #7f8998;     /* 5.2:1 — the smallest type on the card */
      --card-accent: #c8ff38;
      --card-done: #5ce1a1;

      position: absolute;
      z-index: 2;
      left: -28px;
      bottom: 34px;
      width: min(320px, 74%);
      padding: 20px;
      border: 1px solid var(--card-line);
      border-radius: 20px;
      background: var(--card-bg);
      color: var(--card-text);
      box-shadow: 0 26px 64px rgba(0,0,0,.45);
      backdrop-filter: blur(16px);
    }
    .auction-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    /* The EYEBROW states the lifecycle — live, sold, closed — and nothing else. The
       format ("Open bidding") is a separate badge below the title. Merging the two is
       how a finished auction shipped reading "OPEN AUCTION / Closed / Sold for $13". */
    .live-label { display: flex; align-items: center; gap: 8px; color: var(--card-accent); font-size: .67rem; font-weight: 900; letter-spacing: .08em; }
    /* A finished auction gets a SUBDUED badge — no lime, no dot. Lime and the pulse are
       reserved for "you can bid on this right now"; wearing them on a completed sale is
       how a record starts reading as an invitation. */
    .live-label--done,
    .live-label--dead,
    .live-label--example { color: var(--card-muted); }
    /* A pulsing dot is a claim that something is happening right now, so it renders
       only inside a live eyebrow — never on a completed sale or an illustration. */
    .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--card-accent); box-shadow: 0 0 0 0 rgba(200,255,56,.45); animation: pulse 2s infinite; }
    .more { color: var(--card-muted); letter-spacing: .14em; }
    .auction-card h2 { margin: 14px 0 0; font-size: 1rem; line-height: 1.35; color: var(--card-text); }
    .bid-status { display: inline-flex; margin-top: 9px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.09); border: 1px solid var(--card-rule); color: var(--card-muted); font-size: .68rem; font-weight: 800; }
    .leading { margin-top: 18px; padding: 14px 0; border-block: 1px solid var(--card-rule); }
    .leading small { display: block; color: var(--card-muted); }
    .leading strong { display: block; margin-top: 2px; font-family: var(--display); font-size: 2.45rem; letter-spacing: -.06em; line-height: 1; }
    .leading span { color: #c8cfd9; font-size: .74rem; }
    .leading--sold strong { color: var(--card-done); }
    .bid-list { margin-top: 10px; }
    .bid-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.075); font-size: .77rem; }
    .bid-row .avatar { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #66748a; font-weight: 900; }
    .bid-row strong { margin-left: auto; }
    .illustrative { margin: 11px 0 0; color: var(--card-dim); font-size: .66rem; }
    /* The card's call to action. Lime for a live auction because acting on it is the
       point; a quiet outline for a finished one, where the action is only "go and read
       what happened". Both sit inside the card's own dark tokens. */
    .card-cta {
      display: inline-flex; align-items: center; gap: 7px;
      margin-top: 14px; padding: 8px 13px; border-radius: 999px;
      font-size: .74rem; font-weight: 800; letter-spacing: .01em;
    }
    .card-cta svg { width: 13px; height: 13px; }
    .card-cta--live { background: var(--card-accent); color: #16210a; }
    .card-cta--done { border: 1px solid var(--card-rule); color: var(--card-text); }
    @keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(200,255,56,0); } 100% { box-shadow: 0 0 0 0 rgba(200,255,56,0); } }

    .offer-strip { border-block: 1px solid var(--line); background: #0b0f16; }
    .offer-strip-inner { display: grid; grid-template-columns: 290px 1fr; align-items: center; gap: 32px; padding-block: 28px; }
    .offer-strip strong { font-size: 1rem; line-height: 1.4; }
    .chips { display: flex; gap: 9px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
    .chip { flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: #d8dee7; font-size: .78rem; font-weight: 750; }

    .ideas-layout { margin-top: 34px; }
    /* Whole composition, natural aspect ratio, no crop and no min-height. `cover` plus a
       600px floor is what hid two of the three creators; aspect-ratio keeps the box the
       shape of the picture instead of making the picture the shape of the box. */
    .niches-image {
      /* Capped at the widest source we have (1672px, shipped as 1600). Letting it run
         wider than this would upscale the only copy of the picture that exists — the
         same mistake the crop made, just in the other direction. */
      max-width: 1600px; margin: 44px auto 0; overflow: hidden;
      border: 1px solid var(--line); border-radius: var(--radius-lg);
    }
    .niches-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
    /* Six cards, three-up: with the collage now a full-width band above them rather than
       a tall column beside them, two-up left the section twice as long as it needed to be.
       Equal heights come from the grid, so a longer description cannot make one card
       taller than its neighbours. */
    .idea-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; align-items: stretch; }
    .idea-card { display: flex; flex-direction: column; }
    .idea-card small { margin-top: auto; padding-top: 12px; }
    /* These became anchors when they were wired to /new, and an anchor underlines its
       whole subtree — heading, description and hint alike — unless it says otherwise.
       That is what put a rule under every line of every example card. */
    .idea-card {
      color: inherit;
      text-decoration: none;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.016));
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .idea-card:hover { transform: translateY(-3px); border-color: rgba(110,160,255,.52); box-shadow: 0 20px 50px rgba(37,99,255,.08); }
    .icon-box { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: rgba(37,99,255,.13); color: #9db8ff; }
    .icon-box svg { width: 21px; height: 21px; }
    .idea-card h3 { margin: 18px 0 8px; font-size: 1.08rem; }
    .idea-card p { margin: 0; color: #b5beca; font-size: .91rem; line-height: 1.58; }
    .idea-card small { display: block; margin-top: 12px; color: #7e8998; font-size: .76rem; line-height: 1.5; }
    .quiet-link { display: inline-flex; margin-top: 24px; color: var(--cobalt-light); font-weight: 800; text-decoration: none; }

    .how-section { background: linear-gradient(180deg, #0c1119, #090b10); }
    .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 54px; counter-reset: step; }
    .step { position: relative; min-height: 260px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); counter-increment: step; }
    .step::before { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--lime); color: var(--lime-ink); content: counter(step, decimal-leading-zero); font-size: .78rem; font-weight: 900; }
    .step h3 { margin: 44px 0 10px; font-size: 1.2rem; }
    .step p { margin: 0; color: #aeb7c4; font-size: .91rem; }
    .section-action { margin-top: 34px; }

    .payment-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; margin-top: 52px; }
    .payment-panel { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 46px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
    .payment-panel.free { background: var(--paper); color: #11151d; }
    .payment-panel.secured { background: linear-gradient(145deg, #142149, #101722 70%); border-color: rgba(110,160,255,.32); }
    .mode-label { color: var(--cobalt); font-size: .75rem; font-weight: 900; letter-spacing: .14em; }
    .secured .mode-label { color: #9ebaff; }
    .price { display: block; margin-top: 18px; font-family: var(--display); font-size: clamp(2.5rem, 5vw, 4.2rem); letter-spacing: -.065em; line-height: 1; }
    .payment-panel > p { max-width: 540px; margin: 20px 0 0; color: #515966; }
    .secured > p { color: #c0c9d7; }
    .checks { display: grid; gap: 10px; margin: 26px 0 30px; padding: 0; list-style: none; }
    .checks li { display: flex; align-items: center; gap: 10px; font-weight: 750; }
    .checks li::before { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: rgba(37,99,255,.13); color: var(--cobalt); content: "✓"; font-size: .7rem; font-weight: 900; }
    .secured .checks li::before { background: rgba(200,255,56,.12); color: var(--lime); }
    .fine-print { display: block; margin-top: 16px; color: #8b96a6; font-size: .75rem; }

    .format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; }
    .format-card { display: flex; min-height: 330px; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.014)); }
    .format-number { color: #697487; font-family: var(--display); font-size: 2rem; line-height: 1; }
    .format-card h3 { margin: 32px 0 10px; font-size: 1.35rem; }
    .format-card p { margin: 0; color: #aeb7c4; }
    .format-badge { align-self: flex-start; margin-top: 22px; padding: 6px 9px; border-radius: 999px; background: rgba(37,99,255,.13); color: #9db8ff; font-size: .7rem; font-weight: 800; }
    .format-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 28px; color: white; font-weight: 850; text-decoration: none; }
    .format-link:hover { color: var(--lime); }

    .live-shell { display: grid; grid-template-columns: 1fr .82fr; align-items: center; gap: 44px; padding: clamp(32px, 5vw, 64px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(circle at 88% 30%, rgba(37,99,255,.18), transparent 46%), var(--surface); }
    .empty-auction { padding: 28px; border: 1px dashed rgba(255,255,255,.26); border-radius: var(--radius-md); background: rgba(9,11,16,.38); text-align: center; }
    .empty-auction svg { width: 38px; height: 38px; color: var(--cobalt-light); }
    .empty-auction strong { display: block; margin-top: 16px; font-size: 1.08rem; }
    .empty-auction p { margin: 6px 0 0; color: var(--muted); }

    .quote-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 48px; }
    blockquote { margin: 0; }
    .quote { display: flex; min-height: 250px; flex-direction: column; padding: 28px; border-top: 2px solid var(--cobalt); background: rgba(255,255,255,.025); }
    .quote p { margin: 0; font-size: 1.13rem; font-weight: 700; line-height: 1.52; }
    .quote cite { margin-top: auto; padding-top: 28px; color: var(--muted); font-size: .82rem; font-style: normal; }

    .pricing-shell { position: relative; overflow: hidden; padding: clamp(38px, 7vw, 80px); border-radius: var(--radius-lg); background: var(--lime); color: var(--lime-ink); }
    .pricing-shell::after { position: absolute; top: -44%; right: -8%; width: 420px; height: 420px; border: 62px solid rgba(17,22,0,.07); border-radius: 50%; content: ""; }
    .pricing-shell .eyebrow { color: #263000; }
    .pricing-shell .pricing-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr .72fr; align-items: end; gap: 36px; }
    .fee { font-family: var(--display); font-size: clamp(5.5rem, 13vw, 10rem); letter-spacing: -.09em; line-height: .8; }
    .fee-copy { font-size: 1.18rem; font-weight: 850; line-height: 1.45; }
    .fee-fine { margin-top: 14px; font-size: .83rem; opacity: .72; }
    .pricing-shell .button { margin-top: 26px; background: var(--ink); color: white; }

    .faq-list { max-width: 900px; margin-top: 48px; border-top: 1px solid var(--line); }
    details { border-bottom: 1px solid var(--line); }
    summary { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 2px; cursor: pointer; font-size: 1.08rem; font-weight: 800; list-style: none; }
    summary::-webkit-details-marker { display: none; }
    summary::after { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 50%; content: "+"; color: var(--lime); font-size: 1.2rem; }
    details[open] summary::after { content: "−"; }
    .faq-answer { max-width: 760px; padding: 0 54px 24px 2px; color: #aeb7c4; }
    .faq-answer p { margin: 0; }

    .final-cta { padding: 100px 0; }
    .final-shell { position: relative; overflow: hidden; padding: clamp(42px, 8vw, 92px); border: 1px solid rgba(200,255,56,.3); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(200,255,56,.1), rgba(37,99,255,.12)), #0e131b; }
    .final-shell::after { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 64px, rgba(255,255,255,.025) 65px 66px); content: ""; pointer-events: none; }
    .final-content { position: relative; z-index: 1; max-width: 820px; }
    .final-content h2 { margin: 0; font-family: var(--display); font-size: clamp(2.8rem, 6vw, 5.1rem); letter-spacing: -.065em; line-height: .98; }
    .final-content p { max-width: 620px; margin: 22px 0 0; color: #c3cad4; font-size: 1.12rem; }
    .broader { margin-top: 24px !important; color: #8893a3 !important; font-size: .82rem !important; }

    footer { padding: 32px 0 92px; border-top: 1px solid var(--line); }
    .footer-grid { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
    .footer-copy { margin: 12px 0 0; color: var(--muted); font-size: .83rem; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
    .footer-links a { color: #aeb7c4; font-size: .82rem; font-weight: 700; text-decoration: none; }
    .copyright { margin: 16px 0 0; color: #8a94a3; font-size: .75rem; }  /* #606a78 was 3.59:1 */

    /* Reveal-on-scroll is PROGRESSIVE ENHANCEMENT, and the default state is VISIBLE.
       It used to be the other way round — `.reveal { opacity: 0 }` in the stylesheet,
       revealed only by an IntersectionObserver — so anything that stopped the observer
       running left whole sections permanently blank: JavaScript disabled or still
       loading, an older engine, a full-page screenshot or print render, a bfcache
       restore. Full-page captures of the homepage came back with large empty bands.

       The hidden state now belongs to `html.reveal-enabled`, a class home.js adds only
       AFTER it has successfully constructed the observer. If anything goes wrong the
       class is never added, or is removed, and every element is simply visible. */
    .reveal { opacity: 1; transform: none; }
    html.reveal-enabled .reveal { transition: opacity .55s ease, transform .55s ease; }
    html.reveal-enabled .reveal:not(.is-visible) { opacity: 0; transform: translateY(18px); }
    .mobile-cta { display: none; }

    html[data-theme="light"] { color-scheme: light; }
    html[data-theme="light"] body {
      --ink: #f6f8fb;
      --ink-soft: #ffffff;
      --surface: #ffffff;
      --surface-raised: #eef2f7;
      --paper: #ffffff;
      --text: #121722;
      --muted: #4d5869;   /* #657083 measured 4.44:1 on --surface-raised, just under AA */
      --line: rgba(15,23,42,.12);
      --line-strong: rgba(15,23,42,.23);
      --cobalt-light: #1b46c4;
      --shadow: 0 28px 80px rgba(32,48,70,.16);
      background:
        radial-gradient(circle at 75% 8%, rgba(37,99,255,.1), transparent 30rem),
        #f6f8fb;
      color: var(--text);
    }
    html[data-theme="light"] .site-header { background: rgba(246,248,251,.72); }
    html[data-theme="light"] .site-header.scrolled { background: rgba(255,255,255,.94); }
    html[data-theme="light"] .wordmark { color: #101621; }
    html[data-theme="light"] .logo-on-dark { display: none; }
    html[data-theme="light"] .logo-on-light { display: block; }
    html[data-theme="light"] .desktop-nav a,
    html[data-theme="light"] .mobile-nav a:not(.button) { color: #4d5869; }
    html[data-theme="light"] .desktop-nav a:hover,
    html[data-theme="light"] .mobile-nav a:not(.button):hover { color: #101621; }
    html[data-theme="light"] .theme-button,
    html[data-theme="light"] .menu-button { background: rgba(255,255,255,.8); color: #273143; }
    html[data-theme="light"] .theme-button:hover { background: white; }
    html[data-theme="light"] .sun-icon { display: none; }
    html[data-theme="light"] .moon-icon { display: block; }
    html[data-theme="light"] .hero-pill { color: #344054; background: rgba(255,255,255,.64); }
    html[data-theme="light"] .hero-copy,
    html[data-theme="light"] .section-intro { color: #566173; }
    html[data-theme="light"] .button-secondary { background: white; color: #111827; }
    html[data-theme="light"] .button-secondary:hover { background: #f0f4f9; border-color: rgba(15,23,42,.38); }
    html[data-theme="light"] .proof-item { background: rgba(255,255,255,.7); color: #526073; }
    html[data-theme="light"] .offer-strip { background: #eef2f7; }
    html[data-theme="light"] .chip { background: white; color: #344054; }
    html[data-theme="light"] .idea-card,
    html[data-theme="light"] .step,
    html[data-theme="light"] .format-card,
    html[data-theme="light"] .quote { background: rgba(255,255,255,.82); box-shadow: 0 12px 34px rgba(32,48,70,.055); }
    html[data-theme="light"] .idea-card p,
    html[data-theme="light"] .step p,
    html[data-theme="light"] .format-card p,
    html[data-theme="light"] .faq-answer { color: #606c7d; }
    html[data-theme="light"] .idea-card small { color: #5f6b7d; }  /* #7a8698 was 3.65:1 */
    html[data-theme="light"] .how-section { background: linear-gradient(180deg, #edf2f8, #f6f8fb); }
    html[data-theme="light"] .payment-panel.free { box-shadow: 0 16px 46px rgba(32,48,70,.08); }
    html[data-theme="light"] .payment-panel.secured { color: #f4f7fb; }
    html[data-theme="light"] .live-shell { background: radial-gradient(circle at 88% 30%, rgba(37,99,255,.12), transparent 46%), white; }
    html[data-theme="light"] .empty-auction { background: #f7f9fc; }
    html[data-theme="light"] .pricing-shell { color: #111600; }
    html[data-theme="light"] .pricing-shell .button { background: #101621; color: white; }
    html[data-theme="light"] .final-shell { color: #f4f7fb; background: linear-gradient(135deg, rgba(200,255,56,.1), rgba(37,99,255,.14)), #101722; }
    html[data-theme="light"] .final-shell .final-content p { color: #c3cad4; }
    html[data-theme="light"] footer .wordmark { color: #101621; }

    @media (max-width: 1080px) {
      .desktop-nav { gap: 20px; }
      .hero-grid { grid-template-columns: minmax(0,1fr) minmax(400px,.9fr); gap: 36px; }
      .hero h1 { font-size: clamp(3.2rem, 6.7vw, 4.6rem); }
      .auction-card { left: -18px; }
      .steps { grid-template-columns: repeat(2,1fr); }
      .ideas-layout { grid-template-columns: .75fr 1.25fr; gap: 28px; }
    }

    @media (max-width: 860px) {
      .section { padding: 84px 0; }
      .desktop-nav, .header-inner > .header-cta { display: none; }
      .theme-button { margin-left: auto; }
      .menu-button { display: inline-flex; }
      .hero { padding-top: 42px; }
      .hero-grid { grid-template-columns: 1fr; }
      .hero-copy { max-width: 680px; }
      .hero-photo-wrap { aspect-ratio: 4 / 3; }
      .auction-card { position: relative; left: auto; bottom: auto; width: calc(100% - 28px); margin: -88px auto 0; }
      .offer-strip-inner { grid-template-columns: 1fr; gap: 14px; }
      .ideas-layout { grid-template-columns: 1fr; }
      /* No min-height here either — the picture keeps its own shape at every width. */
      .idea-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .payment-grid, .live-shell, .pricing-shell .pricing-grid { grid-template-columns: 1fr; }
      .format-grid, .quote-grid { grid-template-columns: 1fr; }
      /* These min-heights equalise cards sitting side by side. In a single column there
         is no neighbour to match, so all they do is pad short cards with empty space and
         push the next section further down a screen that is already scrolling. */
      .format-card, .quote { min-height: 0; }
    }

    @media (max-width: 620px) {
      .container { width: min(calc(100% - 28px), var(--max)); }
      .header-inner { height: 64px; }
      .theme-button { width: 46px; height: 46px; padding: 0; border-radius: 50%; }
      .theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
      .hero h1 { font-size: clamp(2.78rem, 13vw, 3.75rem); }
      .hero-pill { max-width: 100%; font-size: .65rem; }
      .hero-actions { display: grid; }
      .hero-actions .button { width: 100%; }
      .proof-row { display: grid; grid-template-columns: 1fr 1fr; }
      .proof-item:first-child { grid-column: 1 / -1; }
      .hero-photo-wrap { aspect-ratio: 1 / 1.02; }
      .hero-photo { object-position: 68% center; }
      .auction-card { width: calc(100% - 18px); padding: 18px; }
      .idea-grid, .steps { grid-template-columns: 1fr; }
      .niches-image { margin-top: 28px; }
      .step { min-height: auto; }
      .step h3 { margin-top: 26px; }
      .payment-panel, .format-card { padding: 24px; }
      .footer-grid { align-items: flex-start; flex-direction: column; }
      /* The floating CTA overlays the page, so the page has to give it somewhere to
         float that is not on top of something. Two rules, both required:

         1. The document reserves its height at the bottom, so the last card, the last
            bullet and the footer can all be scrolled clear of it. Without this the pill
            sat permanently over the footer links and the final pricing line.
         2. It gets out of the way whenever a real CTA is on screen (home.js watches
            them). A duplicate of the button you are already looking at is not a
            shortcut, it is an obstruction — and on the format cards and the pricing
            list it was covering the content it was asking people to act on. */
      .mobile-cta {
        position: fixed;
        z-index: 90;
        right: 14px;
        bottom: max(14px, env(safe-area-inset-bottom));
        left: 14px;
        display: flex;
        min-height: 50px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--lime);
        color: var(--lime-ink);
        box-shadow: 0 15px 40px rgba(0,0,0,.48);
        font-weight: 900;
        text-decoration: none;
        transition: opacity .18s ease, transform .18s ease;
      }
      .mobile-cta[hidden] { display: none; }
      .mobile-cta.is-away {
        opacity: 0;
        transform: translateY(calc(100% + 20px));
        pointer-events: none;
      }
      /* Clearance for the pill itself (50px) plus its bottom offset and the home
         indicator, so nothing at the end of the document can hide underneath it. */
      body:has(.mobile-cta) { padding-bottom: calc(64px + max(14px, env(safe-area-inset-bottom))); }
    }

    @media (prefers-reduced-motion: reduce) {
      .mobile-cta { transition: none; }
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      /* No transform, no fade, no delay — immediately visible even when the observer
         is running. */
      html.reveal-enabled .reveal,
      html.reveal-enabled .reveal:not(.is-visible) { opacity: 1; transform: none; transition: none; }
    }

    /* A printed page and a full-page screenshot have no scroll events to trigger, so a
       scroll-driven reveal would leave them blank. */
    @media print {
      .reveal, html.reveal-enabled .reveal:not(.is-visible) {
        opacity: 1 !important; transform: none !important; transition: none !important;
      }
    }

/* ===========================================================================
 * APPLICATION COMPONENTS
 *
 * The kit is a marketing page: it ships buttons, cards and chips but no form
 * controls, no status system and no alerts. These are those, built on the kit's
 * tokens so the transactional pages are the same product as the homepage.
 *
 * Every rule here has a light-theme counterpart in the block at the end. Light is a
 * designed surface set, not an inversion.
 * ======================================================================== */

.page { max-width: 760px; margin: 0 auto; padding: 40px 20px 96px; }
.page--wide { max-width: 1040px; }
.page-head { margin-bottom: 32px; }
.page-head h1 { font-family: var(--display); font-size: clamp(30px, 4vw, 42px); line-height: 1.08; margin: 0 0 12px; }
.page-head p { color: var(--muted); font-size: 17px; margin: 0; max-width: 62ch; }

/* ---- panels --------------------------------------------------------------- */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 24px; margin-bottom: 20px;
}
.panel--raised { background: var(--surface-raised); }
.panel--quiet { background: transparent; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.panel-head h2, .panel-head h3 { font-family: var(--display); font-size: 18px; margin: 0; }
.panel > :last-child { margin-bottom: 0; }

/* ---- forms ---------------------------------------------------------------- */
.field { margin-bottom: 22px; }
.field:last-child { margin-bottom: 0; }
.field > label, .field > legend, .label {
  display: block; font-family: var(--display); font-weight: 600; font-size: 15px;
  margin-bottom: 7px; color: var(--text);
}
/* Groups of related controls are real <fieldset>s, which is what makes a screen reader
   announce "How the money works" with each option. The element carries browser chrome —
   a border, its own padding, and a legend that floats into that border — none of which
   belongs here, so it is reset to behave exactly like the div it replaced. */
fieldset.field { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
fieldset.field--section { padding-top: 26px; border-top: 1px solid var(--line); }
.field > legend { float: left; width: 100%; padding: 0; }
.field > legend + * { clear: both; }
.optional { color: var(--muted); font-weight: 500; font-size: 13px; }
.help { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 7px 0 0; }
.error, .field-error { color: #ff8b7a; font-size: 14px; line-height: 1.5; margin: 7px 0 0; }
.error:empty, .field-error:empty, .help:empty { display: none; }
.ok-text { color: var(--success); font-weight: 600; font-size: 14px; margin: 7px 0 0; }

input:not([type]), input[type="text"], input[type="email"], input[type="url"],
input[type="number"], input[type="datetime-local"], input[type="search"], textarea, select {
  width: 100%; box-sizing: border-box;
  /* 16px minimum: below it iOS Safari zooms the page on focus. */
  font-family: var(--body); font-size: max(16px, 1rem); line-height: 1.5;
  color: var(--text); background: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 14px; min-height: 48px;
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
  -webkit-text-size-adjust: 100%;
}
textarea { min-height: 110px; resize: vertical; }
select { appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }
input:hover, textarea:hover, select:hover { border-color: var(--line-strong); }
input:focus-visible, textarea:focus-visible, select:focus-visible,
.button:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible,
[role="switch"]:focus-visible, .radio-card:focus-within {
  outline: 2px solid var(--cobalt-light); outline-offset: 2px;
}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #ff8b7a; }
input:disabled, textarea:disabled, select:disabled, .button:disabled, button:disabled {
  opacity: .55; cursor: not-allowed;
}

/* File upload: the native control is unusable as shipped, so the input is hidden
   behind a real <label>, which keeps the click target and the keyboard behaviour. */
.upload {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-md);
  padding: 18px; background: var(--ink-soft); transition: border-color .14s ease;
}
.upload:hover, .upload:focus-within { border-color: var(--cobalt-light); }
.upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.upload-cta { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 15px;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 10px 18px;
  min-height: 44px; box-sizing: border-box; }
.upload-note { color: var(--muted); font-size: 14px; margin: 0; }
.upload-preview { max-height: 120px; border-radius: var(--radius-sm); }

/* ---- radio / checkbox cards ----------------------------------------------- */
.radio-cards { display: grid; gap: 12px; }
@media (min-width: 700px) { .radio-cards--3 { grid-template-columns: repeat(3, 1fr); }
                            .radio-cards--2 { grid-template-columns: repeat(2, 1fr); } }
.radio-card {
  position: relative; display: block; cursor: pointer;
  background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 18px;
  transition: border-color .14s ease, background-color .14s ease, transform .14s ease;
}
.radio-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.radio-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio-card-title { display: block; font-family: var(--display); font-weight: 600; font-size: 16px; }
.radio-card-desc { display: block; color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: 6px; }
.radio-card-meta { display: block; color: var(--cobalt-light); font-size: 13px; font-weight: 600; margin-top: 10px; }
/* Selected state is a filled border plus a tick, never colour alone. */
.radio-card:has(input:checked) { border-color: var(--lime); background: rgba(200,255,56,.08); }
.radio-card:has(input:checked)::after {
  content: "✓"; position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--lime); color: var(--lime-ink);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
@media (prefers-reduced-motion: reduce) { .radio-card:hover { transform: none; } }

.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; min-height: 44px; padding: 6px 0; }
.check input { width: 20px; height: 20px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--lime); }

/* Labelled switch: the WORDS carry the state, the track only agrees with them. */
.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; min-height: 44px; padding: 6px 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { position: relative; flex: 0 0 auto; width: 46px; height: 27px; border-radius: 999px;
  background: var(--line-strong); transition: background-color .15s ease; }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .15s ease; }
.switch input:checked + .switch-track { background: var(--success); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(19px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--cobalt-light); outline-offset: 2px; }
.switch-text { font-family: var(--display); font-weight: 600; font-size: 15px; }

/* ---- segmented presets ----------------------------------------------------- */
.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.preset {
  font-family: var(--display); font-weight: 600; font-size: 15px;
  background: var(--surface-raised); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 18px; min-height: 44px; cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
.preset:hover { border-color: var(--line-strong); }
.preset.is-on { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }

/* ---- status system ---------------------------------------------------------
 * Green is reserved for succeeded/ready. Cobalt is active/informational, amber is
 * attention, red is error or destructive. Nothing else earns a colour.
 * ------------------------------------------------------------------------- */
.status {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.06); color: var(--muted);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
/* active / informational */
.status--live, .status--bidding, .status--closing, .status--extended, .status--awaiting-confirmation {
  color: var(--cobalt-light); border-color: rgba(110,160,255,.42); background: rgba(37,99,255,.16); }
/* attention */
.status--draft, .status--awaiting-email, .status--awaiting-payment, .status--awaiting-delivery,
.status--reserve-not-met { color: #ffc76b; border-color: rgba(255,199,107,.4); background: rgba(255,199,107,.13); }
/* success / ready */
.status--paid, .status--delivered, .status--completed, .status--ready, .status--introduced,
.status--reserve-met {
  color: var(--success); border-color: rgba(92,225,161,.4); background: rgba(92,225,161,.13); }
/* error / destructive */
.status--payment-failed, .status--error { color: #ff8b7a; border-color: rgba(255,139,122,.42); background: rgba(255,139,122,.13); }
/* terminal, no judgement */
.status--closed, .status--cancelled, .status--unavailable { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .status--live .status-dot { animation: statusPulse 1.6s infinite; }
  @keyframes statusPulse { 50% { opacity: .35; } }
}

/* ---- alerts ---------------------------------------------------------------- */
/* `:not([hidden])` so this rule cannot fight the attribute even without the global
   backstop above. #errSummary is toggled by `hidden` on every submit. */
.alert:not([hidden]) { display: flex; }
.alert { gap: 12px; padding: 16px 18px; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: var(--surface-raised); margin-bottom: 20px; }
.alert h2, .alert h3 { font-family: var(--display); font-size: 16px; margin: 0 0 6px; }
.alert p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.alert p + p { margin-top: 10px; }
.alert--info { border-color: rgba(110,160,255,.4); background: rgba(37,99,255,.1); }
.alert--success { border-color: rgba(92,225,161,.38); background: rgba(92,225,161,.1); }
.alert--warning { border-color: rgba(255,199,107,.4); background: rgba(255,199,107,.1); }
.alert--danger { border-color: rgba(255,139,122,.45); background: rgba(255,139,122,.1); }
.alert--danger h2, .alert--danger h3 { color: #ff8b7a; }
/* The create form's error summary. .alert is a flex ROW — fine for an icon beside a
   message, wrong for a heading above a list, which would sit side by side. */
#errSummary:not([hidden]) { display: flex; flex-direction: column; }
#errSummary ul { margin: 0; padding-left: 20px; }
#errSummary li { font-size: 15px; line-height: 1.6; color: var(--text); }
#errSummary a { color: inherit; text-underline-offset: 3px; }
#errSummary:focus-visible { outline: 3px solid var(--cobalt-light); outline-offset: 3px; }

/* ---- label / value rows ---------------------------------------------------- */
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; }
.row:first-child { border-top: 0; }
.row > :first-child { color: var(--muted); }
.row > :last-child { text-align: right; font-family: var(--display); font-weight: 600;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.row--total { border-top: 1px solid var(--line-strong); font-size: 17px; }
.row--total > :last-child { color: var(--lime); }

/* ---- countdown -------------------------------------------------------------- */
.countdown { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(24px, 4vw, 32px); line-height: 1.1; }
.countdown small { display: block; font-size: 13px; font-weight: 500; color: var(--muted);
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.price-display { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 5vw, 44px);
  line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.price-display small { display: block; font-size: 13px; font-weight: 500; color: var(--muted);
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }

/* ---- loading / empty --------------------------------------------------------- */
.skeleton { background: var(--surface-raised); border-radius: var(--radius-sm); }
.skeleton-line { height: 14px; margin-bottom: 10px; }
.skeleton-line.short { width: 45%; }
.skeleton-block { height: 160px; margin-bottom: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton { animation: skeletonPulse 1.5s ease-in-out infinite; }
  @keyframes skeletonPulse { 50% { opacity: .55; } }
}
.spinner { width: 18px; height: 18px; border-radius: 50%; display: inline-block;
  border: 2px solid rgba(255,255,255,.25); border-top-color: currentColor; vertical-align: -3px; }
@media (prefers-reduced-motion: no-preference) { .spinner { animation: spin .7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } } }
.empty-state { text-align: center; padding: 48px 24px; border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg); background: var(--surface); }
.empty-state h2, .empty-state h3 { font-family: var(--display); font-size: 19px; margin: 0 0 8px; }
.empty-state p { color: var(--muted); margin: 0 auto 20px; max-width: 46ch; }

/* ---- mobile action bar -------------------------------------------------------- */
.action-bar { display: none; }
@media (max-width: 720px) {
  .action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(9,11,16,.94); border-top: 1px solid var(--line);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .action-bar { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  }
  .action-bar .button { margin: 0; flex: 0 0 auto; }
  body.has-action-bar footer { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* ===========================================================================
 * LIGHT THEME — application components
 *
 * Designed surfaces, not an inversion: the light palette gets its own paper/ink
 * values, and the accent colours are darkened where they would fail contrast on
 * white (lime on white is unreadable, so lime becomes ink-on-lime or a darker
 * cobalt depending on the role).
 * ======================================================================== */
html[data-theme="light"] {
  --ink-soft: #ffffff;
  --surface: #ffffff;
  --surface-raised: #f2f5f9;
  --text: #101621;
  --muted: #4d5869;
  --line: rgba(16,22,33,.12);
  --line-strong: rgba(16,22,33,.24);
  /* The pale cobalt is a dark-theme ink — 2.4:1 on white. Light gets the deeper one
     the legal links already used, which also makes the focus ring easier to see. */
  --cobalt-light: #1b46c4;
}
html[data-theme="light"] .panel { background: #fff; border-color: var(--line); box-shadow: 0 1px 2px rgba(16,22,33,.05); }
html[data-theme="light"] .panel--raised { background: var(--surface-raised); box-shadow: none; }
html[data-theme="light"] .panel--quiet { background: transparent; box-shadow: none; }

html[data-theme="light"] input:not([type]), html[data-theme="light"] input[type="text"], html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="url"], html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="datetime-local"], html[data-theme="light"] input[type="search"],
html[data-theme="light"] textarea, html[data-theme="light"] select {
  background: #fff; color: var(--text); border-color: var(--line-strong);
}
html[data-theme="light"] .upload { background: #fff; border-color: var(--line-strong); }
html[data-theme="light"] .radio-card { background: #fff; }
html[data-theme="light"] .radio-card:has(input:checked) { background: rgba(37,99,255,.07); border-color: var(--cobalt); }
/* On white, lime has nowhere near enough contrast for a tick, so the selected badge
   becomes cobalt with white glyph. The shape and position are identical. */
html[data-theme="light"] .radio-card:has(input:checked)::after { background: var(--cobalt); color: #fff; }
html[data-theme="light"] .preset { background: #fff; }
html[data-theme="light"] .preset.is-on { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
html[data-theme="light"] .switch-track { background: rgba(16,22,33,.22); }
html[data-theme="light"] .switch input:checked + .switch-track { background: #17805a; }
html[data-theme="light"] .switch-knob { box-shadow: 0 1px 3px rgba(16,22,33,.3); }

html[data-theme="light"] .status { background: rgba(16,22,33,.05); color: #4d5869; border-color: var(--line); }
html[data-theme="light"] .status--live, html[data-theme="light"] .status--bidding,
html[data-theme="light"] .status--closing, html[data-theme="light"] .status--extended,
html[data-theme="light"] .status--awaiting-confirmation {
  color: #1b46c4; background: rgba(37,99,255,.1); border-color: rgba(37,99,255,.3); }
html[data-theme="light"] .status--draft, html[data-theme="light"] .status--awaiting-email,
html[data-theme="light"] .status--awaiting-payment, html[data-theme="light"] .status--awaiting-delivery,
html[data-theme="light"] .status--reserve-not-met {
  color: #8a5a00; background: rgba(255,176,32,.16); border-color: rgba(138,90,0,.28); }
html[data-theme="light"] .status--paid, html[data-theme="light"] .status--delivered,
html[data-theme="light"] .status--completed, html[data-theme="light"] .status--ready,
html[data-theme="light"] .status--introduced, html[data-theme="light"] .status--reserve-met {
  color: #0f6b49; background: rgba(15,107,73,.1); border-color: rgba(15,107,73,.28); }
html[data-theme="light"] .status--payment-failed, html[data-theme="light"] .status--error {
  color: #b3261e; background: rgba(179,38,30,.09); border-color: rgba(179,38,30,.3); }

html[data-theme="light"] .alert { background: var(--surface-raised); }
html[data-theme="light"] .alert--info { background: rgba(37,99,255,.07); border-color: rgba(37,99,255,.28); }
html[data-theme="light"] .alert--success { background: rgba(15,107,73,.08); border-color: rgba(15,107,73,.26); }
html[data-theme="light"] .alert--warning { background: rgba(255,176,32,.13); border-color: rgba(138,90,0,.26); }
html[data-theme="light"] .alert--danger { background: rgba(179,38,30,.07); border-color: rgba(179,38,30,.28); }
html[data-theme="light"] .alert--danger h2, html[data-theme="light"] .alert--danger h3 { color: #b3261e; }
html[data-theme="light"] .error, html[data-theme="light"] .field-error { color: #b3261e; }
html[data-theme="light"] .ok-text { color: #0f6b49; }
html[data-theme="light"] input[aria-invalid="true"], html[data-theme="light"] textarea[aria-invalid="true"] { border-color: #b3261e; }

html[data-theme="light"] .row--total > :last-child { color: #1b46c4; }
html[data-theme="light"] .skeleton { background: rgba(16,22,33,.07); }
html[data-theme="light"] .spinner { border-color: rgba(16,22,33,.2); border-top-color: currentColor; }
html[data-theme="light"] .empty-state { background: #fff; border-color: var(--line-strong); }
html[data-theme="light"] .action-bar { background: rgba(255,255,255,.95); border-top-color: var(--line); }
html[data-theme="light"] .dark-card { background: #fff; }

/* The auction page's status line: a status pill and the bidding format on one row. They
   are deliberately different weights — the pill answers "can I bid?", the format answers
   "how does it work?" — so the eye takes them in that order.

   It is NOT the kit's .eyebrow, which uppercases its content and prepends a cobalt dot.
   Uppercasing a status pill fights the pill's own type, and a live-looking dot in front
   of the word "Cancelled" is the exact conflation this whole change exists to remove. */
.status-eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 10px; font-size: 14px;
}
.eyebrow-format { color: var(--muted); font-weight: 600; }

/* Touch targets. On a phone every control has to be reachable with a thumb, so the
   links that are laid out as text — the wordmark, the two proof chips, the "not a
   creator" link — get a real 44px box without changing how they look. Padding is the
   wrong tool here (it would move the layout), so the height comes from a min-height
   with the content centred inside it.

   The StartupBase award badge is deliberately NOT in this list: its markup is that
   site's own verbatim snippet and its 40px height is fixed by us on purpose. Growing
   its box would mean editing the snippet their verifier reads. */
@media (max-width: 768px) {
  .wordmark, a.proof-item, .quiet-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .footer-links a, .desktop-nav a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Create-form section headings. The form is eleven controls long, and without these it
   read as one undifferentiated column — the thing that makes a form feel like work. They
   are <p>, not headings: the page already has one <h1> and these are signposts inside a
   form, not new document sections, so promoting them would break the heading order for
   anyone navigating by headings. */
.form-step {
  margin: 0 0 14px;
  font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.form-step--rule { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
/* .field--section carried this rule before; the headings own it now, so a group that
   follows one must not draw a second line immediately under it. */
.form-step--rule + .field--section,
.form-step--rule + fieldset.field--section { margin-top: 0; padding-top: 0; border-top: 0; }
.optional { margin-left: 6px; }

/* ---- mode summary cards (pledge / secured) --------------------------------------
 * One component, two states. Both answer "what do I actually end up with?", only one is
 * ever on screen, and they used to look like different kinds of object — a styled table
 * versus two paragraphs of prose. The pledge card now states its three deductions in the
 * same .row construct the secured breakdown uses, because they are the same three
 * deductions and all of them are zero. That is the point being made.
 * ------------------------------------------------------------------------------- */
.mode-card { padding: 22px 22px 20px; }
.mode-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 4px; }
.mode-card-head h2 { margin: 0; font-family: var(--display); font-size: 20px; line-height: 1.2; }
.mode-card-lead { margin: 5px 0 0; font-size: 15px; font-weight: 600; color: var(--text); }
.mode-card-icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 13px;
}
.mode-card-icon svg { width: 21px; height: 21px; }
.mode-card--pledge .mode-card-icon { background: rgba(200,255,56,.14); color: var(--lime); }
.mode-card--secured .mode-card-icon { background: rgba(37,99,255,.14); color: var(--cobalt-light); }
/* Lime is a dark-theme ink — on the white panel it is unreadable, so light gets the
   deeper accent, exactly like every other lime surface in this file. */
html[data-theme="light"] .mode-card--pledge .mode-card-icon { background: rgba(61,90,0,.10); color: #3d5a00; }

.mode-card-rows { margin: 16px 0 0; }
.mode-card-rows .row { padding: 11px 0; }
.row-zero { font-weight: 700; color: var(--success); font-variant-numeric: tabular-nums; }
html[data-theme="light"] .row-zero { color: #0f6a49; }

/* The explanation is separated from the figures, because it is the part that says what
   actually happens rather than what it costs. */
.mode-card-note {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.55; color: var(--text);
}
.mode-card-note-icon { flex: 0 0 auto; color: var(--muted); margin-top: 2px; }
.mode-card-note-icon svg { display: block; width: 18px; height: 18px; }
.mode-card-aside { margin-top: 14px; }

/* ---- create form: mode-dependent content, correct on the first paint -------------
 * `data-mode` is set by an inline <head> script on /new from the ?mode= query (default
 * pledge), so the right summary card and the right help text are painted first rather
 * than swapped in after DOMContentLoaded. syncMode() updates the same attribute when the
 * seller changes the radio, so CSS and JS never disagree about which mode is showing.
 *
 * This also means the correct card shows even if the page's JavaScript never runs. */
html[data-mode="pledge"] #feeSecured,
html[data-mode="pledge"] #buyNowField,
html[data-mode="pledge"] .mode-secured,
html[data-mode="secured"] #feePledge,
html[data-mode="secured"] .mode-pledge { display: none !important; }

/* The submit button's label is DERIVED, never stored. Its two mode labels are picked by
   the same data-mode above; `data-loading` swaps in a busy label instead. Nothing reads
   or writes the button's text, so there is no saved string to restore stale. */
#submitBtn .submit-busy { display: none; }
#submitBtn[data-loading] .submit-label { display: none !important; }
#submitBtn[data-loading="creating"] .submit-busy--creating,
#submitBtn[data-loading="uploading"] .submit-busy--uploading { display: inline; }

/* ---- public auction page: hero, evidence, conversion -----------------------------
 * Three cards on the shared .panel recipe — one border, one radius, one padding scale
 * between them. They previously read as an image card, some floating text, a stray URL
 * paragraph and a quiet box, which on a phone made the auction's identity look
 * unfinished.
 * ------------------------------------------------------------------------------- */

/* The hero owns the auction's identity AND its primary status. The image is the card's
   top section rather than a card inside a card, so .frame gives up its own border and
   radius here and the panel's padding is moved onto the body. */
.auction-hero { padding: 0; overflow: hidden; }
.auction-hero .frame { border: 0; border-radius: 0; margin: 0; }
.auction-hero-body { padding: 22px; }
.status-eyebrow { margin-bottom: 19px; }
.auction-hero-title {
  margin: 0;
  font-size: clamp(2rem, 8vw, 2.75rem);
  line-height: 1.08;
  /* A single unbroken word — a URL, a handle, a long product name — must wrap rather
     than push the page sideways. */
  overflow-wrap: anywhere;
}
.auction-hero-desc { margin: 12px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }

@media (min-width: 720px) {
  /* Image left, identity right, still one card. Below this the two stack, which is the
     same hierarchy read top to bottom. */
  .auction-hero:has(.frame) { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); align-items: stretch; }
  .auction-hero .frame { height: 100%; aspect-ratio: auto; min-height: 240px; }
  .auction-hero-body { padding: 26px; align-self: center; }
  .auction-hero-title { font-size: clamp(1.9rem, 2.6vw, 2.4rem); }
}

/* Seller-supplied links, inside the Delivery card under a divider. Structured rows, not
   raw URLs in a paragraph. Never labelled "verified" — BidPage checks neither of them. */
.evidence { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.evidence-title {
  margin: 0 0 12px; font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.evidence-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.evidence-row:first-of-type { border-top: 0; padding-top: 0; }
.evidence-icon { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--surface-raised); color: var(--muted); }
.evidence-icon svg { width: 17px; height: 17px; }
.evidence-main { flex: 1 1 200px; min-width: 0; }
.evidence-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.evidence-label {
  font-size: 12px; font-weight: 700; color: var(--text);
  padding: 2px 8px; border-radius: 999px; background: var(--surface-raised);
  border: 1px solid var(--line);
}
.evidence-url {
  display: block; margin-top: 5px; color: var(--muted);
  font-size: 14px; overflow-wrap: anywhere;
}
.evidence-action {
  flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center;
  color: var(--cobalt-light); font-weight: 700; font-size: 14px; white-space: nowrap;
}

/* The conversion card. Restrained: it sits at the end of someone else's auction. */
.convert-card { position: relative; border-color: var(--line-strong); }
.convert-card h2 { margin: 0 0 10px; }
.convert-icon {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px;
  border-radius: 12px; background: rgba(200,255,56,.14); color: var(--lime);
}
.convert-icon svg { width: 20px; height: 20px; }
html[data-theme="light"] .convert-icon { background: rgba(61,90,0,.10); color: #3d5a00; }
.convert-eyebrow {
  margin: 0 0 6px; font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.convert-copy { margin: 0 0 22px; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 52ch; }
.convert-cta { white-space: nowrap; }

@media (max-width: 620px) {
  .convert-card { padding: 20px; }
  /* Full width on a phone, and the label must not wrap into two lines inside the pill. */
  .convert-cta { display: flex; width: 100%; white-space: normal; }
  /* The mobile bid bar is fixed over the bottom of the page; this is the last card
     before the footer, so it needs clearance from it and from the home indicator. */
  body.has-action-bar .convert-card { margin-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .evidence-action { width: 100%; }
}

/* ---- legal pages ------------------------------------------------------------ */
.legal { max-width: 68ch; }
.legal h2 { font-family: var(--display); font-size: 22px; margin: 40px 0 12px; }
.legal h3 { font-family: var(--display); font-size: 17px; margin: 26px 0 8px; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--muted); }
.legal li { margin-bottom: 8px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal a { color: var(--cobalt-light); text-underline-offset: 3px; }
html[data-theme="light"] .legal a { color: #1b46c4; }
.legal strong { color: var(--text); }
.legal .updated { color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------------------
 * BidPage additions to the kit: the real-data surfaces.
 *
 * The kit shipped one illustrative hero card and a placeholder live section. These are
 * the styles for the real equivalents — the hero card hydrated from /api/homepage and
 * the live row — written in the kit's dark idiom rather than importing the light card
 * system from styles.css.
 * ------------------------------------------------------------------------- */

/* The card stays dark in light theme (see the token block on .auction-card). The only
   light-theme change it needs is a shadow that reads against a pale page rather than a
   dark one — repainting the surface is what made it white text on a white ground. */
html[data-theme="light"] .auction-card { box-shadow: 0 24px 54px rgba(15,23,42,.28); }

/* The real hero card reuses .auction-card, so it only needs the link affordances the
   illustrative version does not have. */
.auction-card.is-real { text-decoration: none; display: block; transition: transform .15s ease, border-color .15s ease; }
.auction-card.is-real:hover,
.auction-card.is-real:focus-visible { transform: translateY(-2px); border-color: var(--line-strong); }
@media (prefers-reduced-motion: reduce) { .auction-card.is-real { transition: none; } }

.card-tag {
  font-size: 11px; letter-spacing: .08em; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(200,255,56,.14); color: var(--lime); border: 1px solid rgba(200,255,56,.35);
}
.card-pill {
  font-size: 11px; letter-spacing: .06em; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.06); color: var(--muted);
}
.card-pill.live { color: var(--success); border-color: rgba(92,225,161,.4); background: rgba(92,225,161,.12); }
.card-pill.sold { color: var(--lime); border-color: rgba(200,255,56,.35); background: rgba(200,255,56,.12); }
.card-pill.intro { color: var(--cobalt-light); border-color: rgba(110,160,255,.4); background: rgba(37,99,255,.15); }

/* LIGHT THEME. These pills carry the dark palette's accents — lime, mint, a pale
   cobalt — which are chosen to glow on near-black. On the white card they become
   invisible: the SOLD pill measured 1.15:1, lime on a lime tint on white. Light gets
   its own inks at the same hues, dark enough to read, and the tints are lightened to
   match. Same rule as everywhere else in this file: lime is a dark-theme colour. */
html[data-theme="light"] .card-pill { background: rgba(15,23,42,.05); color: #4a5568; border-color: var(--line-strong); }
html[data-theme="light"] .card-pill.live { color: #1b46c4; border-color: rgba(27,70,196,.32); background: rgba(27,70,196,.09); }
html[data-theme="light"] .card-pill.sold { color: #0f6a49; border-color: rgba(15,106,73,.32); background: rgba(15,106,73,.10); }
html[data-theme="light"] .card-pill.intro { color: #1b46c4; border-color: rgba(27,70,196,.32); background: rgba(27,70,196,.09); }
html[data-theme="light"] .card-tag { color: #4a4a00; border-color: rgba(90,90,0,.3); background: rgba(140,150,0,.12); }

/* The last places the lime accent lands on a pale ground. Same hue, taken dark enough
   to read: the headline accent measured 1.11:1 in light theme, which is the accent word
   of the first sentence on the site being effectively invisible. */
html[data-theme="light"] .hero h1 span,
html[data-theme="light"] .wordmark-dot { color: #3d5a00; }
html[data-theme="light"] .format-badge { color: #1b46c4; background: rgba(27,70,196,.10); }
/* Pale greys chosen for a near-black footer, on a white one. */
html[data-theme="light"] .footer-links a { color: #4d5869; }
html[data-theme="light"] .copyright { color: #5b6472; }
html[data-theme="light"] .idea-card small { color: #5f6b7d; }   /* #7a8698 was 3.65:1 */

/* The live row. Three-up where there is room, one column on a phone; the section's own
   empty state is what shows when the feed returns nothing, so this never renders empty. */
.showcase-row { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 720px) { .showcase-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .showcase-row { grid-template-columns: repeat(3, 1fr); } }

.dark-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 18px;
  transition: transform .15s ease, border-color .15s ease;
}
.dark-card:hover, .dark-card:focus-visible { transform: translateY(-2px); border-color: var(--line-strong); }
@media (prefers-reduced-motion: reduce) { .dark-card { transition: none; } }
.dark-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dark-card-format { font-size: 11px; letter-spacing: .08em; font-weight: 700; color: var(--muted); }
.dark-card-tags { display: inline-flex; gap: 6px; align-items: center; }
/* Same 16:9 two-layer intent as the app's .bp-frame: never stretch or hard-crop a
   seller's upload, whatever shape it arrives in. */
.dark-card-img {
  display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-sm);
  overflow: hidden; background: rgba(255,255,255,.04); margin-bottom: 14px;
}
.dark-card-img img { width: 100%; height: 100%; object-fit: contain; }
.dark-card h3 { font-family: var(--display); font-size: 17px; line-height: 1.3; margin: 0 0 12px; }
.dark-card-rows { margin: 0; display: grid; gap: 8px; }
.dark-card-rows > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px;
  border-top: 1px solid var(--line); padding-top: 8px; }
.dark-card-rows > div:first-child { border-top: 0; padding-top: 0; }
.dark-card-rows dt { color: var(--muted); margin: 0; }
.dark-card-rows dd { margin: 0; font-family: var(--display); font-weight: 600; text-align: right; }

/* The StartupBase badge sits in the footer nav next to the legal links. */
.footer-links .sb-badge { display: inline-flex; line-height: 0; }
.footer-links .sb-badge img { height: 40px; width: auto; display: block; }

/* Between the tablet stack (861px) and the desktop layout (1080px) the hero's visual
   column narrows faster than the overlay card does, so the kit's min(320px, 74%) ends up
   covering most of the photograph. The brief is explicit that the card must not overlap
   essential image content, so in that band it shrinks and tucks into the bottom-left
   corner — the subject sits right of frame, which is what makes the corner safe. */
@media (min-width: 861px) and (max-width: 1080px) {
  .auction-card { width: min(268px, 62%); left: -14px; bottom: 18px; padding: 16px; }
  .auction-card h2 { font-size: .94rem; }
  .auction-card .leading strong { font-size: 1.5rem; }
}

/* ---- destructive button ------------------------------------------------------
 * The kit ships primary (lime), secondary (outline) and cobalt. Cancelling an auction
 * needs a fourth: red, and only ever for destructive or error actions. */
.button-danger { background: transparent; color: #ff8b7a; border: 1px solid rgba(255,139,122,.5); }
.button-danger:hover { background: rgba(255,139,122,.12); border-color: #ff8b7a; }
html[data-theme="light"] .button-danger { color: #b3261e; border-color: rgba(179,38,30,.45); }
html[data-theme="light"] .button-danger:hover { background: rgba(179,38,30,.08); }

/* The recent section's two groups. A heading is what lets a group of one read as a
   fact ("Recently completed: this sale") rather than as a row that failed to fill. */
.recent-group + .recent-group { margin-top: 34px; }
.recent-heading {
  margin: 0 0 14px; font-family: var(--display); font-size: 15px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}

/* ---- lifecycle stepper --------------------------------------------------------
 * Horizontal on desktop, vertical below 620px: six columns each carrying a date do not
 * fit a phone, and a vertical list keeps all of them visible instead of hiding some
 * behind a horizontal scroll.
 *
 * EVERY rule here is scoped to `.stepper`. The kit already uses a bare `.step` for the
 * homepage's numbered "how it works" cards, and this block sits later in the file, so
 * an unscoped `.step` silently repainted them: `.step::before` replaced the numbered
 * circle with a 2px connector bar, `text-align: center` fought the card's own layout,
 * and `.step h3 { margin-top: 44px }` went on reserving space for a circle that was no
 * longer drawn — which is what made "Package it / Share it / Let buyers bid" collide.
 * Do not remove the `.stepper` prefix from these selectors. */
.stepper { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.stepper .step { flex: 1; position: relative; text-align: center; min-width: 0;
  min-height: 0; padding: 0; border: 0; background: none; border-radius: 0; }
.stepper .step::before {
  content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px;
  background: var(--line); z-index: 0;
}
.stepper .step:first-child::before { display: none; }
.step-dot {
  position: relative; z-index: 1; display: grid; place-items: center; margin: 0 auto 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-raised); border: 2px solid var(--line);
  font-size: 12px; color: transparent;
}
.step-label { display: block; font-family: var(--display); font-weight: 600; font-size: 13px; line-height: 1.3; }
.step-time { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.stepper .step.is-done .step-dot { background: var(--success); border-color: var(--success); color: var(--lime-ink); }
.stepper .step.is-done::before { background: var(--success); }
.stepper .step.is-current .step-dot { border-color: var(--cobalt); background: var(--surface); box-shadow: 0 0 0 4px rgba(37,99,255,.18); }
/* Never happened and never will: hollow and dashed, but the connector stays solid
   because the auction did carry on past it. */
.stepper .step.is-skipped .step-dot { border-style: dashed; border-color: var(--line-strong); background: transparent; }
.stepper .step.is-skipped .step-label { color: var(--muted); }
/* A step that was attempted and did not succeed. It is NOT hollow-pending and it is not
   ticked: something happened here and it went wrong, which the page has to be able to
   say without borrowing either of the other two meanings. */
.stepper .step.is-failed .step-dot { background: #ff8b7a; border-color: #ff8b7a; color: #2b0d08; font-weight: 900; }
.stepper .step.is-failed .step-time { color: #ff8b7a; }
html[data-theme="light"] .stepper .step.is-failed .step-dot { background: #b3261e; border-color: #b3261e; color: #fff; }
html[data-theme="light"] .stepper .step.is-failed .step-time { color: #b3261e; }
@media (max-width: 620px) {
  .stepper { flex-direction: column; gap: 0; text-align: left; }
  .stepper .step { display: grid; grid-template-columns: 24px 1fr; gap: 12px; text-align: left; padding-bottom: 18px; }
  .stepper .step::before { display: block; top: 24px; left: 11px; width: 2px; height: 100%; }
  .stepper .step:first-child::before { display: block; }
  .stepper .step:last-child::before { height: 0; }
  .step-dot { margin: 0; }
  .step-label, .step-time { grid-column: 2; }
}
html[data-theme="light"] .step-dot { background: #fff; }
html[data-theme="light"] .stepper .step.is-done .step-dot { background: #17805a; border-color: #17805a; color: #fff; }

/* ---- image frame ---------------------------------------------------------------
 * Sellers upload anything, so every image sits in one fixed 16:9 frame: a blurred
 * over-scaled cover layer behind, the real contain layer in front. Nothing is stretched
 * or hard-cropped, and cards keep uniform heights whatever shape arrives. */
.frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: var(--radius-md); background: var(--surface-raised); }
.frame__blur, .frame__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.frame__blur { object-fit: cover; filter: blur(22px) saturate(1.1); transform: scale(1.15); }
.frame__img { object-fit: contain; position: relative; }
.frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); border-radius: inherit; }
html[data-theme="light"] .frame::after { box-shadow: inset 0 0 0 1px rgba(16,22,33,.1); }

/* ---- misc ----------------------------------------------------------------------- */
.stack > * + * { margin-top: 16px; }
.muted { color: var(--muted); }
.caption { font-size: 13px; color: var(--muted); }
.divider { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.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; }

/* ---- layout utilities used by the transactional pages ------------------------ */
.button-block { display: flex; width: 100%; justify-content: center; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.button-row .button { flex: 1 1 auto; }
.field-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.field-row input { flex: 1 1 220px; min-width: 0; }
.field-row .button { flex: 0 0 auto; }
.field--section { padding-top: 26px; border-top: 1px solid var(--line); margin-top: 26px; }

/* Turnstile host: interaction-only, so it is collapsed until a challenge actually
   renders. The node must stay — it carries the hidden cf-turnstile-response input. */
.ts-widget { margin: 0; height: 0; overflow: hidden; }
.ts-widget.is-live { height: auto; min-height: 70px; margin: 16px 0; overflow: visible; }

.action-bar-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.action-bar-info b { font-family: var(--display); font-size: 18px; font-variant-numeric: tabular-nums; }
.action-bar-info span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* The kit hides the header CTA on mobile because the homepage moves it into the mobile
   menu. Transactional pages have no menu — they are focused, with no nav links — so
   hiding it there removes the only header route to /new. Keep it where there is no menu. */
@media (max-width: 860px) {
  .site-header:not(:has(#mobileNav)) .header-cta { display: inline-flex; }
  .site-header:not(:has(#mobileNav)) .theme-button { margin-left: auto; margin-right: 10px; }
}

/* The kit sets html{background:var(--ink)} unconditionally, so in light theme any page
   shorter than the viewport showed a black band below the footer — the html element
   painting through. The token flips with the theme; the raw declaration did not. */
html[data-theme="light"] { background: #f6f8fb; }

/* Higher specificity than the kit's `.header-inner > .header-cta { display:none }`,
   which assumes a mobile menu to move the CTA into. */
@media (max-width: 860px) {
  .site-header:not(:has(#mobileNav)) .header-inner > .header-cta { display: inline-flex; }
}