/* Vanar Noir. Fonts are self-hosted (SIL OFL). CSP-safe: no inline styles, no inline images. */
@import url("/noir/fonts.css");
:root {
  --script: "Fraunces", Georgia, serif;
  --script-scale: 1;
}
:root {
  --paper: #f6efdf;
  --ink: #16213b;
  --wax: #7c1a1f;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --spring: cubic-bezier(0.3, 1.4, 0.5, 1);
}
/* Looks. Base (dark/light) and accent are independent; presets combine them. */
:root,
[data-mode="dark"] {
  --green: #0a0a0b;
  --glow-a: #221d15;
  --glow-b: #030303;
  --cream: #f1ebe0;
  --soft: #9a948a;
  --line: #ffffff17;
  --menu: #151412f2;
  --paper-shadow: #000b;
  --grain-o: 0.085;
}
[data-mode="light"] {
  --green: #f4f0e7;
  --glow-a: #fffaf0;
  --glow-b: #e8e1d2;
  --cream: #16140f;
  --soft: #6c665c;
  --line: #16140f1c;
  --menu: #fbf8f1f2;
  --paper-shadow: #5a4a2a40;
  --grain-o: 0.05;
}
[data-mode="green"] {
  --green: #0c2219;
  --glow-a: #1b4636;
  --glow-b: #081811;
  --cream: #f2ead8;
  --soft: #a4ae9f;
  --line: #f2ead81f;
  --menu: #0f2c21f2;
  --paper-shadow: #000b;
  --grain-o: 0.085;
}
/* Accents: --brass (lines, small caps), --brass-2 (highlights), --brass-3 (deep), --on-accent (button text), --dust (rgb). */
:root,
[data-accent="gold"] {
  --brass: #d6b877;
  --brass-2: #f0dca6;
  --brass-3: #98773a;
  --on-accent: #111;
  --dust: 232, 207, 148;
}
[data-accent="platinum"] {
  --brass: #c9ccd1;
  --brass-2: #eef0f2;
  --brass-3: #7d828a;
  --on-accent: #111;
  --dust: 225, 228, 233;
}
[data-accent="rose"] {
  --brass: #d9a28e;
  --brass-2: #f3d2c4;
  --brass-3: #9c6452;
  --on-accent: #1a0f0c;
  --dust: 240, 196, 178;
}
[data-accent="bronze"] {
  --brass: #b9895a;
  --brass-2: #e0bb8e;
  --brass-3: #7c5530;
  --on-accent: #120b05;
  --dust: 214, 170, 120;
}
/* On light paper the metallic accents must darken to stay readable. */
[data-mode="light"][data-accent="gold"] {
  --brass: #97742f;
  --brass-2: #c29a4b;
  --brass-3: #6b5020;
  --on-accent: #fffaf0;
}
[data-mode="light"][data-accent="platinum"] {
  --brass: #5f646c;
  --brass-2: #8e949c;
  --brass-3: #3b3f45;
  --on-accent: #ffffff;
  --dust: 150, 155, 165;
}
[data-mode="light"][data-accent="rose"] {
  --brass: #a4604b;
  --brass-2: #c98670;
  --brass-3: #7a4332;
  --on-accent: #fff8f5;
}
[data-mode="light"][data-accent="bronze"] {
  --brass: #8a5f33;
  --brass-2: #b07e4c;
  --brass-3: #5e3f1f;
  --on-accent: #fffaf2;
}
:root {
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --spring: cubic-bezier(0.3, 1.4, 0.5, 1);
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html,
body {
  margin: 0;
}
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--cream);
  font: 300 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background:
    radial-gradient(900px 650px at 78% 18%, var(--glow-a) 0%, transparent 62%),
    radial-gradient(800px 600px at 0% 100%, var(--glow-b), transparent 70%),
    repeating-linear-gradient(90deg, #ffffff03 0 1px, transparent 1px 7px), var(--green);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: var(--grain-o);
  mix-blend-mode: overlay;
  background-image: url("/noir/grain.svg");
}
button,
input {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 1px solid var(--brass);
  outline-offset: 5px;
}
::selection {
  background: var(--brass);
  color: var(--green);
}
.caps {
  font: 500 11px/1.4 var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
#dust {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.glow {
  position: fixed;
  width: 560px;
  height: 560px;
  left: 0;
  top: 0;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--brass) 9%, transparent),
    transparent
  );
  transition: opacity 0.6s;
}
header,
main,
footer {
  position: relative;
  z-index: 1;
}
/* Header */
header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px clamp(20px, 5vw, 64px);
}
header .mark {
  width: 38px;
  height: 38px;
  --crest: var(--brass);
}
header .mark .c-text {
  display: none;
}
/* Small crests (founder, 2 Oct 2026): at this size the 1.5 px lines merged the face into a
   blob. Thinner lines and a simpler face (no eyebrows, nose or ear curls); the big crest keeps
   every detail. */
header .mark .crest * {
  stroke-width: 1;
}
header .mark .crest .c-outer {
  stroke-width: 0.8;
}
header .mark .crest :is(.c-brows, .c-nose, .c-fill),
header .mark .crest .c-face > path:nth-of-type(-n + 2) {
  display: none;
}
header .name {
  font: var(--display-weight) 27px/1 var(--display);
  letter-spacing: 0.24em;
}
header .sp {
  flex: 1;
}
header .mode {
  color: var(--soft);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
header .mode::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 10px var(--brass);
}
.iconbtn {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition:
    border-color 0.4s,
    color 0.4s,
    background 0.4s;
}
.iconbtn:hover {
  border-color: var(--brass);
  color: var(--brass-2);
}
.iconbtn[aria-pressed="true"] {
  border-color: var(--brass);
  color: var(--on-accent);
  background: var(--brass);
}
.iconbtn svg {
  width: 18px;
  height: 18px;
}
.iconbtn .bars {
  display: flex;
  align-items: end;
  gap: 2px;
  height: 14px;
}
.iconbtn .bars i {
  width: 2px;
  height: 45%;
  background: currentColor;
  border-radius: 1px;
}
.iconbtn .bars i:nth-child(2) {
  height: 80%;
}
.iconbtn .bars i:nth-child(3) {
  height: 60%;
}
.iconbtn[aria-pressed="true"] .bars i {
  animation: eq 1.1s ease-in-out infinite;
}
.iconbtn .bars i:nth-child(2) {
  animation-delay: -0.3s;
}
.iconbtn .bars i:nth-child(3) {
  animation-delay: -0.6s;
}
.iconbtn .bars i:nth-child(4) {
  animation-delay: -0.15s;
}
@keyframes eq {
  0%,
  100% {
    height: 25%;
  }
  50% {
    height: 100%;
  }
}
.aa {
  font: italic 500 19px/1 var(--display);
}
.signin {
  border: 0;
  background: none;
  padding: 10px 0;
  min-height: 44px;
  color: var(--cream);
  cursor: pointer;
  border-bottom: 1px solid var(--brass);
  margin-left: 8px;
}
.menu {
  position: absolute;
  right: clamp(20px, 5vw, 64px);
  top: 74px;
  z-index: 60;
  width: min(340px, calc(100vw - 32px));
  padding: 18px;
  background: var(--menu);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px #0008;
  transform-origin: top right;
  animation: menu 0.35s var(--spring);
}
@keyframes menu {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(-6px);
  }
}
.menu h4 {
  margin: 0 0 10px;
  color: var(--soft);
}
.menu .opts {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}
.menu .opts button {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  text-align: left;
}
.menu .opts button[aria-checked="true"] {
  border-color: var(--brass);
  background: color-mix(in srgb, var(--brass) 8%, transparent);
}
.menu .opts b {
  font-weight: var(--display-weight);
  font-size: 22px;
  line-height: 1;
}
.menu .opts small {
  color: var(--soft);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.progress {
  position: relative;
  z-index: 1;
  height: 1px;
  margin: 0 clamp(20px, 5vw, 64px);
  background: var(--line);
}
.progress i {
  display: block;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--brass-3), var(--brass-2), var(--brass));
  box-shadow: 0 0 12px var(--brass);
  transition: width 1.4s var(--ease);
}
/* Main */
main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 30%);
  gap: clamp(24px, 6vw, 110px);
  align-items: center;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(32px, 7vh, 84px) clamp(20px, 5vw, 64px);
}
.step {
  display: none;
}
.step.on {
  display: block;
}
.kicker {
  color: var(--brass);
  margin: 0 0 22px;
}
h1,
h2 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  margin: 0 0 26px;
}
h1,
h2 {
  text-transform: var(--dcase, none);
}
h1 {
  font-size: calc(clamp(60px, 9.4vw, 146px) * var(--dscale, 1));
  line-height: 0.92;
}
h2 {
  font-size: calc(clamp(44px, 5.8vw, 88px) * var(--dscale, 1));
  line-height: 0.98;
}
h1 em,
h2 em {
  font-style: italic;
  padding-right: 0.06em;
}
/* The gilt gradient lives on each word, so the word-by-word entrance keeps it. */
h1 em .w,
h2 em .w,
h1 em:not(:has(.w)),
h2 em:not(:has(.w)) {
  background: linear-gradient(
    100deg,
    var(--brass-3),
    var(--brass-2) 45%,
    var(--brass) 60%,
    var(--brass-2)
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}
.step.on em .w {
  animation:
    word 1.1s var(--ease) forwards,
    gilt 9s ease-in-out infinite;
}
@keyframes gilt {
  50% {
    background-position: 100% 0;
  }
}
.w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em) rotate(2deg);
  filter: blur(8px);
}
.step.on .w {
  animation: word 1.1s var(--ease) forwards;
}
@keyframes word {
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
.rise {
  opacity: 0;
  transform: translateY(16px);
}
.step.on .rise {
  animation: rise 1s var(--ease) forwards;
}
@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}
.lede {
  max-width: 44ch;
  color: var(--soft);
  font-size: clamp(16px, 1.35vw, 18px);
  margin: 0 0 42px;
}
.lede strong {
  color: var(--cream);
  font-weight: 400;
}
.go {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-height: 60px;
  padding: 0 32px;
  border: 1px solid var(--brass);
  background: linear-gradient(
    180deg,
    var(--brass-2),
    var(--brass) 55%,
    color-mix(in srgb, var(--brass) 75%, var(--brass-3))
  );
  color: var(--on-accent);
  cursor: pointer;
  font: 500 12px var(--sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  box-shadow:
    0 12px 30px #0004,
    inset 0 1px 0 #fff6;
  transition:
    transform 0.5s var(--spring),
    box-shadow 0.5s;
}
.go::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, #ffffffa0 50%, transparent 70%);
  transform: translateX(-130%);
}
.go:hover::after {
  transform: translateX(130%);
  transition: transform 1.1s var(--ease);
}
.go:disabled {
  background: transparent;
  color: var(--soft);
  border-color: var(--line);
  box-shadow: none;
  cursor: not-allowed;
}
.go .arr {
  font: italic 400 22px var(--display);
  letter-spacing: 0;
  transition: transform 0.4s var(--spring);
}
.go:hover .arr {
  transform: translateX(5px);
}
.link {
  margin-left: 26px;
  border: 0;
  background: none;
  color: var(--soft);
  cursor: pointer;
  min-height: 44px;
  font-size: 15px;
}
.link:hover {
  color: var(--cream);
}
.note {
  color: var(--soft);
  font-size: 13px;
  margin-top: 22px;
}
/* Goal */
.field {
  width: 100%;
  max-width: 720px;
  border: 0;
  border-bottom: 1px solid #f2ead855;
  background: transparent;
  color: var(--cream);
  font: var(--display-weight) clamp(30px, 3.8vw, 50px)/1.25 var(--display);
  padding: 6px 0 12px;
  outline: none;
  margin: 0 0 20px;
}
.field::placeholder {
  color: var(--soft);
  opacity: 0.5;
  font-style: italic;
}
.field:focus {
  border-color: var(--brass);
}
.inkcard {
  max-width: 520px;
  min-height: 76px;
  padding: 14px 20px;
  margin: 0 0 26px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 18px 40px var(--paper-shadow);
  outline: 1px solid var(--line);
  transform: rotate(-0.8deg);
  display: flex;
  gap: 12px;
  align-items: baseline;
  opacity: 0;
  transition: opacity 0.6s;
}
.inkcard.on {
  opacity: 1;
}
.inkcard .lbl {
  font: 500 10px var(--sans);
  letter-spacing: 0.28em;
  color: #8a7b5e;
  white-space: nowrap;
}
.inkcard .script {
  font: 400 calc(34px * var(--script-scale, 1))/1.2 var(--script);
  color: var(--ink);
  text-shadow: 0 0 1px #16213b88;
  overflow-wrap: anywhere;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 40px;
}
.chip {
  position: relative;
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff05;
  color: var(--soft);
  cursor: pointer;
  font-size: 14px;
  transition:
    color 0.3s,
    border-color 0.3s,
    transform 0.5s var(--spring),
    opacity 0.6s;
}
.chip:hover {
  color: var(--cream);
  border-color: var(--brass);
  transform: translateY(-2px);
}
.chip .strike {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 2px;
  background: var(--brass-2);
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 2px;
  box-shadow: 0 0 8px var(--brass);
}
.chip.struck {
  color: var(--cream);
  border-color: var(--brass);
}
.chip.struck .strike {
  animation: strike 0.45s var(--ease) forwards;
}
@keyframes strike {
  to {
    transform: scaleX(1) rotate(-2deg);
  }
}
.chip.gone {
  opacity: 0;
  transform: translateY(-30px) rotate(-8deg) scale(0.9);
}
/* Dues */
.dues {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 30px;
  align-items: end;
  max-width: 860px;
}
.tiers {
  border-top: 1px solid var(--line);
}
.tier {
  width: 100%;
  display: grid;
  grid-template-columns: 22px minmax(110px, auto) 1fr auto;
  align-items: baseline;
  gap: 18px;
  padding: 15px 6px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--cream);
  cursor: pointer;
  text-align: left;
  transition:
    background 0.5s,
    padding 0.5s var(--ease);
}
.tier i {
  width: 11px;
  height: 11px;
  border: 1px solid var(--soft);
  border-radius: 50%;
  align-self: center;
  transition: all 0.4s var(--spring);
}
.tier b {
  font: var(--display-weight) clamp(28px, 3vw, 38px)/1 var(--display);
}
.tier .nm {
  font: italic var(--display-weight) 19px var(--display);
  color: var(--soft);
}
.tier .inr {
  font-size: 13px;
  color: var(--soft);
  white-space: nowrap;
}
.tier:hover {
  padding-left: 14px;
}
.tier[aria-checked="true"] {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brass) 14%, transparent),
    transparent
  );
  padding-left: 14px;
}
.tier[aria-checked="true"] i {
  background: var(--brass);
  border-color: var(--brass);
  box-shadow: 0 0 14px var(--brass);
  transform: scale(1.3);
}
.tier[aria-checked="true"] b,
.tier[aria-checked="true"] .nm {
  color: var(--brass-2);
}
.stack {
  position: relative;
  height: 230px;
}
.coin {
  position: absolute;
  left: 50%;
  width: 92px;
  height: 24px;
  margin-left: -46px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f5e3ae, #c8a45e 40%, #8e6c2c);
  box-shadow:
    0 2px 0 #6b4f1d,
    0 6px 10px #0006,
    inset 0 1px 0 #fff8;
  animation: drop 0.6s var(--spring) backwards;
}
.coin::after {
  content: "";
  position: absolute;
  inset: 3px 12px;
  border-radius: 50%;
  border: 1px solid #fff5;
}
@keyframes drop {
  from {
    transform: translateY(-160px) rotateX(60deg);
    opacity: 0;
  }
}
.amount {
  text-align: center;
  font: var(--display-weight) 30px/1 var(--display);
  color: var(--brass-2);
  margin-top: 12px;
  min-height: 1em;
}
.amount small {
  display: block;
  font: 300 12px var(--sans);
  color: var(--soft);
  margin-top: 6px;
  letter-spacing: 0.06em;
}
/* Witnesses */
.vis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 760px;
  margin-bottom: 40px;
}
.vis button {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  padding: 22px;
  border: 1px solid var(--line);
  background: #ffffff04;
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.5s,
    transform 0.6s var(--spring),
    background 0.5s;
}
.vis button:hover {
  transform: translateY(-3px);
}
.vis button b {
  display: block;
  font: var(--display-weight) 34px/1.1 var(--display);
  margin-bottom: 6px;
}
.vis button span {
  color: var(--soft);
  font-size: 15px;
}
.vis button[aria-checked="true"] {
  border-color: var(--brass);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--brass) 11%, transparent),
    transparent 60%
  );
}
.vis button[aria-checked="true"] b {
  color: var(--brass-2);
}
.vis .eyes {
  position: absolute;
  right: 16px;
  bottom: 14px;
  display: flex;
  gap: 6px;
}
.vis .eyes i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--brass);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.4);
  transition: all 0.5s var(--spring);
}
.vis .eyes i::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass);
}
.vis button[aria-checked="true"] .eyes i {
  opacity: 1;
  transform: none;
}
.vis .eyes i:nth-child(2) {
  transition-delay: 0.08s;
}
.vis .eyes i:nth-child(3) {
  transition-delay: 0.16s;
}
/* Deal */
.deal {
  max-width: 640px;
  margin: 0 0 36px;
  border-top: 1px solid var(--brass);
}
.deal div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.deal dt {
  color: var(--soft);
  margin: 0;
}
.deal dd {
  margin: 0;
  font: var(--display-weight) 26px/1.25 var(--display);
  overflow-wrap: anywhere;
}
.signin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.ghost {
  min-height: 60px;
  padding: 0 28px;
  border: 1px solid #f2ead877;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  font: 500 12px var(--sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: border-color 0.4s;
}
.ghost:hover {
  border-color: var(--brass);
}
/* Concierge */
.concierge {
  display: grid;
  justify-items: center;
  gap: 28px;
  text-align: center;
  --crest: var(--brass);
  color: var(--brass);
  perspective: 900px;
}
.concierge .seal {
  width: min(100%, 330px);
  aspect-ratio: 1;
  transition: transform 0.8s var(--ease);
  filter: drop-shadow(0 0 30px color-mix(in srgb, var(--brass) 14%, transparent));
}
.remark {
  max-width: 30ch;
  min-height: 5em;
}
.remark q {
  display: block;
  font: italic var(--display-weight) clamp(21px, 1.9vw, 27px)/1.3 var(--display);
  color: var(--cream);
  quotes: "“" "”";
}
.remark .by {
  margin-top: 12px;
  color: var(--soft);
}
.remark .tip {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--brass-2);
}
.remark .ch {
  opacity: 0;
  filter: blur(4px);
  animation: ch 0.5s var(--ease) forwards;
}
@keyframes ch {
  to {
    opacity: 1;
    filter: none;
  }
}
.speaking .seal {
  animation: talk 0.9s ease-in-out infinite;
}
@keyframes talk {
  50% {
    filter: drop-shadow(0 0 44px #c8a45e55);
  }
}
/* Payoff */
main.final {
  grid-template-columns: minmax(0, 1fr);
}
main.final .concierge {
  display: none;
}
.payoff {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.book-wrap {
  perspective: 1800px;
}
.book {
  position: relative;
  max-width: 580px;
  padding: 38px 40px 44px 66px;
  color: #2a2419;
  transform-origin: left center;
  animation: open 1.4s var(--ease) both;
  background:
    repeating-linear-gradient(transparent 0 43px, #7a6a4a30 43px 44px) 0 78px / 100%
      calc(100% - 78px) no-repeat,
    radial-gradient(120% 80% at 30% 20%, #fbf5e7, #efe4cc);
  box-shadow:
    -16px 0 0 #2b1f12,
    -18px 0 0 color-mix(in srgb, var(--brass) 45%, transparent),
    0 50px 90px var(--paper-shadow),
    inset 0 0 60px #b89c6a33;
  border-radius: 2px 10px 10px 2px;
}
@keyframes open {
  from {
    transform: rotateY(-72deg);
    opacity: 0;
  }
}
.book::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 44px;
  border-left: 1px solid #9c2f2a55;
}
.book .hd {
  display: flex;
  justify-content: space-between;
  color: #8a7b5e;
  margin-bottom: 22px;
}
.entry {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  height: 44px;
}
.entry .script {
  font: 400 calc(29px * var(--script-scale, 1))/44px var(--script);
  color: #2e2a36;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry .amt {
  font: 400 13px/44px var(--sans);
  letter-spacing: 0.08em;
  color: #8a7b5e;
  white-space: nowrap;
}
.entry.mine .script {
  color: var(--ink);
  text-shadow: 0 0 0.6px #16213b;
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 240% 100%;
  -webkit-mask-position: 100% 0;
  mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  mask-size: 240% 100%;
  mask-position: 100% 0;
}
.entry.mine.write .script {
  animation: pen 2.4s cubic-bezier(0.45, 0.1, 0.4, 1) 0.9s forwards;
}
@keyframes pen {
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.sig {
  position: relative;
  height: 128px;
  margin-top: 8px;
  border-bottom: 1px solid #2a2419aa;
  touch-action: none;
  cursor: crosshair;
}
.sig canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sig .ph {
  position: absolute;
  left: 0;
  bottom: 8px;
  color: #8a7b5e;
  pointer-events: none;
}
.sig .x {
  position: absolute;
  left: -26px;
  bottom: 6px;
  font: 400 26px var(--script);
  color: #9c2f2a;
  pointer-events: none;
}
.sigrow {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 24px;
  flex-wrap: wrap;
}
.sigrow .link {
  margin-left: 0;
}
.waxwrap {
  position: absolute;
  right: 22px;
  bottom: 26px;
  width: 150px;
  height: 150px;
  pointer-events: none;
}
.waxwrap svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.p-remark {
  margin-top: 32px;
  max-width: 36ch;
  min-height: 4em;
}
.p-remark q {
  display: block;
  font: italic var(--display-weight) 24px/1.3 var(--display);
  color: var(--cream);
  quotes: "“" "”";
}
.p-remark .by {
  margin-top: 10px;
  color: var(--soft);
}
.p-remark .tip {
  display: none;
}
.board {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  max-width: 580px;
}
.board li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  animation: rise 0.9s var(--ease) forwards;
}
.board .rank {
  font: italic var(--display-weight) 20px var(--display);
  color: var(--soft);
}
.board strong {
  display: block;
  font: var(--display-weight) 24px/1.2 var(--display);
}
.board small {
  color: var(--soft);
}
.board .amt {
  text-align: right;
  font: var(--display-weight) 22px var(--display);
}
.board .amt small {
  display: block;
  font: 300 12px var(--sans);
}
.board li.you strong,
.board li.you .amt {
  color: var(--brass-2);
}
footer {
  padding: 18px clamp(20px, 5vw, 64px) 30px;
  border-top: 1px solid var(--line);
  color: var(--soft);
  font-size: 13px;
}
footer summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--cream);
}
footer a {
  color: var(--brass-2);
}
.tag {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 95;
  padding: 5px 10px;
  background: var(--cream);
  color: var(--green);
  font: 600 10px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  pointer-events: none;
}
@media (max-width: 860px) {
  main {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
  }
  .concierge {
    order: 2;
    grid-template-columns: 70px 1fr;
    justify-items: start;
    text-align: left;
    gap: 16px;
    align-items: center;
    border-top: 1px solid var(--line);
    padding-top: 22px;
  }
  .concierge .seal {
    width: 70px;
  }
  .concierge .seal .c-text {
    display: none;
  }
  .concierge .seal .crest * {
    stroke-width: 1;
  }
  .concierge .seal .crest .c-outer {
    stroke-width: 0.8;
  }
  .concierge .seal .crest :is(.c-brows, .c-nose, .c-fill),
  .concierge .seal .crest .c-face > path:nth-of-type(-n + 2) {
    display: none;
  }
  .remark {
    min-height: 0;
  }
  .remark q {
    font-size: 20px;
  }
  .tier {
    grid-template-columns: 18px auto 1fr;
  }
  .tier .nm {
    grid-column: 2 / -1;
    font-size: 17px;
    margin-top: -8px;
  }
  .dues {
    grid-template-columns: 1fr;
  }
  .stack {
    display: none;
  }
  .vis {
    grid-template-columns: 1fr;
  }
  .vis button {
    min-height: 0;
  }
  .payoff {
    grid-template-columns: minmax(0, 1fr);
  }
  header .mode,
  header .name {
    display: none;
  }
  .deal div {
    grid-template-columns: 90px 1fr;
  }
  .link {
    margin-left: 12px;
  }
  #ideas {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * clamp(20px, 5vw, 64px));
    padding: 2px clamp(20px, 5vw, 64px) 6px;
    scrollbar-width: none;
  }
  #ideas .chip {
    flex: 0 0 auto;
  }
  .book {
    padding: 30px 22px 36px 52px;
  }
  .book::before {
    left: 34px;
  }
  .entry .script {
    font-size: 25px;
  }
  .waxwrap {
    width: 118px;
    height: 118px;
    right: 10px;
  }
  .glow {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition: none !important;
  }
  .w,
  .rise {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
/* The black metal card, revealed after the seal. */
.cardstage {
  perspective: 1400px;
  margin-top: 34px;
}
.mcard {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1.586;
  border-radius: 22px;
  padding: 26px 28px;
  color: #e9dfc9;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(420px 260px at var(--mx, 30%) var(--my, 20%), #3d372c 0%, transparent 60%),
    repeating-linear-gradient(90deg, #ffffff05 0 1px, transparent 1px 3px),
    linear-gradient(145deg, #1c1b18, #0b0b0b 55%, #18160f);
  box-shadow:
    0 40px 80px #000c,
    inset 0 0 0 1px #ffffff14,
    inset 0 1px 0 #ffffff26;
  animation: cardin 1.2s var(--ease) both;
}
@keyframes cardin {
  from {
    opacity: 0;
    transform: translateY(40px) rotateX(24deg);
  }
}
.mcard .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mcard .emb {
  width: 46px;
  height: 46px;
  --crest: var(--card-accent, #d6b877);
}
.mcard .emb .c-text {
  display: none;
}
.mcard .brand {
  font: var(--display-weight) 22px var(--display);
  letter-spacing: 0.32em;
}
.mcard .goal {
  align-self: center;
  font: 400 calc(clamp(28px, 3vw, 38px) * var(--script-scale, 1))/1.1 var(--script);
  color: #f0e2bd;
  overflow-wrap: anywhere;
}
.mcard .meta {
  display: flex;
  gap: 28px;
  font: 500 10px var(--sans);
  letter-spacing: 0.24em;
  color: #b7ad98;
  text-transform: uppercase;
}
.mcard .meta b {
  display: block;
  margin-top: 4px;
  font: var(--display-weight) 19px var(--display);
  letter-spacing: 0.02em;
  color: #e9dfc9;
  text-transform: none;
}
.mcard .etch {
  clip-path: inset(0 100% 0 0);
  animation: etch 1.2s var(--ease) forwards;
}
.mcard .etch.d1 {
  animation-delay: 0.7s;
}
.mcard .etch.d2 {
  animation-delay: 1.3s;
}
@keyframes etch {
  to {
    clip-path: inset(0 0 0 0);
  }
}
.mcard .laser {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  left: 0;
  background: #ffe7ad;
  box-shadow: 0 0 18px 4px #ffcf6b88;
  opacity: 0;
  animation: laser 2.4s 0.5s var(--ease) forwards;
}
@keyframes laser {
  0% {
    left: 0;
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
.mcard .foil {
  position: absolute;
  right: 24px;
  bottom: 26px;
  transform: rotate(-6deg);
  font: var(--display-weight) 17px var(--display);
  letter-spacing: 0.14em;
  padding: 5px 11px;
  border: 1px solid #d6b87799;
  opacity: 0;
  background: linear-gradient(100deg, #9b7a3e, #f6e3a8 40%, #b18c47 60%, #f3dc9c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: foil 1s 2.9s var(--ease) forwards;
}
@keyframes foil {
  from {
    opacity: 0;
    transform: rotate(-6deg) scale(1.3);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: rotate(-6deg) scale(1);
    filter: none;
  }
}

[data-accent="platinum"] .mcard {
  --card-accent: #d7dade;
}
[data-accent="rose"] .mcard {
  --card-accent: #e3b3a0;
}
[data-accent="bronze"] .mcard {
  --card-accent: #c99a68;
}
.mcard .goal {
  color: color-mix(in srgb, var(--card-accent, #d6b877) 55%, #f4ecd8);
}
.mcard .foil {
  background: linear-gradient(
    100deg,
    var(--brass-3),
    var(--brass-2) 40%,
    var(--brass) 60%,
    var(--brass-2)
  );
  -webkit-background-clip: text;
  background-clip: text;
  border-color: color-mix(in srgb, var(--brass) 60%, transparent);
}
[data-mode="light"] .mcard .foil {
  background: linear-gradient(100deg, #9b7a3e, #f6e3a8 40%, #b18c47 60%, #f3dc9c);
  -webkit-background-clip: text;
  background-clip: text;
}
[data-mode="light"] .go:disabled {
  color: var(--soft);
}
[data-mode="light"] .tier[aria-checked="true"] b,
[data-mode="light"] .tier[aria-checked="true"] .nm,
[data-mode="light"] .vis button[aria-checked="true"] b,
[data-mode="light"] .board li.you strong,
[data-mode="light"] .board li.you .amt {
  color: var(--brass-3);
}
/* Motion presets. Subtle is the default: shorter travel, softer blur, no rotation. */
[data-motion="subtle"] .w {
  transform: translateY(0.22em);
  filter: blur(3px);
}
[data-motion="subtle"] .step.on .w {
  animation-duration: 1.3s;
}
[data-motion="subtle"] .rise {
  transform: translateY(8px);
}
[data-motion="subtle"] .chip:hover,
[data-motion="subtle"] .vis button:hover {
  transform: none;
}
[data-motion="subtle"] .step.on em .w {
  animation-duration: 1.3s, 14s;
}
[data-motion="still"] *,
[data-motion="still"] *::before,
[data-motion="still"] *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0s !important;
  transition: none !important;
}
[data-motion="still"] .w,
[data-motion="still"] .rise {
  opacity: 1;
  transform: none;
  filter: none;
}
/* Screen transitions */
[data-transition="fade"] .w,
[data-transition="fade"] .rise {
  transform: none !important;
  filter: none !important;
}
.curtain {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  background: var(--green);
  transform: translateX(-101%);
}
.curtain::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: var(--brass);
  box-shadow: 0 0 18px var(--brass);
}
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.swatches button {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  text-align: left;
  font-size: 11px;
  line-height: 1.25;
}
.swatches button[aria-checked="true"] {
  border-color: var(--brass);
}
.swatches .sw {
  height: 30px;
  display: flex;
  overflow: hidden;
}
.swatches .sw i {
  flex: 1;
}
.seg {
  display: flex;
  border: 1px solid var(--line);
  margin-bottom: 18px;
}
.seg button {
  flex: 1;
  min-height: 38px;
  border: 0;
  background: transparent;
  color: var(--soft);
  cursor: pointer;
  font: 500 11px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.seg button[aria-checked="true"] {
  background: var(--brass);
  color: var(--on-accent);
}
.menu {
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
}
:root {
  --serif: var(--display);
}

@media (max-width: 860px) {
  .mcard {
    padding: 20px 20px;
    border-radius: 18px;
  }
  .mcard .meta {
    gap: 18px;
  }
  .mcard .foil {
    right: 16px;
    bottom: 22px;
    font-size: 13px;
  }
  .mcard .meta span:nth-child(3) {
    display: none;
  }
}

.inkcard {
  max-width: min(520px, 100%);
}
@media (max-width: 860px) {
  .inkcard .script {
    font-size: calc(28px * var(--script-scale, 1));
  }
  .vis,
  .deal,
  .tiers,
  .field {
    max-width: 100%;
  }
}
@media (max-width: 860px) {
  .entry .script {
    font-size: calc(22px * var(--script-scale, 1));
  }
  .entry .amt {
    font-size: 12px;
  }
}

/* Font list: a compact two-column grid so fifteen options stay browsable. */
#fonts {
  grid-template-columns: 1fr 1fr;
}
#fonts button {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 70px;
}
#fonts b {
  font-size: 24px;
}
.menu {
  width: min(440px, calc(100vw - 32px));
}
/* Card details stay light whatever the headline weight; the foil sits in the free space up top. */
.mcard .meta b,
.mcard .brand {
  font-weight: 400;
}
@media (min-width: 861px) {
  .mcard .foil {
    top: 34px;
    bottom: auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%) rotate(-6deg);
  }
  @keyframes foil {
    from {
      opacity: 0;
      transform: translateX(-50%) rotate(-6deg) scale(1.3);
      filter: blur(4px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) rotate(-6deg) scale(1);
      filter: none;
    }
  }
}

/* The honest receipt */
.nothing {
  max-width: 440px;
  margin-top: 26px;
  padding: 20px 22px 18px;
  background: var(--paper);
  color: #2a2419;
  box-shadow: 0 24px 50px var(--paper-shadow);
  transform: rotate(-1deg);
  animation: rise 0.8s var(--ease) both;
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat,
    radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) bottom left / 12px 8px repeat-x;
  mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat,
    radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) bottom left / 12px 8px repeat-x;
}
.nothing-hd {
  display: flex;
  justify-content: space-between;
  color: #8a7b5e;
  padding-bottom: 10px;
  border-bottom: 1px dashed #8a7b5e88;
}
.nothing ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.nothing li {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font: 400 20px/1.2 var(--display);
  opacity: 0;
  animation: rise 0.5s var(--ease) forwards;
}
.nothing li .mk {
  font: 500 11px var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a7b5e;
  align-self: center;
}
.nothing li.no::after {
  content: "";
  position: absolute;
  left: -4px;
  right: 30%;
  top: 55%;
  height: 2px;
  background: #9c2f2a;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nothing li.no.x::after {
  transform: scaleX(1) rotate(-1deg);
}
.nothing li.no.x .it {
  color: #9a8f7a;
}
.nothing li.yes {
  font-weight: 600;
}
.nothing li.yes .mk {
  color: #1f6b4f;
}
.nothing-note {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed #8a7b5e88;
  font: italic 400 16px/1.4 var(--display);
  color: #4a4034;
}
#what {
  display: inline-block;
  margin-top: 4px;
}
/* Dawn: the night lifts after the seal. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 6s ease;
  background:
    radial-gradient(
      140% 90% at 50% 115%,
      #ffcf8a 0%,
      #f39a6b 22%,
      #b5657a 40%,
      #4b3a63 58%,
      transparent 78%
    ),
    linear-gradient(180deg, #1a1830 0%, #3b2c4f 45%, #c77d6c 85%, #f4c38f 100%);
}
body.dawn::before {
  opacity: 1;
}
body.dawn {
  --soft: #e8dccb;
  --line: #ffffff2a;
  transition: color 4s;
}
body.dawn #dust {
  opacity: 0.5;
}
.dawnline {
  margin: 34px 0 6px;
  animation: rise 2s 1s var(--ease) both;
}
.dawnline .dawn-q {
  margin: 0;
  font: italic var(--display-weight) clamp(30px, 3.2vw, 44px)/1.1 var(--display);
  color: #fff4e6;
  text-shadow: 0 2px 30px #ffb07a66;
}
.dawnline .dawn-sub {
  margin: 8px 0 0;
  color: #f6e2cc;
}
body.dawn .board li strong,
body.dawn .board .amt {
  color: #fff4e6;
}
body.dawn .p-remark q,
body.dawn .remark q {
  color: #fff4e6;
}

/* =====================================================================================
   v5 readability system (after the 28 Sep audit: 257/512 text elements failed).
   Rules: body ≥ 16px at weight ≥ 450; labels ≥ 12px with light tracking; buttons in
   sentence case at 16px; no script faces for anything meant to be read; soft text ≥ 9:1.
   ===================================================================================== */
:root,
[data-font] {
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --em-font: "Fraunces", Georgia, serif;
  --em-style: italic;
  --em-weight: 600;
  --dcase: none;
  --dscale: 1;
}
[data-font="sans"],
:root:not([data-font]) {
  --display: "Plus Jakarta Sans", system-ui, sans-serif;
  --display-weight: 800;
  --display-track: -0.045em;
  --dscale: 0.9;
}
[data-font="serif"] {
  --display: "Fraunces", Georgia, serif;
  --display-weight: 800;
  --display-track: -0.035em;
  --em-weight: 700;
  --dscale: 0.92;
}
[data-font="grotesk"] {
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --display-weight: 800;
  --display-track: -0.05em;
  --sans: "Bricolage Grotesque", system-ui, sans-serif;
  --em-font: "Bricolage Grotesque", system-ui, sans-serif;
  --em-style: normal;
  --em-weight: 800;
  --dscale: 0.88;
}
:root,
[data-mode="dark"] {
  --soft: #c4bdb1;
}
[data-mode="light"] {
  --soft: #544f47;
}
[data-mode="green"] {
  --soft: #c3cbbd;
}
body {
  font: 450 17px/1.6 var(--sans);
}
h1,
h2 {
  line-height: 1;
  text-wrap: balance;
}
h1 em,
h2 em {
  font-family: var(--em-font);
  font-style: var(--em-style);
  font-weight: var(--em-weight);
  letter-spacing: -0.02em;
}
.caps {
  font: 600 13px/1.4 var(--sans);
  letter-spacing: 0.12em;
}
.kicker {
  margin-bottom: 18px;
}
.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 450;
  line-height: 1.55;
}
.lede strong {
  font-weight: 650;
}
.note {
  font-size: 15px;
  font-weight: 450;
}
.link {
  font-size: 16px;
  font-weight: 550;
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, var(--brass) 70%, transparent);
}
.go,
.ghost {
  font: 700 16px/1 var(--sans);
  letter-spacing: -0.005em;
  text-transform: none;
  border-radius: 14px;
  min-height: 58px;
  padding: 0 28px;
}
.go .arr {
  font: 700 18px var(--sans);
}
.go:disabled {
  color: color-mix(in srgb, var(--cream) 55%, transparent);
  border-color: var(--line);
}
.chip {
  font: 550 15px var(--sans);
  color: var(--cream);
  background: color-mix(in srgb, var(--cream) 6%, transparent);
  border-color: color-mix(in srgb, var(--cream) 18%, transparent);
  min-height: 44px;
}
.signin {
  font: 650 14px var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
header .mode {
  font: 600 12px var(--sans);
  letter-spacing: 0.06em;
}
/* Goal: one clean, wrapping field instead of an input plus a handwritten duplicate. */
.goalbox {
  max-width: 720px;
  margin: 0 0 22px;
  padding: 18px 22px 12px;
  border: 1.5px solid color-mix(in srgb, var(--cream) 22%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--cream) 4%, transparent);
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.goalbox:focus-within {
  border-color: var(--brass);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brass) 18%, transparent);
}
.goalbox label {
  display: block;
  font: 600 13px var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 6px;
}
.goalbox textarea {
  display: block;
  width: 100%;
  resize: none;
  overflow: hidden;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--cream);
  font: 700 clamp(24px, 3vw, 34px)/1.25 var(--sans);
  letter-spacing: -0.02em;
  padding: 0;
  min-height: 1.25em;
}
.goalbox textarea::placeholder {
  color: color-mix(in srgb, var(--cream) 38%, transparent);
  font-weight: 600;
}
.goalbox .meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font: 500 13px var(--sans);
  color: var(--soft);
}
.firststep {
  display: none;
  align-items: center;
  gap: 10px;
  max-width: 720px;
  margin: 0 0 26px;
  padding: 12px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brass) 14%, transparent);
  color: var(--cream);
  font: 550 15px var(--sans);
}
.firststep.on {
  display: flex;
}
.firststep b {
  color: var(--brass-2);
  font-weight: 700;
  white-space: nowrap;
}
/* Dues: compact rows that fit a phone screen. */
.tier {
  grid-template-columns: 20px minmax(96px, auto) 1fr auto;
  padding: 14px 8px;
  gap: 16px;
}
.tier b {
  font: 800 clamp(26px, 2.6vw, 34px)/1 var(--sans);
  letter-spacing: -0.03em;
}
.tier .nm {
  font: var(--em-style) var(--em-weight) 18px var(--em-font);
  color: var(--soft);
}
.tier .inr {
  font: 600 14px var(--sans);
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}
.amount {
  font: 800 30px/1 var(--sans);
  letter-spacing: -0.02em;
}
.amount small {
  font: 500 13px var(--sans);
}
.vis button b {
  font: 800 30px/1.1 var(--sans);
  letter-spacing: -0.03em;
}
.vis button span {
  font: 450 16px/1.5 var(--sans);
  color: var(--soft);
}
.deal dd {
  font: 700 22px/1.3 var(--sans);
  letter-spacing: -0.015em;
}
.deal dt {
  font-size: 12px;
}
/* The Concierge speaks in the display family's italic, at a readable weight. */
.remark q,
.p-remark q {
  font: var(--em-style) 500 clamp(21px, 1.9vw, 26px)/1.35 var(--em-font);
}
.remark .by,
.p-remark .by {
  font: 600 12px var(--sans);
  letter-spacing: 0.12em;
}
.remark .tip {
  font: 600 14px var(--sans);
}
/* Payoff: readable ink, not calligraphy. */
.entry .script,
.inkcard .script {
  font: var(--em-style) 500 24px/44px var(--em-font);
  letter-spacing: -0.01em;
}
.entry.mine .script {
  font-weight: 700;
}
.entry .amt {
  font: 600 14px/44px var(--sans);
}
.book .hd {
  font: 600 12px var(--sans);
  letter-spacing: 0.12em;
}
.sig .ph {
  font: 600 12px var(--sans);
  letter-spacing: 0.12em;
}
.mcard .goal {
  font: 700 clamp(24px, 2.6vw, 32px)/1.15 var(--sans);
  letter-spacing: -0.02em;
  color: #f4ead2;
}
.mcard .brand {
  font: 800 20px var(--sans);
  letter-spacing: 0.28em;
}
.mcard .meta {
  font: 600 11px var(--sans);
  letter-spacing: 0.14em;
}
.mcard .meta b {
  font: 700 18px var(--sans);
  letter-spacing: -0.01em;
}
.mcard .foil {
  font: 800 15px var(--sans);
  letter-spacing: 0.08em;
}
.board strong {
  font: 700 20px/1.25 var(--sans);
  letter-spacing: -0.01em;
}
.board small {
  font: 450 14px var(--sans);
}
.board .amt {
  font: 700 18px var(--sans);
  font-variant-numeric: tabular-nums;
}
.board .amt small {
  font: 500 12px var(--sans);
}
.board .rank {
  font: 700 15px var(--sans);
}
.nothing li {
  font: 600 19px/1.3 var(--sans);
}
.nothing li .mk {
  font: 700 12px var(--sans);
  letter-spacing: 0.08em;
}
.nothing-note {
  font: italic 500 16px/1.45 var(--em-font);
}
.nothing-hd {
  font: 600 12px var(--sans);
  letter-spacing: 0.12em;
}
.dawnline .dawn-q {
  font: var(--em-style) 700 clamp(30px, 3.2vw, 44px)/1.1 var(--em-font);
}
footer {
  font-size: 15px;
}
footer summary {
  font: 650 15px var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
/* One Settings button replaces four round icons. */
header .iconbtn#voice {
  display: none;
}
.aa {
  width: auto;
  padding: 0 16px;
  border-radius: 999px;
  font: 650 14px var(--sans);
  gap: 8px;
  display: inline-flex;
}
.menu h4 {
  font: 600 12px var(--sans);
  letter-spacing: 0.12em;
  margin-top: 4px;
}
.menu .toggles {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}
.menu .tg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--cream);
  font: 600 15px var(--sans);
  cursor: pointer;
}
.menu .tg i {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cream) 20%, transparent);
  transition: background 0.3s;
}
.menu .tg i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cream);
  transition: transform 0.3s var(--spring);
}
.menu .tg[aria-pressed="true"] i {
  background: var(--brass);
}
.menu .tg[aria-pressed="true"] i::after {
  transform: translateX(16px);
  background: var(--on-accent);
}
.menu .opts button {
  border-radius: 12px;
}
.menu .opts small {
  font: 500 12px var(--sans);
  letter-spacing: 0;
}
.seg {
  border-radius: 12px;
  overflow: hidden;
}
.seg button {
  font: 650 13px var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
.swatches button {
  border-radius: 12px;
  font: 600 12px var(--sans);
}
#fonts {
  grid-template-columns: 1fr;
}
#fonts button {
  min-height: 0;
  padding: 12px 14px;
}
#fonts b {
  font-size: 26px;
}
@media (max-width: 860px) {
  h1 {
    font-size: calc(clamp(46px, 13vw, 64px) * var(--dscale));
  }
  h2 {
    font-size: calc(clamp(36px, 10vw, 48px) * var(--dscale));
  }
  .tier {
    grid-template-columns: 16px auto 1fr;
    gap: 4px 12px;
    padding: 12px 6px;
  }
  .tier b {
    font-size: 26px;
  }
  .tier .inr {
    grid-column: 3;
    justify-self: end;
    align-self: center;
    grid-row: 1;
  }
  .tier .nm {
    grid-column: 2 / -1;
    grid-row: 2;
    font-size: 16px;
    margin-top: 0;
  }
  .go,
  .ghost {
    width: 100%;
    justify-content: center;
  }
  .link {
    margin: 14px 0 0;
    display: inline-block;
  }
  .goalbox textarea {
    font-size: 24px;
  }
  .entry .script {
    font-size: 20px;
  }
  .remark q {
    font-size: 19px;
  }
}
.mcard .meta {
  font-size: 12px;
}
/* Gilded italics: give swashes and descenders room so the gradient text isn't clipped. */
h1 em .w,
h2 em .w {
  padding: 0 0.1em 0.16em 0.04em;
  margin: 0 -0.06em -0.16em -0.04em;
}
h1,
h2 {
  padding-bottom: 0.04em;
}
@media (max-width: 860px) {
  [data-font="sans"] h1,
  [data-font="sans"] h2,
  :root:not([data-font]) h1 {
    letter-spacing: -0.035em;
  }
  .tag {
    display: none;
  }
}
.p-remark q,
body.dawn .remark q {
  color: var(--cream);
}
body.dawn .p-remark q {
  color: #fff6ea;
  text-shadow: 0 1px 18px #2a14306e;
}
body.dawn .p-remark .by,
body.dawn .dawnline .dawn-sub {
  color: #fbe9d6;
}
.dawnline .dawn-q {
  text-wrap: balance;
}

/* =====================================================================================
   v6 type scale (visual audit, 29 Sep). Headlines were sized by width only, so short
   laptops got 108px heroes and CTAs fell below the fold. Sizes now respect height too.
   Scale: hero 80 · question 56 · input 28 · figure 28 · remark 20 · lede 18 · body 16.
   ===================================================================================== */
h1 {
  font-size: calc(clamp(44px, min(6.2vw, 10.5vh), 80px) * var(--dscale, 1));
  line-height: 1;
}
h2 {
  font-size: calc(clamp(32px, min(4.4vw, 7.6vh), 56px) * var(--dscale, 1));
  line-height: 1.04;
  margin-bottom: 20px;
}
main {
  padding-block: clamp(24px, 5vh, 64px);
}
@media (min-width: 861px) {
  main {
    gap: clamp(24px, 5vw, 96px);
    grid-template-columns: minmax(0, 1fr) minmax(220px, 26%);
  }
  main.final {
    grid-template-columns: minmax(0, 1fr);
  }
}
.kicker {
  margin-bottom: 14px;
}
.lede {
  font-size: clamp(16px, 1.25vw, 18px);
  max-width: 46ch;
  margin-bottom: 32px;
}
.concierge {
  gap: 20px;
}
.concierge .seal {
  width: min(100%, 250px, 34vh);
}
.remark q,
.p-remark q {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.4;
}
.go,
.ghost {
  min-height: 54px;
  font-size: 15px;
  padding: 0 24px;
}
/* Goal */
.goalbox {
  padding: 14px 18px 10px;
  margin-bottom: 16px;
}
.goalbox textarea {
  font-size: clamp(20px, 2vw, 26px);
}
.firststep {
  margin-bottom: 20px;
  padding: 10px 14px;
  font-size: 14px;
}
.chips {
  margin-bottom: 28px;
}
.chip {
  min-height: 40px;
  font-size: 14px;
  padding: 0 15px;
}
/* Dues */
.tier {
  padding: 10px 8px;
}
.tier b {
  font-size: clamp(22px, 2vw, 28px);
}
.tier .nm {
  font-size: 16px;
}
.tier .inr {
  font-size: 13px;
}
.stack {
  height: 170px;
}
.coin {
  width: 76px;
  height: 20px;
  margin-left: -38px;
}
.amount {
  font-size: 24px;
}
.dues + .rise,
.dues ~ .rise {
  margin-top: 20px !important;
}
/* Witnesses and sign-in */
.vis {
  margin-bottom: 28px;
}
.vis button {
  min-height: 120px;
  padding: 18px;
}
.vis button b {
  font-size: 24px;
}
.deal {
  margin-bottom: 26px;
}
.deal div {
  padding: 12px 0;
}
.deal dd {
  font-size: 19px;
}
/* Payoff */
.book {
  padding: 30px 32px 36px 60px;
}
.entry .script {
  font-size: 21px;
}
.dawnline .dawn-q {
  font-size: clamp(26px, 2.6vw, 36px);
}
header {
  padding-block: 16px;
}
@media (max-width: 860px) {
  h1 {
    font-size: calc(40px * var(--dscale, 1));
  }
  h2 {
    font-size: calc(31px * var(--dscale, 1));
    margin-bottom: 16px;
  }
  main {
    padding-block: 22px 28px;
  }
  .kicker {
    margin-bottom: 10px;
  }
  .lede {
    font-size: 16px;
    margin-bottom: 24px;
  }
  .goalbox textarea {
    font-size: 20px;
  }
  .firststep {
    margin-bottom: 16px;
  }
  .chips {
    margin-bottom: 20px;
  }
  .tier {
    padding: 8px 4px;
    gap: 2px 12px;
  }
  .tier b {
    font-size: 21px;
  }
  .tier .nm {
    font-size: 14px;
  }
  .tier .inr {
    font-size: 12px;
  }
  .vis button {
    min-height: 0;
    padding: 16px;
  }
  .vis button b {
    font-size: 22px;
  }
  .vis button span {
    font-size: 15px;
  }
  .deal dd {
    font-size: 17px;
  }
  .concierge {
    padding-top: 18px;
  }
  .concierge .seal {
    width: 56px;
  }
  .remark q {
    font-size: 17px;
  }
  /* Keep the primary action in reach while scrolling longer steps. */
  .step.on .go[data-next] {
    position: sticky;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 6;
    box-shadow:
      0 10px 30px #000a,
      0 0 0 6px color-mix(in srgb, var(--green) 85%, transparent);
  }
}
.vis .eyes {
  top: 16px;
  right: 16px;
  bottom: auto;
}
.vis button b {
  padding-right: 96px;
}
.vis .eyes i {
  width: 22px;
  height: 22px;
}
.vis .eyes i::after {
  width: 6px;
  height: 6px;
}
/* The dawn gradient is brightest behind the Concierge's last line: give it a frosted backing. */
body.dawn .p-remark {
  padding: 14px 18px;
  border-radius: 14px;
  background: color-mix(in srgb, #1b1426 62%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@media (max-width: 860px) {
  .entry {
    height: auto;
    min-height: 44px;
    padding: 7px 0;
    align-items: flex-start;
  }
  .entry .script {
    white-space: normal;
    overflow: visible;
    line-height: 1.3;
  }
  .entry .amt {
    line-height: 1.9;
  }
}

/* ===== v7: card-only payoff with an editor ===== */
.card-payoff {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
.cardcol {
  position: sticky;
  top: 24px;
}
.card-payoff .cardstage {
  margin-top: 8px;
}
.card-payoff .mcard {
  width: min(100%, 600px);
  transition:
    transform 0.6s var(--ease),
    background 0.6s;
}
.mcard .holder {
  font: 700 14px var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #cfc5ad;
  margin-top: -6px;
  margin-bottom: 14px;
}
.mcard .goal {
  transition: opacity 0.3s;
}
.mcard .goal.private {
  font-style: italic;
  font-weight: 600;
  opacity: 0.75;
}
/* Finishes */
.mcard[data-finish="champagne"] {
  background:
    radial-gradient(420px 260px at var(--mx, 30%) var(--my, 20%), #fff4d0aa 0%, transparent 60%),
    repeating-linear-gradient(90deg, #ffffff12 0 1px, transparent 1px 3px),
    linear-gradient(145deg, #e6cf98, #b8964f 55%, #d9bd7c);
  --card-accent: #3a2c12;
}
.mcard[data-finish="platinum"] {
  background:
    radial-gradient(420px 260px at var(--mx, 30%) var(--my, 20%), #ffffffcc 0%, transparent 60%),
    repeating-linear-gradient(90deg, #ffffff18 0 1px, transparent 1px 3px),
    linear-gradient(145deg, #eef0f2, #9aa1aa 55%, #dfe2e6);
  --card-accent: #2b2f35;
}
.mcard[data-finish="rose"] {
  background:
    radial-gradient(420px 260px at var(--mx, 30%) var(--my, 20%), #fff0e9bb 0%, transparent 60%),
    repeating-linear-gradient(90deg, #ffffff14 0 1px, transparent 1px 3px),
    linear-gradient(145deg, #f3d3c6, #b97c6a 55%, #e7b9a6);
  --card-accent: #3a1f18;
}
.mcard:is([data-finish="champagne"], [data-finish="platinum"], [data-finish="rose"]) {
  color: var(--card-accent);
}
.mcard:is([data-finish="champagne"], [data-finish="platinum"], [data-finish="rose"])
  :is(.goal, .brand, .meta b) {
  color: var(--card-accent);
}
.mcard:is([data-finish="champagne"], [data-finish="platinum"], [data-finish="rose"])
  :is(.meta, .holder) {
  color: color-mix(in srgb, var(--card-accent) 72%, transparent);
}
.mcard:is([data-finish="champagne"], [data-finish="platinum"], [data-finish="rose"]) .foil {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--card-accent);
  border-color: color-mix(in srgb, var(--card-accent) 55%, transparent);
}
.mcard .emb {
  --crest: var(--card-accent, #d6b877);
}
/* Editor */
.editor {
  margin-top: 26px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--cream) 4%, transparent);
  display: grid;
  gap: 16px;
  max-width: 520px;
}
.editor h3 {
  margin: 0;
  font: 800 22px var(--sans);
  letter-spacing: -0.02em;
}
.fld {
  display: grid;
  gap: 8px;
}
.fld > span {
  font: 600 12px var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
}
.fld input,
.fld textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid color-mix(in srgb, var(--cream) 18%, transparent);
  border-radius: 12px;
  background: transparent;
  color: var(--cream);
  font: 600 17px/1.35 var(--sans);
  outline: none;
  resize: none;
}
.fld input:focus,
.fld textarea:focus {
  border-color: var(--brass);
}
.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font: 550 15px var(--sans);
}
.switch-row input {
  position: absolute;
  opacity: 0;
}
.switch-row .sw {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cream) 22%, transparent);
  transition: background 0.3s;
}
.switch-row .sw::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cream);
  transition: transform 0.3s var(--spring);
}
.switch-row input:checked + .sw {
  background: var(--brass);
}
.switch-row input:checked + .sw::after {
  transform: translateX(18px);
  background: var(--on-accent);
}
.switch-row input:focus-visible + .sw {
  outline: 1px solid var(--brass);
  outline-offset: 3px;
}
.finishes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.fin {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  font: 600 12px var(--sans);
}
.fin i {
  width: 44px;
  height: 28px;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px #ffffff30,
    0 4px 10px #0006;
}
.fin-obsidian i {
  background: linear-gradient(145deg, #2a2823, #0b0b0b);
}
.fin-champagne i {
  background: linear-gradient(145deg, #e6cf98, #b8964f);
}
.fin-platinum i {
  background: linear-gradient(145deg, #eef0f2, #9aa1aa);
}
.fin-rose i {
  background: linear-gradient(145deg, #f3d3c6, #b97c6a);
}
.fin[aria-checked="true"] {
  border-color: var(--brass);
  background: color-mix(in srgb, var(--brass) 12%, transparent);
}
.editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.editor .note {
  margin: 0;
}
.card-payoff .p-remark {
  margin-top: 22px;
}
.finalcol .dawnline {
  margin-top: 26px;
}
@media (max-width: 860px) {
  .card-payoff {
    grid-template-columns: minmax(0, 1fr);
  }
  .cardcol {
    position: static;
    order: 2;
  }
  .finalcol {
    order: 1;
    display: contents;
  }
  .finalcol > .kicker,
  .finalcol > h2,
  .finalcol > .lede {
    order: 1;
  }
  .cardcol {
    order: 2;
  }
  .editor,
  .finalcol > .dawnline,
  #boardslot {
    order: 3;
  }
  .editor {
    padding: 18px;
  }
  .finishes {
    gap: 6px;
  }
  .fin i {
    width: 38px;
  }
  .mcard .holder {
    font-size: 12px;
    margin-bottom: 8px;
  }
  .editor-actions .go {
    width: 100%;
  }
}
@media (max-width: 860px) {
  .card-payoff .mcard .foil {
    top: 22px;
    bottom: auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%) rotate(-6deg);
    font-size: 11px;
    padding: 4px 9px;
  }
  .card-payoff .mcard .brand {
    font-size: 16px;
    letter-spacing: 0.22em;
  }
  .card-payoff .mcard .meta span:nth-child(3) {
    display: inline;
  }
}
@media (max-width: 860px) {
  .card-payoff .mcard .foil {
    left: 44%;
    top: 26px;
  }
}

/* Crest (was injected at runtime) */

.crest {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.crest * {
  fill: none;
  stroke: var(--crest, currentColor);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.crest .c-dot {
  fill: var(--crest, currentColor);
  stroke: none;
}
.crest text,
.crest textPath {
  stroke: none;
  fill: var(--crest, currentColor);
}
.crest .c-fill {
  stroke-width: 1.2;
}
.crest .c-text {
  fill: var(--crest, currentColor);
  stroke: none;
  /* First letters of many scripts: system fonts supply the non-Latin glyphs. */
  font:
    500 13px "Manrope",
    "Noto Sans",
    system-ui,
    sans-serif;
  letter-spacing: 1px;
}
.crest .c-outer {
  stroke-width: 0.8;
}
.crest.draw [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: c-draw 2.2s cubic-bezier(0.6, 0.1, 0.2, 1) forwards;
}
/* Dash lengths in the drawing's own units, so every line finishes drawing (with non-scaling
   strokes the draw-in stopped short and left gaps). */
.crest.draw [pathLength] {
  vector-effect: none;
}
.crest.draw .c-rings circle {
  animation-delay: 0.2s;
}
.crest.draw .c-text,
.crest.draw .c-monk,
.crest.draw .c-eyes,
.crest.draw .c-brows,
.crest.draw .c-mouth,
.crest.draw .c-dot {
  opacity: 0;
  animation: c-in 0.8s 1.4s forwards;
}
@keyframes c-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes c-in {
  to {
    opacity: 1;
  }
}
.crest .c-ring {
  transform-origin: 100px 100px;
  animation: c-turn 90s linear infinite;
}
.crest .c-eyes {
  transform-box: fill-box;
  transform-origin: center;
}
.crest.blink .c-eyes {
  animation: c-blink 0.28s;
}
@keyframes c-blink {
  50% {
    transform: scaleY(0.1);
  }
}
@keyframes c-turn {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .crest *,
  .crest {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }
}

/* Animation delays as classes (CSP forbids inline style attributes). */
.step.on .rise.d5 {
  animation-delay: 0.5s;
}
.step.on .rise.d7 {
  animation-delay: 0.7s;
}
.step.on .rise.d95 {
  animation-delay: 0.95s;
}
.link.flush {
  margin-left: 0;
}
/* Founding-list sign-in */
.auth {
  display: grid;
  gap: 14px;
  max-width: 520px;
}
.auth form {
  display: grid;
  gap: 12px;
}
.auth .fld input {
  font-size: 18px;
}
.auth .row2 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}
.auth .or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--soft);
  font: 600 12px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.auth .or::before,
.auth .or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.auth a.go {
  text-decoration: none;
  justify-content: center;
}
.auth-msg {
  min-height: 1.4em;
  margin: 0;
  font: 600 15px var(--sans);
  color: var(--brass-2);
}
.auth-msg.err {
  color: #ff9d8c;
}
.signed-as {
  margin: 0;
  color: var(--soft);
}
.signed-as b {
  color: var(--cream);
}
.freebadge {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
  color: var(--brass-2);
  font: 650 14px var(--sans);
}
.sw i.c0 {
  background: var(--c0);
}
.sw i.c1 {
  background: var(--c1);
}
.sw i.c2 {
  background: var(--c2);
}
.signin {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 860px) {
  .card-payoff .mcard .brand {
    display: none;
  }
  .card-payoff .mcard .foil {
    left: auto;
    right: 18px;
    top: 26px;
    transform: rotate(-6deg);
  }
  .card-payoff .mcard .meta span:nth-child(3) {
    display: none;
  }
}

/* ===== Real-phone polish (Android 360–412px) ===== */
.go .arr,
.arr {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
}
.go:hover .arr {
  transform: translateX(4px);
}
.link {
  padding: 0;
}
@media (max-width: 860px) {
  header {
    gap: 10px;
    padding-block: 14px;
  }
  header .name {
    display: inline;
    font-size: 18px;
    letter-spacing: 0.2em;
  }
  header .mark {
    width: 30px;
    height: 30px;
  }
  header .sp {
    flex: 1;
  }
  .step.on .rise .link {
    display: inline-block;
    margin: 18px 0 0;
  }
  /* The card grows with a long goal instead of overlapping its own labels. */
  .card-payoff .mcard {
    aspect-ratio: auto;
    min-height: 210px;
    gap: 10px;
    padding: 18px;
  }
  .card-payoff .mcard .goal {
    font-size: 21px;
    line-height: 1.2;
    margin-top: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card-payoff .mcard .holder {
    margin: 0;
  }
  .card-payoff .mcard .emb {
    width: 38px;
    height: 38px;
  }
  .concierge {
    gap: 14px;
    padding-top: 18px;
  }
}
@media (max-width: 380px) {
  h1 {
    font-size: calc(36px * var(--dscale, 1));
  }
  h2 {
    font-size: calc(28px * var(--dscale, 1));
  }
  .lede {
    font-size: 15.5px;
  }
  .tier .inr {
    font-size: 11.5px;
  }
}
@media (max-width: 400px) {
  .finishes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* The entry fee stands on its own line. */
.lede .entry-fee {
  display: block;
  margin-top: 10px;
}

/* Header: logo and name go home; the theme button shows a sun in dark mode and a moon in light mode. */
header .home {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
header .home:hover .name {
  color: var(--brass-2);
}
#modebtn .sun {
  display: none;
}
:root:not([data-mode="light"]) #modebtn .sun {
  display: block;
}
:root:not([data-mode="light"]) #modebtn .moon {
  display: none;
}

/* Stake panel (dues step): the coins sit on a plate beside the price list. */
.dues {
  grid-template-columns: minmax(0, 1fr) 230px;
  align-items: start;
  gap: clamp(20px, 3vw, 40px);
  max-width: 980px;
}
.stake {
  position: sticky;
  top: 24px;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 20px 18px 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brass) 7%, transparent),
    transparent
  );
  text-align: center;
}
.stake-k {
  margin: 0;
  color: var(--brass);
}
.stack {
  position: relative;
  width: 150px;
  height: 190px;
}
.stack .plate {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 132px;
  height: 22px;
  margin-left: -66px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--brass) 26%, transparent),
    transparent
  );
}
.stack .ghost {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 96px;
  height: 26px;
  margin-left: -48px;
  border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--brass) 55%, transparent);
  transition: opacity 0.3s;
}
.stack.filled .ghost {
  opacity: 0;
}
.stack .coin {
  width: 96px;
  height: 26px;
  margin-left: -48px;
  transform: translateX(var(--dx, 0)) rotate(var(--rot, 0deg));
  background: linear-gradient(180deg, #f7e7b8, #d6b877 45%, #98773a);
  box-shadow:
    0 3px 0 #6f5420,
    0 8px 14px #0006,
    inset 0 1px 0 #fff9;
}
.stack .coin::after {
  inset: 4px 14px;
  border-color: #fff6;
}
@keyframes drop {
  from {
    transform: translate(var(--dx, 0), -150px) rotateX(60deg);
    opacity: 0;
  }
}
.amount {
  font: 800 28px/1.1 var(--sans);
  letter-spacing: -0.02em;
  color: var(--brass-2);
  margin-top: 6px;
}
.amount small {
  display: block;
  margin-top: 6px;
  font: 500 13px/1.45 var(--sans);
  color: var(--soft);
  letter-spacing: 0;
}
.amount > span:only-child,
.amount span + small:last-child {
}
[data-mode="light"] .stack .coin {
  box-shadow:
    0 3px 0 #8a6a2c,
    0 8px 14px #5a4a2a33,
    inset 0 1px 0 #fff9;
}
/* Phones and tablets: the stake becomes a slim strip pinned above the list, so the coins
   stack up in view whichever amount you tap. */
@media (max-width: 860px) {
  .dues {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .stake {
    order: -1;
    position: sticky;
    top: calc(8px + env(safe-area-inset-top, 0px));
    z-index: 5;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
      "stack label"
      "stack amount";
    justify-items: start;
    align-items: center;
    column-gap: 16px;
    row-gap: 2px;
    padding: 10px 16px;
    border-radius: 16px;
    background: var(--menu);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px #0004;
    text-align: left;
  }
  .stake-k {
    grid-area: label;
    align-self: end;
    font-size: 10.5px;
  }
  .dues .stack {
    display: block;
    grid-area: stack;
    width: 150px;
    height: 190px;
    zoom: 0.42;
  }
  .stake .amount,
  .stake .stake-k {
    justify-self: start;
    text-align: left;
  }
  .amount {
    grid-area: amount;
    align-self: start;
    margin-top: 0;
    font-size: 22px;
  }
  .amount small {
    margin-top: 2px;
    font-size: 12px;
  }
}
.nowrap {
  white-space: nowrap;
}
/* Public/private: a live board row. */
.visprev {
  margin: 18px 0 26px;
  max-width: 640px;
}
.visprev .caps {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--soft);
}
.brow {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--cream) 4%, transparent);
}
.brow .av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 16px var(--sans);
  color: var(--on-accent, #111);
  background: linear-gradient(135deg, var(--brass-2), var(--brass));
}
.brow .who {
  min-width: 0;
  display: grid;
}
.brow .who b {
  font: 700 15px/1.3 var(--sans);
  color: var(--cream);
}
.brow .g {
  font-size: 14px;
  color: var(--soft);
  overflow-wrap: anywhere;
  transition: opacity 0.3s;
}
.brow .g.hid {
  font-style: italic;
  opacity: 0.7;
}
.brow .due {
  font: 800 16px var(--sans);
  color: var(--brass-2);
  font-variant-numeric: tabular-nums;
}
[data-mode="light"] .brow .due {
  color: #6f5220;
}
/* After reading the receipt, the next step sits right there. */
.receipt-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.receipt-go span {
  font-size: 14px;
  color: var(--soft);
}
.nothing {
  scroll-margin-top: 16px;
}
@media (max-width: 860px) {
  [data-mode="light"] .step.on .go[data-next] {
    box-shadow:
      0 10px 30px #0003,
      0 0 0 6px #f4f0e7d9;
  }
  /* The receipt's own button sits on paper: no sticky ring there. */
  .step.on .nothing .go[data-next] {
    position: static;
    box-shadow:
      0 12px 30px #0003,
      inset 0 1px 0 #fff6;
  }
  .receipt-go .go {
    width: 100%;
    justify-content: center;
  }
}
.nothing .receipt-go span {
  color: #6b604d;
}
/* After claiming: two clear next steps instead of a dead end. */
.after {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.after-card {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--cream);
  text-decoration: none;
  background: color-mix(in srgb, var(--cream) 4%, transparent);
  transition:
    border-color 0.3s,
    transform 0.3s;
}
.after-card:hover {
  border-color: var(--brass);
  transform: translateY(-2px);
}
.after-card b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 700 16px var(--sans);
}
.after-card b .arr {
  width: 18px;
  height: 18px;
  color: var(--brass);
}
.after-card span {
  font-size: 14px;
  color: var(--soft);
}
/* iPad portrait: the desktop scale reads small at arm's length; enlarge the whole column. */
@media (min-width: 700px) and (max-width: 1100px) and (orientation: portrait) {
  main,
  header,
  footer {
    zoom: 1.18;
  }
}
@media (min-width: 700px) and (max-width: 1100px) and (orientation: portrait) {
  html body main h1 {
    font-size: 54px;
  }
  html body main h2 {
    font-size: 42px;
  }
  html body main .lede {
    font-size: 19px;
  }
}
.note:empty {
  display: none;
}
/* Sunrise, gradually: a hint of warmth from the money question, then the sun at the end. */
body[data-at="3"]::before {
  opacity: 0.12;
}
body[data-at="4"]::before {
  opacity: 0.24;
}
body[data-at="5"]::before {
  opacity: 0.4;
}
body.dawn::before {
  opacity: 1;
}
.sunrise {
  --size: min(64vmin, 560px);
  position: fixed;
  left: 50%;
  bottom: 0;
  width: var(--size);
  height: var(--size);
  margin-left: calc(var(--size) / -2);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    circle,
    #fff6e0 0%,
    #ffe2a8 18%,
    #ffc27a 34%,
    #ff9f6a40 52%,
    transparent 70%
  );
  filter: blur(4px);
  opacity: 0;
  transform: translateY(92%);
  transition:
    transform 7s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 3s ease;
}
body[data-at="4"] .sunrise {
  opacity: 0.18;
  transform: translateY(86%);
}
body[data-at="5"] .sunrise {
  opacity: 0.35;
  transform: translateY(78%);
}
body.dawn .sunrise {
  opacity: 0.85;
  transform: translateY(56%);
}
[data-mode="light"] .sunrise {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .sunrise {
    transition: none;
  }
}

/* Public or private: two cards, each showing its own board row. */
.vis .vopt {
  display: grid;
  align-content: start;
  gap: 8px;
  text-align: left;
}
.vis .vopt .vhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.vis .vopt .tick {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  transition:
    background 0.3s,
    border-color 0.3s;
}
.vis .vopt[aria-checked="true"] .tick {
  border-color: var(--brass);
  background:
    url("/noir/check.svg") center / 13px no-repeat,
    color-mix(in srgb, var(--brass) 22%, transparent);
}
.vis .vopt .vline {
  display: block;
  color: var(--soft);
  font-size: 15px;
  line-height: 1.45;
}
.vis .vopt .eyes {
  display: none;
}
.vis .vopt .brow.mini {
  margin-top: 6px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  opacity: 0.55;
  transition: opacity 0.3s;
}
.vis .vopt[aria-checked="true"] .brow.mini {
  opacity: 1;
}
.vis .vopt .brow.mini .av {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
.vis .vopt .brow.mini .who b {
  font: 700 14px/1.3 var(--sans);
  color: var(--cream);
}
.vis .vopt .brow.mini .g {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vis .vopt .brow.mini .g.hid {
  font-style: italic;
}
.vis .vopt .brow.mini .due {
  font: 800 14px var(--sans);
  color: var(--brass-2);
}
[data-mode="light"] .vis .vopt .brow.mini .due {
  color: #6f5220;
}
.visnote {
  margin: 12px 0 22px;
  font-size: 14px;
  color: var(--soft);
}

/* Bring your own excuse. */
.chip.own {
  border-style: dashed;
}
.ownex {
  margin: 14px 0 6px;
  max-width: 560px;
}
.ownex[hidden] {
  display: none;
}
.ownex label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--brass);
}
.ownex .ownrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ownex input {
  flex: 1 1 240px;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--cream) 5%, transparent);
  color: var(--cream);
  font: 500 17px var(--sans);
}
.ownex input:focus {
  outline: none;
  border-color: var(--brass);
}
.ownex .go {
  flex: none;
}
@media (max-width: 860px) {
  .finalcol > .after {
    order: 4;
  }
}
/* Phones: show every goal idea (no hidden sideways scroll), in compact wrapped chips. */
@media (max-width: 860px) {
  #ideas {
    flex-wrap: wrap;
    overflow-x: visible;
    margin-inline: 0;
    padding: 0;
    gap: 8px;
  }
  #ideas .chip {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 14px;
  }
}
/* Phones: the opening button fits its words; the receipt link sits beside it. */
@media (max-width: 860px) {
  .step[data-step="0"] .go[data-next]:not(.nothing .go) {
    position: static;
    width: auto;
    min-height: 52px;
    padding: 0 24px;
    gap: 14px;
    box-shadow:
      0 10px 24px #0005,
      inset 0 1px 0 #fff6;
    vertical-align: middle;
  }
  .step[data-step="0"] #what {
    display: block;
    width: fit-content;
    margin: 20px 0 0;
  }
}
/* Small phones: keep both visibility cards and the button on one screen. */
@media (max-width: 420px) {
  .vis .vopt {
    padding: 16px 16px 14px;
    gap: 6px;
  }
  .vis .vopt .vhead b {
    font-size: 22px;
  }
  .vis .vopt .vline {
    font-size: 14px;
    line-height: 1.4;
  }
  .vis .vopt .brow.mini {
    margin-top: 4px;
    padding: 8px 10px;
  }
  .vis .vopt .brow.mini .who b {
    white-space: nowrap;
  }
  .visnote {
    margin: 10px 0 14px;
    font-size: 13px;
  }
}
/* Question 1: the goal box footer turns into the first step; it keeps its height, so nothing moves. */
.goalbox .meta {
  align-items: flex-start;
}
.goalbox .meta #count {
  flex: none;
}
.goalbox .hint b {
  display: none;
  margin-right: 8px;
  color: var(--brass-2);
  font-weight: 700;
}
.goalbox .hint.on b {
  display: inline;
}
.goalbox .hint.on span {
  color: var(--cream);
}
@media (max-width: 860px) {
  .goalbox .meta {
    min-height: 2.9em;
    line-height: 1.45;
  }
  .goalbox textarea {
    min-height: 2.4em;
  }
}
/* Default typeface: Manrope, for clear reading on phones. */
[data-font="manrope"] {
  --display: "Manrope", system-ui, sans-serif;
  --sans: "Manrope", system-ui, sans-serif;
  --em-font: "Manrope", system-ui, sans-serif;
  --em-style: normal;
  --em-weight: 800;
  --display-weight: 800;
  --display-track: -0.035em;
  --dscale: 0.9;
}
/* The character count sits beside "I will", giving the first step the full width. */
.goalbox {
  position: relative;
}
.goalbox .meta #count {
  position: absolute;
  top: 14px;
  right: 18px;
  font: 500 12px var(--sans);
  color: var(--soft);
}
@media (max-width: 380px) {
  .goalbox .meta {
    min-height: 4.35em;
  }
}
/* Card editor: the board setting and the card are separate choices. */
.editor .scope {
  display: grid;
  gap: 6px;
  margin: 2px 0 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--soft);
}
.editor .scope-pill {
  justify-self: start;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
  border-radius: 999px;
  font: 700 11px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-2);
}
[data-mode="light"] .editor .scope-pill {
  color: #6f5220;
}
@media (max-width: 860px) {
  /* Two lines reserved: picking a longer suggestion doesn't push the button down. */
  .goalbox textarea {
    min-height: 76px;
  }
}
/* Receipt: a quiet way into the founder's note for the curious and the sceptical. */
.nothing .why-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font: 650 14px var(--sans);
  color: #6f5220;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.nothing .why-link .arr {
  width: 14px;
  height: 14px;
}
/* Music: a line-drawn note; its sound waves appear and pulse only while music plays. */
#music .mnote {
  width: 20px;
  height: 20px;
}
#music .wave {
  opacity: 0;
  transition: opacity 0.3s;
}
#music[aria-pressed="true"] {
  color: var(--on-accent);
}
#music[aria-pressed="true"] .wave {
  opacity: 1;
  animation: wave 1.6s ease-in-out infinite;
}
#music[aria-pressed="true"] .w2 {
  animation-delay: 0.3s;
}
@keyframes wave {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #music[aria-pressed="true"] .wave {
    animation: none;
  }
}
/* Header links: "Why" sits beside "Members"; the current page is marked. */
header .navwhy {
  margin-left: 4px;
}
header .signin[aria-current="page"] {
  color: var(--brass-2);
}
/* Round header buttons keep their shape on small phones, with the icon centred. */
header .iconbtn {
  flex: none;
  display: grid;
  place-items: center;
}
#music .mnote {
  width: 22px;
  height: 22px;
  display: block;
}
/* Phones: logo, music, light/dark, Why and Members all fit on one line. */
@media (max-width: 430px) {
  header {
    gap: 8px;
    padding-inline: 16px;
  }
  header .iconbtn {
    width: 38px;
    height: 38px;
  }
  header .home {
    gap: 8px;
  }
  header .mark {
    width: 30px;
    height: 30px;
  }
  header .name {
    letter-spacing: 0.2em;
    font-size: 17px;
  }
  header .signin {
    margin-left: 2px;
    font-size: 14px;
  }
}
@media (max-width: 340px) {
  header .name {
    display: none;
  }
}
/* Header links are plain text: no underline (it read as "selected"). The current page is gold;
   hover brightens to gold too. */
header .signin {
  border-bottom: 0;
  text-decoration: none;
  transition: color 0.2s;
}
header .signin:hover,
header .signin:focus-visible {
  color: var(--brass-2);
}
/* The way into the founder's note: a quiet gold pill in the header (the old "Founding list open"
   status moved into the hero kicker). */
.whypill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px 0 12px;
  border: 1px solid color-mix(in srgb, var(--brass) 60%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brass) 10%, transparent);
  color: var(--brass-2);
  font: 650 13.5px var(--sans);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.25s,
    border-color 0.25s;
}
.whypill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 10px var(--brass);
  animation: wp-pulse 2.4s ease-in-out infinite;
}
.whypill:hover,
.whypill:focus-visible {
  background: color-mix(in srgb, var(--brass) 20%, transparent);
  border-color: var(--brass);
}
.whypill .wp-arr {
  width: 14px;
  height: 14px;
}
.whypill .short {
  display: none;
}
[data-mode="light"] .whypill {
  color: #6f5220;
}
@keyframes wp-pulse {
  50% {
    opacity: 0.35;
  }
}
@media (max-width: 700px) {
  .whypill .long {
    display: none;
  }
  .whypill .short {
    display: inline;
  }
  .whypill {
    padding: 0 10px;
    gap: 6px;
  }
  .whypill .wp-arr {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .whypill::before {
    animation: none;
  }
}
/* Small phones with the Why pill: the crest alone carries the brand (the hero says "Vanar"). */
@media (max-width: 480px) {
  header:has(.whypill) .name {
    display: none;
  }
}
/* Live payments: the final screen's one next step. */
.finalcol .startpay {
  margin: 4px 0 22px;
  text-decoration: none;
}
@media (max-width: 860px) {
  .finalcol .startpay {
    width: 100%;
    justify-content: center;
  }
}
/* Phones: without the music button there is room for the full "Why pay for nothing?". */
@media (max-width: 700px) {
  .whypill .long {
    display: inline;
  }
  .whypill .short {
    display: none;
  }
  .whypill {
    padding: 0 12px;
    font-size: 13px;
  }
}
@media (max-width: 350px) {
  .whypill .long {
    display: none;
  }
  .whypill .short {
    display: inline;
  }
}
@media (max-width: 380px) {
  header:has(.whypill) {
    gap: 6px;
  }
  .whypill {
    padding: 0 10px;
    gap: 6px;
    font-size: 12.5px;
  }
}
/* Some iPhone Safari versions under-measure a grid inside a flex column (flex-basis 0), so the
   main column came out shorter than its content and the footer drew over the Concierge. The
   main column may grow but never shrink below its content; the footer never shrinks. */
main {
  flex: 1 0 auto;
}
body > header,
body > footer,
.policy-foot {
  flex-shrink: 0;
}
header .signin {
  white-space: nowrap;
}
/* Phones: content sets the height (no stretched gap under the Concierge), the Concierge is a
   compact band with equal space above and below, and the fine print is one slim row. */
@media (max-width: 860px) {
  main {
    flex: 0 0 auto;
    align-content: start;
    padding-bottom: 0;
    gap: 0;
  }
  main > .stage,
  main > .step,
  main > section:first-child {
    margin-bottom: 0;
  }
  .concierge {
    margin-top: 28px;
    padding-block: 16px;
    gap: 14px;
    grid-template-columns: 52px 1fr;
  }
  .concierge .seal {
    width: 52px;
  }
  .remark q {
    font-size: 16px;
  }
  .remark .by {
    margin-top: 4px;
  }
  footer {
    padding-block: 14px 18px;
  }
  footer summary {
    padding-block: 6px;
  }
}
@media (max-width: 860px) {
  .concierge .seal {
    height: 52px;
    aspect-ratio: 1;
    flex: none;
  }
}
/* Phones: fill the screen with no empty strip under the fine print. The hero sits at the top,
   the Concierge and fine print sit at the bottom, and any spare height is breathing room
   between them. On short screens everything simply stacks. */
@media (max-width: 860px) {
  main {
    flex: 1 0 auto;
    grid-template-rows: auto 1fr;
  }
  main > .concierge {
    align-self: end;
  }
}
/* A disabled primary button still reads as the button: a solid, muted gold (never see-through,
   since on phones it floats over the page), with a clear "not yet" cursor. */
.go:disabled,
[data-mode="light"] .go:disabled {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brass) 38%, transparent),
      color-mix(in srgb, var(--brass) 26%, transparent)
    ),
    var(--menu);
  color: color-mix(in srgb, var(--cream) 78%, transparent);
  border-color: color-mix(in srgb, var(--brass) 45%, transparent);
  box-shadow: none;
  cursor: not-allowed;
}
[data-mode="light"] .go:disabled {
  color: #5c4a26;
}
/* Soft cross-fade between pages where supported (e.g. dark homepage → light reading page);
   other browsers navigate normally. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}
[data-mode="light"] header .signin[aria-current="page"],
[data-mode="light"] header .signin:hover {
  color: #6f5220;
}
/* Question 2: a manual next step under the excuses. */
.excuse-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 22px;
}
.chip[aria-checked="true"] {
  border-color: var(--brass);
  color: var(--brass-2);
}
[data-mode="light"] .chip[aria-checked="true"] {
  color: #6f5220;
}
.ownex input {
  width: 100%;
}
/* Question 4: one switch, one board row that changes in front of you. */
.visbox {
  display: grid;
  gap: 12px;
  max-width: 560px;
  margin: 6px 0 26px;
}
.vswitch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cream) 5%, transparent);
}
.vswitch .thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brass-2), var(--brass));
  box-shadow: 0 6px 18px #0004;
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.vswitch[data-on="public"] .thumb {
  transform: translateX(100%);
}
.vswitch .vopt {
  position: relative;
  z-index: 1;
  min-height: 46px;
  border: 0;
  background: none;
  color: var(--cream);
  font: 700 16px var(--sans);
  cursor: pointer;
  transition: color 0.3s;
}
.vswitch .vopt[aria-checked="true"] {
  color: var(--on-accent);
}
.vis-says {
  margin: 2px 0 6px;
  min-height: 3em;
  font-size: 15px;
  color: var(--soft);
}
.vis-cap {
  margin: 0;
  font-size: 11px;
  color: var(--soft);
}
.vrow {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  border-color: color-mix(in srgb, var(--brass) 40%, transparent);
}
.vrow .g {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: normal;
  color: var(--cream);
  transition:
    filter 0.35s,
    opacity 0.35s;
}
.vrow .g.hid {
  color: var(--soft);
  font-style: italic;
}
.vrow .g .lock {
  width: 14px;
  height: 14px;
  flex: none;
}
.vrow.flash {
  animation: vflash 0.9s ease-out;
}
@keyframes vflash {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brass) 55%, transparent);
    border-color: var(--brass);
  }
  100% {
    box-shadow: 0 0 0 14px transparent;
  }
}
.vrow.flash .g:not(.hid) {
  animation: vreveal 0.6s ease-out;
}
@keyframes vreveal {
  from {
    filter: blur(6px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vswitch .thumb,
  .vrow.flash,
  .vrow.flash .g {
    transition: none;
    animation: none;
  }
}
/* Live payments: the billing terms beside "Continue to payment" (clickwrap). */
#signin-note {
  font-size: 13.5px;
  line-height: 1.55;
}
#signin-note a {
  color: var(--brass-2);
  text-underline-offset: 3px;
}
.auth-msg:empty {
  min-height: 0;
  margin: 0;
}
/* Signed in: breathing room between the email line and the payment button. */
#auth-signed .signed-as {
  margin-bottom: 16px;
}
/* The brand sign-off, as at the end of every video: "Not for everyone. On purpose." */
.signoff {
  margin: 0;
  padding: 28px 0 22px;
  text-align: center;
  font: 600 clamp(18px, 2vw, 22px) / 1.3 var(--sans);
  color: var(--soft);
  letter-spacing: -0.01em;
}
/* Always the videos' gold serif italic, whatever the site's headline accent font is. */
.signoff em {
  font:
    italic 600 1.08em/1 "Fraunces",
    Georgia,
    serif;
  color: var(--brass);
  letter-spacing: -0.01em;
}
main > .signoff {
  padding-top: 48px;
}
[data-mode="light"] .signoff em {
  color: var(--brass-3);
}
/* Homepage footer: the fine print on the left, the sign-off on the right, one slim row.
   Opening the fine print gives it the full width; the sign-off drops below. */
footer:has(> .signoff) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 24px;
  padding-block: 6px;
}
footer > .signoff {
  order: 2;
  padding: 0;
  font-size: 17px;
}
footer:has(> .signoff) > details {
  order: 1;
}
footer:has(> .signoff) > details[open] {
  flex-basis: 100%;
}
footer:has(> .signoff) > details[open] + .signoff,
footer:has(> details[open]) > .signoff {
  padding-bottom: 12px;
}
@media (max-width: 560px) {
  footer:has(> .signoff) {
    column-gap: 12px;
  }
  footer > .signoff {
    font-size: 14px;
  }
}
/* "FAQs" on its own line below "The fine print" (founder pick, 4 Oct 2026). Both are at least
   44 px tall so they are easy to tap; only the words are links, not the whole row. */
footer:has(> .signoff) > .faq-row {
  order: 3;
  flex-basis: 100%;
  margin: 0;
}
footer > .faq-row {
  margin: 0;
}
.faq-row .faq-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 12px;
  color: var(--cream);
  text-decoration: none;
}
.faq-row .faq-link:hover,
.faq-row .faq-link:focus-visible {
  color: var(--brass-2);
}
footer:has(> .signoff) summary {
  min-height: 44px;
}
.faq-row.center {
  text-align: center;
  margin: -8px 0 32px;
}
/* Light paper: the gold ring and letters around Monk in deeper brass, a touch heavier, so they
   hold their own next to the dark medallion (9 Oct 2026). */
[data-mode="light"] .crest {
  --crest: var(--brass-3);
}
[data-mode="light"] .crest .c-text {
  font-weight: 700;
}
[data-mode="light"] .crest .c-rings circle {
  stroke-width: 2;
}
[data-mode="light"] .crest .c-outer {
  stroke-width: 1.3;
}