/* ==========================================================================
   Ask Aura — website stylesheet
   --------------------------------------------------------------------------
   Shares the BRAND with the Ask Aura app (mist grounds, plum type, indigo
   actions, one coral signal) so a visitor recognises the same product on the
   web and on their phone.

   It does NOT share the app's LAYOUT. The app prototype is a 390px phone
   surface: stacked cards, a bottom tab bar, glass chrome, everything
   thumb-first. A website is read on a 1400px screen by someone deciding
   whether to trust a stranger with something personal. That calls for wide
   editorial measures, a real typographic scale, generous whitespace and
   credibility placed high — not a phone mockup stretched sideways.

   Nor does it follow lovepsychicindi.com, which is a dark purple-and-gold
   treatment. This is deliberately its own thing.

   Colours are the sRGB conversions of the app's OKLch tokens, so the two
   surfaces are the same brand to the pixel.
   ========================================================================== */

:root {
  /* ── ground ── */
  --bg:        #F4F5FB;   /* mist */
  --bg-deep:   #EBEBF9;
  --surface:   #FFFFFF;
  --sunk:      #E9EDF2;

  /* ── type ── */
  --ink:       #332A49;   /* deep plum */
  --ink-soft:  #686678;
  --ink-faint: #92909E;
  --on-dark:   #F3F4FC;

  /* ── lines ── */
  --line:      rgba(51, 42, 73, .10);
  --line-2:    rgba(51, 42, 73, .16);

  /* ── accents ── */
  --cta:       #1B295A;   /* indigo: every primary action */
  --cta-2:     #2C4188;
  --accent:    #E86154;   /* coral: one signal per section, never a button */
  --accent-ink:#9A322A;
  --mint:      #269B7E;   /* confirmed / positive */

  /* ── pastel plate stops ── */
  --sky:    #C9EAFF;
  --violet: #D6D3F7;
  --lav:    #E1D8FC;
  --blush:  #FED6D2;
  --peach:  #FBDAC1;
  --cream:  #F9EDD6;

  /* ── type stacks ── */
  --ui:    'Manrope', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --serif: 'Newsreader', 'Iowan Old Style', Charter, Georgia, serif;
  --mono:  'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* ── elevation: barely there. Depth comes from the mist, not shadows ── */
  --sh-1: 0 1px 2px rgba(51,42,73,.05), 0 6px 18px -8px rgba(51,42,73,.16);
  --sh-2: 0 2px 4px rgba(51,42,73,.05), 0 18px 40px -18px rgba(51,42,73,.30);

  /* ── radii: one per role ── */
  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px;

  /* ── measures ── */
  --page:   1240px;  /* full-width sections */
  --text:   68ch;    /* running prose — never wider */
  --gutter: clamp(20px, 5vw, 56px);
}

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--ui);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  background-image: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--cta); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2.5px solid var(--cta); outline-offset: 3px; border-radius: 4px; }

/* ── layout ── */
.wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--text); }
section { padding-block: clamp(56px, 9vw, 112px); }
.sect-head { margin-bottom: clamp(28px, 4vw, 48px); }

/* ── type scale. Desktop gets a bigger range than a phone can carry ── */
.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 14px;
}
h1, h2, h3 { margin: 0 0 .4em; text-wrap: balance; letter-spacing: -.02em; }
h1 { font-size: clamp(38px, 6.2vw, 72px); line-height: 1.04; font-weight: 800; }
h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; font-weight: 800; }
h3 { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
p  { margin: 0 0 1.1em; }
.lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: var(--ink-soft); }
.quiet { color: var(--ink-soft); }
.faint { color: var(--ink-faint); font-size: 14.5px; }
.serif { font-family: var(--serif); font-weight: 400; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── buttons: full pills, matching the app ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--ui); font-size: 15.5px; font-weight: 600;
  padding: 15px 30px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .16s, box-shadow .16s, background .16s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-cta { background: var(--cta); color: #fff; box-shadow: var(--sh-1); }
.btn-cta:hover { background: var(--cta-2); box-shadow: var(--sh-2); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink-faint); }
.btn-lg { font-size: 16.5px; padding: 18px 38px; }

/* ── header: sticky, glass, matching the app's chrome ── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 20px; height: 74px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand-mark {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  background: linear-gradient(150deg, var(--lav), var(--blush));
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--cta);
}
.brand-name { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a {
  padding: 9px 15px; border-radius: 999px; font-size: 15px; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
}
.nav a:hover { background: var(--surface); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--sh-1); }
.head-cta { margin-left: 8px; }
.burger {
  display: none; margin-left: auto; width: 44px; height: 44px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--surface); cursor: pointer; align-items: center; justify-content: center;
}
.burger span, .burger span::before, .burger span::after {
  content: ""; display: block; width: 17px; height: 1.7px; background: var(--ink); border-radius: 2px; position: relative;
}
.burger span::before { position: absolute; top: -5.5px; }
.burger span::after  { position: absolute; top:  5.5px; }

/* ── plate: the brand's photo device, shared with the app ──
   Gradient underneath, photo over it, light wash on top — so a photograph
   picks up the same tint as an empty plate. The gradient is also the loading
   and error state, which is why a missing image never shows a broken frame. */
.plate {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--sky), var(--violet) 70%, var(--lav));
  isolation: isolate;
}
.plate.p-dawn  { background: linear-gradient(160deg, var(--lav), var(--blush)); }
.plate.p-cream { background: linear-gradient(160deg, var(--cream), var(--peach) 80%); }
.plate.p-rose  { background: linear-gradient(160deg, var(--blush), #F7C9B4); }
.plate.p-aqua  { background: linear-gradient(160deg, #C6F0EC, var(--sky) 75%); }
.plate > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.plate > img.face { object-position: 50% 22%; }
.plate::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(90% 70% at 78% -10%, rgba(255,255,255,.48), transparent 62%),
    radial-gradient(120% 90% at 18% 118%, rgba(51,42,73,.15), transparent 58%);
}
.plate .slot {
  position: absolute; z-index: 2; left: 12px; bottom: 11px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft); background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px); padding: 4px 9px; border-radius: 999px;
}

/* ── hero: asymmetric, text-led. Credibility high, because the visitor is
   deciding whether to trust a person, not browsing a catalogue ── */
.hero { padding-block: clamp(44px, 7vw, 96px) clamp(40px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
.hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.hero .lede { max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-plate { aspect-ratio: 4 / 5; border-radius: var(--r-xl); box-shadow: var(--sh-2); }

/* a small, factual reassurance row — not a testimonial, just what's true */
.assure { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.assure div { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--ink-soft); }
.assure svg { width: 17px; height: 17px; flex: none; color: var(--mint); }

/* ── cards ── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden;
}
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

/* service card: photo on top, then name, then the price it actually costs */
.svc .plate { border-radius: 0; aspect-ratio: 16 / 10; }
.svc-body { padding: 20px 22px 22px; }
.svc-body h3 { margin-bottom: 6px; }
.svc-desc { font-size: 15px; color: var(--ink-soft); margin: 0 0 16px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svc-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.price { font-size: 22px; font-weight: 800; color: var(--cta); font-variant-numeric: tabular-nums; }
/* A struck-through original NEVER appears without the final price beside it —
   a discount badge alone tells the visitor nothing they can act on. */
.price-was { font-size: 14px; color: var(--ink-faint); text-decoration: line-through; margin-left: 8px; font-variant-numeric: tabular-nums; }
.chip {
  display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px; background: rgba(232,97,84,.12); color: var(--accent-ink);
}

/* ── "how it works": the Google Meet flow, stated plainly.
   This is the single most important explanation on the site. A visitor who
   thinks they are buying in-app video and receives a Meet link asks for a
   refund, so the mechanism is spelled out before they pay, not after. ── */
.steps { counter-reset: s; }
.step { display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding-block: 26px; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step-n {
  counter-increment: s; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--cta);
}
.step-n::before { content: counter(s); }
.step h3 { margin-bottom: 4px; }
.step p { margin: 0; color: var(--ink-soft); font-size: 15.5px; max-width: 58ch; }

/* ── band: a full-width tinted strip to break the page rhythm ── */
.band { background: var(--surface); border-block: 1px solid var(--line); }

/* ── faq ── */
details.faq { border-top: 1px solid var(--line); padding-block: 4px; }
details.faq:last-of-type { border-bottom: 1px solid var(--line); }
details.faq summary {
  cursor: pointer; list-style: none; padding-block: 20px; padding-right: 34px;
  font-size: 17.5px; font-weight: 600; position: relative;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 19px; font-weight: 400; color: var(--ink-faint);
}
details.faq[open] summary::after { content: "\2212"; }
details.faq .a { color: var(--ink-soft); font-size: 15.5px; max-width: var(--text); padding-bottom: 20px; }

/* ── states. Every API-backed block needs all four, and the last two are what
   normally get skipped ── */
.skel { border-radius: var(--r-lg); background: linear-gradient(100deg, var(--sunk) 30%, #F3F5F9 50%, var(--sunk) 70%);
  background-size: 220% 100%; animation: sweep 1.3s linear infinite; }
@keyframes sweep { to { background-position: -120% 0; } }
.state {
  grid-column: 1 / -1; text-align: center; padding: 46px 26px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.state h3 { margin-bottom: 6px; }
.state p { color: var(--ink-soft); margin: 0 auto; max-width: 46ch; font-size: 15px; }
.state .btn { margin-top: 20px; }

/* ── footer ── */
.site-foot { background: var(--ink); color: var(--on-dark); padding-block: 64px 30px; margin-top: clamp(56px, 8vw, 104px); }
.site-foot a { color: var(--on-dark); opacity: .78; text-decoration: none; }
.site-foot a:hover { opacity: 1; text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
.foot-grid h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin: 0 0 16px; font-family: var(--mono); font-weight: 500; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 15px; }
.foot-note { margin-top: 46px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 13.5px; opacity: .62; }
.foot-brand .brand-name { color: var(--on-dark); }
.foot-disclaim { max-width: 52ch; font-size: 14px; opacity: .72; margin-top: 14px; }

/* ── responsive. Collapse in a considered order, not all at once ── */
@media (max-width: 1040px) {
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-plate { aspect-ratio: 16 / 11; max-height: 420px; }
  .g-3 { grid-template-columns: repeat(2, 1fr); }
  .nav { display: none; }
  .burger { display: flex; }
  .head-cta { display: none; }
  .site-head .wrap { height: 66px; }
  /* opened by js: a simple stacked sheet, no animation to go wrong */
  .nav.open {
    display: grid; position: absolute; left: 0; right: 0; top: 66px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 12px var(--gutter) 20px; gap: 2px; box-shadow: var(--sh-2);
  }
  .nav.open a { padding: 13px 14px; font-size: 16px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .hero-actions .btn { width: auto; flex: 1 1 auto; }
  .foot-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   INNER PAGES
   Everything below serves services / courses / about / contact / legal.
   The home page needs none of it.
   ========================================================================== */

/* ── page header ───────────────────────────────────────────────────────── */
/* Quieter than the home hero on purpose: someone on an inner page has
   already decided to look around, so the job is orientation, not persuasion. */
.page-head {
  padding: clamp(48px, 7vw, 92px) 0 clamp(22px, 3vw, 34px);
  background: linear-gradient(180deg, var(--bg-deep), var(--bg));
  border-bottom: 1px solid var(--line);
}
.page-head h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.024em;
  margin: .18em 0 .34em;
}
.page-head .lede { margin: 0; }

/* ── a card with its own padding ───────────────────────────────────────── */
/* .card is a bare shell — the service cards pad their own inner div. These
   hold plain prose, so they pad themselves. */
.card.pad { padding: clamp(22px, 2.6vw, 32px); }
.card.pad h3 { font-size: 1.06rem; letter-spacing: -.012em; margin: 0 0 .5em; }
.card.pad p:last-child { margin-bottom: 0; }

/* ── category filters ──────────────────────────────────────────────────── */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.filter {
  font: 600 .875rem/1 var(--ui);
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 10px 17px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.filter:hover { color: var(--ink); border-color: var(--ink-faint); }
.filter.on {
  color: var(--on-dark);
  background: var(--cta);
  border-color: var(--cta);
}
/* Never remove the focus ring — these are the page's main controls and a
   keyboard user has nothing else to go on. */
.filter:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }

/* ── chip row on a service card ────────────────────────────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}

/* ── closing call to action ────────────────────────────────────────────── */
.cta-band {
  text-align: center;
  padding: clamp(56px, 8vw, 104px) 0;
  background: linear-gradient(180deg, var(--bg), var(--bg-deep));
  border-top: 1px solid var(--line);
}
.cta-band h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  letter-spacing: -.02em;
  margin: 0 0 .4em;
}
.cta-band .prose { margin-inline: auto; }
.cta-band .btn { margin-top: 10px; }

/* ── about ─────────────────────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: start;
  padding: clamp(40px, 6vw, 76px) 0;
}
.about-plate { aspect-ratio: 4 / 5; position: sticky; top: 92px; }
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  /* Sticky inside a single column pins the photo over the text it belongs to. */
  .about-plate { position: static; max-width: 340px; }
}

/* ── contact ───────────────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
  padding: clamp(40px, 6vw, 72px) 0;
}
.contact-side { display: grid; gap: 16px; }
.contact-side h3 { font-size: 1rem; margin: 0 0 .5em; }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.form-card h2 { font-size: 1.32rem; letter-spacing: -.016em; margin: 0 0 22px; }

.field { display: block; margin-bottom: 16px; }
.field > span {
  display: block;
  font: 600 .8125rem/1 var(--ui);
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.field > span em { font-style: normal; color: var(--ink-faint); font-weight: 500; }
.field input,
.field textarea {
  width: 100%;
  font: 400 .96rem/1.5 var(--ui);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  /* Without this the border is drawn outside the declared width and every
     field overflows its column by two pixels. */
  box-sizing: border-box;
  transition: border-color .15s, background .15s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--cta);
  box-shadow: 0 0 0 3px rgba(27, 41, 90, .10);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

.form-note {
  font: 400 .8125rem/1.55 var(--ui);
  color: var(--ink-faint);
  background: var(--sunk);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin: 4px 0 20px;
}
.form-card .btn { width: 100%; }
.form-card .btn:disabled { opacity: .6; cursor: progress; }

.form-out {
  font: 500 .875rem/1.5 var(--ui);
  margin-top: 14px;
  min-height: 1px;
}
/* Colour alone would not carry this for a colour-blind reader, so the wording
   of every message is explicit about what went wrong. */
.form-out.bad { color: var(--accent-ink); }

.linklist { list-style: none; margin: 0 0 14px; padding: 0; }
.linklist li { margin-bottom: 7px; }
.linklist a {
  font: 600 .98rem/1.4 var(--ui);
  color: var(--cta);
  text-decoration: none;
  border-bottom: 1px solid rgba(27, 41, 90, .28);
}
.linklist a:hover { border-bottom-color: var(--cta); }

/* ── legal documents ───────────────────────────────────────────────────── */
/* Styles raw HTML written in the admin panel, so it has to cover whatever
   tags get typed there rather than a known structure. */
.legal { padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 32px); }
.legal h2 {
  font-size: clamp(1.28rem, 2.4vw, 1.6rem);
  letter-spacing: -.018em;
  margin: 2em 0 .55em;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.04rem; margin: 1.7em 0 .45em; }
.legal p, .legal li { color: var(--ink-soft); line-height: 1.72; }
.legal ul, .legal ol { padding-left: 1.25em; margin: 0 0 1.1em; }
.legal li { margin-bottom: .45em; }
.legal a { color: var(--cta); }
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; }
.legal th, .legal td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}

/* ==========================================================================
   ARTWORK
   Drawn, not photographed. There are no licensed photographs of Gaurav, and
   stock astrology imagery would fight the restrained palette everything else
   uses. All of it is decorative, so it carries aria-hidden and never holds
   information the text does not also state.
   ========================================================================== */

.art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}

/* Discipline card: artwork on top, explanation under. */
.disc { display: flex; flex-direction: column; }
.disc .art {
  border-radius: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--sunk);
}
.disc-body { padding: 22px 24px 26px; }
.disc-body h3 { font-size: 1.08rem; margin: 0 0 .45em; }
.disc-body p { color: var(--ink-soft); font-size: 15px; line-height: 1.65; margin: 0; }
.disc-body .eyebrow { margin-bottom: 10px; }

/* ── the moon strip, used as a section divider ──────────────────────────── */
.moonband {
  background: var(--ink);
  padding: clamp(40px, 5vw, 66px) 0;
  text-align: center;
  overflow: hidden;
}
.moonband img { width: min(100%, 780px); height: auto; display: block; margin: 0 auto; }
.moonband p {
  color: var(--on-dark);
  opacity: .66;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 22px 0 0;
}

/* ── star field behind a hero ───────────────────────────────────────────── */
/* Sits under the text, so the gradient over it has to be dense enough that
   body copy still clears contrast where a bright star happens to fall. */
.starred { position: relative; isolation: isolate; }
.starred > .starbg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/stars.svg") center / cover no-repeat;
  opacity: .55;
}
.starred > .starbg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(244,245,251,.72) 0%, rgba(244,245,251,.86) 55%, var(--bg) 100%);
}

/* ── faint tiled stars behind a band ────────────────────────────────────── */
.textured { background-image: url("../img/pattern.svg"); background-size: 120px 120px; }

/* ── a wide figure with artwork beside prose ────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 58px);
  align-items: center;
}
.split.flip > *:first-child { order: 2; }
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
  .split.flip > *:first-child { order: 0; }
  /* The artwork is decoration; on a phone the words come first. */
  .split .art { max-width: 320px; margin-inline: auto; }
}

/* ── numbered timeline ──────────────────────────────────────────────────── */
.timeline { display: grid; gap: 0; counter-reset: tl; }
.tl {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.tl:last-child { border-bottom: 1px solid var(--line); }
.tl-when {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--accent-ink);
  padding-top: 3px;
}
.tl h3 { font-size: 1.04rem; margin: 0 0 .35em; }
.tl p { color: var(--ink-soft); font-size: 15px; line-height: 1.65; margin: 0; }
@media (max-width: 560px) {
  .tl { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 900px) { .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .g-3, .g-4 { grid-template-columns: 1fr; }
  .g-2 { grid-template-columns: 1fr; }
}

/* The About portrait slot holds artwork until a real photograph is uploaded,
   so the page never shows an empty labelled rectangle to a visitor. */
.about-plate { background: #EEF3FF; display: grid; place-items: center; }
.about-plate .art { border-radius: 0; width: 100%; height: 100%; object-fit: cover; }
.about-plate img.face { width: 100%; height: 100%; object-fit: cover; }

/* The hero portrait slot carries artwork until a photograph is uploaded.
   loadHero() swaps in Gaurav's picture the moment one exists, so this is
   the fallback, not the design. */
.hero-plate { background: #EEF3FF; display: grid; place-items: center; }
.hero-plate .art { border-radius: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-plate img.face { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   NEW PAGES — journal, gallery, offers, gifts, app, account deletion
   ========================================================================== */

/* ── skip link ──────────────────────────────────────────────────────────── */
/* Off-screen until focused. A keyboard user should not have to tab through
   nine nav items on every page to reach the content. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cta); color: #fff;
  padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; }

/* ── header dropdown ────────────────────────────────────────────────────── */
.menu { position: relative; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border: none; background: none;
  border-radius: 999px; cursor: pointer;
  /* line-height has to match .nav a, which inherits 1.65 from body. The font
     shorthand was setting /1, making this button ~10px shorter than every
     link beside it, so "More" sat visibly high in the row. */
  font: 500 15px/1.65 var(--ui); color: var(--ink-soft);
}
.menu-btn:hover { background: var(--surface); color: var(--ink); }
.menu-btn svg { width: 10px; height: 7px; opacity: .7; transition: transform .15s; }
.menu.open .menu-btn { background: var(--surface); color: var(--ink); }
.menu.open .menu-btn svg { transform: rotate(180deg); }
.menu-list {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 210px; padding: 7px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-2);
  z-index: 60;
}
.menu.open .menu-list { display: grid; gap: 1px; }
.menu-list a {
  padding: 10px 13px; border-radius: var(--r-sm);
  font-size: 15px; color: var(--ink-soft); text-decoration: none;
}
.menu-list a:hover { background: var(--bg-deep); color: var(--ink); }
.menu-list a[aria-current="page"] { background: var(--bg-deep); color: var(--ink); font-weight: 600; }

@media (max-width: 880px) {
  /* Inside the burger sheet the items are simply listed. A dropdown within a
     drawer hides things behind a second tap for no benefit. */
  .menu, .menu-list { position: static; }
  .menu-btn { display: none; }
  .menu-list { display: grid !important; border: none; box-shadow: none; background: none; padding: 0; min-width: 0; }
  .menu-list a { padding: 13px 14px; font-size: 16px; }
}

/* ── footer social ──────────────────────────────────────────────────────── */
.foot-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.foot-social a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  font-size: 13px; font-weight: 600; opacity: .82;
  text-decoration: none;
}
.foot-social a svg { width: 16px; height: 16px; }
.foot-social a:hover { opacity: 1; border-color: rgba(255,255,255,.45); text-decoration: none; }

/* ── article / gift body ────────────────────────────────────────────────── */
.back { text-decoration: none; color: var(--ink-faint); }
.back:hover { color: var(--ink); }
.cover-link { display: block; }
.readmore { font-size: 15px; font-weight: 700; color: var(--cta); text-decoration: none; }
.readmore:hover { text-decoration: underline; }
.svc-body h3 a { color: inherit; text-decoration: none; }
.svc-body h3 a:hover { color: var(--cta); }
.reading-cover {
  aspect-ratio: 16 / 7; margin-bottom: clamp(24px, 3vw, 38px);
  border-radius: var(--r-lg); overflow: hidden; background: var(--sunk);
}
.reading-cover img { width: 100%; height: 100%; object-fit: cover; }
.badge-free {
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: var(--mint); background: rgba(38,155,126,.12);
  padding: 4px 11px; border-radius: 999px;
}

/* ── gallery ────────────────────────────────────────────────────────────── */
.gal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.gal-item {
  position: relative; padding: 0; border: 0; cursor: zoom-in;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--sunk); aspect-ratio: 4 / 3;
  box-shadow: var(--sh-1);
}
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.gal-item:hover img { transform: scale(1.04); }
.gal-cap {
  position: absolute; inset: auto 0 0 0;
  padding: 24px 13px 11px; text-align: left;
  font: 600 13px/1.35 var(--ui); color: #fff;
  background: linear-gradient(180deg, transparent, rgba(24,20,40,.74));
}
.gal .state { grid-column: 1 / -1; }

/* ── lightbox ───────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(22, 18, 36, .93);
  display: grid; grid-template-columns: 64px 1fr 64px;
  align-items: center; padding: 20px;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; display: grid; gap: 14px; justify-items: center; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: var(--r-md); }
.lightbox figcaption { color: rgba(255,255,255,.8); font-size: 14px; text-align: center; }
.lb-close {
  position: absolute; top: 16px; right: 18px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: none; color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer;
}
.lb-nav {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.10); border: none; color: #fff;
  font-size: 30px; line-height: 1; cursor: pointer;
  justify-self: center;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.22); }
@media (max-width: 620px) {
  /* Arrows would eat a third of a phone screen; swipe-free paging via the
     close button plus tapping the backdrop is enough here. */
  .lightbox { grid-template-columns: 1fr; }
  .lb-nav { display: none; }
}

/* ── offers ─────────────────────────────────────────────────────────────── */
.offer { display: grid; grid-template-columns: 170px minmax(0, 1fr); }
.offer .plate { border-radius: 0; height: 100%; min-height: 190px; }
.offer-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.offer-body h3 { margin: 0; }
.offer-body .btn { margin-top: auto; }
@media (max-width: 560px) {
  .offer { grid-template-columns: 1fr; }
  .offer .plate { aspect-ratio: 16 / 9; min-height: 0; }
}
.code {
  font: 600 15px/1 var(--mono); letter-spacing: .08em;
  padding: 10px 16px; cursor: copy;
  color: var(--accent-ink); background: rgba(232,97,84,.10);
  border: 1px dashed rgba(232,97,84,.46); border-radius: var(--r-sm);
}
.code:hover { background: rgba(232,97,84,.17); }
.code.ok { color: var(--mint); background: rgba(38,155,126,.12); border-color: rgba(38,155,126,.45); }

/* ── tick / cross lists ─────────────────────────────────────────────────── */
.ticks, .crosses { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ticks li, .crosses li {
  position: relative; padding-left: 28px;
  font-size: 15px; line-height: 1.6; color: var(--ink-soft);
}
.ticks li::before, .crosses li::before {
  position: absolute; left: 0; top: 0;
  font-weight: 800; font-size: 15px;
}
.ticks li::before   { content: "\2713"; color: var(--mint); }
.crosses li::before { content: "\2022"; color: var(--accent); font-size: 20px; line-height: 1.1; }

/* ── app page ───────────────────────────────────────────────────────────── */
.store-pending {
  font-size: 14px; color: var(--ink-faint);
  align-self: center; max-width: 34ch;
}

/* A photograph uploaded from Admin → Site Images fills its frame, where the
   drawn artwork it replaces is shown whole. */
.art.is-photo,
.hero-plate .art.is-photo,
.about-plate .art.is-photo { object-fit: cover; width: 100%; height: 100%; }

/* ==========================================================================
   SOCIAL + TESTIMONIALS
   ========================================================================== */

/* ── social row, on light ────────────────────────────────────────────────── */
.social-row { display: flex; flex-wrap: wrap; gap: 10px; }
.social-row a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--ink-soft);
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.social-row a:hover { color: var(--cta); border-color: var(--cta); background: var(--bg-deep); }
.social-row a svg { width: 19px; height: 19px; flex: 0 0 19px; }
/* Inside the narrow Contact sidebar the labels would wrap awkwardly, so the
   buttons become icon-only there and keep their title for the tooltip. */
.contact-side .social-row a { padding: 11px; }
.contact-side .social-row a span { display: none; }

/* ── testimonials ────────────────────────────────────────────────────────── */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.quote {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  box-shadow: var(--sh-1);
  display: flex; flex-direction: column; gap: 13px;
}
.quote .stars {
  color: var(--accent);
  font-size: 15px;
  letter-spacing: .12em;
  /* The rating is announced via aria-label on this element; the glyphs
     themselves are decoration. */
}
.quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--ink);
}
.quote figcaption {
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.quote figcaption span { font-weight: 500; color: var(--ink-faint); }

/* ==========================================================================
   SUPPORT ASSISTANT
   Injected by js/api.js, and only when the owner has switched it on.
   ========================================================================== */
.ai-launch {
  position: fixed; right: 20px; bottom: 20px; z-index: 180;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px;
  border: none; border-radius: 999px;
  background: var(--cta); color: #fff;
  font: 700 15px/1 var(--ui);
  cursor: pointer;
  box-shadow: var(--sh-2);
  transition: background .15s, transform .12s;
}
.ai-launch:hover { background: var(--cta-2); }
.ai-launch:active { transform: translateY(1px); }
.ai-launch svg { width: 19px; height: 19px; }
.ai-launch.is-open span { display: none; }
.ai-launch.is-open { padding: 14px; }

.ai-panel {
  position: fixed; right: 20px; bottom: 82px; z-index: 181;
  width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.ai-panel[hidden] { display: none; }
.ai-panel header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-deep);
}
.ai-panel header strong { display: block; font-size: 15px; }
.ai-panel header small { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.ai-close {
  border: none; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink-faint);
  width: 28px; height: 28px; border-radius: 8px;
}
.ai-close:hover { background: var(--sunk); color: var(--ink); }

.ai-log {
  flex: 1; overflow-y: auto;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  /* Without a minimum the panel collapses to the header before the first
     answer arrives, then jumps — which reads as a glitch. */
  min-height: 170px;
}
.ai-msg {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 15px;
  font-size: 14.5px; line-height: 1.55;
  white-space: pre-wrap;        /* the model answers in paragraphs */
  overflow-wrap: anywhere;      /* a pasted URL must not widen the panel */
}
.ai-bot { align-self: flex-start; background: var(--bg-deep); color: var(--ink); border-bottom-left-radius: 5px; }
.ai-you { align-self: flex-end;   background: var(--cta);      color: #fff;      border-bottom-right-radius: 5px; }
.ai-thinking { color: var(--ink-faint); letter-spacing: .18em; }
.ai-escape { display: block; margin-top: 9px; font-weight: 700; color: var(--cta); }

.ai-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--surface); }
.ai-form input {
  flex: 1; min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--bg); font: 400 14.5px var(--ui); color: var(--ink);
}
.ai-form input:focus { outline: none; border-color: var(--cta); box-shadow: 0 0 0 3px rgba(27,41,90,.10); }
.ai-form .btn { padding: 11px 18px; font-size: 14px; }
.ai-form .btn:disabled { opacity: .55; cursor: progress; }
.ai-foot { margin: 0; padding: 0 14px 12px; font-size: 11.5px; color: var(--ink-faint); }
.ai-foot a { color: var(--ink-soft); }

@media (max-width: 520px) {
  .ai-launch { right: 14px; bottom: 14px; }
  /* Full-width on a phone: a floating card with margins wastes the space the
     conversation needs. */
  .ai-panel {
    right: 8px; left: 8px; bottom: 74px;
    width: auto; max-height: calc(100vh - 100px);
  }
}
@media (prefers-reduced-motion: reduce) { .ai-launch { transition: none; } }

/* ── help panel: tabs ───────────────────────────────────────────────────── */
.ai-tabs { display: flex; gap: 4px; padding: 10px 12px 0; background: var(--bg-deep); }
.ai-tab {
  flex: 1; padding: 9px 10px;
  border: none; border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: transparent; cursor: pointer;
  font: 700 13.5px/1.3 var(--ui); color: var(--ink-faint);
}
.ai-tab:hover { color: var(--ink); }
.ai-tab.on { background: var(--surface); color: var(--ink); }

.ai-pane { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ai-pane[hidden] { display: none; }

/* ── questions mode ─────────────────────────────────────────────────────── */
.ai-faq { gap: 0; padding: 6px 12px 10px; }
.ai-q { border-bottom: 1px solid var(--line); }
.ai-q:last-child { border-bottom: none; }
.ai-q summary {
  cursor: pointer; list-style: none;
  padding: 12px 26px 12px 6px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  position: relative;
}
.ai-q summary::-webkit-details-marker { display: none; }
.ai-q summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono); font-size: 17px; font-weight: 400; color: var(--ink-faint);
}
.ai-q[open] summary::after { content: "\2212"; }
.ai-q p { margin: 0; padding: 0 6px 13px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* ── message mode ───────────────────────────────────────────────────────── */
.ai-msgpane { overflow-y: auto; padding: 14px; }
.ai-wa {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 16px; border-radius: 999px;
  background: rgba(38,155,126,.12); color: #1F7A5C;
  border: 1px solid rgba(38,155,126,.38);
  font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.ai-wa:hover { background: rgba(38,155,126,.2); }
.ai-wa svg { width: 18px; height: 18px; }
.ai-or {
  margin: 12px 0; text-align: center;
  font-size: 12px; color: var(--ink-faint);
}
.ai-mform { display: grid; gap: 11px; }
.ai-mform label { display: block; }
.ai-mform span {
  display: block; margin-bottom: 5px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
}
.ai-mform input, .ai-mform textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 13px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
  font: 400 14.5px/1.5 var(--ui);
}
.ai-mform textarea { resize: vertical; min-height: 84px; }
.ai-mform input:focus, .ai-mform textarea:focus {
  outline: none; border-color: var(--cta);
  box-shadow: 0 0 0 3px rgba(27,41,90,.10);
}
.ai-mform .btn { width: 100%; justify-content: center; }
.ai-mform .btn:disabled { opacity: .6; cursor: progress; }
.ai-out { font-size: 13px; font-weight: 600; min-height: 1px; }
/* Colour alone would not carry this, so every message says what is wrong. */
.ai-out.bad { color: var(--accent-ink); }
.ai-done { text-align: center; padding: 20px 6px; }
.ai-done h4 { margin: 0 0 6px; font-size: 16px; }
.ai-done p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* ── an automatic first reply, shown to the sender ───────────────────────
   Visually distinct from the page's own copy, and always followed by a line
   saying a person will still follow up — nobody should think a machine
   closed their question. */
.ai-answer, .reply-card {
  text-align: left;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cta);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin: 14px 0;
}
.ai-answer-tag, .reply-tag {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint);
}
.ai-answer p, .reply-body {
  margin: 0; white-space: pre-wrap;
  font-size: 14.5px; line-height: 1.62; color: var(--ink);
}
.ai-done-note { font-size: 13px; color: var(--ink-soft); margin: 0; }

/* ==========================================================================
   BOOKING LOOKUP + 404
   ========================================================================== */

.bk {
  margin-top: 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--bg-deep);
  padding: 22px 24px;
}
.bk-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.bk-top .eyebrow { margin-bottom: 4px; }
.bk-ref { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: .04em; }
.bk-chip {
  padding: 5px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .03em;
  text-transform: capitalize;
  background: var(--sunk); color: var(--ink-soft);
}
/* The wording beside the chip says the same thing, so colour is never the
   only carrier of the status. */
.bk-chip.ok   { background: rgba(38,155,126,.14); color: #1F7A5C; }
.bk-chip.warn { background: rgba(138,100,16,.14); color: #8A6410; }
.bk-chip.bad  { background: rgba(178,59,49,.12);  color: #9A322A; }

.bk-rows { margin: 0; display: grid; gap: 0; }
.bk-rows > div {
  display: grid; grid-template-columns: 110px minmax(0, 1fr);
  gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.bk-rows > div:last-child { border-bottom: none; }
.bk-rows dt { font-size: 13px; font-weight: 700; color: var(--ink-faint); }
.bk-rows dd { margin: 0; font-size: 15px; color: var(--ink); text-transform: capitalize; }
@media (max-width: 480px) {
  .bk-rows > div { grid-template-columns: 1fr; gap: 2px; }
}
.bk-note {
  margin: 16px 0 0;
  font-size: 14.5px; line-height: 1.6; color: var(--ink-soft);
}
.bk-join { width: 100%; justify-content: center; margin-top: 18px; }

/* ── 404 ────────────────────────────────────────────────────────────────── */
/* Whole cards are links, so the target is the card and not four words in it. */
.nav-card { display: block; text-decoration: none; color: inherit; transition: border-color .15s, transform .12s; }
.nav-card:hover { border-color: var(--cta); transform: translateY(-2px); }
.nav-card h3 { color: var(--cta); }