/* ============================================================================
   THE ADVISOR HUB
   ----------------------------------------------------------------------------
   V2 §15: "do not design a generic SaaS dashboard, design the private advisor
   extension of Discover Saint Lucia WELL."

   So this sheet inherits everything that carries the brand — tokens, the three
   type roles, .wrap, .btn, .eyebrow — and departs from the consumer sheet only
   where a working surface genuinely differs from an editorial one:

     · tighter rhythm. --section-y caps at 11rem, which is right for a brochure
       and absurd above a list of five people waiting for a phone call;
     · sans-serif for anything scanned. Libre Caslon is for reading, and an
       advisor checking a pipeline is not reading;
     · cards that mean something. A card here is a container with an edge
       because these really are separate objects, not decoration.

   It is a light surface throughout. The consumer site earns its dark sections
   with photography; a workspace at 8am does not.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   RESET
   --------------------------------------------------------------------------
   chrome.css carries only box-sizing, focus and the skip link, and expects
   every page sheet to bring its own reset — site.css has one, and this sheet
   needs the same one now that the Hub uses the site's header and footer.

   Without `a { color: inherit }` the wordmark and the whole primary nav render
   in default browser blue on Hub pages. It was invisible while the Hub had a
   bespoke bar carrying its own `.hub-bar a` rule; deleting that bar took the
   colour with it.
   ══════════════════════════════════════════════════════════════════════════ */
a { color: inherit; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, video, svg { max-width: 100%; display: block; }
img, video { height: auto; }
::selection { background: var(--gold); color: var(--ink); }

/* ══════════════════════════════════════════════════════════════════════════
   PAGE
   ══════════════════════════════════════════════════════════════════════════ */
body {
  background: var(--paper);
  color: var(--ivory-ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* Footer to the bottom on a short page — an empty state should not leave the
     footer floating mid-screen. */
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* `render()` supplies the `<main id="main">` wrapper (lib/page.js), so a Hub
   body must NOT open a second one — nested <main> is invalid, and the flex
   sizing below would land on the wrapper rather than on the content. The
   sticky footer is therefore keyed to #main, and .hub-main is a plain div
   inside it. */
#main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.hub-main {
  flex: 1 0 auto;
  padding-block: clamp(1.75rem, 4vw, 3rem) clamp(3.5rem, 7vw, 5.5rem);
}

.wrap--narrow { max-width: 56rem; }

.hub-main h1 {
  font-family: var(--serif-display);
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.14;
  /* Descender clearance. The same clipping that had to be fixed across the
     consumer headlines applies here — "Journeys" has a y in it. */
  padding-bottom: 0.08em;
  margin: 0 0 0.35em;
}

.hub-main h2 {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 1.1rem;
}

.hub-head { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.hub-lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); max-width: 46ch; }
.hub-hint { font-size: var(--fs-small); color: var(--muted); margin: 0.6rem 0 0; }
.hub-hint a { color: inherit; }

.hub-back { margin: 0 0 1.25rem; font-size: var(--fs-small); }
.hub-back a { color: var(--muted); text-decoration: none; }
.hub-back a:hover { color: var(--ivory-ink); }

/* ══════════════════════════════════════════════════════════════════════════
   CARDS, SECTIONS
   ══════════════════════════════════════════════════════════════════════════ */
.hub-section { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }

.hub-card {
  background: #fff;
  border: 1px solid var(--hairline-l);
  border-radius: 3px;
  padding: clamp(1.25rem, 3vw, 1.9rem);
  margin-bottom: 1.25rem;
}
.hub-card > :last-child { margin-bottom: 0; }
.hub-card p { margin: 0 0 0.9em; max-width: 62ch; }

.hub-greeting { margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem); }

.hub-notice,
.hub-flash {
  border-left: 3px solid var(--gold);
  background: var(--paper-2);
  padding: 0.85rem 1.1rem;
  font-size: var(--fs-small);
  margin: 1rem 0 0;
  max-width: 58ch;
}
.hub-flash { margin-bottom: 1.5rem; }
.hub-flash--bad { border-left-color: var(--v-movement); }

/* ── Next best action ─────────────────────────────────────────────────────
   The one thing the Hub is confident enough to recommend. It gets the ink
   block because it is the only element on the page allowed to be loud. */
.hub-nba {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  border-radius: 3px;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}
.hub-nba h2 {
  font-family: var(--serif-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper);
  padding-bottom: 0.06em;
  margin: 0 0 0.5em;
}
.hub-nba p { color: var(--mist); max-width: 54ch; margin: 0 0 1.5em; }
.hub-nba .eyebrow { color: var(--gold); }

/* ══════════════════════════════════════════════════════════════════════════
   FUNNEL + LINK
   ══════════════════════════════════════════════════════════════════════════ */
.hub-funnel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--hairline-l);
  border: 1px solid var(--hairline-l);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.hub-stat {
  background: #fff;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.hub-stat-n {
  font-family: var(--serif-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--teal);
}
.hub-stat-label { font-size: var(--fs-small); font-weight: 600; }
.hub-stat-note { font-size: 0.8rem; color: var(--muted); line-height: 1.45; }

.hub-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
  /* Bottom margin added when prize draws started stacking a link row above a
     row of buttons; on Home it is the last thing in its card, so it was never
     needed there. */
  margin-bottom: 1rem;
}
.hub-link-row input {
  flex: 1 1 18rem;
  min-width: 0;
  font: inherit;
  font-size: var(--fs-small);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--hairline-l);
  border-radius: 2px;
  background: var(--paper-2);
  color: inherit;
}
.hub-field-label {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.hub-qr {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.hub-qr svg { border: 1px solid var(--hairline-l); border-radius: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   JOURNEY LISTS
   ══════════════════════════════════════════════════════════════════════════ */
.hub-views {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--hairline-l);
}
.hub-views a {
  padding: 0.6rem 0.9rem;
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.hub-views a:hover { color: var(--ivory-ink); }
.hub-views a.is-current { color: var(--ivory-ink); font-weight: 600; border-bottom-color: var(--gold-deep); }

.hub-journeys { list-style: none; margin: 0; padding: 0; }
.hub-journey + .hub-journey { border-top: 1px solid var(--hairline-l); }
.hub-journey a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 1.5rem;
  align-items: baseline;
  padding: 1rem 0.5rem;
  text-decoration: none;
  color: inherit;
}
.hub-journey a:hover { background: var(--paper-2); }
.hub-journey-name { font-weight: 600; font-size: 1.05rem; }
.hub-journey-meta {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem 0.9rem;
  font-size: var(--fs-small);
  color: var(--muted);
}
.hub-journey-villages { font-size: var(--fs-small); color: var(--muted); }

.hub-group { margin-bottom: 2rem; }
.hub-group-head { display: flex; align-items: center; gap: 0.75rem; }
.hub-group-n { font-size: var(--fs-small); color: var(--muted); }

.hub-more { font-size: var(--fs-small); margin: 1rem 0 0; }

/* ── Stage chips ──────────────────────────────────────────────────────────
   Colour is a hint, never the only signal — the label is always present, so
   these read correctly in greyscale and to anyone who does not distinguish
   the hues. */
.hub-stage {
  display: inline-block;
  padding: 0.2em 0.65em;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--paper-2);
  color: var(--muted);
  white-space: nowrap;
}
.hub-stage[data-stage="new"]       { background: #FBEBD1; color: #7A5411; }
.hub-stage[data-stage="contacted"] { background: #DCEBEB; color: var(--v-ocean-ink); }
.hub-stage[data-stage="discovery"] { background: #E3EADF; color: var(--v-rainforest-ink); }
.hub-stage[data-stage="planning"]  { background: #DEE9E9; color: var(--v-longevity-ink); }
.hub-stage[data-stage="booked"]    { background: var(--teal); color: var(--paper); }
.hub-stage[data-stage="closed"]    { background: var(--paper-2); color: var(--muted); }

/* ── Admin tags ───────────────────────────────────────────────────────────
   A second, quieter badge alongside .hub-stage. Stage says where something is
   in a process; a tag says what kind of thing it is. Attribute-driven, like
   .hub-stage, so a new kind is a selector rather than a new class. */
.hub-tag {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.1em;
  background: var(--paper-2);
  color: var(--muted);
  white-space: nowrap;
}
.hub-tag[data-tag="admin"]   { background: var(--ink); color: var(--gold); }
.hub-tag[data-tag="test"]    { background: #EDE4F1; color: #5B3A6B; }
.hub-tag[data-tag="locked"]  { background: #F6DFD9; color: #8A3B23; }
.hub-tag[data-tag="waiting"] { background: #FBEBD1; color: #7A5411; }
.hub-tag[data-tag="create"]  { background: #DFEDE2; color: #2C5A38; }
.hub-tag[data-tag="skip"]    { background: var(--paper-2); color: var(--muted); }

/* ── The danger zone ──────────────────────────────────────────────────────
   Deliberately not styled as an alarm. A red-bordered box shouting DANGER is
   something people learn to click past; a card that reads slightly differently
   from its neighbours and makes you type a code is one they actually read. */
.hub-danger { border-color: rgba(138, 59, 35, 0.35); }
.hub-danger h2 { color: #8A3B23; }
.hub-danger form + form,
.hub-danger .hub-erase { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline-l); }
.hub-danger .btn { width: 100%; justify-content: center; margin-top: 0.75rem; }

/* Selects are not otherwise used in the Hub, so this is the whole of their
   styling — matched to .hub-field input so a form does not look assembled from
   two different kits. */
.hub-field select {
  width: 100%;
  font: inherit;
  font-size: var(--fs-body);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--hairline-l);
  border-radius: 2px;
  background: var(--paper);
  color: inherit;
}
.hub-field select:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 1px; }

.hub-reveal { margin-top: 0.75rem; }
.hub-reveal .btn { width: auto; }

.hub-file { display: inline-flex; align-items: center; gap: 0.5rem; margin-right: 0.5rem; }
.hub-confirm { margin-top: 1.5rem; }

/* Each action is its own <form> so it can POST a single named action without
   JavaScript. Stacked, full width, so two adjacent buttons are never mistaken
   for one control with two halves. */
.hub-action { margin: 0 0 0.5rem; }
.hub-action:last-child { margin-bottom: 0; }
.hub-action .btn { width: 100%; justify-content: center; }

/* ── Empty states ─────────────────────────────────────────────────────── */
.hub-empty {
  border: 1px dashed var(--hairline-l);
  border-radius: 3px;
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
  background: var(--paper-2);
}
.hub-empty h3 {
  font-family: var(--serif-display);
  font-size: 1.35rem;
  padding-bottom: 0.06em;
  margin: 0 0 0.5em;
}
.hub-empty p { color: var(--muted); max-width: 46ch; margin: 0 auto 1.5em; }

/* ══════════════════════════════════════════════════════════════════════════
   JOURNEY DETAIL
   ══════════════════════════════════════════════════════════════════════════ */
.hub-detail-head { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.hub-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 0.75rem; }
.hub-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: var(--fs-small);
  color: var(--muted);
  margin: 0;
}

.hub-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
@media (max-width: 860px) {
  .hub-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The briefing is the one place in the Hub that is read rather than scanned,
   so it gets the reading face and a reading measure. */
.hub-card--brief p {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.68;
  max-width: 58ch;
}

.hub-quote { margin: 1.5rem 0; }
.hub-quote blockquote {
  margin: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.6;
}
.hub-quote figcaption {
  margin-top: 0.5rem;
  padding-left: 1rem;
  font-size: var(--fs-small);
  color: var(--muted);
}

.hub-eclipse {
  margin-top: 1.5rem;
  background: var(--eclipse-midnight);
  color: var(--eclipse-sand);
  padding: 1.1rem 1.25rem;
  border-radius: 3px;
}
.hub-eclipse .eyebrow { color: var(--eclipse-copper-l); margin-bottom: 0.7em; }
.hub-eclipse p { font-family: var(--serif); margin: 0; max-width: 56ch; }

.hub-prompts { margin: 0; padding: 0; list-style: none; }
.hub-prompts li {
  padding: 0.75rem 0 0.75rem 1.5rem;
  position: relative;
  max-width: 58ch;
}
.hub-prompts li + li { border-top: 1px solid var(--hairline-l); }
.hub-prompts li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.45em;
  width: 0.6rem; height: 1px;
  background: var(--gold-deep);
}

.hub-villages { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.hub-villages li { font-size: var(--fs-small); }

.hub-answers { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; }
.hub-answers dt { font-size: 0.8rem; color: var(--muted); }
.hub-answers dd { margin: 0; font-size: var(--fs-small); font-weight: 600; }

/* ── Stage control + notes ────────────────────────────────────────────── */
.hub-stages { display: grid; gap: 0.15rem; margin-bottom: 1rem; }
.hub-stage-opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 2px;
  font-size: var(--fs-small);
  cursor: pointer;
}
.hub-stage-opt:hover { background: var(--paper-2); }
.hub-stage-opt:focus-within { outline: 2px solid var(--gold-deep); outline-offset: 1px; }

/* A browser's default checkbox is 13px. The wrapping <label> makes the whole
   row tappable, so it was never unusable — but the box itself is the thing a
   thumb aims at, and 13px is half of what WCAG 2.5.8 asks for. Measured at
   380px on the undertaking gate, which is the one checkbox in this product
   somebody MUST tick before they can go anywhere.
   Applies to the delete confirmations too, which is the right direction: those
   are the tickboxes it matters most to hit deliberately. */
.hub-stage-opt input[type="checkbox"] {
  accent-color: var(--teal);
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  margin: 0;
}

.hub-note-form { margin-bottom: 1.5rem; }
.hub-notes { list-style: none; margin: 0; padding: 0; }
.hub-notes li { padding: 0.9rem 0; border-top: 1px solid var(--hairline-l); }
.hub-notes p { margin: 0 0 0.3rem; white-space: pre-wrap; font-size: var(--fs-small); }
.hub-note-when { font-size: 0.78rem; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════════════════════ */
.hub-auth {
  flex: 1 0 auto;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vw, 4.5rem) var(--gutter);
}
.hub-auth-card {
  width: 100%;
  max-width: 30rem;
  background: #fff;
  border: 1px solid var(--hairline-l);
  border-radius: 3px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.hub-auth-card h1 {
  font-family: var(--serif-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.15;
  padding-bottom: 0.08em;
  margin: 0 0 0.4em;
}
.hub-auth-card .hub-lead { font-size: var(--fs-body); margin-bottom: 1.75rem; }
.hub-auth-alt { font-size: var(--fs-small); color: var(--muted); margin: 1.5rem 0 0; }
.hub-auth-alt a { color: var(--gold-deep); }

.hub-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.hub-field { display: block; }
.hub-field--wide { grid-column: 1 / -1; }
.hub-field input,
.hub-field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-body);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--hairline-l);
  border-radius: 2px;
  background: var(--paper);
  color: inherit;
}
.hub-field textarea { resize: vertical; line-height: 1.55; }
.hub-field input:focus-visible,
.hub-field textarea:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 1px;
  background: #fff;
}
.hub-opt { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields they can tell are hidden. Also hidden from assistive technology, so
   nobody using a screen reader is asked for a company name that does not
   exist. */
.hub-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.hub-form-status { font-size: var(--fs-small); color: var(--muted); margin: 0.9rem 0 0; min-height: 1.4em; }
.hub-form-status[data-state="bad"] { color: #9A3B21; }

/* ══════════════════════════════════════════════════════════════════════════
   PHONE
   The Hub's real first screen. An advisor opens a notification on a phone;
   §22 makes 380px a pass/fail width rather than a nice-to-have.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  .hub-journey a {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }
  .hub-journey-meta {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
  }
  .hub-actions .btn { flex: 1 1 100%; justify-content: center; }
  .hub-stat-n { font-size: 1.8rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MY CAMPAIGN
   The prompt is a block to be taken away, not a field to be filled — so it
   reads as something quoted rather than something asked for.
   ══════════════════════════════════════════════════════════════════════════ */
.hub-prompt {
  flex: 1 1 100%;
  width: 100%;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.8rem;
  line-height: 1.55;
  padding: 0.9rem 1rem;
  border: 1px solid var(--hairline-l);
  border-left: 2px solid var(--gold);
  border-radius: 2px;
  background: var(--paper-2);
  color: var(--ivory-ink);
  resize: vertical;
}

/* Textareas in the intake match the inputs beside them — without this they
   inherit the browser's monospace and the form looks assembled from two kits. */
.hub-field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-small);
  line-height: 1.55;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--hairline-l);
  border-radius: 2px;
  background: var(--paper-2);
  color: inherit;
  resize: vertical;
}
.hub-field textarea::placeholder { color: var(--muted); opacity: 0.75; }

/* ══════════════════════════════════════════════════════════════════════════
   THE INTRODUCTION
   Picking a person and reading an email — so it is a list of people and a
   preview of an email, and nothing else competes for attention.
   ══════════════════════════════════════════════════════════════════════════ */
.hub-advisor-picks { display: grid; gap: 0.5rem; margin: 0 0 1.5rem; }

.hub-pick {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--hairline-l);
  border-radius: 2px;
  cursor: pointer;
}
.hub-pick:hover { background: var(--paper-2); }
.hub-pick:focus-within { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.hub-pick input { accent-color: var(--teal); width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin-top: 0.15rem; }
.hub-pick-body { display: flex; flex-direction: column; gap: 0.15rem; font-size: var(--fs-small); }
.hub-pick-body strong { font-size: 1rem; }
.hub-pick-market { color: var(--muted); }

/* The email as it will arrive. Inset and on paper so it reads as a preview of
   something else rather than as more of this page. */
.hub-mail-preview {
  background: var(--paper-2);
  border: 1px solid var(--hairline-l);
  border-radius: 2px;
  padding: clamp(1rem, 3vw, 1.5rem);
}
.hub-mail-preview p { max-width: none; }

/* ══════════════════════════════════════════════════════════════════════════
   PRIZE DRAWS
   Built from the cards, stats and link rows that already exist. A draw is an
   ordinary thing an advisor does, not a mode the Hub enters, so it gets no
   special colour — only the one tag that marks an entrant apart from an
   ordinary Journey.
   ══════════════════════════════════════════════════════════════════════════ */
/* The lead pool. Teal rather than gold: it is a statement of fact about an
   account, not something needing attention. */
.hub-tag[data-tag="house"] {
  background: rgba(0, 166, 168, 0.14);
  color: var(--teal-deep, #00706F);
}

.hub-tag[data-tag="draw"] {
  background: rgba(217, 160, 60, 0.14);
  color: var(--gold-deep);
}

.hub-sweeps-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.hub-sweeps-head h2 { margin: 0; }

.hub-funnel--tight { margin: 1rem 0 1.25rem; }

/* ── One question, with its own prompt ────────────────────────────────────
   The label and the Ask button share a row so the button belongs to the
   question rather than floating near it. */
.hub-field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.btn--xs {
  font-size: 0.72rem;
  padding: 0.3rem 0.7rem;
  letter-spacing: 0.06em;
}
.hub-ask + .hub-ask { margin-top: 0.4rem; }

/* Off screen, NOT display:none. The [data-copy] handler falls back to
   input.select() on browsers without the async clipboard, and a display:none
   element cannot be selected — so hiding it the obvious way would break the
   fallback silently on exactly the browsers that need it. */
.hub-offscreen {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Sits directly under the three totals, because it is the sentence that makes
   them readable: without it, "0 visits" and "no NEW visits" look the same, and
   an advisor who has just put their link somewhere cannot tell whether it
   worked. Pulled up against the grid — the grid carries 1.5rem of bottom
   margin for the block that normally follows it. */
.hub-funnel-when {
  margin: -1rem 0 1.5rem;
  font-family: var(--sans);
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 62ch;
}

/* A finished draw is a row, not a card — see the row() comment in the screen.
   The list itself is .hub-journeys, reused wholesale from the Journeys screen. */
.hub-archive { margin-top: 0.25rem; }
.hub-archive summary {
  cursor: pointer;
  padding: 0.75rem 0;
  font-size: var(--fs-small);
  color: var(--muted);
  border-top: 1px solid var(--hairline-l);
}
.hub-archive summary:hover { color: var(--ivory-ink); }

/* The create form once draws exist: a card that happens to be collapsed, so it
   sits in the same rhythm as the cards above it rather than reading as a
   different kind of thing. */
.hub-create > summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.hub-create > summary:hover { color: var(--ivory-ink); }
.hub-create[open] > summary { margin-bottom: 1.1rem; }

@media (max-width: 620px) {
  .hub-sweeps-head { flex-direction: column; gap: 0.5rem; }
  .hub-link-row .btn { flex: 1 1 auto; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE UNDERTAKING GATE
   The only screen an advisor cannot navigate away from, so it is the only one
   that gets a narrow measure: nothing else on the page, and a line length that
   makes five obligations genuinely readable rather than skimmed past.
   ══════════════════════════════════════════════════════════════════════════ */
.wrap--narrow { max-width: 44rem; }

.hub-gate { padding: 2rem 1.75rem 1.75rem; }
.hub-gate h1 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 0.3rem 0 0.75rem; }

.hub-gate-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.hub-gate-list li {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.6;
  font-size: var(--fs-small);
}
.hub-gate-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.hub-gate-form {
  margin: 1.75rem 0 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline-l);
}
.hub-gate-form .btn { margin-top: 1rem; }

@media (max-width: 620px) {
  .hub-gate { padding: 1.5rem 1.25rem; }
  .hub-gate-form .btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRIVACY REQUESTS
   Three small additions for /hub/admin/subject. The screen is otherwise built
   from cards, fields and the danger zone that already exist — a rights request
   is administrative work like any other, and giving it its own visual language
   would suggest it is exceptional rather than routine.
   ══════════════════════════════════════════════════════════════════════════ */

/* A warning that is a sentence rather than a banner. Used where something the
   policy promises has stopped being true — a dead retention job, an incomplete
   erasure — so it must read as unmistakably wrong without shouting on a screen
   that is fine 364 days a year. */
.hub-hint--bad {
  color: #8A3B23;
  border-left: 2px solid rgba(138, 59, 35, 0.4);
  padding-left: 0.7rem;
}

.hub-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.hub-search .hub-field { flex: 1 1 22rem; margin: 0; }
.hub-search .btn { flex: 0 0 auto; }

/* The consent wording, collapsed by default. It is the most important thing on
   the screen when somebody asks "what did I agree to" and clutter the rest of
   the time, which is exactly what <details> is for. */
.hub-consent { margin-top: 1rem; font-size: var(--fs-small); }
.hub-consent summary {
  cursor: pointer;
  color: var(--muted);
  padding: 0.35rem 0;
}
.hub-consent summary:hover { color: var(--ivory-ink); }
.hub-consent p {
  margin: 0.5rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--hairline-l);
  border-left: 2px solid var(--gold);
  color: var(--ivory-ink);
  line-height: 1.6;
}

@media (max-width: 620px) {
  .hub-search .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── The 30-day plan ──────────────────────────────────────────────────────
   Spec §9's deliverable, and the shape follows how it is used: somebody opens
   this on a Monday, on a phone, and wants to know what this week asks of them.
   So weeks are the structure and every piece of copy is a box you can paste
   from, not a document you scroll.

   Nothing here introduces a colour. Warnings borrow the gold rule already used
   by .hub-notice and the one blocking state borrows --v-movement, the same
   token .hub-flash--bad uses — full-saturation deck colour stays where the
   brand puts it, in the loader's rings on the overlay below and nowhere else. */
.gtm-plan-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin: 0 0 1.25rem;
}
.gtm-locked { margin-top: 0; }

.gtm-week { margin: 1.75rem 0 0; }
.gtm-week-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--hairline-l);
  margin-bottom: 0.9rem;
}
.gtm-week-n {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-deep);
  white-space: nowrap;
}
.gtm-week-head h3 { margin: 0; font-size: var(--fs-lead); }

.gtm-block {
  border: 1px solid var(--hairline-l);
  border-radius: 3px;
  padding: clamp(0.85rem, 2.5vw, 1.15rem);
  margin-bottom: 0.85rem;
  background: #fff;
}
/* An action with no copy attached — "call two clients" wants a note on what to
   say, not a caption. Rendering it as an empty box would imply a failure. */
.gtm-block--bare { background: var(--paper); }

.gtm-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.gtm-block-head h4 { margin: 0 0 0.25rem; font-size: var(--fs-body); }
.gtm-block-head .hub-hint { margin: 0; }

.gtm-chan {
  flex: none;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper-2);
  border-radius: 999px;
  padding: 0.2em 0.65em;
  white-space: nowrap;
}

.gtm-block-body { margin-top: 0.85rem; }

.gtm-label {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.gtm-edited {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold-deep);
}

.gtm-body {
  width: 100%;
  /* The same measure .hub-card p uses. Without it a caption gets the full card
     — 1202px on a 2000px screen — and nobody can read a 1200px line, least of
     all to check it before publishing. The box is what the copy will look like
     wherever it lands, so it should not be shaped like nowhere. */
  max-width: 62ch;
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline-l);
  border-radius: 3px;
  padding: 0.75rem 0.85rem;
  resize: vertical;
}
.gtm-body[readonly] { background: var(--paper); }
.is-editing .gtm-body {
  background: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(217, 160, 60, 0.18);
}

.gtm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

/* ── The checker's verdict ───────────────────────────────────────────────
   Above the copy, never below it. A warning underneath text somebody has
   already read and copied has arrived too late to be a warning. */
.gtm-flags {
  border-left: 3px solid var(--gold);
  background: var(--paper-2);
  padding: 0.75rem 0.95rem;
  margin: 0 0 0.75rem;
  font-size: var(--fs-small);
}
.gtm-flags--high { border-left-color: var(--v-movement); }
.gtm-flags-head {
  margin: 0 0 0.4rem;
  font-weight: 700;
  font-family: var(--sans);
}
.gtm-flags ul { margin: 0; padding-left: 1.1rem; }
.gtm-flags li { margin-bottom: 0.4rem; }
.gtm-flags li:last-child { margin-bottom: 0; }
.gtm-instead {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
}

/* CASL and the TCPA land on the sender, who is the advisor. A template handed
   over without this is a liability given away as a gift. */
.gtm-consent {
  font-size: var(--fs-small);
  color: var(--muted);
  background: var(--paper);
  border: 1px dashed var(--hairline-l);
  border-radius: 3px;
  padding: 0.6rem 0.8rem;
  margin: 0 0 0.75rem;
}
.gtm-failed {
  font-size: var(--fs-small);
  color: var(--muted);
  margin: 0;
}

/* ── The thinking overlay ────────────────────────────────────────────────
   The minute where the product either feels like it works or feels like it
   has hung. It says what it is doing, and the loader's rings are the one place
   in the Hub the brand's full-saturation colour belongs. */
.gtm-thinking {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(18, 48, 47, 0.94);
  padding: var(--gutter);
}
.gtm-thinking[hidden] { display: none; }
body.gtm-busy { overflow: hidden; }

.gtm-thinking-inner { text-align: center; max-width: 26rem; }
.gtm-thinking-step {
  font-family: var(--serif-display);
  font-size: var(--fs-lead);
  color: var(--paper);
  margin: 1.25rem 0 0.85rem;
}
.gtm-thinking .hub-hint { color: var(--mist); }
.gtm-thinking-note { margin-top: 0.9rem; }

.gtm-ring { width: clamp(76px, 22vw, 108px); height: auto; }
.gtm-ring circle {
  fill: none;
  stroke-width: 2;
  transform-origin: 60px 60px;
}
.gtm-ring-1 { stroke: var(--teal-bright); animation: gtm-spin 3.2s linear infinite; }
.gtm-ring-2 { stroke: var(--gold);        animation: gtm-spin 2.4s linear infinite reverse; }
.gtm-ring-3 { stroke: var(--coral);       animation: gtm-spin 4s   linear infinite; }
.gtm-ring circle {
  stroke-dasharray: 90 210;
  stroke-linecap: round;
}
@keyframes gtm-spin { to { transform: rotate(360deg); } }

/* The gold journey line, filling as pieces land. */
.gtm-thinking-bar {
  height: 2px;
  background: var(--hairline-d);
  border-radius: 2px;
  overflow: hidden;
}
.gtm-thinking-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .gtm-ring circle { animation: none; }
  .gtm-thinking-bar span { transition: none; }
}

/* ── Narrow phones ───────────────────────────────────────────────────────
   360–380px is a real Android width, and the block head is the thing that
   breaks first: a long action title beside a channel badge leaves the title
   two words a line. Below 460 the badge moves under the title instead. */
@media (max-width: 460px) {
  .gtm-block-head { flex-direction: column; gap: 0.4rem; }
  .gtm-chan { align-self: flex-start; }
  .gtm-actions .btn { flex: 1 1 auto; }

  /* Padding was nesting four deep — .wrap, .hub-card, .gtm-block and then the
     textarea's own — which left 253px of column on a 380px phone against the
     282px a plain paragraph in the same card gets. The block's side padding is
     the redundant level: the card already holds the content off the edge. So
     on narrow screens blocks become stacked rows divided by a rule rather than
     boxes inside a box, and the copy gets its width back. */
  .gtm-block {
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .gtm-block--bare { background: transparent; }
}

/* ── Angles ──────────────────────────────────────────────────────────────
   Behind a disclosure because four more buttons on a block that already has
   four is noise. Closed by default: an advisor who is happy with the copy
   should never have to look at this. */
.gtm-angles {
  margin-top: 0.7rem;
  border-top: 1px solid var(--hairline-l);
  padding-top: 0.6rem;
}
.gtm-angles > summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--fs-small);
  color: var(--muted);
  list-style: none;
  /* A generous target — this sits between two rows of buttons on a phone and
     a mis-tap opens something the advisor did not want. */
  padding: 0.3rem 0;
}
.gtm-angles > summary::-webkit-details-marker { display: none; }
.gtm-angles > summary::before {
  content: '＋';
  margin-right: 0.4em;
  color: var(--gold-deep);
}
.gtm-angles[open] > summary::before { content: '−'; }
.gtm-angles > summary:hover { color: var(--ink); }
.gtm-angles > summary:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 2px;
}
.gtm-angle-now {
  color: var(--gold-deep);
  font-style: italic;
}
.gtm-angles .hub-hint { margin: 0.4rem 0 0.6rem; }

/* ── The persona capture ─────────────────────────────────────────────────
   One question per screen. A page showing five at once reads as a form; five
   screens showing one each read as a conversation, and each can afford to say
   why it is asking — which is the only thing that makes a question feel worth
   answering. */
.wrap--narrow { max-width: 46rem; }

.pq-rail {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
}
.pq-dot {
  height: 3px;
  flex: 1 1 0;
  border-radius: 2px;
  background: var(--hairline-l);
}
.pq-dot.is-done { background: var(--gold-deep); }
.pq-dot.is-now  { background: var(--gold); }

.pq-count {
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}

/* ── Two h2s that are NOT section labels ─────────────────────────────────
   `.hub-main h2` is the Hub's small uppercase section-label convention, and at
   (0,1,1) it outranks a single class. Both of these are h2 for document
   structure — the question IS the heading of its screen — but neither is a
   label, so they need to win explicitly.

   This shipped broken for exactly as long as it took to measure it: the
   question rendered as 13px uppercase grey with 4px of letter-spacing, while
   every structural check (twelve options, five dots, no overflow) passed. A
   count can be right while the page is unreadable. */
.hub-main .pq-ask {
  font-family: var(--serif-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  line-height: 1.25;
  /* "you" has a descender and this is a display size. */
  padding-bottom: 0.06em;
  margin: 0 0 0.5rem;
}
.pq-why {
  color: var(--muted);
  font-size: var(--fs-small);
  margin: 0 0 0.25rem;
  max-width: 52ch;
}

.pq-opts {
  display: grid;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
}

/* The whole row is the target. A 14px radio is a miss waiting to happen on a
   phone, and this is a five-screen flow where one mis-tap costs a step. */
.pq-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--hairline-l);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.pq-opt:hover { border-color: var(--gold-deep); }
.pq-opt input {
  flex: none;
  margin-top: 0.2rem;
  accent-color: var(--gold-deep);
  width: 1.05rem;
  height: 1.05rem;
}
/* :has() drives the selected state from the input itself, so the styling
   cannot disagree with what will actually be submitted. The .is-on class from
   the server covers the first paint and browsers without :has(). */
.pq-opt.is-on,
.pq-opt:has(input:checked) {
  border-color: var(--gold-deep);
  background: var(--paper);
}
.pq-opt:has(input:focus-visible) {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}
.pq-opt-body { display: block; }
.pq-opt-label { display: block; font-size: var(--fs-small); line-height: 1.45; }
.pq-opt-detail {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-small);
  color: var(--muted);
}

.pq-actions { margin-top: 1.25rem; align-items: center; }

/* ── The reveal ──────────────────────────────────────────────────────────
   A read, not a verdict — so it carries what this profile gets wrong beside
   what it is good at, and the correction sits directly underneath. */
.pq-reveal { border-left: 3px solid var(--gold); }
.hub-main .pq-reveal-head {
  font-family: var(--serif-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  line-height: 1.15;
  padding-bottom: 0.06em;
  margin: 0.2rem 0 0.5rem;
}
.pq-reveal-lead {
  font-size: var(--fs-lead);
  max-width: 44ch;
  margin: 0 0 0.9rem;
}
.pq-reveal-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline-l);
}
@media (min-width: 34rem) {
  .pq-reveal-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
.pq-reveal-grid .hub-hint { margin: 0; }

/* ── The loop-back, and the strip that says what a plan stands on ────────
   Both are quiet on purpose. The report deals in single digits and presenting
   eleven visits like analytics is how a small number is made to feel like a
   failure. */
.gtm-provenance {
  font-size: var(--fs-small);
  color: var(--muted);
  background: var(--paper);
  border-left: 2px solid var(--hairline-l);
  padding: 0.7rem 0.9rem;
  margin: 0 0 1.25rem;
  line-height: 1.6;
}
.gtm-provenance strong { color: var(--ink); font-weight: 700; }
.gtm-provenance-size { display: inline-block; margin-top: 0.35rem; }

.gtm-report { border-left: 3px solid var(--teal); --card-rule: var(--teal); }

/* A CARD INSIDE A CARD COMPOUNDS ITS GUTTERS. The report sits inside the plan
   card, which sits inside .wrap — three 20px insets stacked. At 380px that
   left the Foundations note 238px of a 380px viewport, a third of the width
   spent on nothing. It is invisible at the 2000px this gets reviewed on.

   Below the phone breakpoint a nested card gives back the horizontal inset and
   keeps only its rule, which is what actually communicates the nesting.

   The rule COLOUR goes through a variable on purpose: `.hub-card .hub-card` is
   (0,2,0) and would quietly beat `.gtm-report`'s own (0,1,0) border-left,
   turning the teal rule grey with nothing failing anywhere. */
@media (max-width: 620px) {
  .hub-card .hub-card {
    padding: 1rem 0 0 0.9rem;
    background: none;
    border: 0;
    border-left: 3px solid var(--card-rule, var(--hairline-l));
    border-radius: 0;
  }
}
.gtm-report-weeks { margin: 0.9rem 0 0; padding-left: 1.1rem; }
.gtm-report-weeks li { margin-bottom: 0.45rem; font-size: var(--fs-small); }
.gtm-report-weeks li:last-child { margin-bottom: 0; }

.gtm-report-next {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline-l);
}

/* ── PROGRESSIVE DISCLOSURE ───────────────────────────────────────────────
   Two folds: the weeks that are not this one, and the profile beneath a plan.
   Both are native <details>, so they work with JavaScript off, answer Ctrl-F,
   announce themselves to a screen reader and print open. A disclosure built
   from a click handler and a hidden class does none of those. */
.gtm-more,
.hub-fold { margin: 1.5rem 0 0; }
.hub-fold { margin-bottom: 1.25rem; }

.gtm-more > summary,
.hub-fold > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--hairline-l);
  border-radius: 3px;
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink);
}
.gtm-more > summary::-webkit-details-marker,
.hub-fold > summary::-webkit-details-marker { display: none; }

/* The affordance. A disclosure with no visible control is a paragraph that
   happens to be clickable, and nobody clicks it. */
.gtm-more > summary::before,
.hub-fold > summary::before {
  content: '';
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
  flex: none;
  align-self: center;
}
.gtm-more[open] > summary::before,
.hub-fold[open] > summary::before { transform: rotate(45deg); }

.gtm-more > summary:hover,
.hub-fold > summary:hover { border-color: var(--teal); }
.gtm-more > summary:focus-visible,
.hub-fold > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.gtm-more-n,
.hub-fold-n {
  font-weight: 400;
  color: var(--muted);
  margin-left: auto;
}
.hub-fold-t { font-weight: 700; }

/* The profile fold holds whole cards, which bring their own frames — so the
   fold itself adds none, or every section would sit in a box in a box. */
.hub-fold-body { margin-top: 1.25rem; }
.hub-fold-body > .hub-card:last-child,
.hub-fold-body > form:last-child { margin-bottom: 0; }

/* ── Make it yours: the shot list and the two fields the advisor writes ──── */
.gtm-yours { margin: 0.9rem 0 0; }
.gtm-yours > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 0;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--teal-ink, var(--ink));
}
.gtm-yours > summary::-webkit-details-marker { display: none; }
.gtm-yours > summary::before {
  content: '+ ';
  color: var(--teal);
  font-weight: 700;
}
.gtm-yours[open] > summary::before { content: '– '; }
.gtm-yours > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.gtm-yours-n { font-weight: 400; color: var(--muted); }

.gtm-yours-part { margin: 0.9rem 0 0; }
.gtm-yours-part .gtm-label { margin-bottom: 0.35rem; }

/* The shot itself is the instruction — set as a line to read, not a note to
   skim past. */
.gtm-shot-line {
  margin: 0 0 0.7rem;
  font-family: var(--font-serif-text, inherit);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
}
.gtm-shot-spec,
.gtm-shot-avoid {
  margin: 0 0 0.9rem;
  padding-left: 1.1rem;
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.6;
}
.gtm-shot-spec li,
.gtm-shot-avoid li { margin-bottom: 0.4rem; }
.gtm-shot-spec strong { color: var(--ink); }

/* The keep-out list is a control, not a caption — claims.js cannot read a
   photograph, so this list is the only thing standing between an advisor and
   a health claim made by a picture. It gets the warning colour. */
.gtm-shot-avoid {
  border-left: 2px solid var(--coral, #EF6A4A);
  padding: 0.15rem 0 0.15rem 1.4rem;
  margin-left: 0;
  list-style-position: outside;
}

/* The balance. Deliberately quiet — it is a fact about an account, not an
   offer, and it renders for nobody who is not being metered. */
.gtm-builds {
  margin-top: 0.5rem;
  font-size: var(--fs-small);
  color: var(--muted);
}

/* ── /hub/campaign/more ─ their campaign, read back ───────────────────
   The page opens on facts about the reader rather than on an offer, so this
   block is styled as a summary and not as a hero: no gold, no accent rule, the
   same card as everything else. The persuasion is that the numbers are theirs.

   Nothing here introduces a colour. */
/* No font-size here. .hub-main h1 already sets the clamp AND carries the
   descender-clearance fix that had to be made across the whole Hub; overriding
   the size would quietly reintroduce the clipping. Margin only. */
.gtm-readback h1 { margin: 0 0 0.75rem; }

.gtm-readback-facts {
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--hairline-l);
}
.gtm-readback-facts > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--hairline-l);
}
.gtm-readback-facts dt {
  flex: 0 0 7.5rem;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.gtm-readback-facts dd {
  flex: 1 1 12rem;
  margin: 0;
}

/* ── What each gap costs ───────────────────────────────────────
   Numbered, because the count is the argument — an advisor who is missing three
   things should see three. The Foundations answer is indented under each cost
   rather than gathered into a list of its own, so a benefit never appears
   without the problem it belongs to directly above it. */
.gtm-costs {
  margin: 0;
  padding-left: 1.3rem;
}
.gtm-costs > li { margin: 1.4rem 0 0; }
.gtm-costs > li:first-child { margin-top: 0.5rem; }

.gtm-cost-what {
  margin: 0 0 0.3rem;
  font-weight: 600;
}
.gtm-cost-cost { margin: 0 0 0.5rem; }
.gtm-cost-closes {
  margin: 0;
  padding: 0.7rem 0.9rem;
  background: var(--paper);
  border-left: 2px solid var(--gold);
  font-size: var(--fs-small);
}

/* The bridge. The one section that is an argument rather than a fact, so it
   gets the sand background to mark the change of register. */
.gtm-bridge { background: var(--paper); }
.gtm-bridge p { margin: 0 0 0.9rem; }
.gtm-bridge p:last-child { margin-bottom: 0; }

/* ── The two chips on the plan header ─────────────────────────────
   They wrap to a second line rather than shrinking, because "2 CAMPAIGNS LEFT"
   truncated to "2 CAMPAI…" would be worse than a taller header. */
.gtm-plan-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

/* The count. Quieter than the progress chip beside it and NOT a call to action
   — it is a fact with a jump link attached, so it borrows the neutral chip
   colours rather than the gold that means "press me". */
a.hub-stage--count {
  text-decoration: none;
  border: 1px solid var(--hairline-l);
  background: transparent;
}
a.hub-stage--count:hover,
a.hub-stage--count:focus-visible { background: var(--paper-2); }

/* ── The offer at the end of a campaign ───────────────────────────
   It has to read as an offer and not as a wall, so it sits on sand like any
   other card rather than getting a colour of its own. Nothing here introduces
   a hue: the only accent is the gold rule already used by .hub-notice.

   The free line comes FIRST and stays quiet — it is the true, larger half of
   what this section says, and an advisor who reads a price first stops
   reading. */
.gtm-next {
  margin-top: 1.5rem;
  border-top: 2px solid var(--gold);
}
.gtm-next-free {
  margin: 0 0 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--hairline-l);
}
.gtm-next h3 { margin: 0 0 0.5rem; }

/* ── The claims ladder, as a before and after ──────────────────────
   Two stacked blocks rather than side-by-side columns: at 380px a two-column
   comparison becomes two unreadable columns, and this one reads as a sequence
   anyway — what you may say now, then what you could say. */
.gtm-ladder-now,
.gtm-ladder-after {
  margin-top: 1.1rem;
  padding: 0.9rem 1rem;
  background: var(--paper);
  border-left: 2px solid var(--hairline-l);
}
.gtm-ladder-after { border-left-color: var(--gold); }
.gtm-ladder-now ul,
.gtm-ladder-after ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}
.gtm-ladder-now li,
.gtm-ladder-after li { margin: 0.25rem 0; }

/* What is currently forbidden. Struck through rather than coloured red — the
   point is "the copy will not say this", not "you did something wrong". */
.gtm-ladder-no li {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.gtm-covers { margin: 0.75rem 0 1.25rem; }
.gtm-covers dt { font-weight: 600; margin-top: 0.85rem; }
.gtm-covers dd { margin: 0.2rem 0 0; color: var(--muted); }

/* The downsell. Quieter than the offer above it on purpose: somebody arrives
   here having just declined something, and a second pitch at the same volume
   reads as pressure. */
.gtm-downsell {
  margin-top: 1.5rem;
  background: var(--paper);
}
.gtm-downsell h2 { font-size: var(--fs-h3); }

.gtm-rights {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border-left: 2px solid var(--hairline-l);
}

/* Someone waiting for a reply outranks every action in the plan, so it is the
   one thing above this week that is allowed to be loud. */
.gtm-waiting {
  margin: 1.1rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border-left: 3px solid var(--gold);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.gtm-waiting strong { display: block; color: var(--ink); }

/* This week is where the eye should land. Later weeks stay visible — an
   advisor wants to know what is coming — but recede. */
.gtm-week.is-now .gtm-week-n { color: var(--ink); }
.gtm-week.is-now .gtm-week-head { border-bottom-color: var(--gold); }

/* [data-later] used to render at 0.72 opacity to push other weeks back. The
   disclosure now does that job, and dimming content somebody has just chosen
   to open is hostile — they opened it because they want to read it. The
   attribute stays as a hook; the fade does not. */
.gtm-week[data-later] .gtm-week-n { color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════
   ASK WELL — the consultation workspace
   --------------------------------------------------------------------------
   /hub/journeys/:id/design. Read on a shared screen with the person the trip
   is for, which drives two decisions the rest of the Hub does not have to make.

   PRESENT MODE. `.is-present` on <body> hides everything marked
   [data-hide-in-present] — the mismatches, the watch-outs, the verification
   dates, the gaps — and steps the type up. Those are working notes; read cold
   by a prospect mid-sentence they become an argument against the trip. The
   markup is always sent and only ever hidden, so a template can never drift
   out of step with itself.

   NO COLOUR CARRIES MEANING ALONE. The bands are words first. Colour is a
   second signal on top of a word that already says it, because a shared screen
   is somebody else's screen, at their brightness, sometimes projected.
   ══════════════════════════════════════════════════════════════════════════ */

.design .design-head { margin-bottom: 2.5rem; }
.design .design-head h1 { margin-bottom: .3em; }
.design .design-sub { color: var(--muted); max-width: 60ch; margin: 0 0 1.2em; }
.design .design-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.design .design-hint { color: var(--muted); font-size: .82rem; }

.design .design-banner {
  border-left: 3px solid var(--gold);
  background: rgba(217,160,60,.07);
  padding: .9rem 1.1rem; margin-bottom: 2rem; border-radius: 2px;
}
.design .design-banner p { margin: 0 0 .4em; font-size: .9rem; }
.design .design-banner p:last-child { margin-bottom: 0; }

.design .design-block { margin-bottom: 3rem; }
.design .design-block > h2 { margin-bottom: .8em; }
.design .design-note { color: var(--muted); font-size: .9rem; max-width: 68ch; }

/* ── What they are moving between ──────────────────────────────────────── */
.design .design-states {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 1.25rem; align-items: start; margin-bottom: 1.75rem;
}
.design .design-states h3 {
  font-size: .74rem; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--muted); margin: 0 0 .7em;
}
.design .design-arrow { color: var(--mist); font-size: 1.4rem; padding-top: 1.4rem; }

.design .chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.design .chip {
  display: inline-block; padding: .28em .7em;
  border: 1px solid var(--hairline-l); border-radius: 999px;
  font-size: .84rem; line-height: 1.3;
}
.design .design-empty { color: var(--muted); font-style: italic; }

/* Whatever ties for the top weight. Three signals, none of them colour alone:
   it sorts first, it is the only one set in ink rather than muted, and its
   border is solid where the rest are hairlines. A row of six identical chips
   would say "everywhere", which is the one thing it must not say. */
.design .chip--lead { border-color: var(--teal); color: var(--ink); font-weight: 600; }
.design .chip:not(.chip--lead) { color: var(--muted); }

/* A property the guide never classified. The dot holds the column so the names
   still line up, and says nothing about the property — which is the point. */
.design .design-tier--none { border-style: dashed; color: var(--mist); }

.design .design-facts { display: grid; grid-template-columns: 12rem 1fr; gap: .7rem 1.25rem; margin: 0; }
.design .design-facts dt {
  font-size: .74rem; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--muted); padding-top: .25em;
}
.design .design-facts dd { margin: 0; }

.design .design-gaps {
  margin-top: 1.75rem; padding: 1rem 1.2rem;
  border: 1px dashed var(--hairline-l); border-radius: 3px;
}
.design .design-gaps h3 { margin: 0 0 .4em; font-size: .95rem; }
.design .design-gaps p { color: var(--muted); font-size: .86rem; margin: 0 0 .6em; }
.design .design-gaps ul { margin: 0; padding-left: 1.1em; }
.design .design-gaps li { margin-bottom: .2em; }

/* ── Candidates ────────────────────────────────────────────────────────── */
.design .design-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }

.design .design-card {
  border: 1px solid var(--hairline-l); border-radius: 4px;
  padding: 1.25rem 1.4rem;
}
.design .design-card-head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1rem; }
.design .design-card-head h3 { margin: 0; flex: 1 1 auto; }

.design .design-tier {
  flex: 0 0 auto; width: 1.5rem; height: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline-l); border-radius: 2px;
  font-size: .72rem; font-weight: 600; color: var(--muted);
}

/* Four axes, side by side, never summed. There is no total here and there is
   no room for one — which is the point rather than a layout constraint. */
.design .design-bands {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: 1rem;
}
.design .band {
  border-top: 2px solid var(--hairline-l);
  padding-top: .5em; display: flex; flex-direction: column; gap: .15em;
}
.design .band-axis {
  font-size: .68rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted);
}
.design .band-word { font-size: .92rem; font-weight: 600; }

.design .band-strong { border-top-color: var(--teal); }
.design .band-partial { border-top-color: var(--gold); }
.design .band-thin { border-top-color: var(--mist); }
.design .band-absent { border-top-color: var(--hairline-l); }
.design .band-absent .band-word,
.design .band-unknown .band-word { color: var(--muted); font-weight: 400; }

.design .design-why { font-size: .9rem; margin: 0 0 1rem; }
.design .design-why b {
  font-size: .68rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted); margin-right: .5em;
}

.design .design-mismatch { border-top: 1px solid var(--hairline-l); padding-top: .9rem; }
.design .design-mismatch h4 {
  font-size: .68rem; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--muted); margin: 0 0 .6em;
}
.design .design-mismatch ul { list-style: none; margin: 0; padding: 0; }
.design .design-mismatch li {
  padding-left: .9em; position: relative; margin-bottom: .55em;
  font-size: .9rem; line-height: 1.5;
}
.design .design-mismatch li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--mist);
}
.design .design-mismatch li.sev-high::before { background: var(--coral); }
.design .design-mismatch li.sev-medium::before { background: var(--gold); }
.design .design-ev { display: block; color: var(--muted); font-size: .84rem; margin-top: .15em; }

.design .design-verified { color: var(--muted); font-size: .78rem; margin: .9rem 0 0; }

/* ── The rest of the village ───────────────────────────────────────────── */
.design .design-also { list-style: none; margin: 0; padding: 0; }
.design .design-also li {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: .3rem .75rem;
  padding: .7rem 0; border-bottom: 1px solid var(--hairline-l);
}
.design .design-also b { grid-column: 2; }
.design .design-also span:last-child { grid-column: 2; color: var(--muted); font-size: .88rem; }

.design .design-foot { border-top: 1px solid var(--hairline-l); padding-top: 1.2rem; }
.design .design-foot p { color: var(--muted); font-size: .84rem; margin: 0 0 .3em; max-width: 70ch; }
.design .design-prov { font-size: .76rem !important; }

/* ── Present mode ──────────────────────────────────────────────────────── */
.is-present .design [data-hide-in-present] { display: none !important; }
.is-present .design .design-card { padding: 1.5rem 1.75rem; }
.is-present .design .design-card-head h3 { font-size: 1.35rem; }
.is-present .design .band-word { font-size: 1.05rem; }
.is-present .design .chip { font-size: .95rem; padding: .34em .85em; }
.is-present .design .design-facts { grid-template-columns: 14rem 1fr; }
.is-present .design .design-sub { display: none; }

@media (max-width: 44rem) {
  .design .design-states { grid-template-columns: 1fr; }
  .design .design-arrow { display: none; }
  .design .design-bands { grid-template-columns: repeat(2, 1fr); }
  .design .design-facts { grid-template-columns: 1fr; gap: .2rem 0; }
  .design .design-facts dt { padding-top: .8em; }
}

/* ── The one piece of writing ──────────────────────────────────────────────
   Present mode does NOT hide the paragraph — it is the thing being read aloud.
   It hides the button, the note and the flags around it, which are the
   advisor's working apparatus. */
.design .design-narr { max-width: 68ch; }
.design .design-narr-body {
  width: 100%; font: inherit; font-size: 1rem; line-height: 1.65;
  color: var(--ink); background: transparent;
  border: 1px solid var(--hairline-l); border-radius: 3px;
  padding: .9rem 1rem; resize: vertical;
}
.design .design-narr-body:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

.design .design-narr-flags { margin-top: .8rem; }
.design .design-flag {
  margin: 0 0 .4em; padding-left: .9em; position: relative;
  font-size: .88rem; color: var(--muted);
}
.design .design-flag::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--mist);
}
/* Colour is the second signal; "high" already reads as a sentence telling the
   advisor to check something before saying it. */
.design .design-flag.is-high { color: var(--ink); }
.design .design-flag.is-high::before { background: var(--coral); }

.is-present .design .design-narr-body {
  border-color: transparent; padding-left: 0; font-size: 1.15rem;
}
.is-present .design .design-narr-flags { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   /j/:token — the document a client keeps
   --------------------------------------------------------------------------
   The only page in this stylesheet that a client sees, and the only one that is
   not a working surface. Everything else in hub.css is built for scanning: an
   advisor with fourteen Journeys open needs density and rules and small type.
   This is the opposite job. It is read once, slowly, by one person, probably on
   a phone, probably in the evening, deciding whether they want the trip.

   So it takes the site's editorial voice rather than the Hub's: serif display,
   a narrow measure, generous air, and no cards. Cards are for things you
   compare. There is nothing to compare here — that decision was made on the
   call, and this is what came out of it.

   IT PRINTS. Not because a print button exists — there is no JavaScript on this
   page at all — but because people print things they are deciding about, and a
   plan that comes out of a printer with the header repeated and the days split
   across a page break reads as careless about the trip it describes.
   ══════════════════════════════════════════════════════════════════════════ */

.itin { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem); }
.itin .wrap--narrow { max-width: 40rem; }

.itin-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.itin-head h1 {
  font-family: var(--serif-display); font-size: var(--fs-h2);
  line-height: 1.12; margin: .25em 0 0;
}
.itin-shape {
  font-family: var(--serif); font-size: var(--fs-lead);
  color: var(--muted); margin: .8em 0 0;
}

/* The two generated paragraphs. Set a step larger than the body: they are the
   voice of the person who prepared this, and they open and close the reading. */
.itin-open, .itin-close {
  font-family: var(--serif); font-size: var(--fs-lead);
  line-height: 1.62; margin: 0 0 clamp(2.2rem, 5vw, 3.4rem);
}
.itin-close {
  border-top: 1px solid var(--hairline-l);
  padding-top: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 2.5rem;
}
.itin-open p, .itin-close p { margin: 0 0 .9em; }
.itin-open p:last-child, .itin-close p:last-child { margin-bottom: 0; }

.itin-block { margin: 0 0 clamp(2.4rem, 5vw, 3.6rem); }
.itin-block > h2 {
  font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted);
  font-family: var(--sans); font-weight: 600;
  margin: 0 0 1.4em;
}

/* ── The days ─────────────────────────────────────────────────────────────
   A ruled list, not a table and not a timeline. The number is small and set
   away from the text: it is an index, and making it a graphic device would put
   the emphasis on the count of days rather than on what is in them. */
.itin-days { list-style: none; margin: 0; padding: 0; }
.itin-days li {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem;
  padding: 1.1rem 0; border-top: 1px solid var(--hairline-l);
}
.itin-days li:last-child { border-bottom: 1px solid var(--hairline-l); }
.itin-day-n {
  margin: 0; font-family: var(--sans); font-size: var(--fs-small);
  letter-spacing: .06em; color: var(--muted); padding-top: .15em;
}
.itin-day-shape {
  margin: 0; font-family: var(--serif-display);
  font-size: 1.15rem; line-height: 1.35;
}
.itin-day-note {
  margin: .45em 0 0; color: var(--muted); line-height: var(--lh-body);
}

/* ── The places ───────────────────────────────────────────────────────────
   No images. Every photograph here would be one the property supplied, of a
   room that may not be the room, and this document already says its facts were
   verified on a date. A picture makes a promise the sentence beside it is
   carefully not making. */
.itin-places { list-style: none; margin: 0; padding: 0; }
.itin-places li { margin: 0 0 2rem; }
.itin-places li:last-child { margin-bottom: 0; }
.itin-places h3 {
  font-family: var(--serif-display); font-size: var(--fs-h3);
  line-height: 1.2; margin: 0 0 .35em;
}
.itin-places p { margin: 0; line-height: var(--lh-body); }

/* The line that makes the advisor necessary rather than optional. Quiet, but
   never hidden, and never smaller than the small type elsewhere. */
.itin-verified {
  margin-top: .7em !important;
  font-size: var(--fs-small); color: var(--muted);
  padding-left: .9rem; border-left: 2px solid var(--gold-deep);
}

/* The advisor's own words, on sand so they read as a note rather than as more
   of the document. */
.itin-note {
  background: var(--paper-2); border-radius: 3px;
  padding: clamp(1.3rem, 3vw, 1.8rem);
}
.itin-note h2 { margin-bottom: .9em; }
.itin-note p { margin: 0 0 .8em; line-height: var(--lh-body); }
.itin-note p:last-child { margin-bottom: 0; }

/* ── The one call to action, and it is a person ───────────────────────────
   Not a button. A button implies a transaction is available here, and none is.
   The advisor's name, business and two ways to reach them, set as contact
   details rather than as a conversion unit. */
.itin-foot { border-top: 2px solid var(--ink); padding-top: 1.6rem; }
.itin-foot h2 {
  font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted);
  font-family: var(--sans); font-weight: 600; margin: 0 0 1em;
}
.itin-foot p { line-height: var(--lh-body); margin: 0 0 1em; }
.itin-contact {
  display: flex; flex-direction: column; gap: .2em;
  font-family: var(--sans);
}
.itin-contact strong { font-size: 1.05rem; }
.itin-contact span { color: var(--muted); }
.itin-contact a { color: var(--teal); text-decoration: none; }
.itin-contact a:hover { text-decoration: underline; }
.itin-prov {
  margin-top: 1.4em !important;
  font-size: var(--fs-small); color: var(--muted);
}

/* ── Withdrawn, expired, never existed ────────────────────────────────────
   Given real space rather than being squeezed into an error strip. Somebody
   arriving here was sent a link by a person they trust, and the page has one
   job: make it obvious this is fixable and who fixes it. */
.itin--gone { text-align: left; padding-top: clamp(4rem, 10vw, 8rem); }
.itin--gone h1 {
  font-family: var(--serif-display); font-size: var(--fs-h2);
  line-height: 1.15; margin: 0 0 .6em;
}
.itin--gone p {
  font-family: var(--serif); font-size: var(--fs-lead);
  line-height: 1.6; color: var(--muted); margin: 0 0 1em; max-width: 34rem;
}

@media (max-width: 34rem) {
  .itin-days li { grid-template-columns: 1fr; gap: .2rem; }
  .itin-day-n { padding-top: 0; }
}

/* ── On paper ─────────────────────────────────────────────────────────────
   People print things they are deciding about. The chrome goes, the measure
   opens up, and nothing that belongs together is allowed to break apart. */
@media print {
  .site-header, .site-footer { display: none !important; }
  .itin { padding: 0; }
  .itin .wrap--narrow { max-width: none; }
  .itin-days li, .itin-places li, .itin-note, .itin-foot { break-inside: avoid; }
  .itin-block > h2 { break-after: avoid; }
  .itin-note { background: transparent; border: 1px solid var(--hairline-l); }
  /* A URL printed beside every link is noise on a document with two links,
     both of which are the advisor's own contact details. */
  .itin-contact a::after { content: none !important; }
}

/* ── Issuing ───────────────────────────────────────────────────────────────
   The last block on the working screen, and the only irreversible control on
   it. Set apart by a rule and a step of air rather than by colour: the button
   is already the only gold thing on the page, and a warning-coloured panel
   would say "danger" about an ordinary end to a good consultation. */
.design .design-issue {
  border-top: 2px solid var(--ink);
  padding-top: 1.6rem; margin-top: 3.5rem;
}
.design .design-issue-fields {
  display: grid; grid-template-columns: 8rem 1fr; gap: 1rem 1.25rem;
  align-items: start; margin: 1.4rem 0;
}
.design .design-issue-fields .hub-field--wide { grid-column: 2; }
.design .design-issue-fields input[type="number"] { width: 100%; }

/* What comes back. Given real weight, because the advisor has to notice the
   sentence about this being the only time the link is shown. */
.design .design-issued {
  margin-top: 1.6rem; padding: 1.2rem 1.4rem;
  background: var(--paper-2); border-radius: 3px;
}
.design .design-issued-h {
  margin: 0 0 .4em; font-family: var(--serif-display); font-size: 1.2rem;
}
.design .design-issued-warn {
  margin: 0 0 1em; font-size: .9rem; color: var(--ink);
  padding-left: .9rem; border-left: 2px solid var(--gold-deep);
}
.design .design-issued-link {
  width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88rem; padding: .6rem .7rem; margin-bottom: .9rem;
  border: 1px solid var(--hairline-l); border-radius: 3px;
  background: var(--paper); color: var(--ink);
}
.design .design-issued-exp {
  margin: .9rem 0 0; font-size: .84rem; color: var(--muted);
}

@media (max-width: 44rem) {
  .design .design-issue-fields { grid-template-columns: 1fr; }
  .design .design-issue-fields .hub-field--wide { grid-column: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE ADVISOR PLAYBOOK
   --------------------------------------------------------------------------
   /hub/campaign/playbook. A document inside a working surface, which is the
   whole tension: it lives behind the Hub's chrome and reads like the field
   guide. Serif for anything an advisor reads as prose, the Hub's sans for the
   labels and the form, a narrow measure throughout.

   THE GAPS ARE STYLED TO BE READ, NOT DISMISSED. An empty section here is the
   most useful thing on the page — docs/bible-feedback.md found the engine is
   input-limited, so the missing inputs ARE the finding. They get a dashed
   frame and full-size type rather than the grey small print that usually
   signals "ignore this".
   ══════════════════════════════════════════════════════════════════════════ */

.playbook .wrap--narrow { max-width: 44rem; }

.playbook .pb-head { margin-bottom: 3rem; }
.playbook .pb-head h1 { font-family: var(--serif-display); margin: .2em 0 .4em; }
.playbook .pb-sub {
  font-family: var(--serif); font-size: var(--fs-lead);
  line-height: 1.6; color: var(--muted); margin: 0 0 1em; max-width: 40rem;
}
.playbook .pb-print { font-size: var(--fs-small); color: var(--muted); margin: 0; }

.playbook .pb-block {
  margin-bottom: 3.2rem; padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--hairline-l);
}
.playbook .pb-block:last-of-type { border-bottom: 0; }
.playbook .pb-block > h2 {
  font-family: var(--serif-display); font-size: var(--fs-h3);
  line-height: 1.2; margin: 0 0 .8em;
}
.playbook .pb-lead {
  font-family: var(--serif); font-size: var(--fs-lead);
  line-height: 1.6; margin: 0 0 1.2em;
}
.playbook .pb-note { color: var(--muted); font-size: var(--fs-small); margin: 0 0 1.2em; }

/* ── Facts ────────────────────────────────────────────────────────────────
   A definition list rather than a table: these are one-to-one, they wrap, and
   a table would put a border around an advisor's own words. */
.playbook .pb-facts {
  display: grid; grid-template-columns: 13rem 1fr; gap: .8rem 1.5rem; margin: 0 0 1.4rem;
}
.playbook .pb-facts dt {
  font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted); padding-top: .3em;
}
.playbook .pb-facts dd { margin: 0; line-height: var(--lh-body); }

/* ── A gap ────────────────────────────────────────────────────────────────
   Deliberately not styled as a warning. It is not an error, it is the most
   actionable thing on the page, and a red panel would make an advisor defensive
   about something they simply have not done yet. */
.playbook .pb-empty {
  font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.55;
  color: var(--ink); margin: 0 0 1.2em; max-width: 40rem;
}
.playbook .pb-gap {
  border: 1px dashed var(--hairline-l); border-radius: 3px;
  padding: 1.1rem 1.3rem; margin-top: 1.4rem;
}
.playbook .pb-gap h3 { font-size: 1rem; margin: 0 0 .8em; }
.playbook .pb-gap ul { list-style: none; margin: 0 0 1em; padding: 0; }
.playbook .pb-gap li { margin-bottom: .7em; }
.playbook .pb-gap b { display: block; }
.playbook .pb-gap span { color: var(--muted); font-size: var(--fs-small); }

/* ── The Day 2 form ───────────────────────────────────────────────────────
   Apparatus, not document — hidden when printing. */
.playbook .pb-form {
  margin-top: 2rem; padding: 1.4rem 1.5rem;
  background: var(--paper-2); border-radius: 3px;
}
.playbook .pb-form h3 { margin: 0 0 1.2em; font-size: 1.05rem; }
.playbook .pb-field { display: block; margin: 0 0 1.5rem; border: 0; padding: 0; }
.playbook .pb-field legend,
.playbook .pb-field-label {
  display: block; font-weight: 600; margin-bottom: .45em; padding: 0;
}
.playbook .pb-field legend span,
.playbook .pb-field-label span {
  display: block; font-weight: 400; color: var(--muted);
  font-size: var(--fs-small); margin-top: .15em;
}
.playbook .pb-field select {
  font: inherit; padding: .5rem .6rem; width: 100%; max-width: 26rem;
  border: 1px solid var(--hairline-l); border-radius: 3px; background: var(--paper);
}
.playbook .pb-checks { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.playbook .pb-check {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .95rem; cursor: pointer;
}

/* ── Channels ─────────────────────────────────────────────────────────────
   Works and Kills it get a word and a colour, in that order — the word is the
   signal and the colour is the second one, same rule as the design bands. */
.playbook .pb-channel {
  padding: 1rem 0; border-top: 1px solid var(--hairline-l);
}
.playbook .pb-channel h3 {
  font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted); margin: 0 0 .6em;
}
.playbook .pb-channel p { margin: 0 0 .5em; line-height: var(--lh-body); }
.playbook .pb-channel b {
  font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; margin-right: .6em;
}
.playbook .pb-conv b { color: var(--teal); }
.playbook .pb-kills b { color: var(--coral); }
.playbook .pb-cta b { color: var(--gold-deep); }
.playbook .pb-seeded {
  font-size: var(--fs-small); color: var(--mist); font-style: italic;
}

/* ── The plan ─────────────────────────────────────────────────────────────
   Same ruled-list shape as the itinerary's days, on purpose: an advisor who has
   read one of these documents can read the other without relearning it. */
.playbook .pb-weeks { list-style: none; margin: 0; padding: 0; }
.playbook .pb-weeks > li {
  display: grid; grid-template-columns: 5rem 1fr; gap: 1rem;
  padding: 1.1rem 0; border-top: 1px solid var(--hairline-l);
}
.playbook .pb-week-n {
  margin: 0; font-size: var(--fs-small); color: var(--muted); padding-top: .1em;
}
.playbook .pb-week-theme {
  margin: 0 0 .5em; font-family: var(--serif-display); font-size: 1.15rem;
}
.playbook .pb-weeks ul { margin: 0; padding-left: 1.1em; }
.playbook .pb-weeks ul li { margin-bottom: .4em; line-height: 1.5; }
.playbook .pb-weeks ul span { display: block; color: var(--muted); font-size: var(--fs-small); }

/* ── Never say ────────────────────────────────────────────────────────────
   Last, and the one place on this page that is allowed to look like a rule. */
.playbook .pb-never { border-top: 2px solid var(--ink); padding-top: 1.6rem; }
.playbook .pb-never ul { margin: 0; padding-left: 1.1em; }
.playbook .pb-never li { margin-bottom: .5em; line-height: var(--lh-body); }

.playbook .pb-foot { margin-top: 2.5rem; }
.playbook .pb-prov { font-size: var(--fs-small); color: var(--muted); margin: 0; }

@media (max-width: 40rem) {
  .playbook .pb-facts { grid-template-columns: 1fr; gap: .2rem 0; }
  .playbook .pb-facts dt { padding-top: .8em; }
  .playbook .pb-weeks > li { grid-template-columns: 1fr; gap: .3rem; }
}

/* ── On paper ─────────────────────────────────────────────────────────────
   This is the half of the Playbook that is meant to leave the screen. The form
   goes, the Hub chrome goes, and no section is allowed to break across a page —
   a capacity rule split from its own heading is a rule nobody reads. */
@media print {
  .playbook .pb-screen-only,
  .playbook .pb-form,
  .site-header, .site-footer, .hub-context, .hub-back { display: none !important; }
  .playbook .wrap--narrow { max-width: none; }
  .playbook .pb-block { break-inside: avoid; page-break-inside: avoid; }
  .playbook .pb-block > h2 { break-after: avoid; }
  .playbook .pb-never { break-before: page; }
  .playbook .pb-gap { border-style: solid; }
}

/* The anatomy of a post is an ORDER, so it is a numbered list. Rendering the
   array into a template stringified it with commas, which read as sentence
   punctuation and produced one run-on line. */
.playbook .pb-anatomy { margin: 0 0 .8em; padding-left: 1.3em; }
.playbook .pb-anatomy li { margin-bottom: .25em; line-height: 1.5; }

/* ── What has already been sent ────────────────────────────────────────────
   A ledger, not a card grid. An advisor reads this to answer one question —
   "is the client holding something, and is it still live?" — so the state is
   the first thing on each row and withdrawal sits beside it rather than behind
   a menu. A withdrawn version stays visible and greyed: knowing you withdrew
   version 1 is the reason version 2 exists. */
.design .design-issued-list { border-top: 1px solid var(--hairline-l); padding-top: 1.6rem; }
.design .design-versions { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.design .design-version {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  padding: .9rem 0; border-top: 1px solid var(--hairline-l);
}
.design .design-version.is-dead { color: var(--muted); }
.design .design-version-n { margin: 0 0 .2em; font-weight: 600; }
.design .design-version-when { margin: 0; font-size: .86rem; color: var(--muted); }
.design .design-version form { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.design .design-version .design-hint { max-width: 26ch; }

/* ── The shape of the journey ──────────────────────────────────────────────
   Ranked, never pre-selected. The bands reuse the candidate card's border
   colours so an advisor reads them the same way in both places — the word is
   the signal, the colour is the second one. */
.design .design-shape-picked { margin-bottom: 1.4rem; }
.design .design-shape-name {
  font-family: var(--serif-display); font-size: var(--fs-h3);
  line-height: 1.2; margin: 0 0 .2em;
}
.design .design-rhythm { list-style: none; margin: 1rem 0 0; padding: 0; }
.design .design-rhythm li {
  display: grid; grid-template-columns: 5rem 1fr; gap: .8rem;
  padding: .5rem 0; border-top: 1px solid var(--hairline-l);
}
.design .design-rhythm span { color: var(--muted); font-size: .86rem; }

.design .design-recipes { list-style: none; margin: 1rem 0 1.2rem; padding: 0; }
.design .design-recipes > li { border-top: 1px solid var(--hairline-l); }
.design .design-recipe {
  display: grid; grid-template-columns: 1.2rem 1fr; gap: .2rem .7rem;
  padding: .8rem 0; cursor: pointer; align-items: baseline;
}
.design .design-recipe input { grid-row: 1 / span 3; }
.design .design-recipe-name { font-weight: 600; }
.design .design-recipe-bands { grid-column: 2; display: flex; gap: .9rem; }
.design .design-recipe-bands b span { display: block; font-size: .6rem; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-bottom: .15em; }
.design .design-recipe-bands b {
  font-size: .68rem; letter-spacing: var(--track-label); text-transform: uppercase;
  font-weight: 600; color: var(--muted); border-top: 2px solid var(--hairline-l);
  padding-top: .2em;
}
.design .design-recipe-bands b.band-strong { border-top-color: var(--teal); color: var(--ink); }
.design .design-recipe-bands b.band-partial { border-top-color: var(--gold); }
.design .design-recipe-bands b.band-thin { border-top-color: var(--mist); }
.design .design-recipe-why { grid-column: 2; color: var(--muted); font-size: .86rem; }

@media (max-width: 40rem) {
  .design .design-rhythm li { grid-template-columns: 1fr; gap: .1rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ASK WELL — THE STEPPED FLOW
   --------------------------------------------------------------------------
   Four stages, one at a time, each a screen shared with the client. The rail is
   four links; the stage headline speaks to the room. Everything the advisor
   taps is a native control inside a form, dressed to be read across a table.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The rail ─────────────────────────────────────────────────────────── */
.design .design-rail {
  list-style: none; margin: .6rem 0 1.6rem; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
}
.design .design-rail li { border-top: 3px solid var(--hairline-l); padding-top: .55rem; }
.design .design-rail li.is-done { border-top-color: var(--gold-deep); }
.design .design-rail li.is-now  { border-top-color: var(--gold); }
.design .design-rail a {
  display: flex; align-items: baseline; gap: .5rem; text-decoration: none;
  font-family: var(--sans); font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted);
}
.design .design-rail li.is-now a { color: var(--ink); font-weight: 600; }
.design .design-rail-n {
  display: inline-flex; width: 1.4rem; height: 1.4rem; align-items: center; justify-content: center;
  border: 1px solid currentColor; border-radius: 50%; font-size: .66rem; letter-spacing: 0;
}
.design .design-stagenav {
  display: flex; justify-content: space-between; align-items: center;
  margin: 2.5rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--hairline-l);
}

/* ── Understand · the live controls ───────────────────────────────────────
   Big targets, words first. Radios and checkboxes stay in the DOM (visually
   hidden, still focusable) so keyboard and JS-off paths are the native ones;
   the label is the thing you tap. */
.design .design-consult-form { margin-top: 1rem; }
.design .design-q { border: 0; padding: 0; margin: 0 0 1.8rem; }
.design .design-q legend {
  font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--muted); padding: 0; margin: 0 0 .7em;
}
.design .design-q--row { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start; }

.design .design-picks { display: flex; flex-wrap: wrap; gap: .5rem; }
.design .design-pick { position: relative; display: inline-flex; cursor: pointer; }
.design .design-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.design .design-pick span {
  display: inline-block; padding: .55em 1em; border-radius: 999px;
  border: 1px solid var(--hairline-l); font-size: .95rem; line-height: 1.3;
  transition: border-color .12s, background .12s;
}
.design .design-pick:hover span { border-color: var(--gold-deep); }
.design .design-pick input:checked + span {
  border-color: var(--ink); background: var(--ink); color: var(--paper); font-weight: 600;
}
.design .design-pick input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.design .design-picks--wide .design-pick span { padding: .8em 1.2em; font-size: 1.02rem; }
.design .design-picks--seg { gap: 0; }
.design .design-picks--seg .design-pick span { border-radius: 0; margin-left: -1px; }
.design .design-picks--seg .design-pick:first-child span { border-radius: 999px 0 0 999px; margin-left: 0; }
.design .design-picks--seg .design-pick:last-child span { border-radius: 0 999px 999px 0; }

/* Readiness: seven points on a line, in order. The line is the visual; the
   words are the meaning. */
.design .design-steps {
  display: grid; grid-template-columns: repeat(7, 1fr); position: relative; padding-top: .4rem;
}
.design .design-steps::before {
  content: ""; position: absolute; left: 7%; right: 7%; top: 1.05rem;
  border-top: 2px solid var(--hairline-l);
}
.design .design-step {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  cursor: pointer; text-align: center;
}
.design .design-step input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.design .design-step-dot {
  width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--paper);
  border: 2px solid var(--hairline-l); position: relative; z-index: 1; transition: all .12s;
}
.design .design-step:hover .design-step-dot { border-color: var(--gold-deep); }
.design .design-step input:checked ~ .design-step-dot {
  background: var(--ink); border-color: var(--ink); transform: scale(1.25);
}
.design .design-step input:focus-visible ~ .design-step-dot { outline: 2px solid var(--teal); outline-offset: 2px; }
.design .design-step-word { font-size: .82rem; color: var(--muted); line-height: 1.25; }
.design .design-step input:checked ~ .design-step-word { color: var(--ink); font-weight: 600; }

/* Nights: a stepper around a real number input. */
.design .design-stepper {
  display: inline-flex; align-items: stretch; border: 1px solid var(--hairline-l);
  border-radius: 999px; overflow: hidden;
}
.design .design-stepper button {
  font: inherit; font-size: 1.1rem; width: 2.6rem; border: 0; background: transparent;
  cursor: pointer; color: var(--ink);
}
.design .design-stepper button:hover { background: var(--paper-2); }
.design .design-stepper input {
  font: inherit; font-size: 1.1rem; width: 3.4rem; text-align: center; border: 0;
  border-left: 1px solid var(--hairline-l); border-right: 1px solid var(--hairline-l);
  background: transparent; -moz-appearance: textfield;
}
.design .design-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* The four scales: a native range with its poles named. */
.design .design-q--scales { display: grid; gap: .9rem; }
.design .design-scale { display: grid; grid-template-columns: 7rem 8rem 1fr 8rem; gap: 1rem; align-items: center; }
.design .design-scale-name {
  font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
}
.design .design-scale-lo { text-align: right; font-size: .86rem; color: var(--muted); }
.design .design-scale-hi { font-size: .86rem; color: var(--muted); }
.design .design-scale input[type="range"] { width: 100%; accent-color: var(--ink); }

/* ── Compare · the brochure cards ─────────────────────────────────────────
   Photograph first. Village accent arrives as --v / --v-ink on the card so the
   whole card can borrow it without a class per village. The reasoning is in a
   details block the advisor opens; Present mode removes it. */
.design .design-props { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.design .design-prop {
  display: grid; grid-template-columns: minmax(0, 44%) 1fr;
  border: 1px solid var(--hairline-l); border-radius: 4px; overflow: hidden;

}
.design .design-prop--text { grid-template-columns: 1fr; }
.design .design-prop.is-carried { border-color: var(--ink); }
.design .design-prop-media { background: var(--paper-2); }
.design .design-prop-media picture, .design .design-prop-media img {
  display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2;
}
.design .design-prop-body { padding: 1.4rem 1.6rem 1.2rem; }
.design .design-prop-body .eyebrow { color: var(--v-ink, var(--gold-deep)); margin-bottom: .3em; }
.design .design-prop-body h3 {
  font-family: var(--serif-display); font-size: var(--fs-h3); line-height: 1.15; margin: 0 0 .5em;
}
.design .design-prop-hook { font-family: var(--serif); font-size: 1.05rem; line-height: 1.55; margin: 0 0 .8em; }
.design .design-prop-best { margin: 0 0 .9em; line-height: 1.5; }
.design .design-prop-best b {
  font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--muted); margin-right: .5em; font-weight: 600;
}
.design .design-prop-inc { margin: 0 0 1em; padding-left: 1.1em; }
.design .design-prop-inc li { margin-bottom: .3em; line-height: 1.5; font-size: .95rem; }
.design .design-prop-meta { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; margin: 0 0 .6em; }
.design .chip--v { border-color: var(--v, var(--hairline-l)); color: var(--v-ink, var(--ink)); font-weight: 600; }

.design .design-depth { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; }
.design .design-depth li {
  font-size: .66rem; letter-spacing: var(--track-label); text-transform: uppercase;
  padding: .25em .55em; border-top: 2px solid var(--hairline-l); color: var(--mist);
}
.design .design-depth li.is-on { color: var(--ink); border-top-color: var(--v, var(--teal)); }
.design .design-depth--unknown { font-size: .82rem; color: var(--muted); font-style: italic; }

.design .design-why { border-top: 1px solid var(--hairline-l); margin-top: 1rem; padding-top: .8rem; }
.design .design-why summary {
  cursor: pointer; font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted); list-style: none;
}
.design .design-why summary::-webkit-details-marker { display: none; }
.design .design-why summary::before { content: "+ "; }
.design .design-why[open] summary::before { content: "\2212 "; }
.design .design-why .design-bands { margin-top: .9rem; }
.design .design-price { margin-top: 1rem; padding: .9rem 1rem; background: var(--paper-2); border-radius: 3px; }
.design .design-price h4 {
  margin: 0 0 .4em; font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--gold-deep);
}
.design .design-price p { margin: 0 0 .5em; font-size: .9rem; line-height: 1.5; }

.design .design-prop-actions {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .8rem;
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--hairline-l);
}
.design .design-carry { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-weight: 600; }
.design .design-carry input { width: 1.15rem; height: 1.15rem; accent-color: var(--ink); }
.design .design-aside { display: inline-flex; gap: .4rem; align-items: center; }
.design .design-aside select {
  font: inherit; font-size: .84rem; padding: .3rem .4rem;
  border: 1px solid var(--hairline-l); border-radius: 3px; background: var(--paper);
}
.design .design-choose-actions { margin-top: 1.6rem; }

@media (max-width: 52rem) {
  .design .design-rail { grid-template-columns: repeat(2, 1fr); }
  .design .design-q--row { grid-template-columns: 1fr; gap: 1.2rem; }
  .design .design-steps { grid-template-columns: repeat(4, 1fr); row-gap: 1rem; }
  .design .design-steps::before { display: none; }
  .design .design-scale { grid-template-columns: 1fr; gap: .3rem; }
  .design .design-scale-lo { text-align: left; }
  .design .design-prop { grid-template-columns: 1fr; }
}

/* ── Compare · property gallery ─────────────────────────────────────────────
   The hero stays the hero; up to six labelled thumbs sit under it in a strip.
   Every thumb is a link (JS-off behaviour); with JS a tap swaps the hero in
   place. aria-current marks the frame on show — a border, and the word, since
   no colour carries meaning alone. */
.design .design-prop-media .media-gallery { display: flex; flex-direction: column; height: 100%; margin: 0; }
.design .design-prop-media .media-gallery--one { display: block; }
.design .media-gallery-hero { flex: 1 1 auto; min-height: 0; display: flex; }
.design .media-gallery-hero picture, .design .media-gallery-hero img { width: 100%; height: 100%; min-height: 0; object-fit: cover; aspect-ratio: auto; }
.design .media-thumbs {
  list-style: none; margin: 0; padding: .45rem .45rem .2rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(4.4rem, 1fr)); gap: .3rem;
}
.design .media-thumbs li { margin: 0; }
.design .media-thumbs a {
  display: block; text-decoration: none; color: var(--ink);
  border: 2px solid transparent; border-radius: 3px; overflow: hidden; background: var(--paper);
}
.design .media-thumbs a:hover, .design .media-thumbs a:focus-visible { border-color: var(--v, var(--teal)); }
.design .media-thumbs a[aria-current="true"] { border-color: var(--ink); }
.design .media-thumbs picture, .design .media-thumbs img { height: auto; }
.design .media-thumbs span {
  display: block; font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; text-align: center;
  padding: .3em .2em .25em; color: var(--muted); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.design .media-thumbs a[aria-current="true"] span { color: var(--ink); font-weight: 600; }
.design .media-credit { margin: auto 0 0; padding: .35rem .6rem .6rem; font-size: .72rem; line-height: 1.4; color: var(--muted); }
.design .media-uncleared { margin-left: .4em; color: var(--gold-deep); font-weight: 600; }

/* ── Client document · one photograph per place ─────────────────────────────
   Cleared frames only (filtered at assemble time in design-itinerary.js). The
   credit sits under the frame because the photograph is the property's. */
.itin-places .itin-place-media { margin: 0 0 .9rem; }
.itin-places .itin-place-media picture, .itin-places .itin-place-media img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px;
}
.itin-places .itin-place-credit { margin: .35rem 0 0; font-size: .72rem; color: var(--muted); }
@media print {
  .itin-places .itin-place-media { break-inside: avoid; max-width: 60%; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ASK WELL — THE SHAPE · the arc
   --------------------------------------------------------------------------
   One column per day. Colour is the village accent of that day's property;
   fill is the intensity — rest a dashed outline, low a third, medium two
   thirds, high full — and the WORD sits in the column, because no colour
   carries meaning alone. Server-rendered; nothing here needs JavaScript.
   ══════════════════════════════════════════════════════════════════════════ */
.design .design-arcwrap { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem 2.5rem; align-items: start; }
.design .design-arc { --days: 7; }
.design .design-arc-phases, .design .design-arc-days {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); column-gap: .45rem;
}
.design .design-arc-phases { margin-bottom: .5rem; }
.design .design-arc-phases li {
  font-family: var(--serif-display); font-size: 1.05rem; line-height: 1.2; color: var(--ink);
  border-bottom: 1px solid var(--hairline-l); padding: 0 .1rem .45rem; min-height: 1.6em;
}
.design .design-arc-phases li:empty { border-bottom-color: transparent; }
.design .design-arc-day { display: grid; grid-template-rows: 9.5rem auto auto auto; row-gap: .3rem; min-width: 0; }
.design .design-arc-col { display: flex; align-items: flex-end; text-decoration: none; color: inherit; border-radius: 3px; }
.design .design-arc-col:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.design .design-arc-bar {
  display: flex; align-items: flex-end; justify-content: center; width: 100%;
  background: var(--v, var(--teal)); border-radius: 3px 3px 0 0;
}
.design .design-arc-word {
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  padding: .35em .5em; margin: .3rem; border-radius: 2px; white-space: nowrap;
  background: rgba(251,248,241,.92); color: var(--ink);
}
.design .design-arc-day.is-high   .design-arc-bar { height: 100%; }
.design .design-arc-day.is-medium .design-arc-bar { height: 66%; }
.design .design-arc-day.is-low    .design-arc-bar { height: 34%; }
.design .design-arc-day.is-rest   .design-arc-bar {
  height: 100%; background: transparent;
  border: 1.5px dashed var(--v, var(--hairline-l)); border-bottom: 0; align-items: center;
}
.design .design-arc-day.is-unset  .design-arc-bar {
  height: 100%; background: var(--paper-2); align-items: center;
}
.design .design-arc-day.is-unset .design-arc-word { letter-spacing: .05em; text-transform: none; font-weight: 400; font-style: italic; white-space: normal; text-align: center; background: transparent; color: var(--muted); }
.design .design-arc-days > li { border-top: 3px solid var(--v, var(--hairline-l)); }
.design .design-arc-days > li.is-unset { border-top-color: var(--hairline-l); }
.design .design-arc-n { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); padding-top: .4rem; }
.design .design-arc-prop { font-size: .84rem; line-height: 1.35; color: var(--v-ink, var(--ink)); font-weight: 600; }
.design .design-arc-none { color: var(--muted); font-weight: 400; font-style: italic; }
.design .design-arc-note { font-size: .82rem; line-height: 1.45; color: var(--ink); }
.design .design-arc-day.is-edited .design-arc-n::after { content: " · yours"; letter-spacing: .05em; text-transform: none; }

/* The cues — the advisor's prompts beside the arc */
.design .design-cues { display: grid; gap: 1rem; align-content: start; }
.design .design-cue-ask { font-family: var(--serif-display); font-size: 1.3rem; line-height: 1.3; margin: 0; }
.design .design-cue-rule, .design .design-cue-depth { margin: 0; font-size: .92rem; line-height: 1.5; }
.design .design-cue-rule b, .design .design-cue-depth b {
  display: block; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: .2em;
}
.design .design-cue-flags { margin: 0; padding: .8rem 1rem .8rem 2.1rem; background: rgba(217,160,60,.10); border-radius: 3px; font-size: .9rem; line-height: 1.5; }
.design .design-cue-flags li + li { margin-top: .4em; }
.design .design-cue-ok { margin: 0; font-size: .88rem; color: var(--muted); }
.design .design-cue-inferred { margin: 0; font-size: .78rem; color: var(--muted); font-style: italic; }

/* Editing a day */
.design .design-days { margin-top: 2rem; border-top: 1px solid var(--hairline-l); }
.design .design-day { border-bottom: 1px solid var(--hairline-l); }
.design .design-day summary {
  cursor: pointer; padding: .9rem 0; display: flex; gap: 1rem; align-items: baseline; list-style: none;
}
.design .design-day summary::-webkit-details-marker { display: none; }
.design .design-day summary::before { content: "+"; color: var(--muted); width: 1em; }
.design .design-day[open] summary::before { content: "\2212"; }
.design .design-day-n { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); font-weight: 600; min-width: 4.2rem; }
.design .design-day-sum { font-size: .95rem; }
.design .design-day-form { padding: .2rem 0 1.4rem 2em; }
.design .design-day-form .design-q { margin-bottom: 1.2rem; }
.design .design-day-form textarea {
  width: 100%; font: inherit; font-size: .95rem; line-height: 1.5; padding: .6rem .75rem;
  border: 1px solid var(--hairline-l); border-radius: 3px; background: var(--paper); resize: vertical;
}
.design .design-day-form textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.design .design-day-best { font-size: .9rem; line-height: 1.5; margin: 0 0 1.2rem; max-width: 68ch; }
.design .design-day-best b { display: block; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: .2em; }
.design .design-daynote-out { margin: .6rem 0 0; font-size: .92rem; line-height: 1.5; padding: .7rem .9rem; background: var(--paper-2); border-radius: 3px; }
.design .design-daynote-out .btn { margin-left: .5em; }
.design .design-picks--band .design-pick input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* The arc thumbnails on the recipe cards */
.design .design-recipe-arc { grid-column: 2; display: inline-flex; gap: 3px; align-items: flex-end; height: 1.4rem; }
.design .design-recipe-arc i { display: block; width: .9rem; background: var(--teal); border-radius: 2px 2px 0 0; }
.design .design-recipe-arc i.is-high { height: 100%; }
.design .design-recipe-arc i.is-medium { height: 66%; }
.design .design-recipe-arc i.is-low { height: 34%; }
.design .design-recipe-arc i.is-rest { height: 100%; background: transparent; border: 1px dashed var(--mist); border-bottom: 0; }
.design .design-recipe-arc i.is-unset { height: 20%; background: var(--hairline-l); }
.design .design-rhythm-band { font-style: normal; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-left: .5em; }

.design .design-month { font: inherit; font-size: .95rem; padding: .45rem .6rem; border: 1px solid var(--hairline-l); border-radius: 3px; background: var(--paper); }

.is-present .design .design-arcwrap { grid-template-columns: 1fr; }
.is-present .design .design-arc-day { grid-template-rows: 12rem auto auto auto; }
.is-present .design .design-arc-word { font-size: .8rem; }
.is-present .design .design-arc-prop { font-size: 1rem; }

@media (max-width: 60rem) {
  .design .design-arcwrap { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .design .design-arc-day { grid-template-rows: 6rem auto auto auto; }
  .design .design-arc-phases li { font-size: .8rem; }
  .design .design-arc-word { font-size: .55rem; letter-spacing: .05em; }
  .design .design-arc-prop { font-size: .72rem; }
}

/* Assistive summary for the arc; the columns stay real links. */
.design .design-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; }
/* A press should feel like a press. Transform only; nothing lays out. */
.hub-main .btn { transition: transform 140ms cubic-bezier(.23, 1, .32, 1), background-color 140ms ease, color 140ms ease; }
.hub-main .btn:active { transform: translateY(1px) scale(.985); }
@media (prefers-reduced-motion: reduce) {
  .hub-main .btn, .design .media-thumbs a { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ASK WELL — SEND · the estimate, the preview
   --------------------------------------------------------------------------
   A table, because it is arithmetic and the client is meant to read it across
   a table. Figures are inputs the advisor types into; in Present mode they
   become plain text (border and background gone, no pointer), so the client
   sees a range and not a form. Every row says what its figure is: public
   rate, published, yours, to confirm — words, then colour.
   ══════════════════════════════════════════════════════════════════════════ */
.design .design-est { width: 100%; border-collapse: collapse; margin: 1.2rem 0 .4rem; font-size: .95rem; }
.design .design-est th, .design .design-est td { padding: .75rem .6rem; border-bottom: 1px solid var(--hairline-l); vertical-align: top; text-align: left; }
.design .design-est thead th { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom-color: var(--ink); }
.design .design-est-label { display: block; font-weight: 600; }
.design .design-est-unit, .design .design-est-why { display: block; font-size: .82rem; color: var(--muted); font-weight: 400; margin-top: .15em; }
.design .design-est-why { font-style: italic; }
.design .design-est-figs { white-space: nowrap; }
.design .design-est-figs input {
  width: 6.2rem; font: inherit; font-variant-numeric: tabular-nums; text-align: right;
  padding: .35rem .5rem; border: 1px solid var(--hairline-l); border-radius: 3px; background: var(--paper);
}
.design .design-est-figs input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.design .design-est-figs input[readonly] { border-color: transparent; background: transparent; }
.design .design-est-dash { color: var(--muted); padding: 0 .2rem; }
.design .design-est-conf { font-size: .82rem; color: var(--muted); }
.design .design-est-conf span, .design .design-est-conf a { display: block; }
.design .design-est-conf a { color: var(--teal); }
.design .design-est-word { font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; }
.design .design-est-row.is-quote .design-est-word { color: var(--gold-deep); }
.design .design-est-row.is-edited .design-est-word { color: var(--v-longevity-ink); }
.design .design-est-row.is-edited input { border-color: var(--ink); }
.design .design-est tfoot th, .design .design-est tfoot td { border-bottom: 0; border-top: 2px solid var(--ink); padding-top: .9rem; }
.design .design-est-total { font-family: var(--serif-display); font-size: 1.35rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.design .design-est-sub { font-size: .82rem; color: var(--muted); margin-left: .6em; }
.design .design-est-add { margin: .6rem 0 1rem; }
.design .design-est-add summary { cursor: pointer; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); list-style: none; }
.design .design-est-add summary::-webkit-details-marker { display: none; }
.design .design-est-add summary::before { content: "+ "; }
.design .design-est-add[open] summary::before { content: "\2212 "; }
.design .design-est-addrow { display: grid; grid-template-columns: 1fr 6.2rem 6.2rem; gap: .5rem; margin-top: .5rem; }
.design .design-est-addrow input { font: inherit; padding: .35rem .5rem; border: 1px solid var(--hairline-l); border-radius: 3px; background: var(--paper); min-width: 0; }
.design .design-issue-fields--one { grid-template-columns: 1fr; }
.design .design-issue-fields--one .hub-field--wide { grid-column: 1; }

/* Present mode: figures as text */
.is-present .design .design-est-figs input { border-color: transparent; background: transparent; pointer-events: none; padding-left: 0; padding-right: 0; width: 5.2rem; }
.is-present .design .design-est thead { display: none; }

/* The preview — the client document inside the workspace, framed */
.design .design-preview-frame { border: 1px solid var(--hairline-l); border-radius: 4px; padding: 0 1.5rem; margin-top: 1rem; background: var(--paper); max-height: 70vh; overflow: auto; }
.design .design-preview-frame .itin { padding: 2rem 0 2.5rem; }
.design .design-preview-frame .itin .wrap--narrow { max-width: 40rem; margin: 0 auto; }

/* ── The document's estimate and print header ────────────────────────────── */
.itin-meta { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 1em 0 0; }
.itin-preview-note { font-size: .85rem; color: var(--gold-deep); border: 1px dashed var(--gold); padding: .6rem .9rem; border-radius: 3px; margin: 0 0 2rem; }
.itin-est-head { font-size: .95rem; line-height: 1.5; color: var(--muted); margin: 0 0 1.2em; max-width: 60ch; }
.itin-est { width: 100%; border-collapse: collapse; font-size: .95rem; }
.itin-est th, .itin-est td { padding: .7rem 0; border-bottom: 1px solid var(--hairline-l); vertical-align: top; text-align: left; }
.itin-est th { font-weight: 600; }
.itin-est th span, .itin-est td span { display: block; font-size: .8rem; color: var(--muted); font-weight: 400; margin-top: .15em; }
.itin-est td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 1rem; }
.itin-est tfoot th, .itin-est tfoot td { border-bottom: 0; border-top: 2px solid var(--ink); padding-top: .9rem; }
.itin-est tfoot td { font-family: var(--serif-display); font-size: 1.3rem; }
.itin-print { margin: 0 0 1.4rem; display: flex; gap: .8rem; align-items: center; font-size: .82rem; color: var(--muted); }
@media print {
  .itin-print, .itin-preview-note { display: none !important; }
  .itin-meta { display: block; }
  .itin-est tr { break-inside: avoid; }
  .itin-estimate { break-inside: avoid; }
}

.itin-day-where { margin: .25em 0 0; font-size: .85rem; color: var(--muted); }

/* Email at issue */
.design .design-issue-email { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; line-height: 1.5; max-width: 60ch; margin-top: .4rem; }
.design .design-issue-email input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--ink); flex: none; }
.design .design-issued-sent { margin: .8rem 0 0; font-weight: 600; }