/* ══════════════════════════════════════════════════════════════════
   THE BLATT DOMAIN REGISTRY, blatt.com/start
   ══════════════════════════════════════════════════════════════════

   Only what /start needs. Everything else, the shell, the nav, the
   sections, the buttons, the lighting, comes from blatt.css and
   lustre.css, because this page is part of the same site and should not
   be able to drift away from it.

   HOUSE RULES OBSERVED HERE
   No fully-rounded anything: every corner is 6 to 10px, including the
   tier cards, which is what the brand asks for and is also what makes
   them read as cards and not as pills.
   No italics. Emphasis is weight, colour and size.
   Russo One for anything that behaves like a heading, Inter for prose.
   ══════════════════════════════════════════════════════════════════ */

/* ── The tier chooser ─────────────────────────────────────────────
   Three cards, and the middle one is the one being sold. It is not
   made bigger: it is lit harder and flagged. Scale changes shift the
   grid and break the alignment of the three prices, which is the one
   line a buyer actually compares. */

.b-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
}
@media (max-width: 860px) { .b-tiers { grid-template-columns: 1fr; } }

.b-tier {
  position: relative;
  display: grid;
  /* Fixed row order, so brand, name, digits, rank and price line up
     across all three cards even when a name is longer. */
  grid-template-rows: auto auto 1fr auto auto;
  gap: 10px;
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: 10px;
  border: 1px solid var(--b-hairline-firm);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  min-height: 250px;
  background:
    linear-gradient(157deg,
      rgba(255, 244, 222, 0.055) 0%,
      rgba(250, 189, 89, 0.030) 26%,
      rgba(0, 0, 0, 0.00) 52%,
      rgba(0, 0, 0, 0.34) 100%),
    #0a0a0b;
  box-shadow:
    0 1px 0 rgba(255, 244, 222, 0.06) inset,
    0 18px 40px rgba(0, 0, 0, 0.5);
  transition: border-color 0.35s var(--b-ease-out), box-shadow 0.35s var(--b-ease-out);
}
.b-tier:hover,
.b-tier:focus-visible {
  border-color: rgba(250, 189, 89, 0.5);
  box-shadow:
    0 1px 0 rgba(255, 244, 222, 0.10) inset,
    0 22px 52px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(250, 189, 89, 0.16);
}

/* The flag on the tier being sold. Squared, because a rounded flag is
   the pill rule wearing a hat. */
.b-tier-flag {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 12px 6px;
  border-radius: 0 10px 0 8px;
  background: linear-gradient(135deg, var(--mv-gold), var(--mv-gold-dark));
  color: #120d05;
  font-family: var(--mv-font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

.b-tier-brand {
  font-family: var(--mv-font-display);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: rgba(250, 189, 89, 0.78);
}
.b-tier-name {
  font-family: var(--mv-font-display);
  font-size: clamp(19px, 2vw, 26px);
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  color: #f4ead9;
}
/* The masked card number. Purely decorative, aria-hidden in the markup,
   and tabular so the four groups sit evenly. */
.b-tier-digits {
  align-self: center;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: rgba(244, 234, 217, 0.30);
}
.b-tier-rank {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--b-temp-body, #b9b2a5);
}
.b-tier-price {
  font-family: var(--mv-font-display);
  font-size: clamp(22px, 2.3vw, 30px);
  color: var(--mv-gold);
  font-variant-numeric: tabular-nums;
}
.b-tier-per {
  font-family: var(--mv-font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(250, 189, 89, 0.6);
}

/* ── The counter ──────────────────────────────────────────────────
   Scarcity, stated once and quietly. The number is the only thing that
   gets the display face; the rest is prose, so it does not shout. */

.b-counter {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(18px, 2vw, 26px);
  padding-top: 16px;
  border-top: 1px solid var(--b-hairline);
}
.b-counter-n {
  font-family: var(--mv-font-display);
  font-size: clamp(26px, 3vw, 38px);
  color: var(--mv-gold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.b-counter-of {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--b-temp-body, #b9b2a5);
}
.b-counter-left {
  margin-left: auto;
  padding: 5px 10px 6px;
  border-radius: 6px;
  border: 1px solid rgba(250, 189, 89, 0.28);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 189, 89, 0.9);
}
@media (max-width: 700px) { .b-counter-left { margin-left: 0; } }

/* ── A tier in full ───────────────────────────────────────────────
   The long-form section per tier. A hairline rule between tiers rather
   than a box around each: three stacked boxes on one page is the
   "unsymmetrical boxes" note from the founder pages all over again. */

.b-tier-full { padding-block: clamp(26px, 3vw, 44px); }
.b-tier-full + .b-tier-full { border-top: 1px solid var(--b-hairline); }
/* Anchor targets sit under a fixed nav. Without this the tier heading
   lands behind the header when a tier card is clicked. */
.b-tier-full { scroll-margin-top: 90px; }

.b-tier-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: clamp(18px, 2vw, 26px);
}
.b-tier-title {
  font-family: var(--mv-font-display);
  font-size: clamp(24px, 2.7vw, 34px);
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  color: #f4ead9;
  margin: 4px 0 6px;
}
.b-tier-sub {
  font-size: var(--b-step-body);
  color: var(--b-temp-body, #b9b2a5);
  max-width: 46ch;
}
.b-tier-ids { display: grid; gap: 6px; justify-items: end; }
@media (max-width: 700px) { .b-tier-ids { justify-items: start; } }
.b-tier-id {
  padding: 5px 10px 6px;
  border-radius: 6px;
  border: 1px solid rgba(250, 189, 89, 0.22);
  background: rgba(250, 189, 89, 0.05);
  font-size: 12px;
  color: rgba(250, 189, 89, 0.92);
  white-space: nowrap;
}

/* ── Feature groups ──────────────────────────────────────────────
   <details>, not scripted accordions.
   On the live page these were driven by togglePlatinumAccordion, which
   a stray `})();` prevented from ever being defined, so none of them
   could open. There is no handler here to break, the content is in the
   document for a crawler whether open or shut, and the keyboard works
   without anything being wired up. */

.b-fgroups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  align-items: start;
}
@media (max-width: 860px) { .b-fgroups { grid-template-columns: 1fr; } }

.b-fgroup {
  border: 1px solid var(--b-hairline);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 244, 222, 0.022), rgba(0, 0, 0, 0.22));
  overflow: hidden;
}
.b-fgroup[open] { border-color: rgba(250, 189, 89, 0.26); }

.b-fgroup summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px clamp(13px, 1.3vw, 18px);
  cursor: pointer;
  /* The default triangle is replaced by .b-fgroup-mark below, which can
     be styled to match the brand. Both prefixes: Safari still wants the
     pseudo-element form. */
  list-style: none;
}
.b-fgroup summary::-webkit-details-marker { display: none; }
.b-fgroup summary::marker { content: ''; }
.b-fgroup summary:focus-visible {
  outline: 2px solid rgba(250, 189, 89, 0.75);
  outline-offset: -2px;
}

.b-fgroup-name {
  font-family: var(--mv-font-display);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: #e8dcc6;
}
.b-fgroup-badge {
  padding: 3px 8px 4px;
  border-radius: 6px;
  border: 1px solid rgba(250, 189, 89, 0.3);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 189, 89, 0.9);
}

/* A plus that becomes a minus. Two bars, one of which is rotated away
   when the group is open. */
.b-fgroup-mark {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
  width: 11px;
  height: 11px;
}
.b-fgroup-mark::before,
.b-fgroup-mark::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: rgba(250, 189, 89, 0.85);
  transition: transform 0.28s var(--b-ease-out);
}
.b-fgroup-mark::after { transform: rotate(90deg); }
.b-fgroup[open] .b-fgroup-mark::after { transform: rotate(0deg); }

.b-fgroup-body { padding: 0 clamp(13px, 1.3vw, 18px) 15px; }
.b-fgroup-lead {
  margin: 0 0 10px;
  font-size: var(--b-step-body);
  color: #d8cfbf;
}
.b-fgroup-note {
  margin: 10px 0 0;
  font-size: var(--b-step-micro);
  line-height: 1.6;
  color: #8f887c;
}

.b-flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.b-flist li {
  position: relative;
  padding-left: 16px;
  font-size: var(--b-step-body);
  line-height: 1.55;
  color: var(--b-temp-body, #b9b2a5);
}
/* A squared tick mark rather than a bullet: a small gold bar. Round
   bullets are the one place this design keeps slipping back into
   circles. */
.b-flist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 2px;
  background: rgba(250, 189, 89, 0.72);
}

/* ── The buy row ─────────────────────────────────────────────────── */

.b-tier-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: clamp(18px, 2vw, 26px);
  padding-top: 18px;
  border-top: 1px solid var(--b-hairline);
}
.b-tier-priceline {
  font-family: var(--mv-font-display);
  font-size: clamp(20px, 2.2vw, 27px);
  color: var(--mv-gold);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.b-tier-buy .b-micro {
  flex: 1 1 220px;
  margin: 0;
  color: #8f887c;
}

/* ── The claim form ─────────────────────────────────────────────── */

.b-claim { display: grid; gap: clamp(18px, 2vw, 26px); }

.b-claim-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 700px) { .b-claim-steps { grid-template-columns: 1fr; } }

.b-claim-step { display: grid; gap: 7px; }
.b-claim-step label { display: flex; align-items: baseline; gap: 9px; }
.b-claim-n {
  font-family: var(--mv-font-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(250, 189, 89, 0.62);
  font-variant-numeric: tabular-nums;
}
.b-claim-label {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8dcc6;
}
.b-claim-hint {
  font-size: var(--b-step-micro);
  color: #8f887c;
}

.b-claim input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--b-hairline-firm);
  background: rgba(0, 0, 0, 0.42);
  color: #f4ead9;
  font-family: var(--mv-font-body);
  font-size: 15px;
  /* 15px minimum: iOS Safari zooms the viewport on focus below 16px, and
     a form that jerks the page sideways on the first tap loses people
     before they finish typing their own name. */
  transition: border-color 0.25s var(--b-ease-out), box-shadow 0.25s var(--b-ease-out);
}
.b-claim input:hover { border-color: rgba(250, 189, 89, 0.34); }
.b-claim input:focus-visible {
  outline: none;
  border-color: rgba(250, 189, 89, 0.72);
  box-shadow: 0 0 0 3px rgba(250, 189, 89, 0.14);
}
.b-claim input::placeholder { color: #6f6a62; }

/* Only after the browser has decided a field is wrong AND the user has
   left it. :invalid alone paints every required field red before a
   single character is typed, which reads as "you have already failed". */
.b-claim input:not(:placeholder-shown):invalid {
  border-color: rgba(220, 20, 60, 0.55);
}

/* Rejected submission. Red is reserved for urgency in this palette, and a
   form that lost somebody's details qualifies. Stated once, above the
   fields, with the values still in them. */
.b-claim-error {
  margin: 0;
  padding: 12px 15px;
  border-radius: 8px;
  border: 1px solid rgba(220, 20, 60, 0.5);
  background: rgba(220, 20, 60, 0.08);
  color: #f0d8dd;
  font-size: var(--b-step-body);
}

.b-claim-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
}
.b-claim-actions .b-micro {
  flex: 1 1 260px;
  margin: 0;
  max-width: 62ch;
  color: #8f887c;
}

/* The result panel the worker renders after a POST. Same language as the
   rest of the page, so a submitted form does not land somewhere that
   looks like a different site. */
.b-claim-result {
  padding: clamp(18px, 2vw, 26px);
  border-radius: 10px;
  border: 1px solid rgba(250, 189, 89, 0.3);
  background: linear-gradient(180deg, rgba(250, 189, 89, 0.06), rgba(0, 0, 0, 0.3));
}
.b-claim-result h3 {
  font-family: var(--mv-font-display);
  font-size: clamp(17px, 1.7vw, 21px);
  letter-spacing: 0.06em;
  color: #f4ead9;
  margin: 0 0 8px;
}
.b-claim-result p { margin: 0 0 8px; color: var(--b-temp-body, #b9b2a5); }
.b-claim-result dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 14px 0 0;
  font-size: var(--b-step-body);
}
.b-claim-result dt {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8f887c;
  align-self: center;
}
.b-claim-result dd { margin: 0; color: #f4ead9; }

/* ── Restraint ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .b-tier, .b-fgroup-mark::before, .b-fgroup-mark::after,
  .b-claim input { transition: none; }
}

/* Forced colours strips backgrounds and shadows, which would leave the
   tier cards as bare text and the plus marks invisible. Give both a real
   border and system colours to sit on. */
@media (forced-colors: active) {
  .b-tier, .b-fgroup, .b-claim input, .b-claim-result {
    border: 1px solid CanvasText;
  }
  .b-tier-flag { border: 1px solid CanvasText; }
  .b-fgroup-mark::before, .b-fgroup-mark::after { background: CanvasText; }
  .b-flist li::before { background: CanvasText; }
}

@media print {
  /* Every group open, so a printed page is the whole offer rather than a
     column of closed drawers. A closed <details> hides its non-summary
     children, so the override has to target those children directly:
     styling .b-fgroup-body alone does nothing, because it is the details
     element doing the hiding, not the body's own display value. */
  .b-fgroup { border-color: #999; }
  .b-fgroup:not([open]) > *:not(summary) { display: block !important; }
  .b-fgroup-mark { display: none; }
  .b-tiers { grid-template-columns: repeat(3, 1fr); }
}