/* ============================================================
   SOLD SELLER PORTAL — design system (Phase 1)
   Authority: JK_Portal_ClaudeCode_DesignPrompt_v2 (primary),
   DesignSpec_FINAL_v6. RH-register editorial. Restraint first.

   Fonts: interim sanctioned fallbacks until the real Canva faces
   (The Seasons / Literaturnaya / Proxima Nova) are licensed.
     The Seasons   -> Cormorant Garamond (display serif)
     Literaturnaya -> Libre Baskerville  (body serif)
     Proxima Nova  -> Helvetica Neue / Arial (utility sans)
   ============================================================ */

:root {
  --near-black: #1A1A1A;   /* all text */
  --true-black: #000000;   /* buttons, footer */
  --kw-red:     #B31F24;   /* accents only */
  --warm-white: #FFFFFF;
  --warm-brown: #3D3530;   /* full-bleed section ground (design spec v7, 2026-06-23) */
  --dark-teal:  #364848;   /* headshot moment only */

  --register-1: rgba(255, 252, 248, 0.82);  /* content panel */
  --banner-bg:  rgba(255, 252, 248, 0.96);
  --hairline:   rgba(26, 26, 26, 0.10);
  --placeholder-ground: #b9a890; /* warm dev placeholder ground */

  --serif-display: 'Cormorant Garamond', 'Playfair Display', serif;
  --serif-body:    'Libre Baskerville', 'Georgia', serif;
  --sans:          'Helvetica Neue', 'Arial', sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--serif-body);
  color: var(--near-black);
  background: var(--warm-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* No rounded corners / shadows / gradients anywhere (headshot circle is the
   one intentional photographic exception). */
button, input, select, textarea,
.login-panel, .overlay-panel, .notification-banner { border-radius: 0; }

/* ---------- identity lockup ---------- */
.headshot {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--dark-teal);
  color: var(--warm-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif-display);
  font-size: 20px; letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.headshot.small { width: 32px; height: 32px; font-size: 14px; }

/* Photographic headshot (nav lockup). The circle crop is the one sanctioned
   border-radius exception; object-fit keeps it undistorted at any aspect. */
.headshot-img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}
.headshot-img.small { width: 32px; height: 32px; }

.identity { display: flex; align-items: center; gap: 16px; }
.identity-name {
  font-family: var(--serif-display);
  font-size: 32px; line-height: 1.1; color: var(--near-black);
  letter-spacing: -0.01em;
}
.identity-cred {
  font-family: var(--sans);
  font-size: 12px; line-height: 1.3; color: rgba(26,26,26,0.70);
  margin-top: 4px;
}

/* ============================================================
   LOGIN / HOLDING / UNAVAILABLE  (Register 1 over full-bleed hero)
   ============================================================ */
.login-body {
  min-height: 100vh;
  background-color: var(--warm-white);   /* Session 6 Item 4 — white section ground (was --warm-brown); confirmed by Jennifer 2026-06-24 */
}
.login-stage {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
.login-panel {
  width: 100%;
  max-width: 520px;
  background: transparent;  /* Register 1 panel removed (Session 6) — form on the white ground */
  padding: 32px;            /* mobile */
  text-align: center;
}
.login-panel .identity { justify-content: center; text-align: left; }

.sold {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 52px;          /* mobile */
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--near-black);
  margin: 48px 0 0;
}
.sold.small { font-size: 38px; margin: 24px 0 0; }

.subline {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(26,26,26,0.70);
  margin: 24px 0 0;
}

.login-form {
  margin-top: 48px;
  display: flex; flex-direction: column; align-items: stretch; gap: 24px;
}

/* bottom-border-only input (premium variant) */
.input-underline {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--near-black);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(26,26,26,0.25);
  padding: 10px 0;
  text-align: center;
  width: 100%;
}
.input-underline::placeholder { color: rgba(26,26,26,0.35); }
.input-underline:focus {
  outline: none;
  border-bottom-color: rgba(26,26,26,0.80);
  box-shadow: none;
}

.login-error {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--kw-red);
  margin: -8px 0 0;
}

.cross-border {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(26,26,26,0.60);
  margin: 32px 0 0;
}

/* ---------- primary button ---------- */
.btn-primary {
  display: inline-block;
  background: var(--true-black);
  color: var(--warm-white);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  padding: 14px 32px;
  cursor: pointer;
  transition: opacity 150ms ease;
  width: 100%;
}
.btn-primary:hover { opacity: 0.85; }
.btn-primary:active { opacity: 0.70; }

/* ============================================================
   AUTHENTICATED LAYOUT  (nav + banner stub + Section A frame)
   ============================================================ */
.portal-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  height: 48px;                       /* mobile */
  background: var(--warm-white);
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
}
.nav-identity { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.nav-name {
  font-family: var(--serif-display);
  font-size: 22px; line-height: 1; color: var(--near-black);
  letter-spacing: -0.01em;
  white-space: nowrap;        /* never wrap inside the fixed-height nav */
}
.nav-cred {
  font-family: var(--sans);
  font-size: 11px; line-height: 1.2; color: rgba(26,26,26,0.70);
  margin-top: 2px;
  display: none;                       /* hidden on mobile to save room */
}
.nav-address {                         /* per-client property address (Session 7) */
  font-family: var(--serif-body);      /* Literaturnaya — serif per design intent; The Seasons can't go this small */
  font-size: 12px; line-height: 1.2; color: var(--near-black);
  margin-top: 3px;
  max-width: 140px;                    /* mobile: keep the lockup ~name-width so the section links stay readable; full text on desktop + in the title attr */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-address-bar { display: none; }    /* desktop-only (>=1200px) centred address; activated in the wide-desktop media query */
.nav-sections {
  display: flex; align-items: center; gap: 16px;
  flex: 0 1 auto; min-width: 0;        /* may shrink + scroll; never grows past content */
  padding-left: 24px;                  /* breathing room from the identity lockup */
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  scrollbar-width: none;               /* clean horizontal scroll, no visible bar */
}
.nav-sections::-webkit-scrollbar { display: none; }
.nav-link { flex: 0 0 auto; }
.nav-link {
  font-family: var(--sans);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.10em;
  color: rgba(26,26,26,0.70);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.nav-link:hover { color: var(--near-black); }
.nav-link.active {
  color: var(--near-black);
  border-bottom-color: var(--kw-red);   /* KW Red active underline */
}

/* notification banner — stub, hidden until Phase 2 */
.notification-banner {
  position: fixed; left: 0; right: 0; top: 48px; z-index: 29;
  height: 40px;
  background: var(--banner-bg);
  border-bottom: 1px solid rgba(26,26,26,0.12);
  font-family: var(--sans);
  font-size: 12px; color: var(--near-black);
  align-items: center;
  padding: 0 16px;
  /* display:none set inline; becomes flex when populated in Phase 2 */
}

.app-body { background: var(--warm-white); }

.app-stage {
  min-height: 100vh;
  background-color: var(--warm-white);   /* Session 6 Item 4 — white section ground (was --warm-brown); confirmed by Jennifer 2026-06-24 */
  padding: 80px 24px 56px;             /* top clears 48px nav + breathing room */
  display: flex; justify-content: center; align-items: flex-start;
}
.section-frame {
  width: 100%; max-width: 720px;
  background: transparent;             /* Register 1 panel removed (Session 6) — content sits on the white ground, matching Section D (net sheet) */
  padding: 8px 0 0;                    /* no card inset; mirrors .net-sheet */
}
.section-title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 38px;                     /* mobile H1 */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--near-black);
  margin: 0;
}
.section-note {
  font-family: var(--serif-body);
  font-size: 17px; color: var(--near-black);
  margin: 16px 0 0;
}

/* ---------- footer ---------- */
.portal-footer {
  background: var(--true-black);
  color: var(--warm-white);
  padding: 48px 24px;                  /* mobile */
}
.footer-name {
  font-family: var(--serif-display);
  font-size: 24px; line-height: 1; color: var(--warm-white);
}
.footer-cred {
  font-family: var(--sans);
  font-size: 12px; color: rgba(255,255,255,0.70);
  margin-top: 12px;
}
.footer-contact {
  font-family: var(--sans);
  font-size: 13px; color: var(--warm-white);
  margin-top: 8px;
}

/* ============================================================
   SPA SECTION ROUTING
   ============================================================ */
/* Make the [hidden] attribute authoritative everywhere. Several elements
   (section panels, the "copied" note, E's conditional fields) set their own
   display, which would otherwise out-specify the UA [hidden] rule. */
[hidden] { display: none !important; }
.ph-note { color: rgba(26,26,26,0.70); }

/* Section D (Numbers) uses a pure white ground — the warm-brown stage
   background is overridden to white when Numbers is the active section. */
.app-stage[data-active="numbers"] {
  background-color: var(--warm-white);
}

/* ============================================================
   SECTION D — SELLER'S NET SHEET  (white data register)
   ============================================================ */
.net-sheet {
  width: 100%; max-width: 720px;
  background: var(--warm-white);
  padding: 8px 0 0;
}
.net-sheet-inner { padding: 0; }

.ns-title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 38px;                 /* mobile; 56px desktop */
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--near-black);
  margin: 0;
}
.ns-subhead {
  font-family: var(--serif-body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(26,26,26,0.60);
  margin: 10px 0 28px;
}

.ns-table { width: 100%; }

.ns-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(26,26,26,0.08);   /* row divider 8% */
}
.ns-label {
  font-family: var(--serif-body);
  font-size: 16px; color: var(--near-black);
  flex: 1 1 auto;
}
.ns-label-calc { font-style: italic; }            /* distinguishes auto-calc rows */
.ns-optional {                                     /* quiet hint on optional inputs */
  font-family: var(--sans);
  font-size: 12px; font-style: italic;
  color: rgba(26,26,26,0.45);
}

/* bottom-border-only inputs (premium variant) */
.ns-inputwrap {
  display: inline-flex; align-items: baseline; justify-content: flex-end;
  flex: 0 0 auto; gap: 2px;
}
.ns-prefix, .ns-suffix {
  font-family: var(--sans);
  font-size: 16px; color: var(--near-black);
}
.ns-input {
  font-family: var(--sans);
  font-size: 16px; color: var(--near-black);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(26,26,26,0.25);
  padding: 6px 0;
  text-align: right;
  width: 150px;
}
.ns-input::placeholder { color: rgba(26,26,26,0.35); }
.ns-input:focus {
  outline: none;
  border-bottom-color: rgba(26,26,26,0.80);
  box-shadow: none;
}
.ns-input-pct { width: 90px; }

/* adjustment row: free-text client label on the left */
.ns-row-adj .ns-adjlabel {
  font-family: var(--serif-body);
  font-size: 16px; color: var(--near-black);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(26,26,26,0.25);
  padding: 6px 0;
  flex: 1 1 auto; min-width: 0; margin-right: 16px;
}
.ns-row-adj .ns-adjlabel::placeholder { color: rgba(26,26,26,0.35); font-style: italic; }
.ns-row-adj .ns-adjlabel:focus { outline: none; border-bottom-color: rgba(26,26,26,0.80); }

/* auto-calc value cells */
.ns-value {
  font-family: var(--sans);
  font-size: 16px; color: var(--near-black);
  flex: 0 0 auto;
}

/* Net to Seller row */
.ns-net {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  border-top: 1.5px solid var(--kw-red);
  margin-top: 4px;
  padding: 18px 0 32px;            /* 32px bottom padding before disclaimer */
}
.ns-net-label {
  font-family: var(--serif-body);
  font-size: 18px; font-weight: 700; color: var(--near-black);
}
.ns-net-value {
  font-family: var(--serif-display);
  font-size: 28px; color: var(--near-black);
  letter-spacing: -0.01em;
}

.ns-disclaimer {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 13px; line-height: 1.5;
  color: rgba(26,26,26,0.50);
  margin: 0;
}

.ns-buttons {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 32px;
}
.ns-btn { width: auto; }
.ns-copied {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px; color: rgba(26,26,26,0.60);
  margin-top: 12px;
}

/* ============================================================
   SECTION A — DASHBOARD (A1–A5)
   ============================================================ */
.a-block { margin-top: 40px; }
.a-label {
  font-family: var(--sans);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em;
  color: rgba(26,26,26,0.55);
  margin-bottom: 12px;
}

/* A1 — progress bar */
.a1 { margin-top: 32px; }
.a1-top { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.a1-pct { font-family: var(--sans); font-size: 11px; color: var(--near-black); }
.a1-bar { width: 100%; height: 4px; background: rgba(26,26,26,0.12); }
.a1-fill { height: 4px; background: var(--kw-red); transition: width 300ms ease; }

/* A2 — next step */
.a2-text {
  font-family: var(--serif-body);
  font-size: 19px; line-height: 1.65; color: var(--near-black);
  margin: 0;
}

/* ------------------------------------------------------------
   A3 — LISTING TIMELINE (code-built vertical bullet list)
   Session 6 Item 5: one continuous black rail per stage with
   filled circle bullets, at every viewport. Replaces the prior
   desktop serpentine. Matches the print-guide dot-and-line
   pattern. All 47 steps are static markup — unchanged.
   ------------------------------------------------------------ */
:root {
  --tl-line: var(--near-black);          /* continuous black rail */
  --tl-dot: 7px;                         /* small solid bullet (numbers removed) */
  --tl-dot-top: 7px;                     /* dot drop so it sits on the first text line */
  --tl-step-pad: 7px;                    /* vertical padding per step */
}

.tl-heading {
  font-family: var(--serif-display);
  font-weight: 400; font-size: 26px; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--near-black);
  margin: 0 0 4px;
}
.tl { background: var(--warm-white); }   /* continuous white ground, all stages */
.tl-stage { padding: 24px 0 4px; }
.tl-stage-label {
  font-family: var(--serif-display);
  font-weight: 500; font-size: 21px; line-height: 1.2;
  color: var(--near-black); margin: 0 0 18px;
}

/* shared node pieces — small solid filled bullet (no number) */
.tl-dot {
  width: var(--tl-dot); height: var(--tl-dot); border-radius: 50%;
  background: var(--near-black);         /* solid filled */
  flex: 0 0 auto; margin-top: var(--tl-dot-top);
}
.tl-num { display: none; }               /* numbers removed (Session 6 follow-up) */
.tl-text { font-family: var(--serif-body); color: var(--near-black); }

/* ---- vertical bullet list: ONE continuous black rail per stage ----
   Session 7 Item 0 fix. The rail renders as a single unbroken line per stage,
   drawn behind the dots (which sit at z-index:1 on top).

   Each step draws a connector from its own dot centre straight down to the next
   dot centre: an absolutely-positioned bar at top = the dot centre with
   height:100% of the step. Because the next dot sits exactly one step-height
   below, consecutive connectors tile into one continuous rail with no gap — at
   any text length or viewport. Only the final step of each stage draws none, so
   the rail ends exactly on the last dot.

   (Why not a single pseudo-element on the row container: bottom-anchoring it to
   the container can't find the last dot when that step wraps — e.g. step 38 at
   375px wraps to two lines and the rail overshot ~20px past the dot. Tiling
   per step terminates exactly regardless of wrapping. The earlier per-step
   version left gaps only because it scoped :last-child to each legacy row of
   four; the final-step rule below is scoped to the whole stage.) */
.tl-rows { position: relative; }
.tl-row { display: contents; }           /* unwrap the legacy rows into one column */
.tl-step {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; gap: 14px; padding: var(--tl-step-pad) 0;
}
.tl-step::before {
  content: ""; position: absolute; z-index: 0;
  left: calc(var(--tl-dot) / 2 - 1px);
  top: calc(var(--tl-step-pad) + var(--tl-dot-top) + var(--tl-dot) / 2);
  height: 100%; width: 2px; background: var(--tl-line);
}
/* end the rail on each stage's final dot (last step of the last row) */
.tl-rows > .tl-row:last-child > .tl-step:last-child::before { content: none; }
.tl-text { font-size: 14px; line-height: 1.45; padding-top: 0; }

/* A4 — key dates list */
.a4-list { display: flex; flex-direction: column; }
.a4-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(26,26,26,0.10);
  text-decoration: none; color: var(--near-black);
}
.a4-row:last-child { border-bottom: none; }
.a4-date { font-family: var(--serif-body); font-size: 17px; color: var(--near-black); flex: 0 0 auto; }
.a4-mlabel {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.02em;
  color: rgba(26,26,26,0.80); text-align: right;
}
.a4-row:hover .a4-mlabel { text-decoration: underline; }

/* A5 — monthly calendar */
.a5-months { display: flex; flex-direction: column; gap: 28px; }
.cal-title {
  font-family: var(--serif-display); font-weight: 400;
  font-size: 22px; color: var(--near-black); margin-bottom: 10px;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.06em;
  color: rgba(26,26,26,0.45); text-align: center; padding-bottom: 6px;
}
.cal-cell {
  min-height: 38px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-decoration: none;
}
.cal-num { font-family: var(--sans); font-size: 14px; color: var(--near-black); line-height: 1; }
.cal-num.muted { color: rgba(26,26,26,0.38); }
.cal-event { cursor: pointer; }
.cal-event .cal-num { font-family: var(--serif-display); font-size: 19px; color: var(--near-black); }
.cal-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--kw-red); margin-top: 3px; }
.a5-hint { font-family: var(--sans); font-size: 11px; color: rgba(26,26,26,0.50); margin-top: 14px; }

/* ============================================================
   SECTION E — CHECKLISTS (E1–E7)
   ============================================================ */
/* index list */
.cl-list { margin-top: 28px; }
.cl-row {
  display: block; text-decoration: none; color: var(--near-black);
  padding: 18px 0; border-bottom: 1px solid rgba(26,26,26,0.10);
}
.cl-row:last-child { border-bottom: none; }
.cl-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cl-row-name { font-family: var(--serif-display); font-size: 22px; color: var(--near-black); letter-spacing: -0.01em; }
.cl-row-pct { font-family: var(--sans); font-size: 11px; letter-spacing: 0.04em; color: rgba(26,26,26,0.60); flex: 0 0 auto; }
.cl-row-sub { font-family: var(--serif-body); font-style: italic; font-size: 14px; color: rgba(26,26,26,0.60); margin: 2px 0 12px; }
.cl-row-bar { width: 100%; }

/* detail */
.cl-back {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em;
  color: rgba(26,26,26,0.70); margin-bottom: 18px;
}
.cl-back:hover { color: var(--near-black); }
.cl-title { margin: 0; }
.cl-subhead {                              /* italic subhead — key brand moment */
  font-family: var(--serif-body); font-style: italic;
  font-size: 19px; color: var(--near-black); margin: 8px 0 0;
}
.cl-progress { margin-top: 18px; }
.cl-override { font-family: var(--sans); font-size: 12px; color: var(--kw-red); margin-top: 14px; }
.cl-content { margin-top: 26px; }

.cl-section { margin-top: 32px; }
.cl-section:first-child { margin-top: 0; }
.cl-section-title {
  font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(26,26,26,0.55); margin-bottom: 14px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(26,26,26,0.10);
}
.cl-section-note { font-family: var(--serif-body); font-style: italic; font-size: 14px; color: rgba(26,26,26,0.60); margin: -6px 0 16px; }

/* checkbox items (spec: 18px box, KW Red tick on check, text 45% on check) */
.cl-item { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; cursor: pointer; }
.cl-box {
  flex: 0 0 auto; width: 18px; height: 18px;
  border: 1.5px solid var(--near-black);
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px; background: transparent;
}
.cl-tick { width: 14px; height: 14px; opacity: 0; transition: opacity 100ms ease; }
.cl-item.checked .cl-box { border-color: var(--kw-red); }
.cl-item.checked .cl-tick { opacity: 1; }
.cl-item-text { font-family: var(--serif-body); font-size: 17px; line-height: 1.5; color: var(--near-black); }
.cl-item.checked .cl-item-text { color: rgba(26,26,26,0.45); }   /* de-emphasise, no strikethrough */

/* form fields */
.cl-field { margin-bottom: 20px; }
.cl-q { font-family: var(--serif-body); font-size: 16px; color: var(--near-black); margin-bottom: 8px; }
.cl-text, .cl-textarea {
  font-family: var(--sans); font-size: 15px; color: var(--near-black);
  background: transparent; border: none; border-bottom: 1px solid rgba(26,26,26,0.25);
  padding: 8px 0; width: 100%;
}
.cl-text:focus, .cl-textarea:focus { outline: none; border-bottom-color: rgba(26,26,26,0.80); box-shadow: none; }
.cl-textarea { resize: vertical; }
.cl-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-chip {
  font-family: var(--sans); font-size: 13px; color: rgba(26,26,26,0.70);
  background: transparent; border: 1px solid rgba(26,26,26,0.25);
  padding: 7px 14px; cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.cl-chip:hover { border-color: rgba(26,26,26,0.50); }
.cl-chip.sel { border-color: var(--near-black); color: var(--near-black); background: rgba(26,26,26,0.05); }

/* notification banner items */
.notification-banner { gap: 18px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.notification-banner::-webkit-scrollbar { display: none; }
.nb-item { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.nb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kw-red); flex: 0 0 auto; }
.nb-link { font-family: var(--sans); font-size: 12px; color: var(--near-black); text-decoration: none; }
.nb-link:hover { text-decoration: underline; }

/* reserve room for the fixed banner when it has items */
body.has-banner .app-stage { padding-top: 96px; }

/* ============================================================
   SECTION G — EDUCATION (G1–G6, static)
   Companion text above full-panel-width guide-page images.
   ============================================================ */
.g-entry { margin-top: 56px; }
.g-entry:first-of-type { margin-top: 40px; }
.g-label {
  font-family: var(--sans);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em;
  color: rgba(26,26,26,0.55); margin: 0 0 14px;
}
.g-companion {
  font-family: var(--serif-body);
  font-size: 17px; line-height: 1.65; color: var(--near-black);
  margin: 0;
}
/* Guide-page images: no border, shadow, or caption. The Canva page carries
   its own designed layout — never style on top of it. */
.g-img { display: block; width: 100%; height: auto; border: 0; box-shadow: none; margin-top: 24px; }
.g-companion + .g-img { margin-top: 32px; }     /* 32px gap: companion text -> first image */

/* ============================================================
   SECTION B — NEWS (reverse chronological)
   ============================================================ */
.news-list { margin-top: 28px; }
.news-entry + .news-entry {
  border-top: 1px solid rgba(26,26,26,0.10);     /* 1px rule at 10% */
  margin-top: 40px; padding-top: 40px;           /* 40px above + below the rule */
}
.news-head { display: flex; align-items: center; gap: 8px; }
.news-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kw-red); flex: 0 0 auto; }
.news-week {
  font-family: var(--sans);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(26,26,26,0.55);
}
.news-body { margin-top: 14px; }
.news-p {
  font-family: var(--serif-body);
  font-size: 17px; line-height: 1.65; color: var(--near-black);
  margin: 0 0 1em;
}
.news-p:last-child { margin-bottom: 0; }

/* ============================================================
   SECTION C — MARKETING (7 slots; populated or "Coming soon")
   ============================================================ */
.mk-list { margin-top: 28px; }
.mk-slot + .mk-slot {
  border-top: 1px solid rgba(26,26,26,0.10);
  margin-top: 24px; padding-top: 24px;
}
.mk-slot-label {
  font-family: var(--sans);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em;
  color: rgba(26,26,26,0.55); margin-bottom: 12px;
}
.mk-empty .mk-slot-label { margin-bottom: 6px; }
.mk-soon {                                       /* greyed placeholder — not an empty box */
  font-family: var(--serif-body); font-style: italic;
  font-size: 16px; color: rgba(26,26,26,0.40);
}
.mk-links { display: flex; flex-direction: column; gap: 6px; }
.mk-link {
  font-family: var(--sans); font-size: 15px; color: var(--near-black);
  text-decoration: underline; text-decoration-color: rgba(26,26,26,0.40);
  text-underline-offset: 3px; padding: 4px 0; width: fit-content;
}
.mk-link:hover { text-decoration-color: var(--near-black); }
.mk-video { position: relative; width: 100%; padding-top: 56.25%; margin-top: 4px; }  /* 16:9 */
.mk-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================
   SECTION F — CONTACTS (Jennifer first; vendor / team)
   No border, no card background — cards share the panel ground.
   ============================================================ */
.cf-list { margin-top: 28px; }
.cf-card + .cf-card {
  border-top: 1px solid rgba(26,26,26,0.10);     /* 1px rule at 10% between contacts */
  margin-top: 28px; padding-top: 28px;
}
/* Name in the nav identity serif (The Seasons -> Cormorant Garamond), not the
   body serif. Libre Baskerville ships only at weight 400 here, so the previous
   font-weight:700 faux-bolded / fell back to a system face. */
.cf-name { font-family: var(--serif-display); font-size: 19px; font-weight: 500; color: var(--near-black); line-height: 1.3; letter-spacing: -0.01em; }
.cf-role {
  font-family: var(--sans);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(26,26,26,0.60); margin-top: 6px;
}
.cf-firm { font-family: var(--sans); font-size: 12px; color: rgba(26,26,26,0.65); margin-top: 4px; }
.cf-detail { font-family: var(--sans); font-size: 14px; color: var(--near-black); margin-top: 6px; }
.cf-detail:first-of-type { margin-top: 12px; }
.cf-link { color: var(--near-black); text-decoration: none; }
.cf-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.cf-note {
  font-family: var(--serif-body); font-style: italic;
  font-size: 16px; line-height: 1.5; color: rgba(26,26,26,0.75); margin-top: 12px;
}

/* ============================================================
   DESKTOP  (>= 768px)
   ============================================================ */
@media (min-width: 768px) {
  .login-panel { padding: 48px; max-width: 560px; }
  .sold { font-size: 72px; }
  .sold.small { font-size: 56px; }

  .portal-nav { height: 56px; padding: 0 32px; }
  .nav-cred { display: block; }
  .nav-address { max-width: 320px; }   /* more room on desktop */
  .notification-banner { top: 56px; }

  .app-stage { padding: 104px 32px 80px; }   /* clears 56px nav */
  body.has-banner .app-stage { padding-top: 112px; }
  .section-frame { padding-top: 0; }   /* no card inset on desktop either; mirrors .net-sheet */
  .section-title { font-size: 56px; }
  .ns-title { font-size: 56px; }              /* Section D heading, desktop */
  .net-sheet { padding-top: 0; }

  .portal-footer { padding: 64px 48px; }
  .footer-name { font-size: 32px; }

  /* Phase 3 content sections — desktop body scale + breathing room */
  .g-entry { margin-top: 72px; }
  .g-entry:first-of-type { margin-top: 44px; }
  .g-companion { font-size: 19px; }              /* body paragraph, desktop */
  .news-p { font-size: 19px; }

  /* ---- A3 Listing Timeline — desktop scale (same vertical list, no snake) ---- */
  .tl-heading { font-size: 30px; }
  .tl-stage-label { font-size: 23px; }
  .tl-text { font-size: 15px; line-height: 1.5; }
}

/* ============================================================
   WIDE DESKTOP  (>= 1200px) — centred nav property address
   Session 8 Item 1. The seven nav links span ~630px; at 1280 their
   left edge (618) sits left of the bar's true centre (640), so a
   *centred* address only clears the links at >=1200px. Below this
   the address stays in the identity lockup — mobile + tablet
   layouts are unchanged. The bar fills the gap between the identity
   block (left) and the links (right) and centres within it.
   ============================================================ */
@media (min-width: 1200px) {
  .nav-address { display: none; }            /* hide the identity-nested copy */
  .nav-address-bar {
    display: block;
    align-self: flex-end;                     /* bottom-align within the nav flex row */
    margin-bottom: 9px;                       /* lift off the nav's bottom edge so the text bottom is level with the cred line (the identity block is centred in the 56px nav) */
    flex: 1 1 0; min-width: 0;               /* fills the identity↔links gap; shrinks + ellipsises, never pushes the links */
    text-align: center;
    padding: 0 24px;                          /* breathing room from identity + links */
    font-family: var(--serif-display);        /* The Seasons (Cormorant Garamond) */
    font-style: italic;                       /* The Seasons italic */
    font-size: 17px; line-height: 1.2;
    color: rgba(26, 26, 26, 0.70);            /* #1A1A1A @ 70% — subtle, not competing with name or links */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}