/* etchmymac — Apple design language. White, SF system stack, hairlines,
   #f5f5f7 cards, one blue. The lid is the object; everything else recedes. */

:root {
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --hairline: #d2d2d7;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --etch: #3f3f42;

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

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 1024px; margin: 0 auto; padding: 0 22px; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1.08; margin: 0 0 0.5rem; }
h3 { font-size: 1.06rem; margin: 0 0 0.3rem; letter-spacing: -0.01em; }

section { padding: 84px 0 6px; }
.section-lede { max-width: 620px; color: var(--ink-soft); margin-top: 0; font-size: 1.05rem; }
.fine { font-size: 0.8rem; color: var(--ink-soft); letter-spacing: -0.006em; }

/* ------------------------------------------------------------- header */

/* Two things only — the wordmark and the one action. The section links are
   gone: the page is short enough to scroll and the bar has one job. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0 22px;
  height: 62px;
  background: rgba(251, 251, 253, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.head-inner {
  max-width: 1024px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.wordmark-mark { display: block; border-radius: 6px; }
/* "mymac" in the same gradient as "Forever." in the headline, so the two ends
   of the page are visibly the same brand rather than two greys that nearly
   match. Falls back to a flat grey where background-clip:text is unsupported. */
.wordmark-soft {
  color: #6e6e73;
  background: linear-gradient(180deg, #8b8d91 0%, #4a4a4e 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
a.wordmark:hover { text-decoration: none; opacity: 0.7; }
.wordmark b { font-weight: 600; }
.site-head .btn-head {
  font: 400 0.86rem var(--sans);
  padding: 8px 18px;
  border-radius: 980px;
  background: var(--blue);
  color: #fff;
  border: none;
  white-space: nowrap;
}
.site-head .btn-head:hover { background: var(--blue-hover); text-decoration: none; }

/* ------------------------------------------------------------- hero */

.hero { padding-top: 12px; text-align: center; }

/* Live counts, above the headline. Deliberately quiet — it is evidence, not a
   claim, so it sits at footnote size and lets the headline stay the loudest
   thing on the screen. Hidden entirely when the worker has no numbers. */
.live-count {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.1rem 0.42rem;
  margin: 0 0 0.6rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.live-count[hidden] { display: none; }
.live-count b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.live-sep { color: var(--hairline); }
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #23a94d;
  box-shadow: 0 0 0 0 rgba(35, 169, 77, 0.55);
  animation: live-pulse 2.4s ease-out infinite;
}
@keyframes live-pulse {
  70% { box-shadow: 0 0 0 6px rgba(35, 169, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(35, 169, 77, 0); }
}

.hero h1 {
  font-size: clamp(2.4rem, 5.9vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin: 0 auto 0.5rem;
  max-width: 960px;
}
.forever {
  background: linear-gradient(180deg, #86888c 0%, #3b3b3f 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.lede {
  max-width: 780px;
  margin: 0 auto 0.75rem;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink-soft);
  font-weight: 400;
}
.lede strong { color: var(--ink); font-weight: 600; }
.mark {
  background: linear-gradient(90deg, #2997ff 0%, #0071e3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.fund { max-width: 520px; margin: 0 auto 0.75rem; position: relative; z-index: 2; }
.fund-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.fund-raised { font-size: 0.9rem; color: var(--ink-soft); }
.fund-raised b {
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fund-goal { font-size: 0.82rem; color: var(--ink-soft); }
.fund-goal b { font-weight: 600; color: var(--ink); }
.progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-soft);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--blue);
  transition: width 0.6s ease;
}
.goal-passed .progress-fill { background: #23a94d; }
.goal-passed .fund-goal, .goal-passed .fund-goal b { color: #1d8a3f; }


/* Apple segmented control */
.lid-tabs {
  position: relative;
  z-index: 2;
  display: inline-flex;
  gap: 2px;
  margin-top: 14px;
  padding: 2px;
  border-radius: 999px;
  background: var(--bg-soft);
}
.tab {
  font: 400 0.82rem var(--sans);
  letter-spacing: -0.01em;
  padding: 7px 18px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.tab-on {
  background: #fff;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

/* ------------------------------------------------------------- lid */

.lid-stage { padding: 0 0 8px; }
/* The lid is the product, so it takes every pixel the fold will give it. The
   three terms: never wider than the column (48px of gutter), never past 1100px
   even on a 27", and never taller than the space left once the headline, the
   raise bar, the tabs and the hint have been paid for — 1.4134 is the lid's own
   12.31 x 8.71in aspect, so the height budget converts straight to a width.
   The chrome number is measured, not guessed: 338px on a 1512x949 laptop, which
   is why the paddings around it are as tight as they are. */
.lid {
  position: relative;
  aspect-ratio: 1231 / 871;
  width: min(calc(100% - 48px), 1100px, max(520px, calc((100vh - 338px) * 1.4134)));
  margin: 0 auto;
  border-radius: clamp(10px, 1.4vw, 14px);
  background: linear-gradient(172deg, #ececed 0%, #dcdcdf 45%, #c8c8cd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 30px 60px -18px rgba(0, 0, 0, 0.28),
    0 12px 24px -12px rgba(0, 0, 0, 0.18);
}
.lid::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 90% at 30% 0%,
    rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 42%, transparent 70%);
}
#lid-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lid-hint { font-size: 0.8rem; color: var(--ink-soft); margin: 9px 0 6px; text-align: center; }
.lid-hint b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.apple-logo { fill: #3b3b3f; }

.spot { cursor: pointer; outline: none; }
.spot-rect {
  fill: rgba(255, 255, 255, 0.001);
  stroke: rgba(29, 29, 31, 0.22);
  stroke-width: 1.5;
  stroke-dasharray: 7 6;
  transition: fill 0.15s ease, stroke 0.15s ease;
}
.spot:hover .spot-rect, .spot:focus-visible .spot-rect {
  fill: rgba(0, 113, 227, 0.08);
  stroke: var(--blue);
  stroke-dasharray: none;
}
/* The spot "Get your spot" chose for you: held on rather than a hover, so it is
   still visible behind the dialog and you can see what you are buying. */
.spot-picked .spot-rect {
  fill: rgba(0, 113, 227, 0.12);
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-dasharray: none;
  animation: spot-pick 0.42s ease-out;
}
@keyframes spot-pick {
  0% { fill: rgba(0, 113, 227, 0.32); stroke-width: 5; }
  100% { fill: rgba(0, 113, 227, 0.12); stroke-width: 2.5; }
}
@media (prefers-reduced-motion: reduce) { .spot-picked .spot-rect { animation: none; } }

.spot-taken .spot-rect {
  stroke: rgba(29, 29, 31, 0.3);
  stroke-dasharray: none;
}

.spot-badge circle { fill: rgba(255, 255, 255, 0.92); filter: url(#chip-shadow); }
.spot-badge text { fill: var(--ink); font: 600 18px var(--sans); }

/* Quiet by default, legible on approach. The price is information you want
   when you are considering a spot, not a label stamped over someone's logo. */
.spot-chip { opacity: 0.55; }
.spot-chip rect { fill: rgba(255, 255, 255, 0.82); filter: none; }
.spot-chip text { fill: var(--ink-soft); font: 500 12px var(--sans); letter-spacing: -0.01em; }
.spot:hover .spot-chip { opacity: 1; }
.spot-taken .spot-chip { opacity: 0.9; }
.spot-taken .spot-chip rect { fill: rgba(29, 29, 31, 0.88); }
.spot-taken .spot-chip text { fill: #fff; }

/* Hover/focus call to action. The resting chip states the price; this states
   the move. Swapping one for the other keeps a small spot from carrying two
   pills at once. */
.spot-cta { opacity: 0; transition: opacity 0.14s ease; pointer-events: none; }
.spot-cta rect { fill: var(--blue); filter: url(#chip-shadow); }
.spot-cta text { fill: #fff; font: 600 13px var(--sans); letter-spacing: -0.005em; }
.spot:hover .spot-cta, .spot:focus-visible .spot-cta { opacity: 1; }
.spot:hover .spot-img, .spot:focus-visible .spot-img { opacity: 0.3; }
.spot-chip, .spot-img { transition: opacity 0.14s ease; }

.spot-ghost {
  fill: var(--etch);
  opacity: 0.16;
  font: 500 30px var(--sans);
  letter-spacing: 0.01em;
}
.spot-img-demo { opacity: 0.42; }
/* A bid's artwork is real, so it etches at full weight — a touch under a
   bought spot's, which is the only visual difference between "offered" and
   "paid for". */
.spot-img-bid { opacity: 0.82; }

/* Bid taken, artwork not yet approved. Nothing a stranger uploaded is ever
   published before it has been looked at, so the spot reads as busy without
   showing anything. */
.spot-pending .spot-rect {
  stroke: rgba(29, 29, 31, 0.35);
  stroke-dasharray: 3 5;
  fill: rgba(29, 29, 31, 0.04);
}

/* Final look: just the metal and the marks */
.final-look .spot { pointer-events: none; }
.final-look .spot-rect,
.final-look .spot:hover .spot-rect,
.final-look .spot:focus-visible .spot-rect { stroke: transparent; fill: transparent; }
.final-look .spot-badge, .final-look .spot-chip, .final-look .spot-cta { display: none; }
.final-look .spot { cursor: default; }

/* ---------------------------------------------------- final look in 3D */

.lid[hidden], .mac3d[hidden] { display: none; }

.mac3d {
  position: relative;
  margin: 0 auto;
  max-width: 1100px;
  cursor: grab;
}
.mac3d:active { cursor: grabbing; }
/* Over a spot the machine stops being a turntable and starts being a button. */
.mac3d-over, .mac3d-over:active { cursor: pointer; }
.mac3d-canvas { display: block; margin: 0 auto; touch-action: none; }

/* Hover label for a spot on the model. Anchored to the spot's projected centre
   by mac3d.js, HTML rather than painted into the lid texture so it stays
   readable however far the machine is turned. */
.mac3d-pill {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -125%);
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font: 600 0.75rem var(--sans);
  letter-spacing: -0.005em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
.mac3d-pill[hidden] { display: none; }

.mac3d-reset {
  position: absolute;
  z-index: 3;
  right: 10px;
  top: 10px;
  font: 400 0.76rem var(--sans);
  padding: 6px 14px;
  border-radius: 980px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  color: var(--ink);
  cursor: pointer;
}
.mac3d-reset:hover { background: #fff; }
.mac3d-reset[hidden] { display: none; }

/* Contact shadow. A ground plane in the scene is useless here — the camera is
   nearly level, so it renders edge-on — and this reads at any camera height.
   The framing is fixed relative to the canvas, so percentages hold at every
   width. Now that the camera can zoom and pitch right over, apply() feeds it
   --sh-scale and --sh-op: it grows with the machine and fades out once the
   camera has climbed, or closed in, too far for a contact shadow to be the
   right lie. */
.mac3d::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 13%;
  width: 50%;
  height: 22px;
  transform: translateX(-50%) scale(var(--sh-scale, 1));
  opacity: var(--sh-op, 1);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(29, 29, 31, 0.22), rgba(29, 29, 31, 0.07) 58%, transparent 100%);
  pointer-events: none;
}

/* The model is ~10 MB and only fetched when this tab is opened. The placeholder
   carries its own height — the container must not have a min-height of its own,
   or a short canvas (a phone, a short window) would leave dead space under the
   machine and strand the contact shadow, which is positioned off the bottom. */
.mac3d-loading::before {
  content: "Loading the machine…";
  display: block;
  padding: 7rem 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------- recent bids */

.board-wrap {
  margin-top: 1.6rem;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: #fff;
}
.board { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 660px; }
.board th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--ink-soft);
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.board td { padding: 14px 18px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.board tr:last-child td { border-bottom: none; }
.board-held { background: rgba(0, 0, 0, 0.015); }

.board-badge {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 12px;
  border-radius: 8px;
  background: var(--bg-soft);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  vertical-align: middle;
}
.board-badge + span { vertical-align: middle; }

.board-size { color: var(--ink-soft); white-space: nowrap; }
.board-tier {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  border-radius: 7px;
  background: var(--bg-soft);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-soft);
  vertical-align: middle;
}
.board-size span { vertical-align: middle; }

/* Not display:flex — a flex <td> stops being a table cell and the column
   collapses out of the row. Inline alignment does the same job here. */
.board-who { white-space: nowrap; }
.board-who > * { vertical-align: middle; }
/* The logo is already single-tone artwork; the tile just gives it the metal it
   will actually sit on, so the row previews the etch rather than the upload. */
.board-logo {
  width: 44px;
  height: 32px;
  margin-right: 11px;
  object-fit: contain;
  padding: 3px;
  border-radius: 6px;
  background: linear-gradient(172deg, #ececed 0%, #dcdcdf 60%, #cfcfd4 100%);
}
.board-open { color: var(--ink-soft); }

.board-amt { text-align: right; white-space: nowrap; }
.board-amt b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.board-amt span { display: block; font-size: 0.72rem; color: var(--ink-soft); }
.board-act { text-align: right; width: 1%; }

.btn-outline {
  font: 400 0.82rem var(--sans);
  padding: 7px 17px;
  border-radius: 980px;
  border: 1px solid var(--blue);
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  white-space: nowrap;
}
.btn-outline:hover { background: var(--blue); color: #fff; }

.spots-fine { max-width: 640px; margin-top: 1.4rem; }

/* ------------------------------------------------------------- how */

.steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 1.6rem;
}
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.steps li {
  background: var(--bg-soft);
  border-radius: 18px;
  padding: 26px 24px;
}
.steps b {
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--hairline);
  line-height: 1;
  display: block;
  margin-bottom: 0.7rem;
}
.steps p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

/* ------------------------------------------------------------- machine */

/* Card on the left, the actual machine on the right. The spec list alone left
   half the row empty, and the thing being described was already on the page in
   3D — so it stands next to its own spec sheet. */
.machine-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 34px;
  margin-top: 1.4rem;
}
.machine-card {
  background: var(--bg-soft);
  border-radius: 18px;
  padding: 30px 32px;
}
.machine-solo { grid-template-columns: minmax(0, 640px); justify-content: center; }
.machine-stage[hidden] { display: none; }
.machine-stage { margin: 0; }
.machine-stage .mac3d { min-height: 0; margin-bottom: 6px; }
.machine-stage figcaption { text-align: center; }

/* Below this the columns stack, and a 10 MB model is not worth a phone's data
   for a decorative second look at a machine the hero already shows. */
@media (max-width: 860px) {
  .machine-grid { grid-template-columns: 1fr; }
  .machine-stage { display: none; }
}
.machine-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.machine-head h3 { font-size: 1.3rem; margin: 0; }
.machine-price { font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; }
#machine-specs { margin: 1.1rem 0; }
#machine-specs div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hairline); }
#machine-specs dt { font-size: 0.78rem; color: var(--ink-soft); padding-top: 2px; }
#machine-specs dd { margin: 0; font-size: 0.9rem; }

/* ------------------------------------------------------------- me */

/* A byline, not a portrait section — the machine is the subject of this page. */
.me-grid {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  margin-top: 0.4rem;
}
.me-photo {
  display: block;
  width: 104px;
  height: 104px;             /* the width/height attrs would otherwise pin it */
  object-fit: cover;
  object-position: 50% 26%;
  border-radius: 50%;
  background: var(--bg-soft);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.45);
  /* Desaturated to sit with the etched, single-tone rest of the page rather
     than being the one full-colour thing on it. */
  filter: grayscale(1) contrast(1.06) brightness(1.02);
}
.me-copy h2 { margin-bottom: 0.7rem; }
.me-copy p { margin: 0 0 0.8rem; color: var(--ink-soft); font-size: 0.96rem; max-width: 46ch; }
.me-lead {
  font-size: 1.1rem !important;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink) !important;
}
.me-copy a { font-weight: 500; }

@media (max-width: 760px) {
  .me-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ------------------------------------------------------------- faq */

.faq { max-width: 680px; margin: 0 auto; padding-bottom: 70px; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq details:first-of-type { border-top: 1px solid var(--hairline); }
.faq summary {
  font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em;
  padding: 1.05rem 2rem 1.05rem 0; cursor: pointer; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details p { margin: 0 0 1.3rem; color: var(--ink-soft); font-size: 0.95rem; max-width: 620px; }

/* ------------------------------------------------------------- footer */

.site-foot {
  background: var(--bg-soft);
  padding: 42px 22px 48px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.site-foot { text-align: center; }
.foot-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.site-foot p { margin: 0 0 0.7rem; }
.foot-credits h4 {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.foot-links { display: flex; justify-content: center; gap: 1.4rem; }
.foot-links a { color: var(--ink); text-decoration: none; font-weight: 500; }
.foot-links a:hover { text-decoration: underline; }
.foot-legal {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  max-width: 700px;
}
@media (max-width: 700px) { .foot-links { flex-wrap: wrap; gap: 1.1rem; } }
.site-foot a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.linklike {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.site-foot a:hover { color: var(--ink); }

/* ------------------------------------------------------------- legal pages */

.legal {
  max-width: 660px;
  margin: 0 auto;
  padding: 56px 22px 90px;
}
.legal h1 { font-size: clamp(2.2rem, 5vw, 3rem); letter-spacing: -0.028em; margin: 0 0 0.4rem; }
.legal h2 {
  font-size: 1.12rem;
  letter-spacing: -0.012em;
  margin: 2.4rem 0 0.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}
.legal p, .legal li { color: var(--ink-soft); font-size: 0.98rem; }
.legal p { margin: 0 0 0.9rem; }
.legal b { color: var(--ink); font-weight: 600; }
.legal ul { padding-left: 1.1rem; margin: 0 0 0.9rem; }
.legal li { margin-bottom: 0.5rem; }
.legal-date { font-size: 0.82rem !important; margin-bottom: 1.8rem !important; }
.legal-lede {
  font-size: 1.06rem !important;
  color: var(--ink) !important;
  line-height: 1.45;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--bg-soft);
}
.legal-back { margin-top: 3rem !important; }

/* ------------------------------------------------------------- buttons */

.btn-primary {
  font: 400 1rem var(--sans);
  letter-spacing: -0.01em;
  padding: 11px 22px;
  border-radius: 980px;
  border: none;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
}
.btn-primary:hover:not(:disabled) { background: var(--blue-hover); }
.btn-primary:disabled { background: var(--bg-soft); color: var(--ink-soft); cursor: not-allowed; }
.btn-sm { padding: 6px 15px; font-size: 0.82rem; }
.btn-quiet {
  font: 400 0.95rem var(--sans);
  background: none; border: none; border-radius: 980px;
  padding: 11px 18px; cursor: pointer; color: var(--blue);
}
.btn-quiet:hover { text-decoration: underline; }

/* ------------------------------------------------------------- dialog */

dialog {
  border: none;
  max-height: min(88vh, 720px);
  overflow-y: auto;
  border-radius: 18px;
  padding: 30px;
  max-width: 440px;
  width: calc(100vw - 40px);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(3px); }
dialog h3 { font-size: 1.3rem; margin: 0 0 0.2rem; }
.dlg-sum { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0; }

dialog label { display: block; font-size: 0.82rem; font-weight: 600; margin: 0.9rem 0; }
dialog input {
  display: block; width: 100%; margin-top: 0.35rem;
  font: 400 1rem var(--sans);
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}
dialog input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3.5px rgba(0, 113, 227, 0.25);
}

/* Bid / Buy outright. Same segmented-control language as the lid tabs, sized up
   because this one carries a price and is the actual decision in the form. */
.mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 1.1rem 0 0.2rem;
  padding: 4px;
  border-radius: 15px;
  background: var(--bg-soft);
}
.mode-tab {
  font: 400 0.9rem var(--sans);
  padding: 9px 10px 10px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
}
.mode-tab b { display: block; font-weight: 500; letter-spacing: -0.01em; }
.mode-tab span {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.mode-on {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
.mode-on b { font-weight: 600; }
#bid-fields[hidden] { display: none; }
.buy-note {
  margin: 0.9rem 0 0;
  padding: 13px 15px;
  border-radius: 12px;
  background: rgba(0, 113, 227, 0.07);
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.4;
}
.buy-note[hidden] { display: none; }

/* The default file control is the one piece of chrome the browser wouldn't let
   match the rest of the form, so the button half gets restyled directly. */
dialog input[type="file"] {
  padding: 9px 12px;
  font-size: 0.86rem;
  color: var(--ink-soft);
  cursor: pointer;
}
dialog input[type="file"]::file-selector-button {
  font: 500 0.84rem var(--sans);
  margin-right: 12px;
  padding: 7px 15px;
  border-radius: 980px;
  border: 1px solid var(--hairline);
  background: var(--bg-soft);
  color: var(--ink);
  cursor: pointer;
}
dialog input[type="file"]:hover::file-selector-button { background: #ebebef; }
.file-label { margin-bottom: 0.5rem !important; }
.file-hint { display: block; margin-top: 0.45rem; font-weight: 400; }

#etch-preview-wrap {
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(172deg, #ececed 0%, #dcdcdf 55%, #c8c8cd 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
#etch-preview { max-width: 100%; max-height: 120px; display: block; margin: 0 auto; }

.form-error { color: #d70015; font-size: 0.85rem; }

.dlg-actions { display: flex; gap: 10px; margin-top: 1.2rem; }
.dlg-actions .btn-primary { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .progress-fill { transition: none; }
  .spot-rect, .spot-cta, .spot-chip, .spot-img { transition: none; }
  .faq summary::after { transition: none; }
}

/* Coming back from checkout. Green, brief, and above everything — someone who
   has just paid money should not have to hunt for confirmation that it worked. */
.paid-bar {
  max-width: 640px;
  margin: 0 auto 18px;
  padding: 12px 18px;
  border-radius: 14px;
  background: #eaf7ee;
  border: 1px solid #bfe4c9;
  color: #1a5c2e;
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: left;
}
.paid-bar b { font-weight: 600; color: #14501f; }