/* ============================================================================
   SHARED CORE. Tokens, base typography, layout, controls, and the whole
   archetype experience.

   This is the half that mintyourcraft.com copies. Edit it here, run
   build/sync-shared.py in that repo, and the gate there proves the copy
   matches. Anything specific to this demo belongs in site.css, not here.

   css/cc.css is GENERATED from this file plus site.css by build/build-css.py.
   Do not edit cc.css.
   ========================================================================= */

/* ============================================================================
   Craft + Capital: the design system.

   Tokens come from the mockup in reference/, which already matched Master
   Your Mint's palette. Three corrections from the spec are applied here and
   are the reason this is not a copy of that file:

     Body, labels and buttons are Lato, her site's font. The mockup used
     Montserrat for all of it, which read as ours rather than hers.

     Headlines are Montserrat 100 to 200, uppercase, with tight tracking. Her
     hero runs about -0.1em, so the H1 matches that and H2s take a lighter
     -0.02em so they stay readable at smaller sizes.

     Lora is kept for the long-form article and pull quotes only, which also
     echoes the serif on the Sound Money flyer.

   Blush is a rare accent. It appears on her site in small doses, so it is
   reserved here for one thing at a time, never as a surface.
   ========================================================================= */

:root {
  color-scheme: light;

  /* Hers */
  --green:      #22b573;   /* hero ground, primary buttons, the nav pill */
  --green-d:    #178a56;   /* the pressed and hover state of the above */
  --yellow:     #ffed9f;   /* her primary CTA, Book a clarity call */
  --mint:       #86d1c2;   /* secondary panels */
  --mint-soft:  #e7f4f0;
  --blush:      #ff9f9f;   /* rare accent. One highlight at a time */
  --gray:       #4d4d4d;   /* her body and heading colour on light */
  --ink:        #161616;
  --near-black: #111111;   /* footer and dark bands */
  --white:      #ffffff;

  /* Ours, kept from the mockup because they read as hers */
  --green-ink:  #10492f;   /* dark bands and the conference hero */
  --cream:      #fbfaf5;   /* also the flyer's paper tone */
  --muted:      #6f6f6f;
  --line:       #e8e6df;

  /* Snug Concerts, for the partnership band only */
  --snug-black: #15161a;
  --snug-gold:  #c9a227;

  --maxw: 1120px;
  --shadow: 0 1px 2px rgba(20, 24, 20, .06), 0 6px 18px rgba(20, 24, 20, .06);

  /* Squared buttons, matching her site. No radius anywhere but pills. */
  --radius: 0;

  --font-head: "Montserrat", system-ui, sans-serif;
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-read: "Lora", Georgia, serif;
  --font-script: "Allura", cursive;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ---------------------------------------------------------------- type ---
   The hero carries her tracking. Everything below it loosens by degrees so
   long headings stay readable at small sizes. */

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 200;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
/* TRACKING, changed 2026-10-08. The H1 was at -0.06em, and -0.1em above
   900px. On a long uppercase line at 74px that closed the word spaces up:
   "What's Your Financial Archetype?" read as WHATSYOUR, and the apostrophe
   disappeared into its neighbours. Tight tracking is the look, so it stays
   tight; it just stops eating the gaps. The word space is widened at the
   same time, because tightening the letters and leaving the space alone is
   what ran the words together in the first place. */
h1 {
  font-weight: 100;
  /* The floor came down from 32px when the tracking was loosened on
     2026-10-08: wider word spaces meant two of the longest H1s ran
     to four lines at 375, and three is the rule. */
  font-size: clamp(29px, 6.4vw, 74px);
  letter-spacing: -0.02em;
  word-spacing: 0.1em;
  line-height: 1.02;
}
@media (min-width: 900px) {
  h1 { letter-spacing: -0.03em; word-spacing: 0.12em; }
}
h2 {
  font-size: clamp(24px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  word-spacing: 0.08em;
  line-height: 1.1;
}
h3 { font-size: 15px; letter-spacing: .02em; font-weight: 300; }
h4 { font-size: 13px; letter-spacing: .06em; font-weight: 400; }

p { margin: 0 0 1em; }
a { color: var(--green-d); }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-d);
  display: block;
  margin-bottom: 10px;
}
.lede { font-size: clamp(17px, 2.2vw, 20px); max-width: 64ch; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.tiny  { font-size: 12.5px; }

/* The one script moment on the whole site, per the spec. */

/* -------------------------------------------------------------- layout --- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
section { padding: 62px 0; }
section.tight { padding: 40px 0; }
.band-cream { background: var(--cream); }
.band-mint  { background: var(--mint-soft); }
.band-green { background: var(--green); color: #fff; }
.band-dark  { background: var(--green-ink); color: #eafff4; }
.band-green h1, .band-green h2, .band-green h3,
.band-dark h1, .band-dark h2, .band-dark h3 { color: #fff; }
.band-green .eyebrow, .band-dark .eyebrow { color: rgba(255,255,255,.88); }

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: 1fr; }
.g3 { grid-template-columns: 1fr; }
.g4 { grid-template-columns: 1fr; }
@media (min-width: 680px) { .g2 { grid-template-columns: 1fr 1fr; } .g4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } }

.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.row-end { margin-left: auto; }

/* -------------------------------------------------------------- buttons --
   Lato, squared, light shadow. Her site's buttons, not the mockup's. */
.btn {
  font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: .1em;
  font-size: 13px; font-weight: 700;
  padding: 13px 20px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow);
  text-decoration: none; cursor: pointer;
}
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.btn--y { background: var(--yellow); border-color: var(--yellow); color: #4a3d00; }
.btn--g { background: var(--green); border-color: var(--green); color: #fff; }
.btn--g:hover { background: var(--green-d); border-color: var(--green-d); }
/* The outline button, on whatever band it is standing on. It used to be
   #fff for both border and text, which is right on the green hero and
   invisible on cream: currentColor takes the band's own colour, and both
   .band-green and .band-dark set one. Opacity for the hover, because no
   single tint reads as a hover on both a dark and a light ground. */
.btn--o { background: transparent; border-color: currentColor; color: inherit;
          box-shadow: none; }
.btn--o:hover { opacity: .78; }
.btn--line { background: transparent; border-color: var(--line); color: var(--gray); box-shadow: none; }
.btn--line:hover { border-color: var(--green); color: var(--green-ink); }
/* An outline button on a green band: .btn--line's grey border and grey text
   disappear there, so this one borrows the band's own white. Spec 5.2's
   secondary hero button. */
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.7);
  color: #fff; box-shadow: none; }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn--ghost:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Spec 5.2: side by side on a desktop, full width stacked on a phone. */
#sCtas { gap: 12px; }
@media (max-width: 560px) {
  #sCtas { flex-direction: column; align-items: stretch; }
  #sCtas .btn { width: 100%; text-align: center; }
}
.btn--sm { font-size: 12px; padding: 10px 14px; min-height: 44px; }  /* small is about type and padding, not about being harder to hit */
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* --------------------------------------------------------------- cards --- */
.card {
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--green);
  padding: 20px 20px 22px; display: flex; flex-direction: column;
}
.card--flat { border-top-color: var(--line); }
.card .num { font-family: var(--font-head); font-weight: 300; font-size: 12px; letter-spacing: .2em; color: var(--green); }
.card h3 { margin: 8px 0 9px; }
.card p { font-size: 14.5px; margin: 0; }
.card .card__foot { margin-top: auto; padding-top: 14px; }
.cards-alt .card:nth-child(3n+2) { border-top-color: var(--yellow); }
.cards-alt .card:nth-child(3n)   { border-top-color: var(--mint); }

a.card { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
a.card:hover { border-color: var(--green); box-shadow: var(--shadow); }
a.card:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ------------------------------------------------------- chips and pills -- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  letter-spacing: .02em; padding: 9px 14px; min-height: 40px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--gray); cursor: pointer;
}
.chip:hover { border-color: var(--green); }
.chip.sel, .chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.chip--static { cursor: default; font-weight: 400; }
.chip--static:hover { border-color: var(--line); }

/* A chip you can press is a touch target; a chip that only labels something
   is not. 40px is enough for the static ones and too small for the rest. */
button.chip { min-height: 44px; }

.pill {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: var(--mint-soft); color: var(--green-ink);
}
/* A direct child of a flex card is blockified and then stretched, so a pill
   dropped straight into one spans the whole card. It should hug its text. */
.card > .pill, .ticket > .pill { align-self: flex-start; }
.pill--live   { background: var(--green); color: #fff; }
.pill--wait   { background: var(--yellow); color: #4a3d00; }
.pill--soon   { background: #f1f0ea; color: var(--muted); }
.pill--new    { background: var(--blush); color: #5a1f1f; }
.pill--lunch  { background: var(--mint); color: var(--green-ink); }

/* -------------------------------------------------------------- forms ---- */
.field { display: block; margin-bottom: 14px; }
.field .lab { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gray); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 13px; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
.field textarea { min-height: 96px; resize: vertical; }
.hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }

/* The state every simulated form ends in. It says plainly that nothing was
   sent, because a confirmation that looks real in a mockup is a small lie. */
.confirm { border: 1px solid var(--green); border-top: 3px solid var(--green); background: var(--mint-soft); padding: 20px 22px; }
.confirm__code { font-family: var(--font-head); font-weight: 300; letter-spacing: .18em; font-size: 22px; color: var(--green-ink); }
.confirm__note { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* ------------------------------------------------------------- overlay --- */
.overlay {
  position: fixed; inset: 0; background: rgba(16, 30, 22, .55); z-index: 60;
  display: none; align-items: flex-start; justify-content: center;
  overflow: auto; padding: 40px 16px;
}
.overlay.open { display: flex; }
.sheet { background: #fff; max-width: 680px; width: 100%; padding: 26px 24px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.sheet__hd { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.sheet__x { margin-left: auto; background: none; border: 1px solid var(--line); width: 40px; height: 40px; cursor: pointer; font-size: 18px; line-height: 1; color: var(--gray); }
.sheet__x:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* --------------------------------------------------------------- misc ---- */
.mocktag {
  position: fixed; right: 12px; bottom: 12px; z-index: 70;
  background: var(--near-black); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 12px;
}
/* On a phone it was covering the last answer button, which is the one
   thing on that page that has to be tappable. It stops floating and
   becomes the last thing on the page instead. */
@media (max-width: 767px) {
  .mocktag {
    position: static; z-index: auto; text-align: center;
    padding: 10px 12px;
  }
}
@media print { .mocktag { display: none; } }

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(14px);
  background: var(--near-black); color: #fff; padding: 12px 18px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 80;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ------------------------------------------------------------ article ----
   The one place Lora is the body font, per the spec. */
.article { font-family: var(--font-read); font-size: 18px; line-height: 1.75; color: var(--gray); max-width: 68ch; }
.article h2, .article h3 { font-family: var(--font-head); }
.pullquote { font-family: var(--font-read); font-style: italic; font-size: clamp(19px, 2.6vw, 26px); line-height: 1.4; border-left: 3px solid var(--green); padding-left: 20px; color: var(--ink); }

/* ------------------------------------------------------------- check-in ---
   The engine's markup is built by js/checkin.js from CC.checkinSets. These
   are the only styles it needs; everything else is the shared system. */

.ci-head { max-width: 62ch; }
.ci-dialect { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.ci-dialect .lab { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 700; color: var(--muted); }

.ci-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 24px 0 18px; padding: 14px 16px;
  background: var(--cream); border: 1px solid var(--line);
}
.ci-bar .count { font-family: var(--font-head); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--gray); }
.ci-bar .count b { font-size: 22px; font-weight: 300; letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.ci-bar .hint { font-size: 13px; color: var(--muted); }

.ci-legend {
  display: flex; gap: 28px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted); margin-bottom: 26px;
}
.ci-legend b { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .09em; font-size: 11.5px; color: var(--gray); margin-right: 8px; }

.ci-ctx { border: 1px solid var(--line); background: #fff; margin-bottom: 30px; }
.ci-ctx__hd { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 700; color: var(--gray); padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--cream); }
.ci-ctx__bd { padding: 18px; }
.ci-ctx .q { font-size: 15px; color: var(--ink); margin: 0 0 10px; }
/* The context answers are sentences, not tags: at 375 every one already
   took a line of its own, at a different width each, which read as a
   ragged list rather than as a set of choices. Stacked full width they
   read as what they are. Desktop keeps them as chips, where they fit
   several to a line and the raggedness never appears. */
@media (max-width: 767px) {
  .ci-ctx .chips { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .ci-ctx .chips .chip { width: 100%; text-align: left; }
}
.ci-ctx .q + .chips { margin-bottom: 20px; }
.ci-ctx .chips:last-child { margin-bottom: 0; }

.area-block { border: 1px solid var(--line); border-bottom: 0; background: #fff; }
.area-block:last-of-type { border-bottom: 1px solid var(--line); }
.area-head {
  display: flex; align-items: baseline; gap: 14px;
  padding: 15px 18px; background: var(--cream); border-bottom: 1px solid var(--line);
}
.area-head .n { font-family: var(--font-head); font-weight: 200; font-size: 22px; color: var(--green); font-variant-numeric: tabular-nums; }
.area-head .t { font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; color: var(--ink); }

/* Tighter on a phone, so a question and its answers are on screen at the
   same time. The desktop padding comes back at 768. */
.qrow { padding: 13px 16px; border-bottom: 1px solid var(--line); }
.qrow:last-child { border-bottom: 0; }
.qrow.feel { background: var(--mint-soft); }
.qrow .q { font-size: 15.5px; line-height: 1.5; color: var(--ink); margin: 0 0 12px; }
/* The tag sits on its own line above the question. Inline, it indented the
   first line by its own width and every line under it started further
   left, which is what made the wrap look ragged. */
.qrow .tag {
  display: block; width: -moz-fit-content; width: fit-content;
  font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--muted);
  border: 1px solid var(--line); padding: 3px 7px; margin: 0 0 8px;
  white-space: nowrap;
}
@media (min-width: 768px) { .qrow { padding: 16px 18px; } }
.qrow.feel .tag { color: #2d6b5c; border-color: #b7ddd3; }

/* The scale is one control, so it is one grid of four equal cells rather
   than four buttons that happen to sit together. At 375 that is about 80px
   a cell, which holds "Sometimes" on one line. Only below 340, where four
   cells would be too narrow to read, does it fall back to two by two, and
   even then the cells stay equal: there is no width at which it wraps
   unevenly. */
.opts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.opt {
  font: inherit; font-size: 15px; background: #fff; color: var(--gray);
  border: 1px solid var(--line); padding: 10px 4px; min-height: 44px;
  cursor: pointer; text-align: center; white-space: nowrap;
  display: flex; align-items: center; justify-content: center;
  line-height: 1.2;
}
@media (max-width: 339px) { .opts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) {
  /* A scale that runs the width of a desktop card reads as a slider rather
     than as four choices, so it stops at a sensible measure. */
  .opts { gap: 8px; max-width: 460px; }
  .opt { font-size: 16px; padding: 10px 8px; }
}
.opt:hover { border-color: var(--green); color: var(--ink); }
.opt[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ----------------------------------------------------- the stepped flow ----
   Spec 7.2. One step at a time, with where you are at the top and the two
   ways out at the bottom. */
.ci-step { margin-top: 22px; }
.ci-step__t {
  font-family: var(--font-head); font-weight: 500; text-transform: uppercase;
  letter-spacing: .04em; font-size: 20px; margin: 14px 0 0;
}
.ci-step__t:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.ci-step__note { margin: 10px 0 0; }

.ci-prog__line {
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  margin: 0 0 8px;
}
.ci-prog__bar { height: 3px; background: var(--line); }
.ci-prog__bar span {
  display: block; height: 100%; background: var(--green);
  transition: width .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .ci-prog__bar span { transition: none; }
}

.ci-step .ci-legend { margin-top: 16px; }
/* The step is already titled, with the results-page name. The area
   block's own header repeated it in the session's name right underneath,
   which read as two headings for one thing. */
.ci-step .area-head { display: none; }
.ci-step .area-block,
.ci-step .style-block,
.ci-step .ci-ctx { margin-top: 18px; }

.ci-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 24px;
}
/* Next is the one that matters, so it keeps its weight even when it is
   waiting for an answer, rather than disappearing. */
.ci-nav .btn[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 480px) {
  .ci-nav .btn { flex: 1 1 auto; }
}

/* A button that reads as a link: "Change my answers" is a quiet way back,
   not a call to action. */
.linkish {
  font: inherit; background: none; border: 0; padding: 0;
  color: var(--green-ink); text-decoration: underline; cursor: pointer;
}
.linkish:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.m-change { margin-top: 20px; font-size: 14px; }

/* Announced, not shown. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- the Map ---
   Rendered into the shared sheet, so Escape, the scrim and focus handling
   are the same here as everywhere else. */
.m-intro { color: var(--gray); }
.m-block { border-left: 3px solid var(--line); padding: 2px 0 2px 16px; margin: 20px 0; }
.m-block.win { border-left-color: var(--green); }
.m-block.start { border-left-color: var(--yellow); }
.m-lab { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--muted); }
.m-name { font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: 16px; color: var(--ink); margin: 6px 0 6px; }
.m-name .explore { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 700; color: var(--green-ink); background: var(--mint-soft); border: 1px solid #b7ddd3; padding: 2px 7px; margin-left: 8px; vertical-align: 2px; }
.m-act { font-size: 15px; color: var(--gray); }
.m-feel { font-size: 14.5px; color: var(--green-ink); background: var(--mint-soft); border-left: 3px solid var(--mint); padding: 12px 16px; margin: 22px 0 0; }
.m-bands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.m-band { border: 1px solid var(--line); padding: 14px; }
.m-band .bt { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .09em; font-size: 11px; font-weight: 700; margin-bottom: 8px; }
.m-band.hi .bt { color: var(--green); }
.m-band.mid .bt { color: #b08900; }
.m-band.low .bt { color: var(--muted); }
.m-band ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--gray); }
.m-band li { margin-bottom: 4px; }
.m-band .none { list-style: none; margin-left: -18px; color: #b9b9b9; }
.m-series { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: var(--green-ink); }
@media (max-width: 680px) { .m-bands { grid-template-columns: 1fr; } }

/* --------------------------------------------- the archetype layer -------
   Added to the Map rather than replacing it, so these sit alongside the
   existing .m-block rules rather than changing them. */
.style-block { border: 1px solid var(--line); background: #fff; margin-top: 26px; }
.style-block__hd { padding: 16px 18px; background: var(--cream); border-bottom: 1px solid var(--line); }
.style-block__hd h3 { font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; margin: 0 0 6px; }
.sq { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.sq:last-child { border-bottom: 0; }
.sopts { display: grid; gap: 8px; }
.sopt { text-align: left; font: inherit; font-size: 15px; background: #fff; border: 1px solid var(--line); color: var(--ink); padding: 11px 14px; min-height: 44px; cursor: pointer; }
.sopt:hover { border-color: var(--green); }
.sopt[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.sopt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.m-arch { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; background: var(--mint-soft); padding: 20px; margin-bottom: 20px; }
.m-arch__sym { flex: none; }
.m-arch__body { flex: 1 1 240px; min-width: 0; }
.m-arch__name { font-family: var(--font-head); font-weight: 200; font-size: clamp(26px, 4vw, 38px); line-height: 1.05; margin: 6px 0 4px; color: var(--ink); }
.m-arch__phrase { font-family: var(--font-read); font-style: italic; color: var(--green-ink); margin: 0 0 10px; }
.m-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.m-box { border: 1px solid var(--line); padding: 14px 16px; }
.m-sub { font-size: 12.5px; color: var(--muted); margin: 2px 0 8px; }
.m-move { background: var(--cream); border: 1px solid var(--line); padding: 14px 16px; margin-top: 12px; }
.m-because { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
/* The stage note, v1.4. One sentence tuned to what somebody said they are
   earning, so it is set apart from the Money Move above it rather than
   reading as a second instruction. Full ink, not muted: it is guidance
   somebody should read, and the contrast sweep measures it as body text. */
.m-stage-note { margin: 10px 0 0; padding-left: 10px;
                border-left: 3px solid var(--green); }
.m-reads { display: grid; gap: 6px; margin-top: 12px; font-size: 14.5px; }
.m-reads b { display: block; font-family: var(--font-head); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: 2px; }
.m-keep { font-size: 14px; margin-top: 8px; }
.m-need { background: var(--mint-soft, #e4f5f2); padding: 14px 16px; font-size: 15px; margin: 16px 0; }
.m-next { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; }
@media (max-width: 600px) { .m-pair { grid-template-columns: 1fr; } }

/* ------------------------------------------------- notes and guides ----
   Spec 5.7. The piece itself uses .article; everything here is what sits
   around it. The draft label is deliberately quiet but not hidden: it is
   true of every one of these until Pru has read them. */
.a-kind { font-family: var(--font-head); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--green-ink);
  margin-bottom: 12px; }
.a-head h1 { margin: 0; }
.a-head .lede { margin-top: 14px; }
.a-byline { font-size: 14px; color: var(--muted); margin-top: 16px; }
.a-draft { display: inline-block; margin-top: 10px; font-size: 12px;
  color: var(--muted); border: 1px dashed var(--line); border-radius: 2px;
  padding: 4px 10px; }
.article h3 { font-family: var(--font-head); font-size: 17px; font-weight: 700;
  margin: 28px 0 8px; }
.article h4 { font-size: 16px; font-weight: 700; margin: 22px 0 6px; }
.article ol { margin: 14px 0 14px 22px; }
.article ol li { margin-bottom: 8px; }
.a-strong { font-weight: 700; margin-top: 20px; }
.a-rule { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }

/* A table in an article body. The D1 Guide's monthly log is the one that
   needed it; before this it arrived as a run-on paragraph. It scrolls in
   its own box rather than pushing the column wide on a phone. */
.a-tablewrap { overflow-x: auto; margin: 20px 0; }
.a-table { border-collapse: collapse; width: 100%; font-size: 15px;
  font-family: var(--font-head); }
.a-table th, .a-table td { border: 1px solid var(--line); padding: 8px 10px;
  text-align: left; vertical-align: top; }
.a-table th { font-weight: 700; background: var(--mint-soft, #e4f5f2); }
.a-table .num { text-align: right; }

.a-foot { border-top: 1px solid var(--line); padding-top: 22px; }
.a-link { display: grid; gap: 2px; margin-bottom: 16px; }
.a-link .lab { font-family: var(--font-head); font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); }
.a-maplink { background: var(--mint-soft, #e4f5f2); padding: 12px 14px;
  font-size: 15px; margin-top: 18px; }

/* The library, spec 5.7. One block per area, each with what exists for it. */
.lib-area { border-top: 1px solid var(--line); padding-top: 20px;
  margin-top: 28px; }
.lib-area__hd { display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap; }
.lib-area__hd h3 { margin: 0; font-family: var(--font-head); font-size: 18px; }
.lib-pieces { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  margin-top: 14px; }
/* The whole tile is the link, so it must not be underlined the way a
   link in a sentence is. The title carries the affordance on hover. */
a.lib-piece { display: block; text-decoration: none; color: inherit;
  transition: border-color .15s ease; }
a.lib-piece:hover { border-color: var(--green); }
a.lib-piece:hover h4 { text-decoration: underline; }
.lib-piece { border: 1px solid var(--line); padding: 16px 18px; }
.lib-piece .a-kind { margin-bottom: 8px; }
.lib-piece h4 { margin: 0; font-size: 17px; }
.lib-piece p { font-size: 14.5px; color: var(--muted); margin-top: 8px; }
.lib-piece .mins { font-size: 12px; color: var(--muted); margin-top: 10px; }
@media (max-width: 760px) { .lib-pieces { grid-template-columns: 1fr; } }

/* Home's Notes row, spec 5.9 item 3. */
.notes-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 24px; }
@media (max-width: 860px) { .notes-row { grid-template-columns: 1fr; } }
.picked { display: inline-block; font-family: var(--font-head); font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  background: var(--yellow); padding: 3px 8px; margin-bottom: 10px; }

/* The Read line on an area card, and the Learn read items. */
.read-line { font-size: 13.5px; margin-top: 10px; }
.read-line .lab { font-family: var(--font-head); font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); margin-right: 6px; }
.rec-card { border: 1px solid var(--green); padding: 18px 20px;
  margin-top: 22px; }
.rec-card .a-link { margin-bottom: 12px; }

/* ===================================================== the archetypes page ==
   Demo spec 5.10. Eight cards of equal weight, a jump row that scrolls
   sideways on a phone, and the "this is you" tag.

   Equal weight is the whole design constraint: no card is larger, bolder,
   first-among-equals or tinted differently. The only per-archetype colour is
   the disc behind the symbol, which is the same component the Map uses. */

/* The jump row. One line, always. On a phone it scrolls rather than wrapping,
   because a wrapped row of eight reads as a ranked list broken into tiers. */
.arch-jump {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
  padding: 4px 0 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.arch-jump a {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green-ink);
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 9px 13px;
  /* The house tap target. Eight small chips in a sideways scroller are the
     easiest thing on the page to miss with a thumb, so they get the full
     44px like every other control here. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.arch-jump a:hover { border-color: var(--green); }
.arch-jump a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Two per row on desktop, one on phones. */
.arch-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .arch-grid { grid-template-columns: 1fr 1fr; }
}

/* scroll-margin-top keeps an anchored card clear of the sticky nav, which is
   the difference between /archetypes/#giver landing on the card and landing
   with its heading hidden behind the header. */
.arch-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  padding: 22px;
  scroll-margin-top: 96px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.arch-card__head { display: flex; gap: 16px; align-items: flex-start; }
.arch-card__sym { flex: none; }
.arch-card__id { flex: 1 1 auto; min-width: 0; }
.arch-card__name { font-family: var(--font-head); font-weight: 500; font-size: 20px;
                   color: var(--green-ink); margin: 0; }
/* Same family, style and colour as the Map's phrase, one size down: the Map
   shows one archetype large, this page shows eight at card scale. */
.arch-card__phrase { font-family: var(--font-read); font-style: italic;
                     color: var(--green-ink); margin: 4px 0 0; }
.arch-card__desc { margin: 0; font-size: 15px; }
.arch-card__pair { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 420px) {
  .arch-card__pair { grid-template-columns: 1fr 1fr; }
}
.arch-card__box { background: var(--cream); border: 1px solid var(--line); padding: 13px 14px; }
.arch-card__box p { margin: 6px 0 0; font-size: 14px; }

/* The tag appears on exactly one card, and only when this session has a Map.
   Deliberately small: it marks a card, it does not promote it. */
.arch-card--you { border-top-color: var(--green); }
.arch-you {
  align-self: flex-start;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10px;
  font-weight: 700;
  color: var(--green-ink);
  background: var(--mint-soft);
  border: 1px solid var(--mint);
  padding: 4px 9px;
}

/* The quiet link the Map grows under its archetype card. */
.m-allarch { margin: -8px 0 20px; font-size: 14px; }
.m-allarch a { color: var(--green-ink); }

/* The same link under the Check-In intro. */
.ci-meet { font-size: 15px; }
.ci-meet a { color: var(--green-ink); }

/* ===================================== the illustrated archetype symbols ====
   Spec section 6 Visual family and 7.1 item 8, replaced 2026-10-07.

   The accent disc is a CSS circle and the illustration is an image centered on
   it at 78% of its diameter. The old inline SVG drew both the disc and a
   single-stroke mark; the new files are flat multi-color illustrations and are
   rendered exactly as delivered, so there is no stroke rule here any more and
   there must not be one: recoloring or restroking them would contradict the
   spec and would break the content credentials they carry.

   The disc colour comes from the data, per archetype, so it is set inline on
   the element rather than here. */
.arch-disc {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  flex: none;
  overflow: hidden;
}
/* The image is sized by its own width and height attributes, which are the
   78% of the disc that spec 7.1 item 8 asks for. An earlier version set
   width:100% here and silently overrode them, so the illustration filled the
   whole disc with no margin at all. object-fit keeps a non-square file from
   stretching if one ever appears. */
.arch-disc img { display: block; object-fit: contain; }