/* ==========================================================================
   The Next Coin Club — polish

   The visual layer for surfaces built from scratch: the content gate, email
   capture, onboarding, and the newsletter.

   These are new, so there is no legacy CSS to fight and they can be built on
   the system properly — the scale, the spacing, the real accent. They are also
   the highest-stakes screens on the site: the gate and the newsletter page are
   where a visitor decides, and onboarding is where a member decides to stay.

   The design language, stated so it stays consistent:

     Depth by surface, not shadow.   Cards lift by being lighter than the page,
                                     with a hairline. Heavy shadows are the
                                     fastest way to look like a 2014 template.
     One accent, on one thing.       Each screen has a single primary action in
                                     accent. Everything else is monochrome.
     Motion under 300ms.             Long transitions feel sluggish; anything
                                     over ~300ms reads as the page thinking.
     Type does the hierarchy.        Size and weight, not colour and boxes.
   ========================================================================== */

/* ==========================================================================
   1. Content gate
   ========================================================================== */

.is-gated { position: relative; }

/* The fade is what makes this read as "there is more" rather than "the page
   ended". Without it a hard cut looks like a rendering failure. */
.gate {
  position: relative;
  margin-top: calc(var(--s-6) * -1);
  padding-top: var(--s-6);
}

.gate-fade {
  position: absolute;
  top: calc(var(--s-8) * -1);
  left: 0; right: 0;
  height: var(--s-8);
  background: linear-gradient(to bottom,
    transparent,
    var(--paper, var(--bg, #fff)) 88%);
  pointer-events: none;
}

.gate-card {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5);
  background: var(--raised, var(--sunk));
  text-align: center;

  /* Rises into place as it enters view. 18px is deliberately small — a large
     travel distance draws attention to the animation instead of the content,
     which is the tell of an interface trying too hard. */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .32s var(--ease, ease), transform .32s var(--ease, ease);
}

.gate.is-shown .gate-card { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .gate-card { opacity: 1; transform: none; transition: none; }
}

.gate-eyebrow {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-3);
}

.gate-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--s-3);
}

.gate-p {
  color: var(--dim);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  max-width: 46ch;
  margin: 0 auto var(--s-5);
}

/* Stacked on a phone, side by side from 480px. Two buttons squeezed onto one
   line on a narrow screen produces two targets too small to hit reliably —
   and this is the most important tap on the page. */
.gate-acts {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.gate-acts .btn { width: 100%; min-height: var(--tap-cozy); }

@media (min-width: 480px) {
  .gate-acts { flex-direction: row; justify-content: center; }
  .gate-acts .btn { width: auto; min-width: 190px; }
}

.gate-alt { font-size: var(--fs-xs); color: var(--mute); }
.gate-alt a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 600px) {
  .gate-card { padding: var(--s-7) var(--s-6); }
}

/* ==========================================================================
   2. Email capture
   ========================================================================== */

.cap {
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: var(--s-5);
  background: var(--sunk);
}

.cap-t {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--s-2);
}

.cap-n {
  color: var(--dim);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  margin-bottom: var(--s-4);
  max-width: 52ch;
}

/* Visually hidden but read aloud. An input with only a placeholder is
   unlabelled to a screen reader, and the placeholder disappears the moment
   someone starts typing — so sighted users lose it too. */
.cap-l {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cap-row { display: flex; flex-direction: column; gap: var(--s-2); }

.cap-i {
  flex: 1;
  padding: 13px var(--s-3);
  border: 1px solid var(--hair2);
  border-radius: var(--r-sm);
  background: var(--raised, #fff);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-base);   /* 16px minimum — stops iOS zooming on focus */
  min-height: var(--tap-cozy);
  transition: border-color var(--t-fast) var(--ease, ease);
}
.cap-i:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.cap-b { min-height: var(--tap-cozy); white-space: nowrap; }

@media (min-width: 520px) {
  .cap-row { flex-direction: row; align-items: stretch; }
  .cap-b { flex: 0 0 auto; }
}

.cap-m { margin-top: var(--s-2); font-size: var(--fs-xs); line-height: var(--lh-base); }
.cap-m.bad { color: var(--bad); }
.cap-m.ok  { color: var(--dim); }

.cap-done { animation: cap-in .3s var(--ease, ease); }
@keyframes cap-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* ==========================================================================
   3. Onboarding
   ========================================================================== */

.onb {
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
  background: var(--raised, var(--sunk));
}

.onb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}

.onb-t {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-snug);
}

.onb-x {
  background: none; border: 0; cursor: pointer;
  color: var(--mute); font: inherit; font-size: var(--fs-xs);
  padding: var(--s-1) var(--s-2);
  min-height: var(--tap-min);
  border-radius: var(--r-sm);
}
.onb-x:hover { color: var(--dim); }

.onb-n { color: var(--dim); font-size: var(--fs-sm); line-height: var(--lh-base); margin-bottom: var(--s-4); }

/* Progress as a row of segments rather than a bar. Four discrete steps read
   as four things to do; a continuous bar reads as an unknown amount of work
   remaining, which is less motivating. */
.onb-bar { display: flex; gap: 4px; margin-bottom: var(--s-4); }
.onb-bar i {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--hair2);
  transition: background .4s var(--ease, ease);
}
.onb-bar i.on { background: var(--accent); }

.onb-steps { list-style: none; margin: 0; padding: 0; }

.onb-step {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hair);
}
.onb-step:last-child { border-bottom: 0; }

.onb-tick {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--hair2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: transparent;
  transition: all var(--t-base) var(--ease, ease);
}
.onb-step.done .onb-tick {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.onb-body { flex: 1; min-width: 0; }
.onb-label { font-size: var(--fs-sm); font-weight: 600; }
.onb-step.done .onb-label { color: var(--mute); font-weight: 400; text-decoration: line-through; }
.onb-why { font-size: var(--fs-xs); color: var(--mute); margin-top: 2px; line-height: var(--lh-snug); }

.onb-go {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  min-height: var(--tap-min);
  display: inline-flex; align-items: center;
}
.onb-step.done .onb-go { display: none; }

/* ==========================================================================
   4. Newsletter
   ========================================================================== */

.nl-hero { text-align: center; padding: var(--s-7) 0 var(--s-6); }

.nl-kicker {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-3);
}

.nl-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--s-4);
}

.nl-sub {
  color: var(--dim);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  max-width: 54ch;
  margin: 0 auto var(--s-5);
}

.nl-price {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.nl-price b { font-size: var(--fs-xl); font-weight: 600; letter-spacing: var(--ls-snug); }
.nl-price span { color: var(--mute); font-size: var(--fs-sm); }

.nl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin: var(--s-6) 0;
}
@media (min-width: 700px) { .nl-grid { grid-template-columns: repeat(3, 1fr); } }

.nl-card {
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: var(--s-5);
  background: var(--sunk);
}
.nl-card h4 { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--s-2); }
.nl-card p  { color: var(--dim); font-size: var(--fs-xs); line-height: var(--lh-base); }

.nl-issue {
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-bottom: var(--s-3);
}
.nl-issue-n { font-size: var(--fs-2xs); color: var(--mute); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.nl-issue-t { font-family: var(--serif); font-weight: 400; font-size: var(--fs-md); margin: var(--s-2) 0; }
.nl-issue-p { color: var(--dim); font-size: var(--fs-sm); line-height: var(--lh-base); }

/* ==========================================================================
   5. Micro-interactions

   Small, and the difference between an interface that feels responsive and
   one that feels like a document.
   ========================================================================== */

/* Buttons acknowledge the press. On touch there is no hover state, so without
   this a tap gives no feedback until the next screen loads — which on a slow
   connection reads as the tap not registering, and people tap again. */
:where(.btn, button):active { transform: translateY(1px); }
:where(.btn, button) { transition: transform var(--t-press, .1s) var(--ease, ease),
                                   background var(--t-fast) var(--ease, ease),
                                   border-color var(--t-fast) var(--ease, ease); }

/* Cards lift very slightly on hover — only where a pointer exists. On touch
   devices a hover style sticks after tapping and looks like a stuck state. */
@media (hover: hover) and (pointer: fine) {
  :where(.nl-card, .cfg, .srow):hover { border-color: var(--hair2); }
}

/* Links underline on hover rather than always. Permanent underlines in body
   copy are noisy; no underline at all fails for anyone who cannot see
   colour. Hover plus a colour difference covers both. */
:where(main p, main li) a:not(.btn) {
  text-decoration-color: transparent;
  text-decoration-line: underline;
  text-underline-offset: 2px;
  transition: text-decoration-color var(--t-fast) var(--ease, ease);
}
:where(main p, main li) a:not(.btn):hover { text-decoration-color: currentColor; }