/* Willful — the site, on the app's own ground.
   The app was rebuilt in 2026-09 onto NIGHT: warm ink, near-black, with
   champagne doing the accent work. The site had been carrying the retired
   "Trust & Heritage" scheme -- navy #0B1D3A, gold #C9A227, ivory -- so the two
   no longer looked like one product.

   EVERY value below is copied from `mobile/src/components/ui.tsx`, the app's
   own token block. None is eyedropped, and none is invented: if a colour is
   needed here that Night does not define, it is derived from a Night token and
   said so. Gold #C9A227 is gone entirely -- Night's accent is champagne
   #D9C69B, which is a lighter, warmer colour and not interchangeable with it. */

:root {
  /* --- straight from Night --- */
  --ground:      #0A0908;            /* night.ground -- the body */
  --ink:         #EFF3EF;            /* night.ink */
  --mut:         #9E958A;            /* night.mut -- warm, NOT a blue-grey */
  --acc:         #D9C69B;            /* night.acc -- champagne */
  --acc-ink:     #0B1410;            /* night.ctaink -- ink that sits ON champagne */
  --sheet:       #14110C;            /* night.sheet -- lifted surfaces, inputs */
  --line:        rgba(217, 198, 155, 0.30);  /* night.line */
  --rim:         rgba(217, 198, 155, 0.34);  /* night.rim */
  --chip:        rgba(217, 198, 155, 0.11);  /* night.chip */
  --callout:     rgba(217, 198, 155, 0.07);  /* night.callout -- the one approved fill */
  --glow:        rgba(217, 198, 155, 0.5);   /* night.glow -- light on the mark's edges */
  --danger:      #E07A5F;            /* night.error -- 6.43:1 on the ground */
  --green:       #1B4A3A;            /* night.green -- brand green */

  /* --- derived, because Night has no web equivalent --- */
  /* A recessed band. Night's ground is flat, so this is the sheet pulled
     under it rather than a second ground colour. */
  --ground-deep: #060505;
  /* Success text. Night defines no success colour; the brand green is 1.7:1
     on this ground and unreadable, so this is that green lifted until it
     clears AA, the same move `fieldline` makes inside the app. */
  --success:     #7FBF9E;

  --measure: 40rem;  /* wide enough that the display h1 breaks into two clean lines */
  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-quint */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A quiet vignette so the drench has depth rather than reading as flat fill. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(217, 198, 155, 0.07), transparent 60%),
    radial-gradient(100% 60% at 50% 110%, rgba(27, 74, 58, 0.10), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
main, footer { position: relative; z-index: 1; }

/* Every link takes the accent. This is a base rule rather than a per-block one
   because the footer's "Privacy Policy" and "Security" had NO colour rule at
   all and were rendering in the browser's default link blue -- 2.12:1 on this
   ground, and worse than that on the navy it replaced. A link that inherits
   nothing should still be legible, so the default lives here and the blocks
   that want something else (.social) override it. */
a {
  color: var(--acc);
  text-underline-offset: 0.2em;
}
a:hover, a:focus-visible { color: var(--ink); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--acc);
  color: var(--ground);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; z-index: 10; }

/* ---------- Hero ---------- */

.hero {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(3rem, 9vh, 6rem) 1.5rem clamp(1.5rem, 4vh, 2.5rem);
  text-align: center;
}

/* The mark, as the app draws it on its first screen: bare on the ground with
   the wordmark beneath, both champagne, nothing behind them. It used to be a
   square JPEG presented as a ringed seal, because the artwork was a rectangle
   that could not sit on the page unaided. The mark is vector now and takes
   `currentColor`, so the ring is not only unnecessary -- it is wrong, since
   the app shows no ring.

   Kabir's 2026-09 mark replaced the hexagon crest here. It is 1.405:1 --
   WIDER THAN TALL -- where the crest was square, so the two sizing steps
   below are what keep the swap from moving the page. */
.mark {
  /* The square the crest used to occupy. */
  --slot: clamp(84px, 20vw, 116px);
  /* The crest's ink filled 87.46% of that square's width (its path spanned
     x 6.27..93.73 of a 100 box); the mark's viewBox is tight to its ink.
     Scaling by that ratio hands the mark the crest's exact ink width, which
     is the swap the app makes -- Crest size 112 becomes Mark size 98. */
  --mark-w: calc(var(--slot) * 0.8746);
  /* The mark is SHORTER than the slot. Splitting the leftover above and below
     keeps the full square reserved, so the wordmark, the kicker and the
     heading under it do not rise. The app reserves it the same way, for the
     same reason. */
  --lead: calc((var(--slot) - var(--mark-w) / 1.4046) / 2);
  display: block;
  width: var(--mark-w);
  height: auto;
  margin: var(--lead) auto calc(clamp(0.9rem, 2vh, 1.25rem) + var(--lead));
  color: var(--acc);
  /* The glow the app puts on the mark's edges (night.glow), at the strength a
     screen this size can carry without haloing. */
  filter: drop-shadow(0 0 22px rgba(217, 198, 155, 0.18));
}

.wordmark {
  display: block;
  width: auto;
  height: clamp(26px, 5.5vw, 34px);
  margin: 0 auto clamp(1.75rem, 4vh, 2.5rem);
  color: var(--acc);
}

.kicker {
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acc);
}

h1 {
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 1.35rem + 3.4vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.lede {
  margin: 0 auto;
  max-width: 30rem;
  color: var(--mut);
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  text-wrap: pretty;
}

/* ---------- Waitlist ---------- */

.signup {
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  padding: clamp(1.5rem, 4vw, 2rem);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
}

.signup h2 {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  line-height: 1.2;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.signup-sub {
  margin: 0 0 1.5rem;
  color: var(--mut);
  font-size: 0.95rem;
}

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }

label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mut);
}

input[type="email"], input[type="tel"], input[type="text"] {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  font: inherit;
  font-size: 1rem; /* ≥16px stops iOS zooming the viewport on focus */
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
input::placeholder { color: #8A8175; } /* night.chev -- 4.6:1 on --sheet */
input:hover { border-color: var(--rim); }
input:focus-visible {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(217, 198, 155, 0.25);
}
input[aria-invalid="true"] { border-color: var(--danger); }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

button[type="submit"] {
  width: 100%;
  padding: 0.9rem 1.25rem;
  background: var(--acc);
  color: var(--acc-ink);
  border: 1px solid transparent;
  border-radius: 9px;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
              box-shadow 0.18s var(--ease);
}
button[type="submit"]:hover:not(:disabled) {
  background: #E8D9B4;  /* champagne, lifted for :hover */
  box-shadow: 0 10px 24px -12px rgba(217, 198, 155, 0.55);
}
button[type="submit"]:active:not(:disabled) { transform: translateY(1px); }
button[type="submit"]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
button[type="submit"]:disabled { opacity: 0.6; cursor: progress; }

.status {
  margin: 0.9rem 0 0;
  min-height: 1.4em;      /* reserve the line so success/error never shifts layout */
  font-size: 0.92rem;
  font-weight: 500;
}
.status.is-error   { color: var(--danger); }
.status.is-success { color: var(--success); }

.promise {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  color: var(--mut);
}

/* ---------- Family ---------- */
/* Full-bleed photograph. The scrim is doing real work: it pulls the image's edges
   into the ground so the band reads as part of the page, and darkens the lower half
   enough for the overlaid copy to clear 4.5:1. */

.family {
  position: relative;
  isolation: isolate;
  min-height: clamp(28rem, 76vh, 42rem);
  display: grid;
  align-items: end;
}
.family > picture,
.family > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.family > picture img {
  object-fit: cover;
  /* keep the two faces in frame as the band narrows */
  object-position: 38% 32%;
}
.family::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Both edges dissolve into the ground so the band has no hard seam, while the
     middle stays clear enough to keep the photograph's warm window light. */
  background:
    linear-gradient(to bottom,
      var(--ground) 0%,
      rgba(10, 9, 8, 0.55) 12%,
      rgba(10, 9, 8, 0.12) 34%,
      rgba(10, 9, 8, 0.58) 68%,
      rgba(10, 9, 8, 0.92) 88%,
      var(--ground) 100%),
    linear-gradient(to right, rgba(10, 9, 8, 0.5), transparent 38%, transparent 62%, rgba(10, 9, 8, 0.5));
}

.family-copy {
  max-width: 36rem;
  margin: 0 auto;
  padding: 0 1.5rem clamp(2.25rem, 6vh, 3.25rem);
  text-align: center;
}
.family-copy h2 {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.family-copy p {
  margin: 0;
  color: #D8D2C7;           /* lifted off --mut: it sits on photo, not flat ground */
  text-wrap: pretty;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* ---------- Proof ---------- */
/* Three statements separated by hairlines rather than boxed into repeated cards. */

.ico {
  width: 26px;
  height: 26px;
  color: var(--acc);
  margin-bottom: 0.85rem;
  display: block;
}

.proof {
  max-width: 64rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 4.5rem) 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.proof-item h3 {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.3;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.proof-item p {
  margin: 0;
  color: var(--mut);
  font-size: 0.95rem;
  text-wrap: pretty;
}

/* ---------- Candour ---------- */

.candour {
  background: var(--ground-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(2.5rem, 7vh, 4rem) 1.5rem;
}
.candour p {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
  font-family: 'Spectral', Georgia, serif;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  line-height: 1.5;
  text-wrap: pretty;
}
.candour em { color: var(--acc); font-style: italic; }

/* ---------- Footer ---------- */

footer {
  padding: 2.5rem 1.5rem 3rem;
  text-align: center;
  color: var(--mut);
  font-size: 0.85rem;
}
footer p { margin: 0 0 0.4rem; }
/* No opacity here. `--mut` is already the quiet voice, tuned to stay legible
   on this ground; dimming it a further 25% took 13px fine print to 4.19:1,
   under AA. If it needs to recede further it should get its own token, not a
   filter over one that was measured. */
footer .fine { font-size: 0.8rem; max-width: 30rem; margin-inline: auto; }

/* Social links. Icons inherit currentColor and warm to champagne on hover, so the
   footer stays quiet until you reach for it. Tap targets are 44px, the minimum
   comfortable size on touch, even though the glyph itself is smaller. */
.social {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.9rem 0 1.1rem;
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--mut);
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.social a:hover,
.social a:focus-visible {
  color: var(--acc);
  background: var(--callout);
}
.social a:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
.social svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

/* ---------- Motion ----------
   Content is visible by default; these keyframes animate FROM a shifted state on
   load, so if animation never runs (headless render, old engine) nothing is hidden. */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes press {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: none; }
}

.seal   { animation: press 0.9s var(--ease) both; }
.kicker { animation: rise 0.7s var(--ease) 0.14s both; }
h1      { animation: rise 0.7s var(--ease) 0.22s both; }
.lede   { animation: rise 0.7s var(--ease) 0.32s both; }
.signup { animation: rise 0.7s var(--ease) 0.42s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Nominee key explainer (/nomineekey) ---------- */

/* Read cold, on a phone, often by someone who is worried. A single measured
   column, generous line height, nothing that needs tapping to reveal. */
.page {
  max-width: 42rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 8vh, 4.5rem) 1.5rem 1rem;
}

.page-head { text-align: center; }
.page-head h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.9rem); }
.page-head .lede { margin-inline: auto; max-width: 34rem; }

/* The one instruction, lifted out of the prose so it survives skim-reading. */
.callout {
  margin: clamp(2rem, 5vh, 3rem) 0;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.callout h2 {
  margin: 0 0 0.75rem;
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--acc);
}
.callout p { margin: 0 0 0.75rem; line-height: 1.65; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }
.callout-sub { color: var(--mut); font-size: 0.95rem; }

.faq h2 {
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 0 1.5rem;
}
.faq h3 {
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 2rem 0 0.5rem;
  color: var(--acc);
  text-wrap: balance;
}
.faq p,
.faq li {
  margin: 0 0 0.85rem;
  color: var(--mut);
  line-height: 1.7;
  text-wrap: pretty;
}
.faq strong { color: var(--ink); }
.faq ul { margin: 0 0 0.85rem; padding-left: 1.15rem; }
.faq li { margin-bottom: 0.4rem; }
.faq li::marker { color: var(--acc); }

.page a { color: var(--acc); text-underline-offset: 0.2em; }
.page a:hover, .page a:focus-visible { color: var(--ink); }

.backlink {
  margin: clamp(2.5rem, 6vh, 3.5rem) 0 0;
  text-align: center;
  font-size: 0.9rem;
}

/* ---------- Guides (/guides) ----------
   Long-form articles reusing the .page / .faq column from the nominee-key
   explainer, which was already built for cold reading on a phone. Only the
   pieces that column does not have are defined here. */

.crumb {
  max-width: var(--measure);
  margin: 0 auto 1.25rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mut);
}

/* Trust furniture. A reader checking whether an article is current looks here
   first, so it sits under the lede rather than at the foot. */
.artmeta {
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  color: var(--mut);
}

/* The hub. Whole-card links: the target is the card, not the headline, because
   most of this traffic arrives on a phone. */
.guidelist { list-style: none; margin: clamp(2rem, 5vh, 3rem) 0 0; padding: 0; }
.guidelist li { margin: 0 0 1rem; }
.guidelist a {
  display: block;
  padding: 1.4rem 1.5rem;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.guidelist a:hover,
.guidelist a:focus-visible { border-color: var(--rim); background: var(--callout); }
.guidelist h2 {
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.5rem;
  color: var(--acc);
  text-wrap: balance;
}
.guidelist p { margin: 0 0 0.75rem; color: var(--mut); line-height: 1.6; text-wrap: pretty; }
.guidemeta { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut); }

/* Citations are the whole credibility argument on these pages, so they are
   styled as content rather than tucked away as fine print. */
.guide-sources { margin: clamp(2.5rem, 6vh, 3.5rem) 0 0; }
.guide-sources h2 {
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}
.guide-sources ul { margin: 0; padding-left: 1.15rem; }
.guide-sources li { margin-bottom: 0.5rem; color: var(--mut); font-size: 0.92rem; line-height: 1.6; }
.guide-sources li::marker { color: var(--acc); }
.guide-sources a { color: var(--mut); text-underline-offset: 0.2em; }
.guide-sources a:hover, .guide-sources a:focus-visible { color: var(--acc); }

.guide-cta {
  margin: clamp(2.5rem, 6vh, 3.5rem) 0 0;
  padding: 1.75rem 1.5rem;
  background: var(--callout);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
}
.guide-cta h2 {
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}
.guide-cta p { margin: 0 0 0.75rem; color: var(--mut); line-height: 1.65; }
.guide-cta p:last-child { margin-bottom: 0; }
.cta-link { color: var(--acc); font-weight: 600; text-decoration: none; }
.cta-link:hover, .cta-link:focus-visible { text-decoration: underline; }

/* Said plainly and once. These pages describe law, and a reader arriving from
   search has no idea who is telling them. */
.guide-note {
  margin: 2rem 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--mut);
  text-align: center;
}

/* The homepage's guides band. Deliberately just the titles, one per line --
   cards competed with the waitlist and the headlines carry themselves. Sits
   before .candour so the vault line stays the page's last word. */
.reading {
  max-width: 52rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 4.5rem) 1.5rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.reading h2 {
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem);
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.reading-sub {
  margin: 0 auto clamp(1.5rem, 4vh, 2.25rem);
  max-width: 30rem;
  color: var(--mut);
  line-height: 1.65;
}

.reading-links { list-style: none; margin: 0; padding: 0; }
.reading-links li { margin: 0; }
/* inline-block so the hover rule underlines the text, not the full row. */
.reading-links a {
  display: inline-block;
  padding: 0.55rem 0;
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.18rem);
  line-height: 1.4;
  color: var(--acc);
  text-decoration: none;
  text-wrap: balance;
}
.reading-links a:hover,
.reading-links a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 0.22em; }

/* ---------- Contact (/contact) ----------
   A definition list of registration details. Two columns where there is room,
   stacked on a phone. The label column is fixed rather than auto so the values
   line up down the page -- a reviewer scanning for an address or a GSTIN reads
   a column, not a ragged edge. */

/* The number is the one thing this page exists to answer, so it is set at
   display size rather than as body copy with a <strong> round it. Tabular
   figures so the grouping stays even. */
.bignum {
  margin: 0 0 0.75rem;
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
}

.reg { margin: 0; }
.reg dt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mut);
  margin: 1.5rem 0 0.3rem;
}
.reg dt:first-child { margin-top: 0; }
.reg dd { margin: 0; line-height: 1.6; }
.reg-note { display: inline-block; margin-top: 0.3rem; font-size: 0.9rem; color: var(--mut); }

@media (min-width: 34rem) {
  .reg {
    display: grid;
    grid-template-columns: 11.5rem 1fr;
    column-gap: 1.5rem;
    row-gap: 1rem;
    align-items: baseline;
  }
  .reg dt { margin: 0; }
}