/* ==========================================================================
   Spouse Reports — beta design system
   Hand-authored: this server has no Node/Vite, so there is no build step.
   Mobile-first. Warm relationship/wellness tone, not corporate dashboard.
   ========================================================================== */

:root {
  --ink:        #221A1C;
  --ink-soft:   #6C5F62;
  --ink-faint:  #9C9093;
  --cream:      #F6EBEC;   /* page background — warm blush, not white */
  --cream-deep: #EBDADD;
  --surface:    #FFFFFF;   /* cards sit on top of the page tint */
  --line:       #E3CFD3;   /* visible border, not a hint of one */
  --field:      #DCC3C8;   /* input borders need to be seen */

  /* Brand red, carried from the original Spouse Report heart */
  --red:        #E11B24;
  --red-deep:   #B4141B;
  --red-light:  #FF4A54;
  --blush:      #FDECEE;   /* chips, pills, small tints */
  --blush-deep: #FAD9DD;
  --band-blush: #F8D4DC;   /* full-width sections — must read against white AND the page bg */

  /* Legacy aliases so existing components keep working */
  --rose:       #E11B24;
  --rose-deep:  #B4141B;
  --rose-soft:  #FDECEE;
  --plum:       #B4141B;
  --plum-soft:  #FDECEE;

  /* Grade ramp: green through gold and orange to the brand red */
  --grade-a:    #2E9D6B;
  --grade-b:    #C98A1E;
  --grade-c:    #E0722F;
  --grade-d:    #D02231;
  --sage:       #2E9D6B;
  --sage-soft:  #E4F3EC;
  --gold:       #C98A1E;
  --gold-soft:  #FBF1DC;
  /* Annotation tone — the "here is what you said last time" note. Warm and
     yellower than the page blush, so it reads as paper laid on top rather than
     as another section of the page. */
  --note:       #FBEAB0;   /* highlighter tan — must read as paper, not as page */
  --note-line:  #E3C879;
  --note-ink:   #6E4B0C;
  --clay:       #D02231;
  --clay-soft:  #FCE8E9;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(34,26,28,.06), 0 3px 10px rgba(34,26,28,.06);
  --shadow-md: 0 2px 8px rgba(34,26,28,.08), 0 14px 32px rgba(34,26,28,.09);
  --shadow-rose: 0 12px 32px rgba(225,27,36,.24);

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --nav-h: 68px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1em; }
a  { color: var(--rose-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: .82rem; }

.muted   { color: var(--ink-soft); }
.faint   { color: var(--ink-faint); }
.center  { text-align: center; }
.stack > * + * { margin-top: 1rem; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

/* ---------- Layout ---------- */
.app-body { padding-bottom: calc(var(--nav-h) + 28px); }
.wrap { width: 100%; max-width: 620px; margin: 0 auto; padding: 0 18px; }
.wrap-wide { max-width: 960px; }

/* ---------- Brand header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 30;
  background: rgba(246,235,236,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.masthead-inner { display: flex; align-items: center; gap: 12px; height: 62px; }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; color: var(--ink); letter-spacing: -.015em; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 10px; flex: none;
  background: linear-gradient(150deg, var(--red-light) 0%, var(--red) 45%, var(--red-deep) 100%);
  display: grid; place-items: center; color: #fff; font-size: 15px;
  box-shadow: 0 3px 10px rgba(225,27,36,.34);
}
.masthead-spacer { flex: 1; }
.avatar-chip {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--plum-soft); color: var(--plum);
  display: grid; place-items: center; font-size: .8rem; font-weight: 600;
  border: 1px solid #E4D8EA;
}

/* ---------- Bottom nav (mobile-first) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: var(--nav-h);
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  display: flex; align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--ink-faint); font-size: .68rem; font-weight: 500; letter-spacing: .01em;
}
.tab:hover { text-decoration: none; color: var(--ink-soft); }
.tab-ico { font-size: 1.15rem; line-height: 1; }
.tab.is-active { color: var(--rose-deep); }
.tab.is-active .tab-ico { transform: translateY(-1px); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 14px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.card-title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; margin: 0; }
.card-link { font-size: .8rem; font-weight: 500; }

.section-label {
  font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); margin: 26px 0 10px;
}

/* ---------- GPA hero ---------- */
.gpa-hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  padding: 26px 22px 24px;
  background:
    radial-gradient(120% 90% at 50% -20%, var(--blush) 0%, rgba(255,255,255,0) 62%),
    var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.gpa-hero-label {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red); font-weight: 700; margin-bottom: 16px;
}
.gpa-band { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; margin-top: 16px; }
.gpa-caption { font-size: .88rem; color: var(--ink-soft); margin-top: 4px; }
.gpa-private {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 15px;
  font-size: .72rem; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: var(--blush); color: var(--red-deep); border: 1px solid var(--blush-deep);
}

/* ---------- Category cards ---------- */
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cat-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 15px 14px; box-shadow: var(--shadow-sm);
  display: block; color: inherit; text-decoration: none;
  -webkit-tap-highlight-color: rgba(0,0,0,.04);
}
/* Touch gets a press state instead of hover, which would otherwise swallow the
   first tap. See the convention note at the end of this file. */
a.cat-card:active { background: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  .cat-card:hover { text-decoration: none; box-shadow: var(--shadow-md); }
}
.cat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.cat-ico { font-size: 1.2rem; }
.cat-name { font-size: .84rem; font-weight: 600; color: var(--ink); margin-bottom: 9px; line-height: 1.3; }
.cat-score { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; letter-spacing: -.02em; }
.meter { height: 6px; border-radius: 99px; background: var(--cream-deep); overflow: hidden; margin-top: 9px; }
.meter > i { display: block; height: 100%; border-radius: 99px; background: var(--sage); }

/* ---------- Grade pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; letter-spacing: .01em;
}
.pill-a { background: var(--sage-soft); color: #226F4C; }
.pill-b { background: var(--gold-soft); color: #8A5E12; }
.pill-c { background: #FCEBE0; color: #9C4A18; }
.pill-d, .pill-f { background: var(--clay-soft); color: #9C1622; }
.pill-none { background: var(--cream-deep); color: var(--ink-faint); }

/* ---------- Report list ---------- */
.rep { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rep:last-child { border-bottom: 0; padding-bottom: 0; }
.rep:first-child { padding-top: 0; }
.rep-ico { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--rose-soft); font-size: 1rem; }
.rep-body { flex: 1; min-width: 0; }
.rep-title { display: block; font-size: .88rem; font-weight: 600; }
.rep-sub { display: block; font-size: .76rem; color: var(--ink-faint); }

/* ---------- Recommendation / action card ---------- */
.action-card {
  border-radius: var(--r-lg); padding: 20px;
  background: linear-gradient(150deg, #FFF6F0 0%, #FDEDF2 100%);
  border: 1px solid #F4DCE2;
}
.action-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-deep); margin-bottom: 8px; }
.action-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin-bottom: 6px; }
.action-body { font-size: .89rem; color: var(--ink-soft); margin-bottom: 15px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: .92rem; font-weight: 600; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--rose); color: #fff; box-shadow: 0 6px 18px rgba(217,79,118,.3); }
.btn-primary:hover { background: var(--rose-deep); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-quiet { background: transparent; color: var(--ink-soft); padding: 8px 4px; }
.btn-block { display: flex; width: 100%; }
.btn-sm { padding: 9px 15px; font-size: .82rem; }

/* ---------- Forms ---------- */
.field { margin-bottom: 15px; }
.label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.input {
  width: 100%; padding: 13px 15px; font-size: 1rem; font-family: var(--font-body);
  color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--field); border-radius: var(--r-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-soft); }
.input.has-error { border-color: var(--clay); }
.err { display: block; margin-top: 6px; font-size: .78rem; color: var(--clay); }

.alert { padding: 13px 15px; border-radius: var(--r-sm); font-size: .87rem; margin-bottom: 16px; }
.alert-ok   { background: var(--sage-soft); color: #2F6B54; border: 1px solid #CBE6DA; }
.alert-bad  { background: var(--clay-soft); color: #9B3A22; border: 1px solid #F2D3C9; }
.alert-info { background: var(--plum-soft); color: var(--plum); border: 1px solid #E4D8EA; }

/* ---------- Auth pages ---------- */
.auth-shell { min-height: 100vh; display: flex; flex-direction: column; padding: 28px 18px 40px; }
.auth-top { text-align: center; margin: 12px 0 26px; }
.auth-mark {
  width: 54px; height: 54px; border-radius: 18px; margin: 0 auto 14px;
  background: linear-gradient(150deg, var(--red-light) 0%, var(--red) 45%, var(--red-deep) 100%);
  display: grid; place-items: center; color: #fff; font-size: 25px;
  box-shadow: var(--shadow-rose);
}
.auth-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.auth-tag { font-size: .88rem; color: var(--ink-soft); margin-top: 4px; }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px 20px; box-shadow: var(--shadow-md); width: 100%; max-width: 420px; margin: 0 auto; }
.auth-foot { text-align: center; margin-top: 20px; font-size: .88rem; color: var(--ink-soft); }

/* ---------- Empty states ---------- */
.empty { text-align: center; padding: 26px 14px; }
.empty-ico { font-size: 2rem; margin-bottom: 10px; opacity: .85; }
.empty-title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; margin-bottom: 5px; }
.empty-body { font-size: .87rem; color: var(--ink-soft); max-width: 330px; margin: 0 auto 16px; }

/* ---------- Desktop ---------- */
@media (min-width: 780px) {
  :root { --nav-h: 0px; }
  h1 { font-size: 2.05rem; }
  .app-body { padding-bottom: 110px; }
  /* Centred floating pill: the old rule left this hanging at bottom-left. */
  .tabbar {
    position: fixed; left: 50%; right: auto; bottom: 20px;
    transform: translateX(-50%);
    width: auto; height: auto; padding: 6px;
    border: 1px solid var(--line); border-top: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    box-shadow: var(--shadow-md);
    display: flex; gap: 4px;
  }
  .tabbar .tab { flex: none; flex-direction: row; gap: 7px; font-size: .86rem; padding: 9px 16px; border-radius: 999px; }
  .tabbar .tab.is-active { background: var(--blush); color: var(--red-deep); }
  .tab-ico { font-size: 1rem; }
  .masthead-inner { height: 70px; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .gpa-hero { padding: 34px 30px; }
}

/* ==========================================================================
   Couple + onboarding
   ========================================================================== */

/* ---------- Progress ---------- */
.step-head { margin-bottom: 20px; }
.progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.progress-track { flex: 1; height: 6px; border-radius: 99px; background: var(--cream-deep); overflow: hidden; }
.progress-track > i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--plum) 0%, var(--rose) 100%); transition: width .3s ease; }
.progress-count { font-size: .74rem; font-weight: 600; color: var(--ink-faint); white-space: nowrap; letter-spacing: .02em; }
.step-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; margin: 0 0 6px; letter-spacing: -.015em; }
.step-sub { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* ---------- Big tappable choices ---------- */
.choices { display: grid; gap: 10px; }
.choices-2 { grid-template-columns: 1fr 1fr; }
.choice {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; min-height: 56px;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-md); cursor: pointer;
  font-size: .94rem; font-weight: 500; color: var(--ink);
  transition: border-color .12s ease, background .12s ease, transform .1s ease;
}
.choice:active { transform: scale(.99); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-mark {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--line); display: grid; place-items: center;
  color: transparent; font-size: 12px; transition: all .12s ease;
}
.choice:has(input:checked) { border-color: var(--rose); background: var(--rose-soft); }
.choice:has(input:checked) .choice-mark { border-color: var(--rose); background: var(--rose); color: #fff; }
.choice-ico { font-size: 1.15rem; }
.choice-text { flex: 1; min-width: 0; }
.choice-note { display: block; font-size: .78rem; color: var(--ink-faint); font-weight: 400; margin-top: 2px; }

/* ---------- Chips (multi-select) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 15px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line);
  font-size: .87rem; font-weight: 500; color: var(--ink);
  transition: all .12s ease;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { border-color: var(--plum); background: var(--plum-soft); color: var(--plum); }
.chip:active { transform: scale(.98); }

/* ---------- 1-5 scale ---------- */
.scale-block { padding: 16px 0; border-bottom: 1px solid var(--line); }
.scale-block:last-of-type { border-bottom: 0; padding-bottom: 4px; }
.scale-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.scale-ico { font-size: 1.2rem; }
.scale-name { font-weight: 600; font-size: .95rem; }
.scale-desc { font-size: .78rem; color: var(--ink-faint); }
.scale-opts { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 6px; }
.scale-opt {
  position: relative; display: grid; place-items: center;
  height: 46px; border-radius: 12px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line);
  font-weight: 600; font-size: .95rem; color: var(--ink-soft);
  transition: all .12s ease;
}
.scale-opt input { position: absolute; opacity: 0; pointer-events: none; }
.scale-opt:has(input:checked) { border-color: var(--rose); background: var(--rose); color: #fff; box-shadow: 0 4px 12px rgba(217,79,118,.28); }
.scale-opt.is-na { font-size: .72rem; letter-spacing: .04em; padding: 0 12px; color: var(--ink-faint); }
.scale-opt.is-na:has(input:checked) { border-color: var(--ink-faint); background: var(--ink-faint); color: #fff; box-shadow: none; }
.scale-legend { display: flex; justify-content: space-between; font-size: .68rem; color: var(--ink-faint); margin-top: 7px; }

/* ---------- Step actions ---------- */
.step-actions { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.step-actions .btn-primary { flex: 1; }

/* ---------- Couple / pairing ---------- */
.pair-hero {
  border-radius: var(--r-xl); padding: 26px 22px; text-align: center;
  background: linear-gradient(150deg, #FFF4EE 0%, #FBE7EE 100%);
  border: 1px solid #F2DCE3;
}
.pair-ring { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 16px; }
.pair-av {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 600; font-size: 1.05rem; border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
}
.pair-av-a { background: linear-gradient(140deg, var(--rose), var(--rose-deep)); color: #fff; }
.pair-av-b { background: linear-gradient(140deg, var(--plum), #52395E); color: #fff; margin-left: -14px; }
.pair-av-empty { background: var(--surface); color: var(--ink-faint); border-style: dashed; border-color: var(--line); margin-left: -14px; box-shadow: none; }
.pair-names { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; }
.pair-status { font-size: .88rem; color: var(--ink-soft); margin-top: 5px; }

/* ---------- Copyable invite link ---------- */
.copy-row { display: flex; gap: 8px; margin-top: 10px; }
.copy-input {
  flex: 1; min-width: 0; padding: 12px 14px; font-size: .82rem; font-family: var(--font-body);
  color: var(--ink-soft); background: #FBF4F5; border: 1.5px solid var(--field);
  border-radius: var(--r-sm); text-overflow: ellipsis;
}
.copy-btn { flex: none; padding: 12px 16px; border-radius: var(--r-sm); border: 0; cursor: pointer;
  background: var(--ink); color: #fff; font-size: .84rem; font-weight: 600; font-family: var(--font-body); }
.copy-btn.is-done { background: var(--sage); }

/* ---------- Completion ---------- */
.done-mark {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 18px;
  background: linear-gradient(140deg, var(--sage) 0%, #3C8368 100%);
  display: grid; place-items: center; color: #fff; font-size: 34px;
  box-shadow: 0 12px 30px rgba(78,158,126,.32);
}
.privacy-note {
  display: flex; gap: 10px; padding: 14px 15px; border-radius: var(--r-md);
  background: var(--plum-soft); border: 1px solid #E4D8EA; font-size: .84rem; color: var(--plum);
  text-align: left; margin-top: 18px;
}
.privacy-note b { color: #4E3459; }

.danger-zone { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.btn-danger { background: transparent; color: var(--clay); border-color: #F2D3C9; }
.btn-danger:hover { background: var(--clay-soft); color: #9B3A22; }

@media (min-width: 780px) {
  .scale-opts { grid-template-columns: repeat(5, 72px) auto; }
  .choices-2 { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   GPA Heart — the signature Spouse Reports component
   ========================================================================== */
.heart {
  display: inline-block; line-height: 0;
  filter: drop-shadow(0 10px 22px rgba(225,27,36,.28));
}
.heart svg { display: block; width: 100%; height: auto; }
.heart-sm { width: 64px; }
.heart-md { width: 132px; }
.heart-lg { width: 178px; }
.heart-empty { filter: drop-shadow(0 8px 18px rgba(34,26,28,.12)); }

.heart-wrap { display: flex; justify-content: center; }
.heart-value { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }

/* ==========================================================================
   Report card
   ========================================================================== */
.rc-head { text-align: center; margin-bottom: 4px; }
.rc-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.rc-period { font-size: .82rem; color: var(--ink-faint); margin-top: 6px; }

.rc-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.rc-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.rc-row:last-child { border-bottom: 0; }
.rc-ico { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--blush); font-size: 1rem; }
.rc-name { flex: 1; min-width: 0; font-weight: 600; font-size: .92rem; }
.rc-sub { display: block; font-weight: 400; font-size: .74rem; color: var(--ink-faint); }
.rc-letter { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; width: 42px; text-align: center; }
.rc-points { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .95rem; width: 46px; text-align: right; color: var(--ink-soft); }

.rc-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-top: 14px; font-size: .74rem; color: var(--ink-faint); }
.rc-legend b { color: var(--ink-soft); }

/* ==========================================================================
   Reporting question screen
   ========================================================================== */
.q-shell { max-width: 520px; margin: 0 auto; }
.q-about {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 10px 14px; border-radius: 999px; margin-bottom: 18px;
  background: var(--blush); border: 1px solid var(--blush-deep);
  font-size: .82rem; font-weight: 600; color: var(--red-deep);
}
.q-cat { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .78rem; font-weight: 600; color: var(--ink-faint); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.q-prompt { font-family: var(--font-display); font-size: 1.42rem; font-weight: 600; line-height: 1.28; text-align: center; letter-spacing: -.015em; margin: 0 0 6px; }
.q-help { text-align: center; font-size: .86rem; color: var(--ink-soft); margin-bottom: 22px; }

.answers { display: grid; gap: 9px; }
.answer {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 17px; min-height: 60px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md);
  font-size: 1rem; font-weight: 600; color: var(--ink);
  transition: all .12s ease;
}
.answer:active { transform: scale(.99); }
.answer input { position: absolute; opacity: 0; pointer-events: none; }
.answer-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--line); transition: all .12s ease; }
.answer:has(input:checked) { border-color: var(--red); background: var(--blush); color: var(--red-deep); }
.answer:has(input:checked) .answer-dot { background: var(--red); box-shadow: 0 0 0 4px rgba(225,27,36,.16); }
.answer-4 .answer-dot { background: var(--grade-a); }
.answer-3 .answer-dot { background: #6FB58C; }
.answer-2 .answer-dot { background: var(--grade-b); }
.answer-1 .answer-dot { background: var(--grade-c); }
.answer-0 .answer-dot { background: var(--grade-d); }
.answer-na { color: var(--ink-faint); font-weight: 500; }
.answer-na .answer-dot { background: transparent; border: 1.5px dashed var(--ink-faint); }

.q-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; gap: 10px; }
.q-skip { font-size: .82rem; color: var(--ink-faint); }

/* ---------- Review + complete ---------- */
.rev-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .87rem; }
.rev-row:last-child { border-bottom: 0; }
.rev-q { flex: 1; min-width: 0; }
.rev-a { font-weight: 600; font-size: .8rem; white-space: nowrap; }

.split { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 15px; box-shadow: var(--shadow-sm);
}
.stat-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.stat-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.stat-note { font-size: .76rem; color: var(--ink-faint); margin-top: 3px; }

@media (min-width: 780px) {
  .heart-lg { width: 210px; }
  .q-prompt { font-size: 1.62rem; }
}

/* ==========================================================================
   First-use journey
   ========================================================================== */
.journey { display: grid; gap: 2px; }
.jstep { display: flex; align-items: center; gap: 11px; padding: 9px 0; font-size: .88rem; color: var(--ink-faint); }
.jdot {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 1.5px solid var(--line); background: var(--surface);
  font-size: 11px; font-weight: 700; color: var(--ink-faint);
}
.jstep.is-done { color: var(--ink-soft); }
.jstep.is-done .jdot { background: var(--grade-a); border-color: var(--grade-a); color: #fff; }
.jstep.is-current { color: var(--ink); font-weight: 600; }
.jstep.is-current .jdot { border-color: var(--red); background: var(--blush); color: var(--red); box-shadow: 0 0 0 3px rgba(225,27,36,.12); }

.next-card {
  border-radius: var(--r-lg); padding: 20px;
  background: linear-gradient(150deg, #FFF6F6 0%, var(--blush) 100%);
  border: 1px solid var(--blush-deep);
}
.next-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.next-title { font-family: var(--font-display); font-size: 1.14rem; font-weight: 600; margin-bottom: 6px; }
.next-body { font-size: .89rem; color: var(--ink-soft); margin-bottom: 15px; }

/* ==========================================================================
   Status notices
   ========================================================================== */
.notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 15px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.notice + .notice { margin-top: 10px; }
.notice-ico { width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center; font-size: 1rem; }
.notice-ok   .notice-ico { background: var(--sage-soft); color: #226F4C; }
.notice-wait .notice-ico { background: var(--cream-deep); color: var(--ink-faint); }
.notice-sent .notice-ico { background: var(--sage-soft); color: #226F4C; }
.notice-todo .notice-ico { background: var(--blush); color: var(--red-deep); }
.notice-body { flex: 1; min-width: 0; }
.notice-title { font-weight: 600; font-size: .89rem; }
.notice-text { font-size: .8rem; color: var(--ink-faint); margin-top: 2px; }
.notice-cta { margin-top: 9px; }

/* ==========================================================================
   Report history
   ========================================================================== */
.hist { display: flex; align-items: center; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.hist:last-child { border-bottom: 0; padding-bottom: 0; }
.hist:first-child { padding-top: 0; }
.hist-body { flex: 1; min-width: 0; }
.hist-period { display: block; font-weight: 600; font-size: .93rem; }
.hist-meta { display: block; font-size: .78rem; color: var(--ink-faint); margin-top: 2px; }
.hist.is-withdrawn { opacity: .55; }
.hist.is-withdrawn .hist-period { text-decoration: line-through; }
.hist-gpa { text-align: right; }
.hist-points { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
.hist-letter { font-size: .74rem; font-weight: 700; color: var(--ink-faint); }

/* ==========================================================================
   Privacy / share control
   ========================================================================== */
.share-opt {
  display: flex; align-items: flex-start; gap: 12px; padding: 15px;
  border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer;
  background: var(--surface); transition: all .12s ease;
}
.share-opt + .share-opt { margin-top: 10px; }
.share-opt input { position: absolute; opacity: 0; pointer-events: none; }
.share-opt:has(input:checked) { border-color: var(--red); background: var(--blush); }
.share-mark { width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 2px;
  border: 1.5px solid var(--line); display: grid; place-items: center; color: transparent; font-size: 11px; }
.share-opt:has(input:checked) .share-mark { border-color: var(--red); background: var(--red); color: #fff; }
.share-title { font-weight: 600; font-size: .92rem; }
.share-note { font-size: .8rem; color: var(--ink-soft); margin-top: 3px; }

/* ==========================================================================
   Report card: strongest / improve / action
   ========================================================================== */
.insight { display: grid; gap: 12px; }
.insight-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 15px 16px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 13px; }
.insight-label { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.insight-value { font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; margin-top: 3px; }
.insight-ico { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 1.1rem; background: var(--blush); }

/* ==========================================================================
   Beta admin
   ========================================================================== */
.adm-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.adm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface); }
.adm-table { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 760px; }
.adm-table th { text-align: left; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); padding: 11px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adm-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-email { font-size: .78rem; color: var(--ink-faint); }

/* Filter tabs on the admin drill-down screens. Horizontally scrollable so
   four of them never crush to one word per line on a phone. */
.adm-tabs { display: flex; gap: 8px; margin: 0 0 14px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tab { flex: none; display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .8rem; color: var(--ink-soft); text-decoration: none;
  background: var(--surface); white-space: nowrap;
  -webkit-tap-highlight-color: rgba(0,0,0,.04); }
.adm-tab strong { font-size: .86rem; color: var(--ink); }
.adm-tab:active { background: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  .adm-tab:hover { background: var(--cream); }
}
.adm-tab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.adm-tab.is-on strong { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .adm-tab.is-on:hover { background: var(--ink); }
}
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700; }
.tag-yes { background: var(--sage-soft); color: #226F4C; }
.tag-no  { background: var(--cream-deep); color: var(--ink-faint); }
.tag-off { background: var(--clay-soft); color: #9C1622; }
.tag-test{ background: var(--gold-soft); color: #8A5E12; }
.adm-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-actions .btn { padding: 6px 11px; font-size: .74rem; }

@media (min-width: 780px) {
  .adm-stats { grid-template-columns: repeat(4, 1fr); }
  .insight { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Mobile pass — small-screen corrections
   ========================================================================== */
@media (max-width: 420px) {
  h1 { font-size: 1.52rem; }
  .wrap { padding: 0 15px; }
  .card { padding: 17px; border-radius: 18px; }
  .gpa-hero { padding: 22px 16px; }
  .heart-lg { width: 156px; }
  .heart-md { width: 124px; }
  .q-prompt { font-size: 1.28rem; }
  .q-help { font-size: .84rem; }
  .answer { padding: 14px; min-height: 56px; font-size: .95rem; }
  .btn { padding: 13px 17px; }
  .scale-opts { gap: 5px; }
  .scale-opt { height: 44px; font-size: .9rem; }
  .scale-opt.is-na { padding: 0 7px; font-size: .64rem; }
  .cat-grid { gap: 10px; }
  .cat-card { padding: 13px 12px; }
  .rc-row { padding: 12px 13px; gap: 9px; }
  .rc-name { font-size: .88rem; }
  .rc-letter { width: 34px; font-size: 1.12rem; }
  .rc-points { width: 42px; font-size: .88rem; }
  .chip { padding: 10px 13px; font-size: .84rem; }
  .step-actions .btn { padding: 13px 14px; }
  .copy-input { font-size: .74rem; }
  /* Long emails and links must never widen the page */
  .adm-email, .copy-input, .notice-text { overflow-wrap: anywhere; }
}

/* Nothing may cause a horizontal scrollbar on the page itself. */
html, body { overflow-x: hidden; }

/* ==========================================================================
   Marketing homepage
   Full-bleed alternating bands, large display type, one clear CTA.
   ========================================================================== */
.mk { background: var(--surface); }
.mk-inner { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.mk-narrow { max-width: 620px; margin: 0 auto; }

/* ---------- Sticky top nav ---------- */
.mk-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.mk-nav-inner { display: flex; align-items: center; gap: 14px; height: 66px; }
.mk-logo { display: flex; align-items: center; gap: 9px; font-family: var(--font-display);
  font-size: 1.08rem; font-weight: 600; color: var(--ink); letter-spacing: -.015em; }
.mk-logo:hover { text-decoration: none; }
.mk-logo b { font-weight: 600; }
.mk-logo span { font-weight: 400; color: var(--ink-soft); }
.mk-nav-links { display: none; gap: 22px; flex: 1; justify-content: center; }
.mk-nav-links a { font-size: .88rem; font-weight: 500; color: var(--ink-soft); }
.mk-nav-links a:hover { color: var(--red-deep); text-decoration: none; }
.mk-nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ---------- Hero ---------- */
.mk-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 62px 0 68px; color: #fff;
  background:
    radial-gradient(60% 45% at 18% 22%, rgba(255,120,130,.34) 0%, rgba(255,120,130,0) 60%),
    radial-gradient(50% 40% at 82% 70%, rgba(255,70,90,.30) 0%, rgba(255,70,90,0) 62%),
    linear-gradient(155deg, #2B0F14 0%, #6E121D 52%, #A81118 100%);
}

/* ---- Photo hero ---------------------------------------------------------
   The couple sits right of centre with clean bokeh on the left, so on wide
   screens the copy goes left and the scrim is strongest there. On phones the
   crop is tight, so the scrim covers the whole frame instead.            */
.mk-hero.has-photo {
  /* The photo itself is set per variant by the page's own <style> block.
     This is only the fallback if that never arrives. */
  background: linear-gradient(155deg, #2B0F14 0%, #6E121D 52%, #A81118 100%);
}
.mk-hero.has-photo::after { display: none; }

.mk-hero > * { position: relative; z-index: 1; }
.mk-hero-mark { display: flex; justify-content: center; margin-bottom: 22px; }
.mk-hero h1 {
  font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: 2.15rem; line-height: 1.1; letter-spacing: -.025em; margin: 0 0 14px;
}
.mk-hero p { font-size: 1rem; color: rgba(255,255,255,.86); max-width: 460px; margin: 0 auto 26px; }
.mk-hero-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.btn-onred { background: #fff; color: var(--red-deep); }
.btn-onred:hover { background: #fff; color: var(--red-deep); }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-outline:hover { background: rgba(255,255,255,.1); color: #fff; }
.mk-hero-note { font-size: .78rem; color: rgba(255,255,255,.6); margin-top: 18px; }

/* ---------- Bands ---------- */
.mk-band { padding: 56px 0; }
.mk-band.is-white  { background: var(--surface); }
.mk-band.is-blush  { background: var(--band-blush); }
.mk-band.is-cream  { background: var(--cream); }
.mk-band.is-dark   { background: #1C1315; color: #fff; }
.mk-band.is-red    {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(55% 45% at 20% 20%, rgba(255,120,130,.30) 0%, rgba(255,120,130,0) 62%),
    radial-gradient(45% 40% at 80% 78%, rgba(255,70,90,.26) 0%, rgba(255,70,90,0) 64%),
    linear-gradient(155deg, #2B0F14 0%, #6E121D 52%, #A81118 100%);
}
.mk-band.is-red > * { position: relative; z-index: 1; }
.mk-band.is-red h2, .mk-band.is-red .mk-h2 { color: #fff; }
.mk-band.is-red .mk-lead, .mk-band.is-red p { color: rgba(255,255,255,.84); }
.mk-band.is-red .mk-eyebrow { color: #FF98A0; }
.mk-band.is-dark .mk-lead,
.mk-band.is-dark p { color: rgba(255,255,255,.78); }
.mk-band.is-dark h2 { color: #fff; }

.mk-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red); text-align: center; margin-bottom: 12px; }
.mk-band.is-dark .mk-eyebrow { color: #FF8A93; }
.mk-h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.72rem; line-height: 1.18;
  letter-spacing: -.02em; text-align: center; margin: 0 0 14px; }
.mk-lead { text-align: center; font-size: .98rem; color: var(--ink-soft); max-width: 560px; margin: 0 auto 34px; }

/* ---------- Steps ---------- */
.mk-steps { display: grid; gap: 14px; }
.mk-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 20px; box-shadow: var(--shadow-sm); }
.mk-band.is-dark .mk-step { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); box-shadow: none; }
.mk-step-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--red); color: #fff; font-weight: 700; font-size: .88rem; margin-bottom: 13px; }
.mk-step h3 { font-family: var(--font-display); font-size: 1.06rem; margin: 0 0 6px; }
.mk-step p { font-size: .89rem; color: var(--ink-soft); margin: 0; }
.mk-band.is-dark .mk-step p { color: rgba(255,255,255,.72); }

/* ---------- Sample report card ---------- */
.mk-sample { display: grid; gap: 26px; align-items: center; }
.mk-sample-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 26px 22px; box-shadow: var(--shadow-md); text-align: center; }
.mk-sample-tag { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); background: var(--cream-deep);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 16px; }
.mk-feat { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.mk-feat:last-child { border-bottom: 0; }
.mk-feat-ico { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--blush); font-size: 1.05rem; }
.mk-feat h4 { font-size: .94rem; font-weight: 600; margin: 0 0 3px; }
.mk-feat p { font-size: .85rem; color: var(--ink-soft); margin: 0; }

/* ---------- Category chips ---------- */
.mk-cats { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.mk-cat { display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border-radius: 999px;
  background: var(--blush); border: 1px solid var(--blush-deep); font-size: .87rem; font-weight: 500; }
.mk-band.is-dark .mk-cat { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff; }

/* ---------- Closing CTA ---------- */
.mk-close { text-align: center; }
.mk-close .mk-h2 { font-size: 1.9rem; }

/* ---------- Footer ---------- */
.mk-footer { background: #1C1315; color: rgba(255,255,255,.66); padding: 44px 0 30px; font-size: .86rem; }
.mk-footer a { color: rgba(255,255,255,.66); }
.mk-footer a:hover { color: #fff; }
.mk-foot-grid { display: grid; gap: 26px; margin-bottom: 30px; }
.mk-foot-col h5 { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.42); margin: 0 0 11px; }
.mk-foot-col a { display: block; padding: 5px 0; }
.mk-foot-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: .8rem;
  color: rgba(255,255,255,.44); }
.mk-foot-logo { display: flex; align-items: center; gap: 9px; color: #fff;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; margin-bottom: 10px; }

@media (min-width: 720px) {
  .mk-nav-links { display: flex; }
  .mk-hero { padding: 96px 0 100px; }
  .mk-hero h1 { font-size: 3.2rem; }
  .mk-hero p { font-size: 1.08rem; }
  .mk-hero-actions { flex-direction: row; justify-content: center; }

  .mk-hero.has-photo { text-align: left; padding: 120px 0 128px; }
  .mk-hero.has-photo .mk-hero-mark { justify-content: flex-start; }
  .mk-hero.has-photo .mk-hero-copy { max-width: 520px; }
  .mk-hero.has-photo p { margin-left: 0; }
  .mk-hero.has-photo .mk-hero-actions { justify-content: flex-start; }
  .mk-band { padding: 84px 0; }
  .mk-h2 { font-size: 2.25rem; }
  .mk-steps { grid-template-columns: repeat(3, 1fr); }
  .mk-sample { grid-template-columns: 1fr 1fr; gap: 46px; }
  .mk-foot-grid { grid-template-columns: repeat(4, 1fr); }
  .mk-close .mk-h2 { font-size: 2.6rem; }
}

/* ==========================================================================
   Daily check-in
   ========================================================================== */
.ci-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ci-opt {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 14px 4px; cursor: pointer; border-radius: var(--r-md);
  background: var(--surface); border: 1.5px solid var(--field);
  font-size: .74rem; font-weight: 600; color: var(--ink-soft); transition: all .12s ease;
}
.ci-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ci-face { font-size: 1.5rem; line-height: 1; }
.ci-opt:has(input:checked) { border-color: var(--red); background: var(--blush); color: var(--red-deep); }
.ci-opt:active { transform: scale(.98); }

.ci-streak { display: flex; align-items: center; gap: 13px; }
.ci-streak-n { font-family: var(--font-display); font-size: 2rem; font-weight: 600; letter-spacing: -.02em; }
.ci-dots { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.ci-dot { width: 22px; height: 22px; border-radius: 7px; background: var(--cream-deep); }
.ci-dot.s5 { background: var(--grade-a); } .ci-dot.s4 { background: #6FB58C; }
.ci-dot.s3 { background: var(--grade-b); } .ci-dot.s2 { background: var(--grade-c); }
.ci-dot.s1 { background: var(--grade-d); }

/* ---------- Membership + reminder badges ---------- */
.tag-free { background: var(--cream-deep); color: var(--ink-soft); }
.tag-full { background: var(--blush); color: var(--red-deep); }

/* ---------- Special note on the report card ---------- */
.note-card {
  border-radius: var(--r-lg); padding: 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--red); box-shadow: var(--shadow-sm);
}
.note-label { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); margin-bottom: 9px; }
.note-body { font-size: .95rem; line-height: 1.65; color: var(--ink); font-style: italic; }
.note-from { font-size: .78rem; color: var(--ink-faint); margin-top: 11px; }

/* ---------- Subcategory breakdown ---------- */
.sub-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sub-row:last-child { border-bottom: 0; }
.sub-name { flex: 1; min-width: 0; font-size: .88rem; font-weight: 500; }
.sub-meter { width: 82px; height: 6px; border-radius: 99px; background: var(--cream-deep); overflow: hidden; flex: none; }
.sub-meter > i { display: block; height: 100%; border-radius: 99px; }
.sub-val { width: 42px; text-align: right; font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Upgrade / tier notice ---------- */
.tier-card { border-radius: var(--r-lg); padding: 18px 19px;
  background: linear-gradient(150deg, #FFF6F6 0%, var(--blush) 100%);
  border: 1px solid var(--blush-deep); }
.tier-title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; margin-bottom: 5px; }
.tier-body { font-size: .86rem; color: var(--ink-soft); }

/* ==========================================================================
   Category opt-in
   ========================================================================== */
.cat-opt { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cat-opt:last-child { border-bottom: 0; }
.cat-opt.is-locked, .cat-opt.is-unavailable { opacity: .62; }
.cat-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cat-box { width: 24px; height: 24px; border-radius: 8px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--field); background: var(--surface); display: grid; place-items: center;
  color: transparent; font-size: 13px; font-weight: 700; transition: all .12s ease; cursor: pointer; }
label.cat-opt:has(input:checked) .cat-box { border-color: var(--red); background: var(--red); color: #fff; }
.cat-opt.is-locked .cat-box { border-color: var(--grade-a); background: var(--grade-a); color: #fff; }
.cat-opt-body { flex: 1; min-width: 0; }
.cat-opt-name { font-weight: 600; font-size: .94rem; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cat-opt-desc { font-size: .8rem; color: var(--ink-faint); margin-top: 2px; }
.cat-state { font-size: .72rem; font-weight: 600; margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; }
.cat-state.ok   { color: #226F4C; }
.cat-state.wait { color: #9C4A18; }
.cat-state.off  { color: var(--ink-faint); }
.agreed-bar { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: var(--r-md);
  background: var(--blush); border: 1px solid var(--blush-deep); margin-bottom: 16px; }
.agreed-n { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; line-height: 1; }

/* ==========================================================================
   Pricing
   ========================================================================== */
.plans { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; }
.plan {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-xl);
  padding: 26px 22px; box-shadow: var(--shadow-sm); position: relative;
}
.plan.is-featured {
  border-color: transparent; box-shadow: 0 14px 40px rgba(168,17,24,.24);
  padding: 0; overflow: hidden;
}
/* The featured plan leads with a solid red head, so the outside of the card
   matches the weight of the button inside it. */
.plan-head {
  background:
    radial-gradient(70% 90% at 20% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(150deg, #E11B24 0%, #B4141B 55%, #A81118 100%);
  color: #fff; padding: 24px 22px 22px; text-align: left;
}
.plan-head .plan-name { color: #fff; }
.plan-head .plan-blurb { color: rgba(255,255,255,.82); margin-bottom: 14px; }
.plan-head .plan-amount { color: #fff; }
.plan-head .plan-per { color: rgba(255,255,255,.75); }
.plan-head .plan-alt { color: rgba(255,255,255,.88); margin-bottom: 0; }
.plan-head .plan-alt b { color: #fff; }
.plan-head .save-flag { background: rgba(255,255,255,.22); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.plan-badge {
  display: inline-block; margin-bottom: 12px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32);
  color: #fff; font-size: .64rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
}
.plan-body { padding: 22px; }
.plan.is-featured .plan-list { margin-bottom: 18px; }
.mk-band.is-blush .plan { box-shadow: var(--shadow-md); border-color: #F0C3CE; }
.mk-band.is-blush .mk-sample-card { border-color: #F0C3CE; }
.mk-band.is-blush .rc-table { border-color: #F0C3CE; }
.price-lead { text-align: center; font-size: .95rem; color: var(--ink); max-width: 620px;
  margin: 0 auto 26px; font-weight: 500; }
.price-lead b { color: var(--red-deep); }
.plan-flag { display: none; }
.plan-name { font-family: var(--font-display); font-size: 1.24rem; font-weight: 600; }
.plan-blurb { font-size: .88rem; color: var(--ink-soft); margin: 4px 0 16px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.plan-amount { font-family: var(--font-display); font-size: 2.5rem; font-weight: 600; letter-spacing: -.03em; }
.plan-per { font-size: .88rem; color: var(--ink-faint); }
.plan-alt { font-size: .82rem; color: var(--ink-soft); margin-bottom: 18px; }
.plan-alt b { color: var(--red-deep); }
.plan-list { list-style: none; padding: 0; margin: 0 0 20px; }
.plan-list li { display: flex; gap: 9px; padding: 7px 0; font-size: .89rem; }
.plan-list li::before { content: '✓'; color: var(--grade-a); font-weight: 700; flex: none; }
.plan-list li.muted-item::before { content: '·'; color: var(--ink-faint); }
.plan-note { font-size: .78rem; color: var(--ink-faint); margin-top: 12px; text-align: center; }
.covers-both {
  display: flex; align-items: center; gap: 11px; padding: 14px 15px; margin: 0 auto 24px;
  max-width: 760px; border-radius: var(--r-md);
  background: var(--blush); border: 1px solid var(--blush-deep); font-size: .88rem; color: var(--red-deep);
}
.beta-banner {
  max-width: 760px; margin: 0 auto 22px; padding: 13px 16px; border-radius: var(--r-md);
  background: var(--sage-soft); border: 1px solid #C6E4D5; color: #226F4C;
  font-size: .87rem; text-align: center;
}

/* FAQ */
.faq-item { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq-item:last-child { border-bottom: 0; }
.faq-q { font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; margin: 0 0 8px; }
.faq-a { font-size: .92rem; color: var(--ink-soft); margin: 0; line-height: 1.65; }
.faq-a + .faq-a { margin-top: 10px; }

@media (min-width: 720px) {
  .plans { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ==========================================================================
   Moments
   ========================================================================== */
.moment-cat {
  display: flex; align-items: center; gap: 12px; padding: 15px 16px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md);
  color: inherit; transition: all .12s ease;
}
.moment-cat + .moment-cat { margin-top: 9px; }
@media (hover: hover) and (pointer: fine) {
  .moment-cat:hover { text-decoration: none; border-color: var(--red); background: var(--blush); }
}
.moment-cat.is-capped { opacity: .5; pointer-events: none; }
.moment-cat-ico { font-size: 1.25rem; flex: none; }
.moment-cat-body { flex: 1; min-width: 0; }
.moment-cat-name { font-weight: 600; font-size: .94rem; }
.moment-cat-desc { font-size: .78rem; color: var(--ink-faint); margin-top: 1px; }
.moment-cat-n { font-size: .72rem; color: var(--ink-faint); font-weight: 600; white-space: nowrap; }

.moment-q { display: block; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; font-size: .92rem; background: var(--surface); transition: all .12s ease; }
.moment-q + .moment-q { margin-top: 8px; }
.moment-q input { position: absolute; opacity: 0; pointer-events: none; }
.moment-q:has(input:checked) { border-color: var(--red); background: var(--blush); color: var(--red-deep); font-weight: 600; }

.moment-log { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.moment-log:last-child { border-bottom: 0; }
.moment-log-body { flex: 1; min-width: 0; }
.moment-log-t { font-size: .88rem; font-weight: 600; }
.moment-log-s { font-size: .76rem; color: var(--ink-faint); }
.moment-log.is-withdrawn { opacity: .5; }
.moment-log.is-withdrawn .moment-log-t { text-decoration: line-through; }

.cooldown { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600;
  color: #9C4A18; background: #FCEBE0; border: 1px solid #F5D7C4; padding: 4px 9px; border-radius: 999px; }

/* Feedback notice tied to a category */
.notice-feedback .notice-ico { background: var(--blush); color: var(--red-deep); }
.notice-action { font-size: .8rem; color: var(--ink-soft); margin-top: 7px; padding-top: 7px;
  border-top: 1px dashed var(--line); }

/* ---------- Locked categories: shown, not hidden ---------- */
.moment-cat.is-locked {
  background: var(--cream); border-style: dashed; border-color: var(--line);
  cursor: default; opacity: .78;
}
@media (hover: hover) and (pointer: fine) {
  .moment-cat.is-locked:hover { border-color: var(--line); background: var(--cream); }
}
.moment-cat.is-locked .moment-cat-name { color: var(--ink-soft); }
.moment-cat.is-locked .moment-cat-ico { filter: grayscale(.55); opacity: .75; }
.lock-tag {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
}
.lock-tag.premium { background: var(--red); color: #fff; }
.lock-tag.off { background: var(--cream-deep); color: var(--ink-faint); }

/* Subcategory headings on the moment composer */
.q-group-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); margin: 20px 0 9px;
}
.q-group-label:first-of-type { margin-top: 0; }

.save-flag {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  background: var(--grade-a); color: #fff; font-size: .66rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
}

/* ==========================================================================
   Add-to-home-screen prompt
   ========================================================================== */
.install-card {
  position: fixed; left: 12px; right: 12px; z-index: 60;
  bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom));
  display: none; gap: 12px; align-items: flex-start;
  padding: 15px 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 10px 34px rgba(34,26,28,.20);
}
.install-card.is-open { display: flex; }
.install-body { flex: 1; min-width: 0; }
.install-title { font-weight: 600; font-size: .92rem; margin-bottom: 3px; }
.install-text { font-size: .8rem; color: var(--ink-soft); line-height: 1.5; }
.install-text b { color: var(--ink); }
.install-actions { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.install-close {
  flex: none; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-faint); font-size: 1.15rem; line-height: 1; padding: 2px 4px;
}
.ios-share {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; vertical-align: -4px; margin: 0 1px;
  border: 1.5px solid var(--ink-soft); border-radius: 5px; color: var(--ink-soft);
  font-size: 11px; font-weight: 700;
}
@media (min-width: 780px) {
  .install-card { left: auto; right: 20px; bottom: 20px; max-width: 380px; }
}

/* Static how-to, always available in Account */
.howto-step { display: flex; gap: 11px; padding: 9px 0; font-size: .88rem; }
.howto-n { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--blush); color: var(--red-deep); font-size: .72rem; font-weight: 700; }

/* Hero heart runs larger than a standard md so the GPA is readable at a glance. */
.mk-hero.has-photo .heart-md { width: 150px; }
.mk-hero.has-photo .mk-hero-mark { margin-bottom: 18px; }
@media (min-width: 720px) {
  .mk-hero.has-photo .heart-md { width: 186px; }
}
@media (max-width: 420px) {
  .mk-hero.has-photo .heart-md { width: 138px; }
}

/* ==========================================================================
   Admin: settings + agreement editor
   ========================================================================== */
.set-row { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-label { flex: 1; min-width: 0; }
.set-name { font-weight: 600; font-size: .92rem; }
.set-help { font-size: .79rem; color: var(--ink-faint); margin-top: 2px; }
.set-input { flex: none; width: 150px; }
.set-input .input { padding: 9px 11px; font-size: .92rem; }
.set-toggle { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; }

.editor-grid { display: grid; gap: 16px; }
.editor-pane textarea {
  width: 100%; min-height: 480px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .84rem; line-height: 1.6; padding: 14px; border: 1.5px solid var(--field);
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink); resize: vertical;
}
.editor-preview {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  padding: 20px; max-height: 520px; overflow-y: auto;
}
.editor-preview h2 { font-size: 1.15rem; margin: 18px 0 8px; }
.editor-preview h3 { font-size: 1rem; margin: 16px 0 6px; }
.editor-preview h4 { font-size: .92rem; margin: 14px 0 6px; }
.editor-preview p, .editor-preview li { font-size: .88rem; line-height: 1.65; color: var(--ink-soft); }
.editor-preview ul { padding-left: 20px; margin: 8px 0; }
.editor-hint { font-size: .78rem; color: var(--ink-faint); margin-top: 8px; }
.editor-hint code { background: var(--cream-deep); padding: 1px 5px; border-radius: 4px; }

.ver-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.ver-row:last-child { border-bottom: 0; }
.ver-body { flex: 1; min-width: 0; }
.ver-num { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.ver-meta { font-size: .78rem; color: var(--ink-faint); }
.ver-actions { display: flex; gap: 7px; flex-wrap: wrap; }

/* Public agreement */
.legal { max-width: 760px; margin: 0 auto; }
.legal h2 { font-family: var(--font-display); font-size: 1.3rem; margin: 30px 0 10px; }
.legal h3 { font-family: var(--font-display); font-size: 1.06rem; margin: 24px 0 8px; }
.legal h4 { font-size: .96rem; margin: 18px 0 6px; }
.legal p, .legal li { font-size: .93rem; line-height: 1.72; color: var(--ink-soft); }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }

@media (min-width: 980px) { .editor-grid { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Admin access + roomier admin screens
   ========================================================================== */
.admin-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 7px 13px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: .8rem; font-weight: 600; letter-spacing: .01em;
}
.admin-pill:hover { background: #000; color: #fff; text-decoration: none; }
.admin-pill.is-active { background: var(--red); }
.admin-pill-ico { font-size: .9rem; line-height: 1; }
@media (max-width: 520px) {
  .admin-pill-text { display: none; }
  .admin-pill { padding: 7px 10px; }
}

/* Admin pages get the full width of the screen rather than the reading column. */
.wrap-admin { max-width: 1500px; }

.adm-table { min-width: 0; font-size: .82rem; }
.adm-table th { padding: 10px 10px; }
.adm-table td { padding: 10px 10px; }
.adm-user { min-width: 190px; }
.adm-email { font-size: .74rem; word-break: break-word; }
.adm-num { text-align: center; white-space: nowrap; }
.adm-actions .btn { padding: 5px 9px; font-size: .71rem; }
.adm-actions { gap: 5px; }
.adm-scroll { overflow-x: auto; }

@media (min-width: 1100px) {
  /* Enough room for everything — no sideways scrolling. */
  .adm-scroll { overflow-x: visible; }
  .adm-table { width: 100%; table-layout: auto; }
}

/* ==========================================================================
   Header account menu + always-visible upgrade
   ========================================================================== */
.upgrade-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 8px 14px; border-radius: 999px;
  background: linear-gradient(150deg, #FF4A54 0%, var(--red) 55%, var(--red-deep) 100%);
  color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 4px 14px rgba(225,27,36,.32);
}
.upgrade-pill:hover { color: #fff; text-decoration: none; transform: translateY(-1px); }
.upgrade-pill-ico { font-size: .88rem; line-height: 1; }
@media (max-width: 560px) { .upgrade-pill-text { display: none; } .upgrade-pill { padding: 8px 11px; } }

.acct { position: relative; flex: none; }
.acct-trigger { background: none; border: 0; padding: 0; cursor: pointer; display: block; }
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
  width: 246px; padding: 8px; display: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 14px 40px rgba(34,26,28,.20);
}
.acct-menu.is-open { display: block; }
.acct-head { padding: 10px 11px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.acct-name { font-weight: 600; font-size: .9rem; }
.acct-mail { font-size: .74rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.acct-plan { display: inline-block; margin-top: 7px; font-size: .66rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.acct-plan.free { background: var(--cream-deep); color: var(--ink-soft); }
.acct-plan.full { background: var(--blush); color: var(--red-deep); }
.acct-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border-radius: var(--r-sm); font-size: .88rem; color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .acct-link:hover { background: var(--cream); text-decoration: none; }
}
.acct-link.is-active { background: var(--blush); color: var(--red-deep); font-weight: 600; }
.acct-ico { width: 18px; text-align: center; font-size: .95rem; flex: none; }
.acct-sep { height: 1px; background: var(--line); margin: 6px 0; }
.acct-upgrade {
  background: linear-gradient(150deg, #FF4A54 0%, var(--red) 55%, var(--red-deep) 100%);
  color: #fff !important; font-weight: 700; margin: 4px 0;
}
.acct-upgrade:hover { background: var(--red-deep); color: #fff !important; }
.acct-signout { width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); color: var(--ink-soft); }

/* The prompt is the headline now — it must be readable at a glance on a phone. */
.q-prompt { color: var(--ink); font-weight: 600; }
.q-help { font-size: .86rem; color: var(--ink-soft); }

/* What the reporter said last time */
/* ---------- Comparing against last time ----------
   This frames the question rather than decorating it: without knowing what they
   said last month, people grade from the whole relationship and answer the same
   thing every time, and somebody who genuinely improved never sees it. */
.q-compare {
  margin: 0 0 20px; padding: 15px 18px;
  background: var(--note); border: 1px solid var(--note-line);
  border-left: 5px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(122,85,16,.07), 0 4px 14px rgba(122,85,16,.06);
}
/* Nothing to compare against yet — stays quiet so only the real note draws
   the eye. A highlight on every question would highlight nothing. */
.q-compare.is-first {
  background: var(--cream); border-color: var(--line);
  border-left-color: var(--cream-deep); box-shadow: none;
}
.q-compare-eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--note-ink); margin-bottom: 7px;
}
.q-compare.is-first .q-compare-eyebrow { color: var(--ink-faint); }
.q-compare-said { font-size: 1rem; margin-bottom: 7px; }
.q-compare-said b { font-weight: 700; }
/* Darkened for the note background: the standard grade colours are tuned for
   white and amber-on-yellow in particular is unreadable. Same hues, more depth. */
.q-compare-said b.answer-4 { color: #17683F; }
.q-compare-said b.answer-3 { color: #1B5E3F; }
.q-compare-said b.answer-2 { color: #7A520F; }
.q-compare-said b.answer-1 { color: #903F11; }
.q-compare-said b.answer-0 { color: #93101B; }
.q-compare-said b.answer-na { color: #5F4E2E; }
.q-compare-said { color: var(--ink); }
.q-compare-ask { font-size: .86rem; color: #5F4E2E; line-height: 1.55; }
.q-compare.is-first .q-compare-ask { color: var(--ink-soft); }
.q-compare-move {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--note-line);
  font-size: .84rem; font-weight: 700; letter-spacing: .01em;
}
.q-compare-move.is-up { color: #17683F; }
.q-compare-move.is-down { color: #93101B; }
.q-compare-move.is-same { color: #5F4E2E; }

/* Where they stood last time, marked on the scale itself. */
/* Same tone as the note above, so the eye connects the badge to it. */
.answer.was-last-time { border-color: var(--note-line); background: #FFFAEA; }
.answer-was {
  margin-left: auto; font-size: .64rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--note-ink);
  background: var(--note); border: 1px solid var(--note-line);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.q-prev-value { font-weight: 700; }
.q-prev-value.answer-4 { color: var(--grade-a); }
.q-prev-value.answer-3 { color: #4E8C6C; }
.q-prev-value.answer-2 { color: var(--grade-b); }
.q-prev-value.answer-1 { color: var(--grade-c); }
.q-prev-value.answer-0 { color: var(--grade-d); }
.q-prev-value.answer-na { color: var(--ink-faint); }
.q-prev-when { color: var(--ink-faint); font-size: .74rem; }

/* Locked rows are links to whatever unlocks them, so they must feel tappable. */
.moment-cat.is-locked { cursor: pointer; transition: all .12s ease; }
@media (hover: hover) and (pointer: fine) {
  .moment-cat.is-locked.is-premium:hover {
    opacity: 1; border-color: var(--red); border-style: solid;
    background: var(--blush); text-decoration: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .moment-cat.is-locked.is-premium:hover .moment-cat-ico { filter: none; opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
  .moment-cat.is-locked.is-off:hover { opacity: 1; border-color: var(--field); background: var(--surface); }
}
.lock-tag.premium { transition: transform .12s ease; }
@media (hover: hover) and (pointer: fine) {
  .moment-cat.is-locked:hover .lock-tag.premium { transform: scale(1.04); }
}

.cat-opt.is-clickable { cursor: pointer; transition: all .12s ease; }
@media (hover: hover) and (pointer: fine) {
  .cat-opt.is-clickable:hover { opacity: 1; text-decoration: none; }
}
@media (hover: hover) and (pointer: fine) {
  .cat-opt.is-clickable:hover .cat-opt-name { color: var(--red-deep); }
}

/* ==========================================================================
   On-site card checkout
   ========================================================================== */
.pay-shell { max-width: 480px; margin: 0 auto; }
.pay-summary {
  border-radius: var(--r-lg); padding: 20px;
  background: linear-gradient(150deg, #FFF6F6 0%, var(--blush) 100%);
  border: 1px solid var(--blush-deep); margin-bottom: 18px;
}
.pay-plan { font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; }
.pay-amount { display: flex; align-items: baseline; gap: 7px; margin: 6px 0 4px; }
.pay-amount b { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; letter-spacing: -.02em; }
.pay-amount span { font-size: .86rem; color: var(--ink-soft); }
.pay-note { font-size: .82rem; color: var(--ink-soft); }
.pay-switch { font-size: .82rem; margin-top: 12px; }

#card-container {
  min-height: 92px; padding: 4px; border: 1.5px solid var(--field);
  border-radius: var(--r-sm); background: var(--surface);
}
#card-container.is-focused { border-color: var(--red); box-shadow: 0 0 0 3px var(--blush); }
.pay-error {
  display: none; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--clay-soft); border: 1px solid #F2D3C9; color: #9C1622; font-size: .85rem;
}
.pay-error.is-open { display: block; }
.pay-secure { display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: .76rem; color: var(--ink-faint); margin-top: 14px; }
.pay-sandbox { margin-top: 10px; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--gold-soft); border: 1px solid #EBD9AE; color: #8A5E12; font-size: .8rem; }
.pay-sandbox code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; }

/* Impossible to miss when an account is transacting against the sandbox. */
.test-banner {
  padding: 13px 15px; margin-bottom: 18px; border-radius: var(--r-sm);
  background: repeating-linear-gradient(45deg, #FBF1DC, #FBF1DC 10px, #F8EAD0 10px, #F8EAD0 20px);
  border: 1.5px solid #E0B860; color: #7A5210; font-size: .84rem; line-height: 1.55;
}
.test-banner code { background: rgba(0,0,0,.07); padding: 1px 5px; border-radius: 4px; }

/* ---------- Pending invitation prompt ----------
   Shown to a signed-in person who already had an account when their spouse
   invites them. Sits above page content on every screen until acted on. */
.invite-waiting {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: space-between;
  background: var(--band-blush);
  border: 1px solid #EFB9C6;
  border-left: 4px solid var(--red);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.invite-waiting-text { display: flex; flex-direction: column; gap: 2px; min-width: 210px; flex: 1; }
.invite-waiting-text strong { color: var(--ink); font-size: .96rem; }
.invite-waiting-text .muted { font-size: .84rem; }
.invite-waiting form { margin: 0; }
.invite-waiting .btn { margin: 0; white-space: nowrap; }

@media (max-width: 420px) {
  .invite-waiting { flex-direction: column; align-items: stretch; }
  .invite-waiting .btn { width: 100%; }
}

/* ---------- Plan management ---------- */
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.plan-name { font-size: 1.5rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.plan-price { font-size: 1.05rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.plan-price .faint { font-weight: 400; font-size: .86rem; }

.plan-flag {
  display: inline-block; margin-left: 9px; padding: 3px 9px;
  border-radius: 999px; font-size: .68rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; vertical-align: middle;
}
.plan-flag-active { background: #DCF3E4; color: #1C6B3A; }
.plan-flag-ending { background: #FBE3C7; color: #8A4B12; }

.plan-facts { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 4px 0 0; }
.plan-facts dt { color: var(--muted, #6B6076); font-size: .84rem; white-space: nowrap; }
.plan-facts dd { margin: 0; color: var(--ink); font-size: .9rem; text-align: right; overflow-wrap: anywhere; }

.confirm-line { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; font-size: .86rem; }
.confirm-line input { margin-top: 3px; flex-shrink: 0; }

.btn-danger { color: var(--red); border-color: #EFB9C6; }
.btn-danger:hover { background: var(--band-blush); }

@media (max-width: 380px) {
  .plan-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .plan-facts dd { text-align: left; margin-bottom: 8px; }
}

/* ---------- Affiliate program ---------- */
.aff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 6px; }
.aff-grid .card { margin-bottom: 0; }

.aff-status { border-left: 4px solid var(--red); display: flex; flex-direction: column; gap: 4px; }
.aff-status strong { color: var(--ink); }
.aff-status-pending { border-left-color: #C99A2E; background: #FDF4E3; }
.aff-status-stopped { border-left-color: var(--red); background: var(--band-blush); }
.aff-status-todo    { border-left-color: #C99A2E; background: #FDF4E3; }

.aff-link-row { display: flex; gap: 8px; align-items: stretch; }
.aff-link-row .input { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.aff-link-row .btn { white-space: nowrap; margin: 0; }

.aff-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid #EFE2E4;
}
.aff-row:last-child { border-bottom: 0; padding-bottom: 0; }

.aff-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}
.aff-pill-pending    { background: #FDF4E3; color: #8A6512; }
.aff-pill-available  { background: #E4EEFB; color: #1F4B87; }
.aff-pill-paid,
.aff-pill-approved   { background: #DCF3E4; color: #1C6B3A; }
.aff-pill-reversed,
.aff-pill-voided,
.aff-pill-rejected,
.aff-pill-suspended,
.aff-pill-terminated { background: var(--band-blush); color: #8E1119; }
.aff-pill-failed,
.aff-pill-cancelled  { background: #EFE7E9; color: #6B6076; }

.aff-inline-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: .82rem; color: #6B6076; }
.aff-inline-stats b { color: var(--ink); }

.aff-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-top: 14px; }
.aff-actions form { margin: 0; }
.aff-reject { display: flex; gap: 8px; flex: 1; min-width: 240px; }
.aff-reject .input { flex: 1; }
.aff-reject .btn { white-space: nowrap; margin: 0; }

.aff-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.aff-filters .btn.is-active { background: var(--band-blush); border-color: #EFB9C6; color: #8E1119; }

.aff-field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.aff-field-row .field { flex: 1; min-width: 120px; }

.aff-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-top: 20px; }
.aff-step h4 { margin: 10px 0 5px; font-size: 1rem; color: var(--ink); }
.aff-step p { margin: 0; font-size: .88rem; color: #6B6076; line-height: 1.55; }
.aff-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--red); color: #fff; font-weight: 700; font-size: .86rem;
}

/* ---------- Affiliate landing page ---------- */
.aff-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.aff-hero-img img { width: 100%; height: auto; border-radius: 18px; display: block; box-shadow: 0 10px 34px rgba(34,26,28,.16); }
.aff-hero-note { font-size: .86rem; color: #6B6076; margin: 0 0 20px; letter-spacing: .01em; }

.aff-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.aff-term { background: var(--surface, #fff); border: 1px solid #EFE2E4; border-radius: 14px; padding: 18px; }
.aff-term-v { font-size: 1.7rem; font-weight: 700; color: var(--red); line-height: 1.1; letter-spacing: -.01em; }
.aff-term-l { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); margin: 4px 0 8px; }
.aff-term p { margin: 0; font-size: .85rem; color: #6B6076; line-height: 1.5; }

.aff-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; }
.aff-who div { display: flex; flex-direction: column; gap: 3px; }
.aff-who b { color: var(--ink); font-size: .95rem; }
.aff-who span { font-size: .86rem; color: #6B6076; line-height: 1.5; }

.aff-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; margin-top: 18px; }
.aff-rules-col h4 { margin: 0 0 10px; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; }
.aff-rules-col h4.aff-yes { color: #1C6B3A; }
.aff-rules-col h4.aff-no  { color: #8E1119; }
.aff-rules-col ul { margin: 0; padding-left: 20px; }
.aff-rules-col li { font-size: .89rem; color: #4A414C; line-height: 1.6; margin-bottom: 6px; }

.aff-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 20px; }
.aff-path { background: var(--surface, #fff); border: 1px solid #EFE2E4; border-radius: 16px; padding: 22px; }
.aff-path h4 { margin: 0 0 8px; font-size: 1.02rem; color: var(--ink); }
.aff-path p { margin: 0 0 16px; font-size: .87rem; color: #6B6076; line-height: 1.55; }
.aff-path .btn { margin: 0; }

@media (max-width: 760px) {
  .aff-hero { grid-template-columns: 1fr; gap: 26px; }
  .aff-hero-img { order: -1; }
}

/* ---------- Marketing: sample report card ---------- */
.samp-card {
  background: var(--surface, #fff); border: 1px solid #EFE2E4; border-radius: 18px;
  padding: 22px; box-shadow: 0 10px 34px rgba(34,26,28,.10); max-width: 420px;
}
.samp-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.samp-eyebrow { font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #9A91A3; }
.samp-cat { font-family: var(--font-display, Georgia, serif); font-size: 1.24rem;
  font-weight: 600; color: var(--ink); }

.samp-grade { display: flex; align-items: center; gap: 14px; padding: 14px 0 16px;
  border-bottom: 1px solid #F1E6E8; margin-bottom: 14px; flex-wrap: wrap; }
.samp-letter { font-family: var(--font-display, Georgia, serif); font-size: 2.6rem;
  font-weight: 600; line-height: 1; color: var(--red); }
.samp-gpa { display: flex; flex-direction: column; line-height: 1.2; }
.samp-gpa b { font-size: 1.12rem; color: var(--ink); }
.samp-gpa span { font-size: .74rem; color: #9A91A3; }
.samp-band { margin-left: auto; background: var(--band-blush); color: #8E1119;
  border-radius: 999px; padding: 4px 12px; font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }

.samp-lines { display: flex; flex-direction: column; gap: 10px; }
.samp-line { display: grid; grid-template-columns: 1fr 84px 38px; gap: 10px; align-items: center; }
.samp-line-label { font-size: .84rem; color: #4A414C; }
.samp-line-val { font-size: .78rem; color: #6B6076; text-align: right; font-variant-numeric: tabular-nums; }
.samp-bar { display: block; height: 7px; border-radius: 999px; background: #F1E1E5; overflow: hidden; }
.samp-bar i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #E8666E, var(--red)); }

.samp-note { margin-top: 16px; padding: 13px 15px; background: var(--cream);
  border-radius: 12px; border-left: 3px solid var(--red); }
.samp-note-label { font-size: .66rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #9A91A3; }
.samp-note p { margin: 5px 0 0; font-size: .87rem; color: #4A414C; line-height: 1.55; font-style: italic; }

.samp-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px;
  padding-top: 13px; border-top: 1px solid #F1E6E8; font-size: .76rem; color: #9A91A3; }
.samp-hero-img { display: flex; justify-content: center; }

/* ---------- Marketing: alternating split sections ---------- */
.rc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.rc-split.is-flipped .rc-split-text { order: 2; }
.rc-split.is-flipped .rc-split-card { order: 1; }
.rc-split-text p { font-size: .95rem; line-height: 1.7; color: #4A414C; }
.rc-split-card { display: flex; justify-content: center; }
.mk-points { margin: 16px 0 0; padding-left: 20px; }
.mk-points li { font-size: .9rem; color: #4A414C; line-height: 1.65; margin-bottom: 6px; }

/* ---------- Marketing: grade scale ---------- */
.rc-scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.rc-scale-item { background: var(--surface, #fff); border: 1px solid #EFE2E4;
  border-radius: 12px; padding: 13px; display: flex; flex-direction: column; gap: 2px; }
.rc-scale-letter { font-family: var(--font-display, Georgia, serif); font-size: 1.45rem;
  font-weight: 600; color: var(--red); line-height: 1; }
.rc-scale-range { font-size: .78rem; color: #6B6076; font-variant-numeric: tabular-nums; }
.rc-scale-band { font-size: .72rem; color: #9A91A3; }

/* ---------- Marketing: how-it-works steps ---------- */
.how-steps { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; }
.how-step { display: flex; gap: 18px; align-items: flex-start; }
.how-step h4 { margin: 0 0 5px; font-size: 1.06rem; color: var(--ink); }
.how-step p { margin: 0; font-size: .92rem; color: #4A414C; line-height: 1.7; max-width: 62ch; }
.how-step-n { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: #fff;
  font-weight: 700; font-size: .95rem; }

/* ---------- Marketing: question demo ---------- */
.q-demo { background: var(--surface, #fff); border: 1px solid #EFE2E4; border-radius: 18px;
  padding: 22px; box-shadow: 0 10px 34px rgba(34,26,28,.10); max-width: 420px; width: 100%; }
.q-demo-cat { font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #9A91A3; }
.q-demo-prompt { font-family: var(--font-display, Georgia, serif); font-size: 1.2rem;
  font-weight: 600; color: var(--ink); margin: 8px 0 18px; line-height: 1.4; }
.q-demo-opts { display: flex; flex-direction: column; gap: 8px; }
.q-demo-opts span { border: 1px solid var(--field); border-radius: 10px; padding: 10px 14px;
  font-size: .88rem; color: #4A414C; }
.q-demo-opts .is-picked { border-color: var(--red); background: var(--band-blush);
  color: #8E1119; font-weight: 600; }
.q-demo-na { align-self: flex-start; font-size: .8rem !important; padding: 6px 14px !important; }
.q-demo-last { margin-top: 14px; font-size: .8rem; color: #9A91A3; }

/* ---------- Marketing: what's graded ---------- */
.wg-agree { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 18px; }
.wg-agree-item { display: flex; gap: 12px; align-items: flex-start; }
.wg-agree-item div { display: flex; flex-direction: column; gap: 2px; }
.wg-agree-item b { color: var(--ink); font-size: .94rem; }
.wg-agree-item span { font-size: .85rem; color: #6B6076; line-height: 1.5; }
.wg-tick, .wg-cross { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.wg-tick { background: #DCF3E4; color: #1C6B3A; }
.wg-cross { background: #EFE7E9; color: #8A8290; }

.wg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }
.wg-cat { background: var(--surface, #fff); border: 1px solid #EFE2E4; border-radius: 14px; padding: 16px; }
.wg-cat.is-free { border-color: #B9D8C4; }
.wg-cat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.wg-cat-head b { color: var(--ink); font-size: .96rem; }
.wg-cat p { margin: 0; font-size: .85rem; color: #6B6076; line-height: 1.55; }
.wg-flag { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 8px; }
.wg-flag-free { background: #DCF3E4; color: #1C6B3A; }
.wg-flag-sensitive { background: #FDF4E3; color: #8A6512; }

@media (max-width: 760px) {
  .rc-split { grid-template-columns: 1fr; gap: 26px; }
  .rc-split.is-flipped .rc-split-text,
  .rc-split.is-flipped .rc-split-card { order: initial; }
  .samp-card, .q-demo { max-width: 100%; }
}

/* ---------- Marketing: mobile drawer ----------
   The desktop links are display:none below 720px, so without this there is no
   navigation at all on a phone. Checkbox toggle so it works without JS. */
.mk-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 10px; margin-left: 6px; cursor: pointer;
  border-radius: 10px; flex-shrink: 0; }
.mk-burger:hover { background: rgba(225,27,36,.07); }
.mk-burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .22s ease, opacity .18s ease; }

.mk-burger-toggle:checked ~ .mk-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mk-burger-toggle:checked ~ .mk-burger span:nth-child(2) { opacity: 0; }
.mk-burger-toggle:checked ~ .mk-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mk-drawer {
  position: fixed; top: 66px; left: 0; right: 0; z-index: 60;
  background: var(--surface, #fff); border-bottom: 1px solid #EFE2E4;
  box-shadow: 0 14px 34px rgba(34,26,28,.14);
  padding: 10px 20px 20px;
  max-height: calc(100vh - 66px); overflow-y: auto;
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
.mk-burger-toggle:checked ~ .mk-drawer { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mk-drawer nav { display: flex; flex-direction: column; }
.mk-drawer nav a { padding: 14px 4px; font-size: 1rem; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid #F4EAEC; }
.mk-drawer nav a:hover, .mk-drawer nav a.is-current { color: var(--red-deep, #A81118); text-decoration: none; }
.mk-drawer-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.mk-drawer-cta .btn { margin: 0; }

.mk-drawer-scrim { display: none; position: fixed; inset: 66px 0 0; z-index: 55;
  background: rgba(34,26,28,.34); }
.mk-burger-toggle:checked ~ .mk-drawer-scrim { display: block; }

.mk-nav-links a.is-current { color: var(--red-deep, #A81118); font-weight: 600; }

@media (min-width: 720px) {
  .mk-burger, .mk-drawer, .mk-drawer-scrim { display: none !important; }
}
@media (max-width: 719px) {
  /* Keep the header tidy: logo, burger, nothing else competing for width. */
  .mk-nav-cta { display: none; }
}

/* ---------- Email confirmation ---------- */
.verify-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: space-between;
  background: #FDF4E3; border: 1px solid #EFD9AE; border-left: 4px solid #C99A2E;
  border-radius: 14px; padding: 14px 16px; margin-bottom: 18px;
}
.verify-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 210px; flex: 1; }
.verify-banner-text strong { color: var(--ink); font-size: .96rem; }
.verify-banner-text .muted { font-size: .84rem; }
.verify-banner .btn { margin: 0; white-space: nowrap; }

.verify-card { text-align: center; }
.verify-ico {
  width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 18px;
  background: var(--band-blush); color: var(--red);
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
}
.verify-email {
  font-weight: 600; color: var(--ink); font-size: 1.02rem;
  margin: 0 0 12px; overflow-wrap: anywhere;
}

.verify-spam { background: #FDF4E3; border-color: #EFD9AE; }
.verify-spam-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.verify-spam-head strong { color: var(--ink); font-size: .96rem; }
.verify-spam-ico { font-size: 1.05rem; }
.verify-spam p { margin: 0 0 10px; font-size: .88rem; color: #4A414C; line-height: 1.6; }
.verify-spam ul { margin: 0; padding-left: 20px; }
.verify-spam li { font-size: .86rem; color: #4A414C; line-height: 1.6; margin-bottom: 5px; }

@media (max-width: 420px) {
  .verify-banner { flex-direction: column; align-items: stretch; }
  .verify-banner .btn { width: 100%; }
}

/* ---------- About page ---------- */
.mk-prose { max-width: 660px; }
.mk-prose p { font-size: 1rem; line-height: 1.78; color: #3D3540; margin: 0 0 18px; }
.mk-prose p:last-child { margin-bottom: 0; }
.mk-prose em { color: #4A414C; }

.about-pull {
  margin: 26px 0; padding: 20px 24px;
  border-left: 4px solid var(--red); background: var(--cream); border-radius: 0 14px 14px 0;
  font-family: var(--font-display, Georgia, serif); font-size: 1.42rem; font-weight: 600;
  line-height: 1.35; color: var(--ink);
}

.about-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; }
.about-year-n {
  display: inline-block; font-family: var(--font-display, Georgia, serif);
  font-size: 2rem; font-weight: 600; color: var(--red); line-height: 1; margin-bottom: 8px;
}
.about-year p { margin: 0; font-size: .93rem; line-height: 1.7; color: #4A414C; }

.about-aside { margin-top: 30px; }

.about-tagline {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin: 0 0 14px;
}
.about-signature { margin: 26px 0 22px; line-height: 1.6; }
.about-signature strong { font-family: var(--font-display, Georgia, serif); font-size: 1.15rem; color: #fff; }
.about-signature span { font-size: .85rem; color: rgba(255,255,255,.6); }

@media (max-width: 560px) {
  .about-pull { font-size: 1.2rem; padding: 16px 18px; }
  .about-year-n { font-size: 1.7rem; }
}

/* ---------- About page: hero call to action ---------- */
.about-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.about-cta .btn { margin: 0; }
.about-cta-note { margin: 12px 0 0; font-size: .8rem; color: #8A8290; line-height: 1.55; }

@media (max-width: 560px) {
  .about-cta { flex-direction: column; align-items: stretch; }
  .about-cta .btn { width: 100%; text-align: center; }
}

/* ---------- App-stores strip (above the footer) ---------- */
.app-strip-band { padding: 34px 0; }
.app-strip { display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; }
.app-strip:hover { text-decoration: none; }
.app-strip img {
  display: block; width: 100%; max-width: 640px; height: auto;
  border-radius: 16px; border: 1px solid #EFE2E4;
  box-shadow: 0 8px 26px rgba(34,26,28,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.app-strip:hover img { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(34,26,28,.16); }
.app-strip-cta {
  font-size: .9rem; font-weight: 600; color: var(--red-deep, #A81118); text-align: center;
}

/* ---------- Mobile app page ---------- */
.app-stores-hero {
  display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto;
  border-radius: 18px; border: 1px solid #EFE2E4; box-shadow: 0 10px 30px rgba(34,26,28,.12);
}

.app-guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; }
.app-guide { background: var(--surface, #fff); border: 1px solid #EFE2E4; border-radius: 18px; padding: 24px; }
.app-guide-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.app-guide-head h3 { margin: 0; font-size: 1.15rem; color: var(--ink); }
.app-guide-ico {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.app-guide-note {
  margin: 0 0 14px; font-size: .84rem; line-height: 1.6; color: #8A6512;
  background: #FDF4E3; border-radius: 10px; padding: 10px 13px;
}
.app-steps { margin: 0; padding-left: 22px; }
.app-steps li { font-size: .92rem; line-height: 1.65; color: #3D3540; margin-bottom: 10px; }
.app-steps li:last-child { margin-bottom: 0; }
.app-guide-done {
  margin: 14px 0 0; padding-top: 13px; border-top: 1px solid #F1E6E8;
  font-size: .86rem; color: #6B6076; line-height: 1.55;
}

/* ---------- Categories: instructions + save bars ---------- */
.how-to { background: #FDF4E3; border-color: #EFD9AE; }
.how-to-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.how-to-head strong { color: var(--ink); font-size: .96rem; }
.how-to-ico {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: #C99A2E; color: #fff; font-size: .8rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.how-to-steps { margin: 0; padding-left: 22px; }
.how-to-steps li { font-size: .89rem; line-height: 1.62; color: #4A414C; margin-bottom: 5px; }
.how-to-steps li:last-child { margin-bottom: 0; }

.cat-savebar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 14px; padding: 13px 16px;
  background: var(--surface, #fff); border: 1px solid var(--line, #EFE2E4); border-radius: 14px;
}
.cat-savebar-bottom { margin: 16px 0 0; }
.cat-savebar .btn { margin: 0; white-space: nowrap; }
.cat-savebar-text { font-size: .86rem; color: #6B6076; flex: 1; min-width: 150px; }
.cat-unsaved { color: #8A4B12; font-weight: 600; }

/* Make the pending state impossible to miss once something is ticked. */
.is-dirty .cat-savebar { border-color: #EFD9AE; background: #FDF4E3; }

@media (max-width: 420px) {
  .cat-savebar { flex-direction: column; align-items: stretch; }
  .cat-savebar .btn { width: 100%; }
}

/* ---------- Push notification toggle ---------- */
.push-state {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: #EFE7E9; color: #6B6076;
}
.push-state.is-on  { background: #DCF3E4; color: #1C6B3A; }
.push-state.is-off { background: #FDF4E3; color: #8A6512; }
.push-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.push-actions .btn { margin: 0; }

/* ---------- Notification settings ---------- */
.notify-row { padding: 14px 0; border-bottom: 1px solid #F1E6E8; }
.notify-row:last-child { border-bottom: 0; padding-bottom: 0; }
.notify-main { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.notify-main input { margin-top: 3px; flex-shrink: 0; }
.notify-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notify-label { font-size: .95rem; font-weight: 600; color: var(--ink); }
.notify-help { font-size: .83rem; color: #6B6076; line-height: 1.5; }
.notify-freq { margin: 12px 0 0 30px; max-width: 320px; }
.notify-freq.is-hidden { display: none; }
.notify-freq .label { margin-bottom: 4px; }

@media (max-width: 480px) {
  .notify-freq { margin-left: 0; max-width: 100%; }
}

/* ---------- Reporting coverage ---------- */
.cov-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cov-count { font-family: var(--font-display, Georgia, serif); font-size: 1.5rem; font-weight: 600; color: var(--ink); }
.cov-count span { font-size: .9rem; font-weight: 400; color: var(--ink-faint, #9A91A3); }
.cov-label { font-size: .86rem; color: #6B6076; }

.cov-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.cov-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; font-size: .8rem;
  border: 1px solid var(--line, #EFE2E4);
}
.cov-chip-mark { font-size: .78rem; }
.cov-chip.is-done { background: #DCF3E4; border-color: #B9D8C4; color: #1C6B3A; }
.cov-chip.is-todo { background: var(--surface, #fff); color: #6B6076; }

/* ---------- Dashboard: what is due ---------- */
.due-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; border-radius: 16px; margin-bottom: 18px;
  border: 1px solid var(--line, #EFE2E4); background: var(--surface, #fff);
  text-decoration: none; transition: transform .16s ease, box-shadow .16s ease;
}
.due-card:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-md, 0 8px 24px rgba(34,26,28,.10)); }
.due-card.is-due { background: #FDF4E3; border-color: #EFD9AE; border-left: 4px solid #C99A2E; }
.due-card.is-clear { border-left: 4px solid #B9D8C4; }
.due-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.due-title { font-weight: 600; font-size: .98rem; color: var(--ink); }
.due-note { font-size: .84rem; color: #6B6076; line-height: 1.5; }
.due-action { font-size: .86rem; font-weight: 600; color: var(--red-deep, #A81118); white-space: nowrap; }

@media (max-width: 420px) {
  .due-card { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- Reports: one card per category ---------- */
.rep-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; margin-bottom: 9px; border-radius: 14px;
  background: var(--surface, #fff); border: 1px solid var(--line, #EFE2E4);
}
.rep-cat-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rep-cat-mark { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; background: #EFE7E9; color: #8A8290; }
.rep-cat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rep-cat-name { font-weight: 600; font-size: .95rem; color: var(--ink); }
.rep-cat-note { font-size: .8rem; color: #6B6076; }
.rep-cat .btn { margin: 0; white-space: nowrap; }

.rep-cat-done { background: #F4FBF6; border-color: #CFE9D8; }
.rep-cat-done .rep-cat-mark { background: #DCF3E4; color: #1C6B3A; }
.rep-cat-in_progress { background: #FDF4E3; border-color: #EFD9AE; }
.rep-cat-in_progress .rep-cat-mark { background: #F6E2BC; color: #8A6512; }



/* ---------- Admin: question bank ---------- */
.qb-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; margin-bottom: 9px; border-radius: 14px;
  background: var(--surface, #fff); border: 1px solid var(--line, #EFE2E4);
  text-decoration: none;
}
.qb-row:hover { text-decoration: none; border-color: #E4C9D0; background: #FFFCFD; }
.qb-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qb-row-name { font-weight: 600; font-size: .96rem; color: var(--ink); }
.qb-row-note { font-size: .82rem; color: #6B6076; }
.qb-row-count { font-size: .84rem; color: #6B6076; white-space: nowrap; }
.qb-row-count b { color: var(--ink); font-size: 1rem; }
.qb-row-count.is-low b  { color: #8A4B12; }
.qb-row-count.is-high b { color: #8E1119; }

.qb-flag {
  display: inline-block; margin-left: 7px; padding: 2px 8px; border-radius: 999px;
  font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: #EFE7E9; color: #6B6076; vertical-align: middle;
}
.qb-flag-sensitive { background: #FDF4E3; color: #8A6512; }
.qb-flag-off { background: var(--band-blush); color: #8E1119; }

.qb-item.is-retired { opacity: .62; background: #FAF6F7; }
.qb-item-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; }
.qb-item-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; color: #9A91A3; }
.qb-item-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.qb-item-actions form { margin: 0; }
.qb-item-actions .btn { margin: 0; }

/* Outstanding reporting: a normal card, tinted so it reads as needing action.
   Replaces the earlier .due-card, which was a whole-card link and looked
   different from every other action card on the dashboard. */
.card-due { background: #FDF4E3; border-color: #EFD9AE; border-left: 4px solid #C99A2E; }
.card-due .rep-ico { background: #F6E2BC; }

/* ---------- Review page: question first, category as context ---------- */
.rev-prompt {
  display: block; font-weight: 600; font-size: .92rem; line-height: 1.45;
  color: var(--ink); text-decoration: none;
}
.rev-prompt:hover { color: var(--red-deep, #A81118); text-decoration: underline; }
.rev-cat {
  display: block; margin-top: 3px; font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faint, #9A91A3);
}

/* ---------- Pull to refresh (installed app only) ---------- */
.ptr {
  position: fixed; top: 0; left: 50%; z-index: 70;
  margin-left: -18px; margin-top: -44px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #EFE2E4);
  box-shadow: 0 4px 14px rgba(34,26,28,.16);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
}
.ptr.is-settling { transition: transform .2s ease, opacity .2s ease; }

.ptr-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #EFD9DC; border-top-color: var(--red);
  transition: transform .18s ease;
}
/* Pulled far enough — tip the mark over so it reads as armed. */
.ptr.is-ready .ptr-spinner { transform: rotate(180deg); border-top-color: var(--red-deep, #A81118); }
.ptr.is-refreshing .ptr-spinner { animation: ptr-spin .7s linear infinite; }

@keyframes ptr-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ptr.is-refreshing .ptr-spinner { animation-duration: 2s; }
}

/* ---------- Reports: locked categories (the upsell) ---------- */
.rep-cat-locked { text-decoration: none; opacity: .9; }
@media (hover: hover) and (pointer: fine) {
  .rep-cat-locked:hover { text-decoration: none; border-color: #E4C9D0; background: #FFFCFD; opacity: 1; }
}
.rep-cat-locked .rep-cat-mark { background: #EFE7E9; color: #8A8290; }
.rep-cat-locked .rep-cat-name { color: var(--ink-soft, #4A414C); }
.rep-cat-locked .rep-cat-note {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.locked-pitch { background: var(--band-blush); border-color: #EFB9C6; }
.locked-pitch .rep-ico { background: #F6C9D3; }

/* ---------- Traffic chart (no JS, no chart library) ---------- */
.tchart {
  display: flex; align-items: flex-end; gap: 2px;
  height: 110px; padding: 10px 0 0; margin-bottom: 6px;
  border-bottom: 1px solid var(--line, #EFE2E4);
}
.tchart-col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 3px; }
.tchart-bar {
  display: block; width: 100%; border-radius: 3px 3px 0 0;
  background: #E9C6CD; transition: background .15s ease;
}
.tchart-bar.has-signup { background: var(--red); }
.tchart-col:hover .tchart-bar { background: var(--red-deep, #A81118); }
.tchart-axis {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: .74rem; color: var(--ink-faint, #9A91A3); margin-bottom: 14px;
}

.tstat-row { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-size: .85rem; color: #6B6076; }
.tstat b { color: var(--ink); font-size: .98rem; }

.aff-two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.aff-two-col .card { margin-bottom: 0; }

/* ---------- Legal documents ---------- */
.legal-doc { max-width: 760px; }
.legal-doc h2 { font-family: var(--font-display, Georgia, serif); font-size: 1.32rem;
  color: var(--ink); margin: 34px 0 10px; }
.legal-doc h3 { font-size: 1.02rem; color: var(--ink); margin: 22px 0 8px; }
.legal-doc ul { margin: 0 0 16px; padding-left: 22px; }
.legal-doc li { font-size: .95rem; line-height: 1.72; color: #3D3540; margin-bottom: 8px; }
.legal-doc code { background: var(--cream); padding: 1px 6px; border-radius: 5px; font-size: .88em; }

.legal-callout {
  background: var(--cream); border-left: 4px solid var(--red);
  border-radius: 0 14px 14px 0; padding: 18px 22px; margin: 22px 0;
}
.legal-callout p { margin: 0 0 12px; font-size: .95rem; line-height: 1.7; }
.legal-callout p:last-child { margin-bottom: 0; }
.legal-address {
  background: var(--cream); border-radius: 12px; padding: 14px 18px;
  font-size: .92rem; line-height: 1.7; margin: 14px 0 20px;
}

/* Bot trap. Off-screen rather than display:none — some bots skip hidden
   inputs, and positioning catches those too. Never remove this. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ==========================================================================
   Submission receipt — the plain record of what was just sent
   ========================================================================== */
.receipt { text-align: left; margin-top: 20px; padding: 6px 18px; }
.receipt-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .86rem;
}
.receipt-row:last-child { border-bottom: 0; }
.receipt-row > span { color: var(--ink-faint); flex: none; }
.receipt-row > b { font-weight: 600; text-align: right; min-width: 0; }

/* ---------- "What this area is graded on" ---------- */
.graded-on > summary {
  cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--ink-soft);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.graded-on > summary::-webkit-details-marker { display: none; }
.graded-on > summary::before { content: '▸'; color: var(--ink-faint); font-size: .8rem; }
.graded-on[open] > summary::before { content: '▾'; }
.graded-on[open] > summary { margin-bottom: 10px; }
.graded-group {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint); margin: 14px 0 4px;
}
.graded-list { margin: 0; padding-left: 20px; }
.graded-list li { font-size: .86rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 4px; }

/* A category grade row that opens its own detail page. */
a.rc-row { color: inherit; text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,.04); }
a.rc-row:active { background: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  a.rc-row:hover { background: var(--cream); }
}
.rc-go { color: var(--ink-faint); font-size: .9rem; flex: none; width: 12px; text-align: right; }

/* ==========================================================================
   Phone: action rows stack instead of crushing their own text
   --------------------------------------------------------------------------
   .rep and .rep-cat put icon, text and button on one line. A button is sized
   by its label and does not shrink, so a long one starved the text column and
   wrapped it to one word per line. Below 560px the button drops to its own
   full-width row and the text gets the whole card.
   ========================================================================== */
@media (max-width: 560px) {
  .rep {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 12px;
  }
  .rep > .btn { grid-column: 1 / -1; width: 100%; }

  .rep-cat { flex-direction: column; align-items: stretch; gap: 10px; }
  .rep-cat .btn { width: 100%; }
}

/* Answered in full but not yet sent — the one row that most needs its button. */
.rep-cat-ready { background: #FDF3F4; border-color: #EFC9CF; }
.rep-cat-ready .rep-cat-mark { background: #F7DDE1; color: #99303C; }

/* A field that genuinely cannot be left blank, marked in the label itself. */
.req {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--clay, #9C1622); background: var(--clay-soft, #FCE9EA);
  padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
}

/* ==========================================================================
   Convention: hover styling on a tappable ROW goes behind (hover: hover)
   --------------------------------------------------------------------------
   iOS Safari sends a mouseover on the first tap. If that visibly changes the
   element, Safari withholds the click and waits for a SECOND tap — so a whole-
   row link that highlights on hover has to be tapped twice to open, and keeps
   the highlight afterwards. Every full-row/card link hover above is therefore
   wrapped in @media (hover: hover) and (pointer: fine), with :active giving
   touch its press feedback instead. Add new row hovers the same way.
   ========================================================================== */

/* ==========================================================================
   Action steps — advice you can actually follow
   ========================================================================== */
.steps { margin: 12px 0 0; padding-left: 20px; }
.steps li { font-size: .88rem; line-height: 1.62; color: var(--ink-soft); margin-bottom: 8px; }
.steps li:last-child { margin-bottom: 0; }

.advice-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.advice-name { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.advice-grade { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.advice-title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; margin-bottom: 5px; }
.advice-why { font-size: .88rem; color: var(--ink-soft); }

/* ==========================================================================
   Influencer kit — cover preview and download
   ========================================================================== */
.kit {
  display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm);
}
.kit-cover {
  flex: none; width: 190px; display: block; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: var(--cream);
  box-shadow: 0 2px 6px rgba(34,26,28,.10), 0 12px 26px rgba(34,26,28,.10);
  -webkit-tap-highlight-color: rgba(0,0,0,.04);
}
.kit-cover img { display: block; width: 100%; height: auto; }
.kit-cover-fallback {
  display: grid; place-items: center; aspect-ratio: 1 / 1.294;
  font-family: var(--font-display); font-size: 1.6rem; color: var(--ink-faint);
}
.kit-body { flex: 1; min-width: 220px; }
.kit-title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; }
.kit-meta { font-size: .8rem; color: var(--ink-faint); margin-top: 4px; }
.kit-note { font-size: .92rem; color: var(--ink-soft); margin: 12px 0 16px; }

@media (hover: hover) and (pointer: fine) {
  .kit-cover:hover { box-shadow: 0 3px 8px rgba(34,26,28,.14), 0 18px 34px rgba(34,26,28,.14); }
}
@media (max-width: 560px) {
  .kit { gap: 16px; }
  .kit-cover { width: 132px; }
  .kit-body .btn { width: 100%; }
}

/* ==========================================================================
   Beta notice — shown above the sign-in form
   ========================================================================== */
.beta-note {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--blush); border: 1px solid var(--blush-deep);
  border-left: 4px solid var(--red);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 20px;
  font-size: .86rem; line-height: 1.55; color: var(--ink-soft);
}
.beta-note strong { color: var(--ink); }
.beta-note a { font-weight: 600; }
.beta-tag {
  flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; background: var(--red-deep);
  padding: 4px 9px; border-radius: 999px; margin-top: 2px;
}

/* ── View as ────────────────────────────────────────────────────────────────
   Shown for the whole of an owner view-as session. Sticks to the TOP, above the
   masthead, and pushes the masthead down so both stay reachable. Deliberately
   loud: the failure mode that matters is forgetting whose account you are
   inside, so this cannot be subtle and cannot be dismissed. The only control on
   it is the way out, and it sits in the header where you are already looking. */
.viewas-bar {
  position: sticky; top: 0; z-index: 70;
  background: #2A1520;
  color: #FCEFF3;
  border-bottom: 2px solid #E11B24;
  box-shadow: 0 6px 20px rgba(42,21,32,.26);
}
.viewas-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; min-height: 46px;
}
.viewas-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: #FF5A63; box-shadow: 0 0 0 4px rgba(255,90,99,.22);
  animation: viewasPulse 2s ease-in-out infinite;
}
@keyframes viewasPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .viewas-dot { animation: none } }

.viewas-text { min-width: 0; flex: 1; line-height: 1.25; }
.viewas-text strong { display: block; font-size: .88rem; font-weight: 600; }
.viewas-sub {
  display: block; font-size: .71rem; color: #D9B8C4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.viewas-exit { flex: none; margin: 0; }
.viewas-btn {
  border: 1px solid rgba(252,239,243,.4); background: rgba(252,239,243,.1);
  color: #FCEFF3; font: inherit; font-size: .8rem; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.viewas-btn:hover { background: rgba(252,239,243,.2); }

/* The masthead is sticky at top:0 too, so it is pushed clear of the bar rather
   than sliding underneath it. Both have to stay usable at once. */
body:has(.viewas-bar) .masthead { top: 46px; }

@media (max-width: 520px) {
  .viewas-inner { padding: 7px 12px; gap: 9px; min-height: 42px; }
  .viewas-text strong { font-size: .8rem; }
  .viewas-sub { font-size: .66rem; }
  .viewas-btn { padding: 7px 11px; font-size: .74rem; }
  body:has(.viewas-bar) .masthead { top: 42px; }
}

/* ── New / unpicked categories ──────────────────────────────────────────────
   The library grows after somebody has set their preferences, and a tidy count
   with no total reads as "that's all of them". These say otherwise.          */
.cat-news {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; margin: 0 0 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: #fff;
}
.cat-news.is-new { border-color: #E7C9A0; background: #FFF9F0; }
.cat-news-ico {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: .82rem;
  background: var(--blush); color: var(--red-deep);
}
.cat-news.is-new .cat-news-ico { background: #F2DEBE; color: #8A5A16; }
.cat-news strong { display: block; font-size: .9rem; margin-bottom: 2px; }
.cat-news-body { display: block; font-size: .8rem; color: var(--ink-faint); line-height: 1.45; }

.cat-new-tag {
  display: inline-block; vertical-align: middle;
  margin-left: 5px; padding: 1px 7px; border-radius: 999px;
  background: #F2DEBE; color: #8A5A16;
  font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* ── Library stat strip (reports page) ──────────────────────────────────────
   Sits under the month's progress bar and answers a different question: not
   "how much have I done" but "how much exists". Someone with five areas on and
   two reported cannot learn from a progress bar that twenty-three more are
   sitting switched off — so the total is always named, and the way to act on
   it is one tap away.                                                        */
.lib-stat {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--line);
}
.lib-stat-nums { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.lib-stat-item { font-size: .78rem; color: var(--ink-faint); line-height: 1.3; }
.lib-stat-item b { font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.lib-stat-item span { display: block; }
.lib-stat-wait b { color: #B9743F; }
.lib-stat-more b { color: var(--red-deep); }
.lib-stat-cta { flex: none; white-space: nowrap; }

@media (max-width: 460px) {
  .lib-stat { flex-direction: column; align-items: stretch; }
  .lib-stat-nums { gap: 6px 14px; }
  .lib-stat-cta { width: 100%; text-align: center; }
}

/* Section counts and intros on the reports page. The page is read by people who
   do not read dashboards for a living, so each group says how many are in it
   and what it wants from them. */
.section-label .sec-count {
  float: right; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--ink-faint);
}
.sec-intro { font-size: .82rem; margin: -4px 0 10px; line-height: 1.5; }
.rep-cat-last {
  display: block; margin-top: 3px;
  font-size: .74rem; color: var(--ink-faint);
}

/* ---------- The window a question is asking about ----------
   Stated above the question because it is the frame, not a footnote. Somebody
   answering "does Melissa still flirt with you" from twenty years of marriage
   gives the same answer every month forever. */
.q-window {
  display: inline-block; margin-bottom: 8px; padding: 5px 12px;
  border-radius: 999px; font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.q-window.is-since { background: var(--note); color: var(--note-ink); border: 1px solid var(--note-line); }
.q-window.is-first { background: var(--blush); color: var(--red-deep); border: 1px solid var(--blush-deep); }

/* ==========================================================================
   Spouse GPA trend — the score history, the way a credit report shows it
   ========================================================================== */
.trend { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-sm); }
.trend-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.trend-label { font-weight: 600; font-size: .95rem; }
.trend-sub { font-size: .78rem; color: var(--ink-faint); margin-top: 2px; }
.trend-move { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.trend-move.is-up { color: var(--grade-a); }
.trend-move.is-down { color: var(--grade-d); }
.trend-move.is-flat { color: var(--ink-faint); }
.trend-arrow { font-size: .82rem; }
.trend-move-since { display: block; font-size: .72rem; font-weight: 500; color: var(--ink-faint); }

.trend-plot { display: flex; align-items: flex-end; gap: 8px; height: 150px;
  border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.trend-col { flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.trend-val { font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ink-soft); margin-bottom: 4px; }
.trend-bar { width: 100%; max-width: 54px; border-radius: 6px 6px 0 0; display: block; }
.trend-col.is-current .trend-bar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--blush-deep); }
.trend-col.is-current .trend-val { color: var(--ink); }
.trend-tick { position: absolute; bottom: -20px; font-size: .66rem; color: var(--ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.trend-foot { display: flex; justify-content: space-between; gap: 12px;
  margin-top: 26px; font-size: .74rem; }

@media (max-width: 560px) {
  .trend-plot { height: 120px; gap: 5px; }
  .trend-tick { font-size: .6rem; }
}

/* The movement, sitting with the score itself. */
.gpa-move {
  display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 999px;
  font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.gpa-move.is-up { background: var(--sage-soft); color: #1B7A4E; }
.gpa-move.is-down { background: var(--clay-soft); color: #A3131F; }
.gpa-move.is-flat { background: var(--cream-deep); color: var(--ink-soft); }

/* Impact badge — how much one area is actually moving the grade. */
.impact {
  flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.impact-high { background: var(--clay-soft); color: #A3131F; }
.impact-medium { background: var(--gold-soft); color: #8A5E12; }
.impact-low { background: var(--cream-deep); color: var(--ink-soft); }
.rc-row.factor .rc-sub { white-space: normal; }
@media (max-width: 560px) { .rc-row.factor .impact { font-size: .58rem; padding: 3px 7px; } }

/* ==========================================================================
   Monthly statement — the Spouse Report, shaped like every other report
   ========================================================================== */
.stmt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; margin-top: 12px; }
.stmt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px; background: linear-gradient(150deg, #FFF6F6 0%, var(--blush) 100%);
  border-bottom: 1px solid var(--blush-deep); }
.stmt-brand { display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; }
.stmt-period { font-size: .84rem; color: var(--ink-soft); margin-top: 4px; }
.stmt-meta { text-align: right; font-size: .72rem; color: var(--ink-faint); line-height: 1.5; }
.stmt-meta strong { display: block; color: var(--ink); font-size: .86rem; }

.stmt-score { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 20px 18px; border-bottom: 1px solid var(--line); }
.stmt-score-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); }
.stmt-score-value { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600;
  line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stmt-score-letter { font-size: 1.5rem; margin-left: 8px; }
.stmt-score-band { font-size: .84rem; color: var(--ink-soft); }
.stmt-change { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums;
  padding: 10px 14px; border-radius: 12px; text-align: center; white-space: nowrap; }
.stmt-change span { display: block; font-size: .7rem; font-weight: 500; }
.stmt-change.is-up { background: var(--sage-soft); color: #1B7A4E; }
.stmt-change.is-down { background: var(--clay-soft); color: #A3131F; }
.stmt-change.is-flat { background: var(--cream-deep); color: var(--ink-soft); }

.stmt-summary { display: grid; grid-template-columns: repeat(4, 1fr); }
.stmt-summary > div { padding: 14px 10px; text-align: center; font-size: .72rem;
  color: var(--ink-faint); border-right: 1px solid var(--line); line-height: 1.4; }
.stmt-summary > div:last-child { border-right: 0; }
.stmt-summary strong { display: block; font-family: var(--font-display);
  font-size: 1.25rem; color: var(--ink); font-weight: 600; }

.stmt-delta { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .92rem;
  width: 56px; text-align: right; flex: none; }
.stmt-delta.is-up { color: var(--grade-a); }
.stmt-delta.is-down { color: var(--grade-d); }
.stmt-delta.is-flat { color: var(--ink-faint); }
.rc-row.is-current { background: var(--cream); }

@media (max-width: 560px) {
  .stmt-summary { grid-template-columns: repeat(2, 1fr); }
  .stmt-summary > div:nth-child(2) { border-right: 0; }
  .stmt-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .stmt-score-value { font-size: 2.1rem; }
}

/* "Since you last looked" — the alert a credit report opens with. */
.changed {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--sage-soft); border: 1px solid #C6E4D5; border-left: 4px solid var(--sage);
  border-radius: 12px; padding: 13px 16px; margin-top: 12px;
  font-size: .86rem; line-height: 1.55; color: #2F6B54;
}
.changed strong { color: #1B5E3F; }
.changed-tag {
  flex: none; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--sage); padding: 4px 9px; border-radius: 999px; margin-top: 2px;
}