:root {
  --bg: #07101a;
  --paper: #fff3df;
  --paper-soft: #fff9ef;
  --folder: #d1a15f;
  --folder-soft: #e8c99a;
  --ink: #0d2238;
  --muted: #56606d;
  --cream: #fff8ed;
  --line: rgba(13,34,56,.13);
  --light-line: rgba(255,248,237,.15);
  --blue: #2a6cc4;
  --coral: #ef7458;
  --gold: #efb13c;
  --teal: #2a8c8c;
  --violet: #7462b7;
  --green: #4a7c53;
  --shadow: 0 24px 62px rgba(0,0,0,.34);
  --soft-shadow: 0 12px 24px rgba(0,0,0,.18);
  --radius: 16px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--cream);
  background:
    radial-gradient(circle at 20% 14%, rgba(42,108,196,.14), transparent 22%),
    radial-gradient(circle at 82% 20%, rgba(239,116,88,.10), transparent 18%),
    linear-gradient(115deg, #07101a, #101b28 48%, #071017 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .45;
}

.site-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

.container {
  width: min(1360px, calc(100vw - 36px));
  margin: 0 auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6,14,22,.82);
  border-bottom: 1px solid var(--light-line);
  backdrop-filter: blur(16px);
}

.topbar-inner {
  display: grid;
  grid-template-columns: 300px 1fr 160px;
  gap: 20px;
  align-items: center;
  min-height: 78px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--cream);
  text-decoration: none;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: .04em;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--blue), #4b88d7);
  color: white;
  font-family: Georgia, serif;
  font-size: 26px;
  box-shadow: 0 12px 26px rgba(0,0,0,.26);
  transform: rotate(-8deg);
}

.navlinks {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2vw, 34px);
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.navlinks a {
  color: var(--cream);
  text-decoration: none;
  opacity: .92;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 8px;
  border: 0;
  background: var(--blue);
  color: white;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 14px 26px rgba(0,0,0,.24);
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.button:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.button.coral { background: var(--coral); }
.button.gold { background: var(--gold); color: #281c05; }

.hero-wrap {
  position: relative;
  min-height: 560px;
  padding: 38px 0 34px;
  overflow: hidden;
}

/* Realistic dark desktop surface */
.hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 22%, rgba(255,255,255,.04), transparent 20%),
    radial-gradient(circle at 80% 18%, rgba(239,116,88,.05), transparent 18%),
    radial-gradient(circle at 58% 84%, rgba(239,177,60,.05), transparent 22%),
    linear-gradient(90deg, rgba(0,0,0,.10), transparent 14%, transparent 86%, rgba(0,0,0,.11)),
    url('../img/desk-surface.png') center/cover no-repeat;
  box-shadow: inset 0 -60px 90px rgba(0,0,0,.14);
}

.hero-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.13) 100%),
    linear-gradient(180deg, rgba(7,16,26,.16), transparent 24%, transparent 76%, rgba(7,16,26,.15));
  mix-blend-mode: multiply;
}

.desk-props {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.desk-props img {
  position: absolute;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.38));
  opacity: .98;
}

.prop-plant-left {
  width: clamp(150px, 14vw, 210px);
  left: -34px;
  top: -18px;
}

.prop-coffee {
  width: clamp(122px, 11vw, 172px);
  left: -18px;
  top: clamp(220px, 24vw, 318px);
}

.prop-keys {
  width: clamp(138px, 13vw, 200px);
  left: 10px;
  bottom: 78px;
}

.prop-notebook {
  width: clamp(182px, 17vw, 268px);
  right: -2px;
  top: 6px;
  transform: rotate(4deg);
}

.prop-clip {
  width: clamp(56px, 5vw, 78px);
  right: 132px;
  top: clamp(344px, 37vw, 438px);
}

.prop-plant-right {
  width: clamp(136px, 12vw, 190px);
  right: -18px;
  bottom: 66px;
}

.prop-paper-left {
  width: clamp(150px, 15vw, 230px);
  left: -56px;
  bottom: -62px;
  opacity: .42;
}

.prop-paper-right {
  width: clamp(186px, 18vw, 270px);
  right: -34px;
  bottom: -40px;
  opacity: .86;
  transform: scaleX(-1);
}

.real-note {
  position: absolute;
  right: clamp(38px, 5vw, 76px);
  top: clamp(210px, 22vw, 298px);
  width: clamp(112px, 10vw, 150px);
  min-height: 104px;
  display: grid;
  place-items: center;
  padding: 18px 14px;
  background: #f3c967;
  color: #261b08;
  border-radius: 5px;
  box-shadow: 0 14px 24px rgba(0,0,0,.28);
  transform: rotate(6deg);
  font-family: "Comic Sans MS", "Trebuchet MS", sans-serif;
  font-weight: 800;
  line-height: 1.16;
  text-align: center;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.22));
  z-index: 2;
}

.real-note::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 32px;
  width: 62px;
  height: 22px;
  background: rgba(234, 208, 170, .82);
  transform: rotate(-4deg);
}

.real-note::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, rgba(0,0,0,.08), rgba(255,255,255,.4));
  border-radius: 4px 0 5px 0;
}

.hero-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(560px, 1fr);
  gap: 34px;
  align-items: center;
}

.hero-copy {
  position: relative;
  padding: 34px 28px 30px;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(7,16,26,.64), rgba(7,16,26,.36) 68%, rgba(7,16,26,0));
  box-shadow: 0 18px 38px rgba(0,0,0,.12);
}

.hero-title {
  margin: 0 0 20px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(46px, 5.2vw, 72px);
  line-height: .94;
  letter-spacing: -.04em;
  text-shadow: 0 3px 18px rgba(0,0,0,.42);
}

.hero-title .accent { color: var(--coral); }

.hero-copy p {
  max-width: 420px;
  margin: 0 0 22px;
  color: rgba(255,248,237,.96);
  font-size: 18px;
  line-height: 1.5;
  text-shadow: 0 2px 12px rgba(0,0,0,.46);
}

.free-note {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  max-width: 450px;
  margin-top: 18px;
  color: rgba(255,248,237,.96);
  font-size: 15px;
  line-height: 1.45;
  text-shadow: 0 2px 12px rgba(0,0,0,.46);
}

.free-note::before {
  content: "★";
  color: var(--gold);
  font-size: 18px;
  margin-top: 1px;
}

.hero-board {
  position: relative;
  min-height: 430px;
}

.folder-stack {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

/* Photo folder: applied by JS when /assets/img/folder-front.png loads */
.plan-panel.photo-folder {
  background: url('../img/folder-front.png') center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.34));
  padding: 78px 56px 46px;
}

.plan-panel.photo-folder::before { display: none; }

.photo-folder ~ .paper-peeks,
.folder-stack:has(.photo-folder) .paper-peeks,
.folder-stack:has(.photo-folder) .folder-layer,
.folder-stack:has(.photo-folder) .folder-layer2 { display: none; }

/* Paper sheets peeking out of the folder */
.paper-peeks {
  position: absolute;
  left: 60px;
  right: 90px;
  top: -18px;
  height: 30px;
  z-index: 0;
}

.paper-peeks span {
  position: absolute;
  top: 0;
  height: 30px;
  background: #fdf8ec;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -2px 6px rgba(0,0,0,.05);
}

.paper-peeks span:nth-child(1) { left: 0; width: 46%; transform: rotate(-1deg); }
.paper-peeks span:nth-child(2) { left: 34%; width: 40%; top: 5px; background: #f7efdc; transform: rotate(.8deg); }
.paper-peeks span:nth-child(3) { right: 0; width: 32%; top: 9px; background: #fffdf6; transform: rotate(-.6deg); }

.folder-layer,
.folder-layer2 {
  position: absolute;
  inset: 24px 12px -10px 18px;
  border-radius: var(--radius);
  background: #d8b887;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.08);
  transform: rotate(1deg);
  z-index: 0;
}

.folder-layer2 {
  inset: 12px 0 0 32px;
  background: #cfa96f;
  transform: rotate(-2deg);
  opacity: .9;
}

.plan-panel {
  position: relative;
  z-index: 1;
  padding: 30px 34px 26px;
  color: #21384f;
  background:
    radial-gradient(ellipse at 30% 8%, rgba(255,255,255,.32), transparent 55%),
    radial-gradient(ellipse at 80% 96%, rgba(120,84,32,.12), transparent 60%),
    repeating-linear-gradient(93deg, rgba(120,84,32,.028) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #eed6a9, #e5c48e);
  border-radius: 6px 6px var(--radius) var(--radius);
  border: 1px solid rgba(96,66,22,.28);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.35);
  min-height: 412px;
}

/* Manila folder tab */
.plan-panel::before {
  content: "";
  position: absolute;
  top: -17px;
  left: 30px;
  width: 168px;
  height: 20px;
  background: linear-gradient(180deg, #efd8ad, #ecd2a2);
  border: 1px solid rgba(96,66,22,.28);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  transform: perspective(60px) rotateX(14deg);
  transform-origin: bottom;
}

/* Realistic paperclip, clipped over the top edge */
.clip-svg {
  position: absolute;
  top: -34px;
  right: 68px;
  width: 34px;
  filter: drop-shadow(1px 2px 1px rgba(0,0,0,.22));
  transform: rotate(-9deg);
  z-index: 3;
}

.realistic-paperclip {
  display: block;
  height: auto;
}

/* The coworker: JS measures the paperclip and aims the paw at it */
.cat-paw {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.22));
  transform: translate(101%, 0px) rotate(0deg);
  transform-origin: 100% 34%;
  z-index: 4;
  pointer-events: none;
  will-change: transform;
}

/* The gag needs the wide two-column hero. Hide it on narrow layouts. */
@media (max-width: 1180px) {
  .cat-paw { display: none; }
}

.plan-stamp {
  position: absolute;
  right: 34px;
  top: 28px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 2px solid rgba(42,140,140,.55);
  color: rgba(13,34,56,.76);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  transform: rotate(16deg);
}

.plan-stamp::before {
  content: "WE'LL SORT\A THIS";
  white-space: pre;
}

.plan-stamp::after {
  content: ":)";
  position: absolute;
  bottom: 24px;
  font-size: 24px;
}

.plan-panel h2 {
  margin: 20px 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  color: #21384f;
  font-size: clamp(38px, 3.7vw, 56px);
  line-height: 1;
  text-align: center;
  letter-spacing: -.02em;
  font-weight: 700;
}

.plan-underline {
  width: 280px;
  max-width: 68%;
  height: 4px;
  background: var(--teal);
  border-radius: 999px;
  margin: 0 auto 24px;
}

.plan-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 0 0 22px;
}

.mini-card {
  min-height: 132px;
  background: rgba(255,253,246,.8);
  border: 1px solid rgba(96,66,22,.16);
  border-radius: 12px;
  padding: 16px 10px 14px;
  text-align: center;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.mini-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid currentColor;
  font-weight: 950;
  font-size: 22px;
}

.mini-card.what { color: var(--teal); }
.mini-card.dates { color: var(--coral); }
.mini-card.evidence { color: var(--violet); }
.mini-card.rules { color: #d2992d; }
.mini-card.next { color: var(--green); }

.mini-card b {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.15;
}

.plan-panel .helper-line {
  margin-top: 8px;
  text-align: center;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: rgba(13,34,56,.72);
  font-size: 18px;
  font-weight: 750;
}

.plan-heart {
  position: absolute;
  right: 44px;
  bottom: 18px;
  color: var(--teal);
  font-size: 36px;
}

.paper-page {
  position: relative;
  background:
    linear-gradient(180deg, #fff8ed 0%, #fff7ea 100%);
  color: var(--ink);
  padding: 26px 0 0;
  box-shadow: 0 -22px 40px rgba(0,0,0,.18);
}

.work-area {
  position: relative;
  padding: 26px 26px 28px;
  background: var(--paper-soft);
  color: var(--ink);
  border-radius: 24px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
}

.work-area::before,
.work-area::after {
  content: "";
  position: absolute;
  bottom: -14px;
  width: 200px;
  height: 110px;
  background: linear-gradient(135deg, #d8b27b, #eed7b7);
  border-radius: 12px;
  z-index: -1;
  opacity: .95;
}

.work-area::before { left: -14px; transform: rotate(-2deg); }
.work-area::after { right: -14px; transform: rotate(4deg); }

.work-header {
  text-align: center;
  margin-bottom: 18px;
}

.work-header h3 {
  margin: 0 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  color: var(--ink);
}

.process-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 20px;
}

.process-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
}

.process-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: white;
  display: grid;
  place-items: center;
  font-weight: 950;
  font-size: 20px;
}

.process-item:nth-child(1) .process-badge { background: var(--teal); }
.process-item:nth-child(2) .process-badge { background: var(--coral); }
.process-item:nth-child(3) .process-badge { background: var(--violet); }
.process-item:nth-child(4) .process-badge { background: var(--gold); color: #271b05; }
.process-item:nth-child(5) .process-badge { background: var(--green); }

.process-item b {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
}

.process-item span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.mini-footer {
  padding: 20px 0 28px;
  color: var(--ink);
}

.footer-strip {
  background: var(--paper-soft);
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 20px 28px;
  border-radius: 0 0 20px 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.footer-item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
}

.footer-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.footer-item b {
  display: block;
  margin-bottom: 2px;
}

.footer-item span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.fade-up {
  opacity: 0;
  transform: translateY(24px);
}

.motion-ready .hero-copy,
.motion-ready .hero-board {
  animation: settleIn .9s cubic-bezier(.22,1,.36,1) forwards;
}

.motion-ready .hero-board {
  animation-delay: .08s;
  opacity: 0;
}

.motion-ready .desk-props img,
.motion-ready .real-note {
  animation: propSettle .9s cubic-bezier(.22,1,.36,1) both;
}

.motion-ready .prop-coffee { animation-delay: .08s; }
.motion-ready .prop-keys { animation-delay: .14s; }
.motion-ready .prop-notebook { animation-delay: .12s; }
.motion-ready .real-note { animation-name: stickyDrop; animation-delay: .22s; }

.motion-ready .work-area.revealed .fade-up {
  animation: settleIn .72s cubic-bezier(.22,1,.36,1) forwards;
}

.motion-ready .work-area.revealed .fade-up:nth-child(2) { animation-delay: .08s; }
.motion-ready .work-area.revealed .fade-up:nth-child(3) { animation-delay: .16s; }
.motion-ready .work-area.revealed .fade-up:nth-child(4) { animation-delay: .24s; }
.motion-ready .work-area.revealed .fade-up:nth-child(5) { animation-delay: .32s; }

@keyframes settleIn {
  from { opacity: 0; transform: translateY(24px) rotate(-.5deg); }
  70% { opacity: 1; transform: translateY(-4px) rotate(.2deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes propSettle {
  from { opacity: 0; transform: translateY(28px) rotate(-6deg) scale(.96); }
  70% { opacity: .98; transform: translateY(-3px) rotate(1deg) scale(1.01); }
  to { opacity: .98; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes stickyDrop {
  from { opacity: 0; transform: translateY(-30px) rotate(18deg) scale(.95); }
  70% { opacity: .98; transform: translateY(4px) rotate(4deg) scale(1.02); }
  to { opacity: .98; transform: rotate(6deg) scale(1); }
}

/* Plan builder: the page continues into the guided flow here. */
.plan-builder {
  background: #fffaf2;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.plan-builder-head h4 {
  margin: 0 0 4px;
  font-size: 20px;
  color: var(--ink);
}

.plan-builder-head p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.plan-builder-body {
  border-top: 1px dashed var(--line);
  padding-top: 16px;
}

.step-slot {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--ink);
}

.step-badge-slot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--teal);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 950;
  font-size: 20px;
}

.step-slot b {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
}

.step-slot span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

/* Walkthrough steps */
.legal-note {
  margin: 0 0 18px;
  padding: 10px 14px;
  background: rgba(42,140,140,.08);
  border-left: 3px solid var(--teal);
  border-radius: 0 8px 8px 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.wt-step {
  padding: 6px 0 20px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 18px;
}

.wt-step-head {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--ink);
  margin-bottom: 14px;
}

.wt-step-head b { display: block; font-size: 16px; }
.wt-step-head span { color: var(--muted); font-size: 14px; }

.badge-2 { background: var(--coral); }
.badge-3 { background: var(--violet); }

.issue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.issue-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.7);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.issue-opt:has(input:checked) {
  border-color: var(--teal);
  background: rgba(42,140,140,.08);
}

.wt-field { margin: 16px 0; color: var(--ink); }

.wt-field label { font-size: 15px; }

.wt-field input[type="date"],
.wt-field select {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 220px;
}

.why-line {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  max-width: 640px;
}

.cite,
.info-pop a {
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.cite::after, .info-pop a::after { content: " ↗"; font-size: 11px; }

/* Info hover / tap */
.info-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--blue);
  background: transparent;
  color: var(--blue);
  font: italic 700 11px Georgia, serif;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 4px;
}

.info-pop {
  position: absolute;
  z-index: 20;
  left: 8px;
  right: 8px;
  top: calc(100% + 6px);
  padding: 12px 14px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: 0 14px 30px rgba(0,0,0,.3);
}

.info-pop a { color: #9cc4f0; }

.wt-field { position: relative; }
.wt-field .info-pop { left: 0; right: auto; max-width: 420px; }

.deadline-box {
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(239,177,60,.12);
  border: 1px solid rgba(239,177,60,.5);
  border-radius: 10px;
  color: var(--ink);
}

.deadline-box ul { margin: 10px 0 0; padding-left: 20px; }
.deadline-box li { margin-bottom: 8px; font-size: 14px; line-height: 1.45; }
.deadline-box li b { color: var(--ink); }

.next-steps-slot { opacity: .65; }

@media (max-width: 820px) {
  .issue-grid { grid-template-columns: 1fr; }
}

.crumb {
  padding: 12px 0 0;
  font-size: 13px;
  color: rgba(255,248,237,.75);
}

.crumb a { color: rgba(255,248,237,.9); text-decoration: none; font-weight: 700; }
.crumb a:hover { text-decoration: underline; }

/* Homepage: state and issue menus */
.state-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}

.state-card {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 72px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  color: var(--ink);
  font-weight: 900;
  font-size: 17px;
  text-decoration: none;
}

.state-card.active {
  border: 2px solid var(--teal);
  background: rgba(42,140,140,.08);
}

.state-card.soon { color: var(--muted); }
.state-card small { font-size: 11px; font-weight: 700; color: var(--muted); }

.issue-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.issue-card {
  display: block;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fffaf2;
  color: var(--ink);
  text-decoration: none;
}

.issue-card b { display: block; font-size: 16px; margin-bottom: 6px; }
.issue-card span { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; }
.issue-card em { display: block; margin-top: 10px; font-style: normal; font-weight: 850; color: var(--teal); }

.issue-card.live { border-left: 4px solid var(--teal); }
.issue-card.live:hover { box-shadow: 0 10px 22px rgba(0,0,0,.1); }
.issue-card.soon { opacity: .65; }

@media (max-width: 1180px) {
  .state-grid, .issue-menu { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .state-grid, .issue-menu { grid-template-columns: 1fr; }
}

.badge-4 { background: var(--gold); color: #271b05; }
.badge-5 { background: var(--green); }

/* Step 4: timeline */
.wt-timeline {
  margin: 6px 0 0;
  padding: 0 0 0 6px;
  list-style: none;
  border-left: 3px solid var(--violet);
}

.wt-timeline li {
  position: relative;
  padding: 2px 0 16px 18px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.wt-timeline li::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper-soft);
  border: 3px solid var(--violet);
}

.wt-timeline li.past::before { background: var(--violet); }
.wt-timeline li.today::before { border-color: var(--coral); background: var(--coral); }
.wt-timeline li b { display: block; }
.wt-timeline li small { color: var(--muted); }

/* Step 5: next step box */
.next-box {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 10px;
  background: rgba(74,124,83,.07);
  color: var(--ink);
}

.next-box h5 { margin: 0 0 8px; font-size: 16px; }
.next-box p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.next-box p:last-child { margin-bottom: 0; }
.next-box ol { margin: 0 0 10px; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.next-box a { color: var(--blue); font-weight: 800; text-decoration: none; }

/* Free legal help block */
.help-block {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.7);
  color: var(--ink);
}

.help-block h5 { margin: 0 0 8px; font-size: 16px; }
.help-block p, .help-block li { font-size: 14px; line-height: 1.5; }
.help-block ul { margin: 0 0 12px; padding-left: 20px; }
.help-block li { margin-bottom: 8px; }
.help-block a { color: var(--blue); font-weight: 800; text-decoration: none; }

.kit-line {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
}

/* Step 5 checklists and forms */
.check-form { margin: 12px 0; display: grid; gap: 8px; }

.check-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.75);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.check-item input { margin-top: 2px; }
.check-item:has(input:checked) { border-color: var(--green); background: rgba(74,124,83,.08); }
.check-item a { color: var(--blue); font-weight: 800; text-decoration: none; white-space: nowrap; }

.inline-help {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.inline-help a { color: var(--blue); font-weight: 800; text-decoration: none; }

.letter-form {
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.6);
}

.letter-form h6 { margin: 0 0 6px; font-size: 15px; color: var(--ink); }

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0;
}

.lf-field label { display: block; font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 4px; }
.lf-field input, .lf-field textarea {
  width: 100%;
  padding: 9px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-sizing: border-box;
}
.lf-wide { grid-column: 1 / -1; margin-bottom: 10px; }

.small-btn { min-height: 38px; padding: 8px 14px; font-size: 14px; }

#letter-recap { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 14px; }
#letter-recap pre {
  margin: 10px 0;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: 13px/1.5 ui-monospace, monospace;
  white-space: pre-wrap;
  color: var(--ink);
}

.court-block {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.6);
}

.court-block summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--ink);
  font-size: 15px;
}

.court-block p { font-size: 14px; line-height: 1.5; }
.court-block a { color: var(--blue); font-weight: 800; text-decoration: none; }

@media (max-width: 820px) {
  .field-grid { grid-template-columns: 1fr; }
}

/* Pricing: plain and transparent, not a pitch. */
.pricing-note {
  margin-top: 18px;
  padding: 20px 24px;
  background: #fffaf2;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  color: var(--ink);
}

.pricing-note h4 {
  margin: 0 0 12px;
  font-size: 20px;
}

.pricing-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.price-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  background: rgba(255,255,255,.7);
}

.price-card b {
  font-size: 16px;
}

.price-tag {
  float: right;
  font-weight: 950;
  font-size: 18px;
}

.price-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.honest-line {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .topbar-inner { grid-template-columns: 1fr auto; }
  .navlinks { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding-top: 18px; }
  .process-row { grid-template-columns: 1fr 1fr; }
  .pricing-row { grid-template-columns: 1fr; }
  .prop-notebook { opacity: .6; }
}

@media (max-width: 820px) {
  .container { width: min(100vw - 24px, 1360px); }
  .hero-title { font-size: 48px; }
  .plan-panel { padding: 24px 18px 24px; }
  .plan-panel h2 {
  margin: 20px 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  color: #21384f;
  font-size: clamp(38px, 3.7vw, 56px);
  line-height: 1;
  text-align: center;
  letter-spacing: -.02em;
  font-weight: 700;
}
  .plan-steps { grid-template-columns: 1fr 1fr; }
  .clip-svg { width: 28px; right: 44px; top: -28px; }
  .process-row,
  .footer-strip { grid-template-columns: 1fr; }
  .step-slot { grid-template-columns: 42px 1fr; }
  .desk-props img,
  .real-note { opacity: .36; }
  .real-note,
  .prop-notebook,
  .prop-plant-right,
  .prop-paper-left,
  .prop-paper-right { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  .fade-up,
  .hero-board,
  .hero-copy,
  .desk-props img,
  .real-note {
    opacity: 1;
    transform: none;
  }
}


/* Final polish: remove the circular stamp. It was reading as broken text. */
.plan-stamp {
  display: none !important;
}



/* Layout and polish tweaks: tighten hero, move keys, soften paw shadow */
.hero-grid {
  gap: 18px;
}

.hero-copy {
  margin-left: 22px;
}

.prop-keys {
  left: -10px;
  bottom: 48px;
}

.cat-paw {
  filter:
    drop-shadow(0 6px 8px rgba(50, 28, 14, .15))
    drop-shadow(0 12px 16px rgba(25, 14, 7, .10));
}

@media (max-width: 1180px) {
  .hero-copy {
    margin-left: 0;
  }
}


/* Mobile/tablet reveal fallback:
   On smaller screens, do not depend on scroll-triggered animation for page content.
   This prevents sections below the hero from staying invisible after resizing. */
@media (max-width: 1180px) {
  .paper-page .fade-up,
  .work-area .fade-up,
  .plan-builder.fade-up,
  .guide-section.fade-up,
  .resource-section.fade-up,
  .pricing-section.fade-up {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .paper-page [data-reveal],
  .work-area[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* Prop reposition pass: move buried desk props into visible open space */
.real-note {
  right: 6px;
  top: clamp(168px, 17vw, 228px);
  width: clamp(92px, 9vw, 122px);
  min-height: 90px;
  padding: 14px 10px;
  transform: rotate(3deg);
}

.prop-keys {
  left: 14px;
  bottom: 128px;
}

.prop-clip {
  right: 54px;
  top: clamp(430px, 46vw, 520px);
}

@media (max-width: 1180px) {
  .real-note {
    right: 10px;
    top: 194px;
    width: 96px;
  }

  .prop-keys {
    left: 6px;
    bottom: 106px;
  }

  .prop-clip {
    right: 42px;
    top: 402px;
  }
}


/* Hero prop rework: move hidden props into intentional open space */
.real-note,
.prop-keys,
.prop-clip {
  display: none !important;
}

.hero-copy {
  overflow: visible;
}

.title-clip {
  position: absolute;
  width: clamp(54px, 5vw, 74px);
  left: clamp(210px, 64%, 288px);
  top: 22px;
  transform: rotate(-10deg);
  filter: drop-shadow(0 10px 12px rgba(33, 20, 10, .16));
  pointer-events: none;
}

.copy-keys {
  position: absolute;
  width: clamp(132px, 12vw, 176px);
  left: 214px;
  bottom: 14px;
  transform: rotate(-8deg);
  filter: drop-shadow(0 12px 16px rgba(33, 20, 10, .18));
  pointer-events: none;
}

.hero-note {
  position: absolute;
  right: 18px;
  top: 56px;
  width: 104px;
  min-height: 96px;
  display: grid;
  place-items: center;
  padding: 14px 10px;
  background: #f3c967;
  color: #261b08;
  border-radius: 5px;
  box-shadow: 0 12px 20px rgba(0,0,0,.24);
  transform: rotate(4deg);
  font-family: "Comic Sans MS", "Trebuchet MS", sans-serif;
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}

.plan-panel .clip-svg {
  z-index: 3;
}

@media (max-width: 1180px) {
  .title-clip,
  .copy-keys,
  .hero-note {
    display: none;
  }
}


/* Prop cleanup: keep graphics out of the words and fix note layering */
.title-clip {
  left: auto;
  right: -8px;
  top: 34px;
  z-index: 0;
}

.copy-keys {
  left: 286px;
  bottom: 92px;
  width: clamp(124px, 11vw, 164px);
  z-index: 0;
}

.hero-note {
  right: 14px;
  top: 20px;
  z-index: 2;
}

.plan-panel .clip-svg {
  z-index: 4;
}

@media (max-width: 1180px) {
  .title-clip,
  .copy-keys,
  .hero-note {
    display: none;
  }
}


/* Reveal timing fix:
   Keep the hero motion, but make the rest of the page visible right away.
   This prevents a long empty-looking page while scrolling. */
.paper-page .fade-up,
.paper-page [data-reveal],
.work-area .fade-up,
.plan-builder.fade-up,
.wt-step.fade-up,
.guide-section.fade-up,
.resource-section.fade-up,
.pricing-section.fade-up {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}


/* Final note + paperclip alignment:
   Tuck the note slightly under the clip and keep the clip clearly above it. */
.hero-note {
  right: 4px;
  top: 34px;
  transform: rotate(2deg);
  z-index: 2;
}

.plan-panel .clip-svg {
  right: 54px;
  top: -30px;
  z-index: 5;
  transform: rotate(-8deg);
}


/* Clean hero pass:
   Remove the cat paw and receipts note from the Montana security deposit hero. */
.cat-paw,
.hero-note,
.real-note {
  display: none !important;
}

/* Keep the realistic folder paperclip, but remove any note-specific positioning overrides. */
.plan-panel .clip-svg {
  z-index: 4;
}


/* ============================================================
   SECURITY DEPOSIT PLANNER — 7-section worksheet
   ============================================================ */

/* Spacing between the seven sections */
.ws-section { margin-top: 26px; }
.ws-section:first-of-type { margin-top: 8px; }
.anchor-target { display: block; position: relative; top: -90px; visibility: hidden; }

/* Disclaimer bar: always visible */
.disclaimer-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(239,177,60,.14);
  border: 1px solid rgba(239,177,60,.5);
  border-left: 5px solid var(--gold);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
}
.disclaimer-bar .disclaimer-text { color: var(--ink); font-size: 14px; line-height: 1.5; }
.disclaimer-bar b { color: var(--ink); }
.startover-btn {
  flex: none;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  min-height: 40px;
}
.startover-btn:hover { background: #fff; }

/* Section 1: notes that open when the box is checked */
.issue-note {
  display: none;
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.issue-opt:has(input:checked) .issue-note { display: block; }
.issue-opt { flex-wrap: wrap; }

/* "Landlord kept my belongings" card */
.side-card {
  margin-top: 16px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.side-card b { color: var(--ink); }
.side-card p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* Two-up field grid */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field-grid .wt-field { margin-bottom: 0; }
.status-line { margin: 10px 0 0; font-size: 14px; color: var(--ink); }
.status-line b { color: var(--coral); }

/* Section 3: deduction cards */
.ded-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.ded-card {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
.ded-card h5 { margin: 0 0 6px; font-size: 15px; color: var(--ink); }
.ded-card p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ded-card .proof-line { color: var(--ink); }
.ded-card .why-line { margin-top: auto; }
.add-plan {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  background: #fff;
}
.add-plan:has(input:checked) { border-color: var(--green); background: rgba(74,124,83,.1); }

/* Section 4: evidence "why" lines */
.ev-grid .ev-why {
  display: block;
  width: 100%;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}
.ev-grid .issue-opt { flex-wrap: wrap; align-items: flex-start; }

/* Section 5: outcome cards */
.outcome-card {
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
  background: var(--paper-soft);
}
.outcome-card h5 { margin: 0 0 8px; font-size: 17px; color: var(--ink); }
.outcome-card p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; }
.outcome-card p:last-child { margin-bottom: 0; }
.outcome-card.stop { border-left-color: var(--coral); background: rgba(239,116,88,.08); }
.outcome-card.wait { border-left-color: var(--gold); background: rgba(239,177,60,.08); }
.outcome-card.act { border-left-color: var(--green); background: rgba(74,124,83,.08); }

.demand-block, .kit-offer {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: #fff;
}
.demand-block h6 { margin: 0 0 6px; font-size: 15px; color: var(--ink); }
.demand-block p, .demand-block li { font-size: 14px; line-height: 1.55; color: var(--muted); }
.demand-block b { color: var(--ink); }
.demand-block ul { margin: 6px 0 10px; padding-left: 20px; }
.demand-block a { color: var(--blue); font-weight: 800; text-decoration: none; }

.kit-offer { border-color: rgba(239,177,60,.55); background: rgba(239,177,60,.1); }
.kit-offer b { color: var(--ink); display: block; margin-bottom: 4px; }
.kit-offer p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--muted); }

.cal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* Plan summary */
.plan-summary {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--paper-soft);
}
.plan-summary h5 { margin: 0 0 10px; font-size: 16px; color: var(--ink); }
.sum-row { margin-bottom: 10px; font-size: 14px; }
.sum-row b { color: var(--ink); display: block; margin-bottom: 2px; }
.sum-row ul { margin: 4px 0 0; padding-left: 20px; }
.sum-row li { margin-bottom: 3px; color: var(--muted); }
.sum-row span { color: var(--muted); }
.sum-empty { color: var(--muted); font-style: italic; }
.warn-line { margin: 12px 0; font-size: 13.5px; font-weight: 700; color: var(--coral); }
.summary-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ghost-btn { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.ghost-btn:hover { background: #fff; }

/* Section 6: kit comparison */
.kit-intro { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 16px; }
.kit-table { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kit-col {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--paper-soft);
}
.kit-col.gold-col { border-color: rgba(239,177,60,.55); background: rgba(239,177,60,.1); }
.kit-col-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.kit-col-head b { font-size: 16px; color: var(--ink); }
.kit-col .price-tag { font-size: 20px; font-weight: 950; color: var(--ink); }
.kit-col ul { margin: 0 0 14px; padding-left: 20px; }
.kit-col li { font-size: 14px; line-height: 1.5; margin-bottom: 6px; color: var(--muted); }
.kit-col .button { width: 100%; text-align: center; }

/* Section 7 reviewed line */
.reviewed-line {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

@media (max-width: 820px) {
  .field-grid { grid-template-columns: 1fr; }
  .kit-table { grid-template-columns: 1fr; }
  .disclaimer-bar { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   PRINT: plan summary and evidence checklist
   ============================================================ */
@media print {
  .topbar, .hero-wrap, .desk-props, .disclaimer-bar .startover-btn,
  .navlinks, .mini-footer, .kit-offer .button, .summary-actions,
  #print-checklist { display: none !important; }

  body { background: #fff !important; color: #000 !important; }
  .paper-page, .work-area { background: #fff !important; box-shadow: none !important; }
  .work-area::before, .work-area::after { display: none !important; }
  a { color: #000 !important; text-decoration: underline; }

  /* Evidence-only print mode: hide everything except Section 4 */
  body.printing-evidence .ws-section:not(#sec-evidence),
  body.printing-evidence .disclaimer-bar { display: none !important; }
}


/* ============================================================
   PASS 2 — product logic styles
   ============================================================ */

/* Task 2: step-number contrast. Dark ink circle, white bold number (AA+). */
.step-badge-slot,
.step-badge-slot.badge-2, .step-badge-slot.badge-3, .step-badge-slot.badge-4,
.step-badge-slot.badge-5, .step-badge-slot.badge-6, .step-badge-slot.badge-7 {
  background: var(--ink) !important;
  color: #ffffff !important;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 3px rgba(13,34,56,.12);
}

/* Safety line in the disclaimer bar */
.safety-line { display: block; margin-top: 6px; font-size: 13px; color: var(--ink); }
.safety-line a { color: var(--blue); font-weight: 800; text-decoration: none; }

/* Evidence note replacing the old print button */
.evidence-note { margin-top: 14px; font-weight: 700; color: var(--ink); }

/* Letter details form */
.letter-details {
  margin-top: 16px; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; background: var(--paper-soft);
}
.letter-details h5 { margin: 0 0 4px; font-size: 15px; color: var(--ink); }
.lf-wide-field { grid-column: 1 / -1; }
.letter-details input { width: 100%; }

/* Tier legal-help blocks */
.tier { margin-top: 12px; border-radius: 12px; font-size: 14px; }
.tier ul { margin: 6px 0 0; padding-left: 20px; }
.tier li { margin-bottom: 6px; line-height: 1.5; color: var(--muted); }
.tier b { color: var(--ink); }
.tier a { color: var(--blue); font-weight: 800; text-decoration: none; }
.tier-1 {
  border: 1px solid rgba(239,116,88,.5); border-left: 5px solid var(--coral);
  background: rgba(239,116,88,.08); padding: 14px 16px;
}
.tier-1 h6 { margin: 0 0 6px; font-size: 15px; color: var(--ink); }
.tier-1 p { margin: 0 0 8px; color: var(--muted); }
details.tier-2, details.tier-3 {
  border: 1px solid var(--line); background: #fff; padding: 10px 14px;
}
details.tier-3 { margin-top: 10px; background: var(--paper-soft); }
.tier summary { cursor: pointer; font-weight: 800; color: var(--ink); }
.tier-3 p { margin: 8px 0 4px; color: var(--muted); }

/* Cost block */
.cost-block {
  margin-top: 12px; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; background: var(--paper-soft);
}
.cost-block h6 { margin: 0 0 6px; font-size: 15px; color: var(--ink); }
.cost-block ul { margin: 6px 0 0; padding-left: 20px; }
.cost-block li { margin-bottom: 8px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.cost-block b { color: var(--ink); }
.cost-note { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); font-style: italic; }
.cost-note a, .cost-recover a { color: var(--blue); font-weight: 800; text-decoration: none; }
.cost-recover { margin: 10px 0 0; font-size: 13px; color: var(--ink); }

/* Letter outline + free alternatives + CTA */
.letter-outline { margin: 8px 0; }
.letter-outline b { color: var(--ink); }
.letter-outline ol { margin: 4px 0 0; padding-left: 20px; font-size: 13.5px; color: var(--muted); }
.letter-outline li { margin-bottom: 3px; }
.free-alt { margin: 6px 0; font-size: 13.5px; color: var(--muted); }
.free-alt a { color: var(--blue); font-weight: 800; text-decoration: none; }
.demand-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }

/* Golden Kit preview */
.kit-preview {
  margin: 12px 0; border: 1px solid rgba(239,177,60,.5); border-radius: 12px;
  padding: 10px 14px; background: rgba(239,177,60,.08);
}
.kit-preview summary { cursor: pointer; font-weight: 850; color: var(--ink); }
#kit-preview-body h6 { margin: 12px 0 6px; font-size: 14px; color: var(--ink); }
.kit-items { margin: 6px 0 12px; padding-left: 20px; font-size: 13.5px; color: var(--muted); }
.kit-items li { margin-bottom: 4px; }
.coming-soon { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); font-style: italic; }

/* Blurred letter preview */
.letter-preview {
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  padding: 14px 16px; position: relative; overflow: hidden;
}
.letter-preview p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.ltr-line { white-space: pre-line; }
.lp-clear { position: relative; z-index: 1; }
.lp-blur { filter: blur(4.5px); user-select: none; pointer-events: none; opacity: .85; margin-top: 6px; }
.lp-blur ul { padding-left: 18px; }
.lp-label { margin-top: 10px !important; font-size: 12.5px !important; font-weight: 700; color: var(--coral) !important; }
.preview-note { font-size: 13px; color: var(--muted); }

/* Generated plan document (on-page) */
.plan-doc-wrap { margin-top: 16px; }
.plan-doc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.plan-doc {
  display: block; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; padding: 20px 22px; color: var(--ink);
}
.plan-doc .doc-cover h2 { margin: 0 0 4px; font-size: 20px; }
.plan-doc .doc-cover p { margin: 0; font-size: 13px; color: var(--muted); }
.plan-doc h3 { font-size: 15px; margin: 18px 0 6px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.plan-doc ul, .plan-doc ol { margin: 6px 0; padding-left: 20px; }
.plan-doc li { margin-bottom: 4px; font-size: 13.5px; line-height: 1.5; }
.plan-doc .doc-check li { color: var(--ink); }
.plan-doc a { color: var(--blue); font-weight: 700; text-decoration: none; }
.plan-doc .doc-foot { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 12px; color: var(--muted); }
.plan-doc .cost-block { border: none; padding: 0; background: transparent; margin: 0; }

@media (max-width: 820px) {
  .demand-cta .button, .plan-doc-actions .button { width: 100%; text-align: center; }
}

/* Print: show the generated plan document cleanly */
@media print {
  .letter-details, .plan-doc-actions, .demand-cta, .kit-preview,
  .cal-actions, .coming-soon { display: none !important; }
  .plan-doc { border: none !important; padding: 0 !important; }
  .lp-blur { filter: none !important; }
}


/* ============================================================
   PASS A — compliance and safety styles
   ============================================================ */

/* Compiler wording + planner-start line in the disclaimer bar */
.compiler-line { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Clear my answers (renamed) + explainer */
.clear-wrap { flex: none; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; max-width: 240px; }
.clear-note { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* Letter builder + download disclaimers */
.builder-disclaimer {
  margin: 10px 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
  color: var(--ink); background: rgba(239,116,88,.09);
  border: 1px solid rgba(239,116,88,.4); border-radius: 10px;
}

/* Lawyer-help block (always visible, above the kit) */
.lawyer-help {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; background: var(--paper-soft);
}
.lawyer-help h4 { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
.lawyer-help p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 12px; }
.lawyer-help b { color: var(--ink); }
.lh-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.lawyer-help h5 { margin: 0 0 6px; font-size: 14px; color: var(--ink); }
.lawyer-help ul { margin: 0 0 12px; padding-left: 20px; }
.lawyer-help li { font-size: 13.5px; line-height: 1.5; margin-bottom: 4px; color: var(--muted); }
.lawyer-help a { color: var(--blue); font-weight: 800; text-decoration: none; }
.lh-close { margin: 4px 0 0 !important; font-weight: 700; color: var(--ink) !important; }

/* Kit compiler + purchase gate */
.kit-compiler { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 6px 0 12px; }
.kit-agree {
  display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin: 8px 0 10px; cursor: pointer;
}
.kit-agree input { margin-right: 8px; }
.terms-line { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.terms-line a { color: var(--blue); font-weight: 800; text-decoration: none; }
#buy-kit[disabled] { opacity: .5; cursor: not-allowed; filter: grayscale(.3); box-shadow: none; }
#buy-kit[disabled]:hover { transform: none; }

/* Footer legal row */
.footer-legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 0 4px; border-top: 1px solid var(--light-line); margin-top: 8px;
}
.footer-legal > a { color: var(--cream); font-weight: 800; text-decoration: none; opacity: .92; }
.footer-clear { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; max-width: 260px; }
.footer-clear .clear-note { color: rgba(255,248,237,.6); text-align: right; }

@media (max-width: 820px) {
  .lh-cols { grid-template-columns: 1fr; }
  .clear-wrap { max-width: none; }
  .footer-legal { flex-direction: column; align-items: flex-start; }
  .footer-clear { align-items: flex-start; max-width: none; }
  .footer-clear .clear-note { text-align: left; }
}


/* ============================================================
   PASS B — depth, flow, and fixes
   ============================================================ */

/* Task 3: keep button text visible where link-color rules would hide it */
.next-box a.button, .demand-block a.button, .outcome-card a.button,
.cal-actions a.button, .kit-offer a.button, .demand-cta a.button { color: #ffffff !important; }
.next-box a.button.gold, .demand-block a.button.gold,
.kit-offer a.button.gold, .demand-cta a.button.gold { color: #281c05 !important; }
.next-box .button.ghost-btn, .cal-actions .button.ghost-btn { color: var(--ink) !important; }

/* Progress marker (Task 1) */
.progress-wrap {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 12px 14px;
  background: var(--paper-soft); border: 1px solid var(--line); border-radius: 12px;
}
.progress-trail { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.pnode { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.pnode .pdot {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--line); color: var(--muted); font-weight: 800; font-size: 12px;
}
.pnode.done .pdot { background: var(--green); border-color: var(--green); color: #fff; }
.pnode .plabel { color: var(--muted); white-space: nowrap; }
.pnode.done .plabel { color: var(--ink); font-weight: 700; }
.progress-label { font-size: 12px; font-weight: 800; color: var(--ink); white-space: nowrap; }
@media (max-width: 820px) {
  .pnode .plabel { display: none; }
  .progress-label { margin-left: auto; }
}

/* Step 2 expanders (Task 2) */
.expanders { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.xp { border: 1px solid var(--line); border-radius: 10px; background: var(--paper-soft); padding: 10px 14px; }
.xp summary { cursor: pointer; font-weight: 800; color: var(--ink); font-size: 14px; }
.xp p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.xp a { color: var(--blue); font-weight: 700; text-decoration: none; }

/* Deduction "if charged wrongly" line (Task 10) */
.fix-line {
  margin: 8px 0; font-size: 13px; line-height: 1.5; color: var(--ink);
  background: rgba(74,124,83,.08); border-radius: 8px; padding: 6px 10px;
}
.fix-line b { color: var(--green); }

/* Evidence reassurance + tips (Task 9) */
.reassure-line {
  background: rgba(42,108,196,.08); border: 1px solid rgba(42,108,196,.25);
  border-radius: 10px; padding: 10px 12px; color: var(--ink); margin-bottom: 12px;
}
.ev-grid .ev-tip { display: block; width: 100%; margin-top: 3px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.ev-grid .ev-tip b { color: var(--ink); }

/* Email + phone notes (Task 7) */
.email-note, .phone-note { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }

/* Court transparency note + cost link (Tasks 4, 5) */
.court-transparency {
  background: rgba(239,177,60,.1); border: 1px solid rgba(239,177,60,.4);
  border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--ink); margin: 10px 0;
}
.court-transparency b { color: var(--ink); }
.cost-link { font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 10px 0; }
.cost-link a { color: var(--blue); text-decoration: none; }

/* Court prep worksheet rows (Task 4) */
.worksheet { margin: 0; padding-left: 18px; }
.worksheet li { font-size: 13px; line-height: 1.5; margin-bottom: 4px; color: var(--ink); }
.worksheet b { color: var(--ink); }

/* Glossary (Task 10) */
.glossary summary { cursor: pointer; font-weight: 800; color: var(--ink); }
.glossary dl { margin: 10px 0 0; }
.glossary dt { font-weight: 800; color: var(--ink); font-size: 13.5px; margin-top: 8px; }
.glossary dd { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }

/* Back-to-top (Task 12) */
#back-to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 60; display: none;
  min-height: auto; padding: 10px 14px; font-size: 13px; border-radius: 999px;
  background: var(--ink); color: #fff; border: 0; box-shadow: 0 10px 24px rgba(0,0,0,.3);
  cursor: pointer; font-weight: 800;
}
#back-to-top.show { display: inline-flex; }
#back-to-top:hover { filter: brightness(1.1); }
@media (max-width: 820px) {
  #back-to-top { right: 12px; bottom: 12px; padding: 8px 12px; font-size: 12px; }
}

/* Cost section shell reuses .cost-block; drop its inner top margin in the section */
#sec-cost .cost-block { margin-top: 4px; }


/* ============================================================
   PASS C — six-step guided flow
   ============================================================ */

/* Step 1: issue cards (short title + one line + "More about this") */
.issue-card {
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper-soft); padding: 12px 14px;
}
.issue-card:has(input:checked) { border-color: var(--green); background: rgba(74,124,83,.08); }
.issue-card .issue-opt { border: 0; background: transparent; padding: 0; font-weight: 800; color: var(--ink); align-items: flex-start; min-height: 0; }
.issue-one { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.issue-more { margin-top: 8px; }
.issue-more summary { cursor: pointer; font-size: 13px; font-weight: 800; color: var(--blue); }
.issue-more p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.issue-more a { color: var(--blue); font-weight: 700; text-decoration: none; }

/* Step 2: Day 10 / Day 30 callouts + owe question between them */
.callout {
  border: 1px solid rgba(239,177,60,.45); border-left: 5px solid var(--gold);
  background: rgba(239,177,60,.1); border-radius: 10px; padding: 12px 14px; margin: 12px 0;
  font-size: 14px; line-height: 1.5; color: var(--ink);
}
.callout b { color: var(--ink); }
.owe-after { margin-top: 12px; }
.status-line { font-size: 13px; color: var(--coral); margin: 8px 0; }

/* Step 3: deduction cards as collapsible details */
.ded-title { margin: 18px 0 4px; font-size: 16px; color: var(--ink); }
.ded-open-line { margin: 0 0 12px; }
details.ded-card { display: block; }
.ded-card summary { cursor: pointer; font-size: 13.5px; color: var(--ink); list-style: none; }
.ded-card summary::-webkit-details-marker { display: none; }
.ded-card summary b { color: var(--ink); }
.ded-card[open] summary { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.ded-card .fix-line { margin: 8px 0; }

/* Step 4: evidence rows with nested "Don't have it?" */
.ev-list { display: flex; flex-direction: column; gap: 8px; }
.ev-row { border: 1px solid var(--line); border-radius: 10px; background: var(--paper-soft); padding: 10px 12px; }
.ev-row .issue-opt { border: 0; background: transparent; padding: 0; flex-wrap: wrap; align-items: flex-start; min-height: 0; }
.ev-row:has(input:checked) { border-color: var(--green); background: rgba(74,124,83,.08); }
.ev-row .ev-why { display: block; width: 100%; margin-top: 3px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.ev-dh { margin-top: 6px; }
.ev-dh summary { cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--blue); }
.ev-dh p { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* Step 5: serious warning + plan output card + review card */
.serious-warn {
  border: 1px solid rgba(239,116,88,.5); border-left: 5px solid var(--coral);
  background: rgba(239,116,88,.1); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
  font-size: 14px; color: var(--ink);
}
.serious-warn b { color: var(--ink); }
.serious-warn ul { margin: 8px 0 0; padding-left: 20px; }
.serious-warn li { margin-bottom: 5px; color: var(--muted); }
.serious-warn a { color: var(--blue); font-weight: 700; text-decoration: none; }

.plan-output { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; margin-bottom: 12px; }
.plan-card { border: 1px solid var(--line); border-radius: 14px; background: var(--paper-soft); padding: 18px 20px; color: var(--ink); }
.pc-title { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
.pc-next { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.pc-row { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.pc-row b { color: var(--ink); }
.pc-row ol { margin: 4px 0 0; padding-left: 20px; }
.plan-card a { color: var(--blue); font-weight: 700; text-decoration: none; }
.review-card { border: 1px solid rgba(42,108,196,.3); border-radius: 14px; background: rgba(42,108,196,.07); padding: 16px 18px; position: sticky; top: 90px; }
.review-card b { color: var(--ink); }
.review-card p { font-size: 13px; color: var(--muted); margin: 6px 0 8px; line-height: 1.5; }
.review-card ul { margin: 0; padding-left: 18px; }
.review-card li { font-size: 13px; margin-bottom: 6px; color: var(--muted); }
.review-card a { color: var(--blue); font-weight: 700; text-decoration: none; }
@media (max-width: 820px) { .plan-output { grid-template-columns: 1fr; } .review-card { position: static; } }

/* Step 6: kit intro lines */
.kit-head { margin: 0 0 8px; font-size: 16px; color: var(--ink); }
.kit-three { margin: 0 0 12px; padding-left: 20px; }
.kit-three li { font-size: 14px; line-height: 1.5; margin-bottom: 5px; color: var(--muted); }

/* Bottom: collapsed accordions */
.bottom-info { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 16px; }
.bottom-title { margin: 0 0 12px; font-size: 16px; color: var(--ink); }
.bottom-acc { border: 1px solid var(--line); border-radius: 10px; background: var(--paper-soft); padding: 10px 14px; margin-bottom: 8px; }
.bottom-acc > summary { cursor: pointer; font-weight: 800; color: var(--ink); }
.bottom-acc .help-block { margin-top: 8px; }
.bottom-acc .cost-block { border: 0; background: transparent; padding: 0; margin-top: 8px; }
.bottom-acc dl { margin: 10px 0 0; }
.bottom-disclaimer { margin: 14px 0 4px; font-size: 12.5px; color: var(--muted); }
.bottom-info .footer-legal { border-top: 1px solid var(--line); }
.bottom-info .footer-legal > a { color: var(--blue); }
.bottom-info .footer-clear .clear-note { color: var(--muted); }


/* ============================================================
   PASS D — progress and polish
   ============================================================ */

/* Task 3: shortened top block + collapsed panels */
.disclaimer-bar { display: block; }
.top-short { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.top-short b { color: var(--ink); }
.top-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.top-panel { flex: 0 1 auto; }
.top-panel > summary {
  cursor: pointer; font-size: 13px; font-weight: 800; color: var(--blue); list-style: none;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-soft); display: inline-block;
}
.top-panel > summary::-webkit-details-marker { display: none; }
.top-panel[open] > summary { background: #fff; }
.top-panel-body { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); width: 100%; }
.top-panel-body p { margin: 0 0 8px; }
.top-panel-body a { color: var(--blue); font-weight: 700; text-decoration: none; }
.top-panel-body.clear-wrap { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

/* Task 1: optional Golden Kit tag in the progress trail (never counted) */
.pnode.optional .pdot { background: #fff; border-style: dashed; color: var(--muted); }
.pnode.optional .plabel em { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--gold); font-weight: 800; margin-left: 4px; }

/* Task 4: issue groups */
.issue-group { margin-bottom: 16px; }
.group-label { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 800; }

/* Task 5: timeline cards + day badge */
.callout {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-left: 4px solid var(--gold);
  background: var(--paper-soft); border-radius: 10px; padding: 10px 14px; margin: 10px 0;
}
.tl-dot { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #281c05; font-weight: 900; display: grid; place-items: center; font-size: 13px; }
.tl-body { display: flex; flex-direction: column; }
.tl-body b { color: var(--ink); font-size: 14px; }
.tl-body span { color: var(--muted); font-size: 13px; }
.day-badge { display: inline-block; background: var(--coral); color: #fff; font-weight: 800; font-size: 12px; padding: 4px 12px; border-radius: 999px; }
.status-line { margin: 8px 0; }

/* Task 7: kit as an after-plan offer card (no longer a numbered step) */
.kit-after { border: 1px solid rgba(239,177,60,.5); border-radius: 14px; background: rgba(239,177,60,.07); padding: 18px 20px; margin-top: 20px; }
.kit-after .kit-head { margin: 0 0 10px; font-size: 17px; color: var(--ink); }


/* Task 9: five-part outcome format */
.oc-parts { margin-top: 4px; }
.oc-part { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.oc-part b { color: var(--ink); }
.oc-part a { color: var(--blue); font-weight: 700; text-decoration: none; }
.oc-part .cal-actions { margin-top: 8px; }

/* Task 10: worked example */
.example-acc > summary { color: var(--green); }

/* Task 11: FAQ */
.faq p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.faq p b { color: var(--ink); }
.faq a { color: var(--blue); font-weight: 700; text-decoration: none; }

/* Task 12 + version marker */
.feedback-line { margin: 10px 0 0; font-size: 13px; color: var(--ink); }
.feedback-line a { color: var(--blue); font-weight: 700; text-decoration: none; }
.build-marker { margin: 6px 0 0; font-size: 11px; color: var(--muted); letter-spacing: .02em; }

/* Task 13: visible keyboard focus states (no layout change) */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
label:focus-within {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Task 14: full-page print — open accordions, hide interactive controls.
   The plan document print (new window) stays separate. */
@media print {
  details > *:not(summary) { display: block !important; }
  details > summary { list-style: none; font-weight: 800; }
  #back-to-top, .top-links, .cal-actions,
  .plan-doc-actions, .demand-cta, .kit-preview, .kit-agree, #buy-kit,
  .clear-wrap, .progress-wrap, .startover-btn { display: none !important; }
  .kit-after { border: 1px solid #ccc; background: #fff; }
  .callout, .plan-card, .review-card, .cost-block, .bottom-acc, .issue-card, .ev-row {
    break-inside: avoid;
  }
}


/* ============================================================
   PASS E — repair: visibility must not depend on JS
   ============================================================ */

/* Content is visible by default. Animations only enhance it (they define
   their own from-state, so the hero still fades in when JS adds motion-ready).
   Without JS, nothing is hidden. */
.fade-up { opacity: 1; transform: none; }

/* Deduction cards: make them clearly expandable */
.ded-card > summary { cursor: default; position: relative; padding: 4px 0; }
.ded-card > summary::after { display: none; }
.ded-card:hover { border-color: var(--line); box-shadow: none; }
.ded-card > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

/* Step 5 call-to-action buttons */
.step5-cta { margin: 12px 0; }
.after-plan-cta { margin: 16px 0 4px; }
.after-plan-cta .button.gold { color: #281c05; }

/* Legal-help review card, now always visible near Step 5 */
.review-static { position: static; margin: 12px 0; }
.plan-output { grid-template-columns: 1fr; }
/* ============================================================
   Per-charge dispute rows (Step 3) and Golden Kit preview
   ============================================================ */
.charges-field { margin-top: 14px; }
.charge-row { border: 1px solid #d9d2c2; border-radius: 8px; padding: 10px 12px; margin: 10px 0; background: #fbfaf6; }
.charge-row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.charge-remove { background: none; border: none; color: #8a1f1f; cursor: pointer; font: inherit; text-decoration: underline; padding: 2px 4px; }
.charge-dispute-fields { border-top: 1px dashed #ccc; margin-top: 6px; padding-top: 6px; }
.charges-empty { margin: 6px 0; }
#add-charge { margin-top: 4px; }

/* On-page Golden Kit preview (test mode) */
.kit-testmode-note { background: #fff8e1; border: 1px solid #e6cf7a; border-radius: 6px; padding: 8px 10px; margin: 8px 0; font-size: 14px; }
.kit-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.gk-preview-frame { border: 1px solid #ddd; border-radius: 8px; padding: 16px 18px; background: #fff; max-height: 640px; overflow: auto; }
.gk-preview-frame .gk-h { font-size: 17px; border-bottom: 2px solid #b8860b; padding-bottom: 4px; margin: 22px 0 8px; }
.gk-preview-frame h2 { font-size: 22px; margin: 0 0 2px; }
.gk-preview-frame h4.gk-doc-title { font-size: 15px; margin: 14px 0 6px; border-top: 1px solid #eee; padding-top: 8px; }
.gk-preview-frame h5 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #666; margin: 14px 0 6px; }
.gk-box { border: 1px solid #d8c78a; background: #fbf7ea; border-radius: 6px; padding: 8px 10px; margin: 8px 0; }
.gk-box b { display: block; margin-bottom: 3px; }
.gk-rules { background: #f4f0ff; border-color: #c9bdf0; }
.gk-nextbox { background: #eef7ee; border-color: #a9d3a9; }
.gk-warning { border: 2px solid #b00020; background: #fff0f0; border-radius: 6px; padding: 8px 10px; margin: 8px 0; }
.gk-letter-page { border: 1px solid #ccc; border-radius: 6px; padding: 16px 18px; margin: 10px 0; background: #fff; }
.gk-letter p { margin: 9px 0; }
.gk-cover { border-bottom: 3px solid #b8860b; padding-bottom: 12px; }
.gk-sub { color: #666; margin: 0 0 6px; }
.gk-foot-mark { font-size: 12px; color: #777; }
.gk-fillnote { color: #777; font-size: 12px; }
.gk-receipt-title { text-transform: none; letter-spacing: 0; color: #111; font-size: 15px; }
table.gk-table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; }
.gk-table th, .gk-table td { border: 1px solid #ccc; padding: 5px 7px; text-align: left; vertical-align: top; }
.gk-table th { background: #f3efe2; }
ul.gk-check { list-style: none; margin: 6px 0; padding: 0; }
ul.gk-check li { padding-left: 20px; position: relative; margin-bottom: 4px; }
ul.gk-check li:before { content: "\2610"; position: absolute; left: 0; top: 0; }
.gk-st-have { color: #1a7f37; font-weight: bold; }
.gk-st-missing { color: #b00020; font-weight: bold; }
.gk-st-need { color: #9a6700; font-weight: bold; }
.gk-script-box { background: #f6f6f6; border-color: #ddd; }
.gk-note { color: #666; font-size: 13px; margin: 2px 0; }

/* Repair pass: missing-answer note + test-mode messaging */
.build-note { color: #8a1f1f; font-weight: 600; margin-top: 8px; }
.kit-missing { background: #fff3f3; border-color: #e6a3a3; }
.testmode-line { font-style: normal; }

/* ============================================================
   Phase 1 orientation: sticky progress + live next-step banner
   ============================================================ */
.orient-bar {
  position: sticky;
  top: 78px;            /* sit just under the sticky topbar (min-height 78px) */
  z-index: 40;          /* below topbar (50), above content */
  background: var(--paper-soft);
  padding: 6px 0 2px;
  margin: 0 0 16px;
}
.orient-bar .progress-wrap { margin: 0 0 8px; }
.nextstep-banner {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(74,124,83,.10); border: 1px solid rgba(74,124,83,.38);
}
.nsb-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--green); white-space: nowrap;
}
.nsb-text { font-size: 14px; font-weight: 700; color: var(--ink); }
@media (max-width: 820px) {
  /* Nav can wrap taller on small screens; keep the bar pinned to the very top. */
  .orient-bar { top: 0; }
}
@media print {
  .orient-bar, .nextstep-banner { display: none !important; }
}

/* ============================================================
   Phase 2 trust & conversion: hero trust strip, comparison
   table extras, honest notify CTA, post-plan kit callout
   ============================================================ */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none;
  margin: 16px 0 0; padding: 0; max-width: 460px;
}
.trust-strip li {
  position: relative; padding-left: 18px; font-size: 13px;
  color: rgba(255,248,237,.92); text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.trust-strip li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold); font-weight: 800; }

.kit-col-note { font-size: 13px; color: var(--muted); margin: 2px 0 0; font-style: italic; }
.kit-cta { margin-top: 4px; }
.kit-notify-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; line-height: 1.45; }
.kit-honest { font-size: 13.5px; color: var(--muted); margin: 14px 0 12px; }

.kit-callout {
  border: 1px solid rgba(239,177,60,.5); background: rgba(239,177,60,.10);
  border-radius: 12px; padding: 14px 16px;
}
.kit-callout .kc-title { display: block; font-size: 16px; color: var(--ink); margin-bottom: 4px; }
.kit-callout .kc-line { font-size: 14px; color: var(--muted); margin: 0 0 10px; line-height: 1.5; }
.kit-callout .kc-free { display: block; font-size: 12.5px; color: var(--muted); margin-top: 8px; font-style: italic; }

@media print {
  .trust-strip, .kit-table, .kit-callout, .kit-cta { display: none !important; }
}

/* Go-live CTA: inline note shown only if checkout is clicked before payment is wired */
.checkout-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }

/* Logo mark image (replaces the letter A) */
.brand-mark { background: none; }
.brand-mark img { width: 100%; height: 100%; display: block; border-radius: 50%; }

/* Guided plan output blocks */
.plan-card .plan-sub { color: var(--muted); font-size: 13.5px; margin: 2px 0 16px; }
.plan-block { border-top: 1px solid var(--line); padding: 14px 0 0; margin: 14px 0 0; }
.plan-block:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.plan-block h4 { font-family: Georgia, serif; font-size: 16px; color: var(--ink); margin: 0 0 8px; }
.plan-block p, .plan-block li { font-size: 14px; line-height: 1.55; color: var(--ink); }
.plan-block ul, .plan-block ol { margin: 6px 0 0; padding-left: 20px; }
.plan-block li { margin-bottom: 6px; }
.plan-next { background: rgba(239,116,88,.08); border: 1px solid rgba(239,116,88,.3); border-radius: 10px; padding: 14px; }
.plan-next h4 { color: var(--coral); }
.plan-checklist li { margin-bottom: 8px; }
.plan-cite { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.plan-cite a, .plan-block a { color: var(--blue); font-weight: 700; text-decoration: none; }
.plan-letter { white-space: pre-wrap; background: #fbfaf6; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-family: Georgia, serif; font-size: 13px; line-height: 1.5; color: var(--ink); overflow-x: auto; }
.plan-defs dt { font-weight: 800; color: var(--ink); font-size: 13.5px; margin-top: 8px; }
.plan-defs dd { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.plan-consult { background: rgba(42,108,196,.06); border: 1px solid rgba(42,108,196,.2); border-radius: 10px; padding: 14px; }
.kit-pre-lead { font-size: 13.5px; color: var(--ink); font-weight: 700; margin: 0 0 8px; }
.kit-pre-note { font-size: 12.5px; color: var(--muted); font-style: italic; margin: 8px 0 0; }

/* Paid kit download zone */
.kit-download-zone { background: rgba(239,177,60,.12); border: 1px solid rgba(239,177,60,.5); border-radius: 12px; padding: 16px 18px; margin: 14px 0; }
.kdz-title { display: block; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.kdz-line { font-size: 13.5px; line-height: 1.55; color: var(--ink); margin: 0 0 12px; }
.kdz-note { display: block; font-size: 12px; color: var(--muted); margin-top: 8px; }

/* Report tables added for the restored free plan output. */
.plan-table { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 13px; }
.plan-table th, .plan-table td { border: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; }
.plan-table th { background: rgba(250, 183, 77, .12); color: var(--ink); font-weight: 800; }
.plan-table td { color: var(--ink); }
@media (max-width: 640px) {
  .plan-table { display: block; overflow-x: auto; }
}

.preview-doc {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(37, 91, 101, .18);
  border-radius: 16px;
  background: rgba(255, 252, 246, .82);
}
.preview-doc h5 {
  margin: 0 0 8px;
  font-size: 1rem;
}
.preview-doc pre {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem;
  line-height: 1.55;
  margin: 0;
}
.kit-test-btn {
  margin-top: 10px;
}


/* V4 repair: charge rows now feed the reports and kit. */
.charge-dispute-line { margin: 8px 0 4px; }
.charge-dispute-fields { display: grid; gap: 8px; }
.charge-dispute-fields[hidden] { display: none !important; }
.kit-preview[open] { background: #fff; }

.open-kit-preview { cursor: pointer; }
.kit-test-note { color: var(--muted); }


/* v7 report and Golden Kit cleanup */
[hidden] { display: none !important; }
.kit-preview[hidden], .plan-doc[hidden], .plan-doc-wrap[hidden], .kit-download-zone[hidden] { display: none !important; }
.kit-honest { margin: 0 0 16px; color: var(--muted); }
.golden-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.golden-preview-card { border: 1px solid var(--line); background: rgba(255,255,255,.72); border-radius: 14px; padding: 14px; }
.golden-preview-card h5 { margin: 0 0 6px; font-size: 15px; }
.golden-preview-card p, .golden-preview-card li { font-size: 14px; line-height: 1.45; }
.golden-preview-card ul { margin: 8px 0 0; padding-left: 18px; }
@media (max-width: 760px) { .golden-preview-grid { grid-template-columns: 1fr; } }


/* v8 flow and report polish */
#sec-goal .outcome-grid { align-items: stretch; }
#sec-goal .wt-field { background: #fffdf8; border-color: rgba(246,177,46,.35); }
#letter-details[hidden], #plan-doc-wrap[hidden], #kit-preview[hidden], #kit-download-zone[hidden] { display: none !important; }
.plan-doc-wrap { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.plan-card { border: 1px solid rgba(246,177,46,.45); background: linear-gradient(180deg,#fffdf8,#fff8eb); border-radius: 18px; padding: 22px; box-shadow: 0 16px 42px rgba(51,35,14,.08); }
.plan-card h3 { margin-top: 0; font-size: 24px; }
.plan-card .result-hero { background: #fff; border: 1px solid rgba(231,211,180,.85); border-radius: 16px; padding: 16px; margin: 12px 0 18px; }
.plan-card .result-main { font-size: 18px; color: var(--ink); margin: 0 0 8px; }
.plan-card .result-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.plan-card .result-tags span { background: #eef6f6; border: 1px solid #c7e3e1; border-radius: 999px; padding: 5px 9px; font-weight: 750; font-size: 13px; }
.plan-section-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.plan-section-grid .plan-block { margin: 0; }
.plan-block { background: #fff; border: 1px solid rgba(231,211,180,.8); border-radius: 14px; padding: 14px; margin: 14px 0; }
.plan-block h4 { margin-top: 0; }
.plan-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.plan-table th, .plan-table td { border: 1px solid #eadcc8; padding: 8px; text-align: left; vertical-align: top; }
.plan-table th { background: #fff7e8; }
.plan-upgrade-note { background: #fff4d8; border: 1px solid rgba(246,177,46,.55); border-radius: 14px; padding: 13px; margin: 14px 0 0; }
.plan-doc-actions { margin-top: 14px; }
.kit-preview[open] { background: #fff; border: 1px solid rgba(246,177,46,.45); border-radius: 16px; padding: 14px 16px; }
.kit-preview summary { font-size: 16px; }
.kit-preview-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.golden-preview-card { background: #fffdf8; border: 1px solid #eadcc8; border-radius: 14px; padding: 13px; }
.golden-preview-card h5 { margin: 0 0 6px; font-size: 15px; }
.golden-preview-card ul { margin: 8px 0 0 18px; }
.report-stage-note { font-size: 13px; color: var(--muted); margin-top: 8px; }
@media (max-width: 760px) { .plan-section-grid, .kit-preview-grid { grid-template-columns: 1fr; } }


/* v9: court packet source and planning fields */
.court-planning-notes {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .65);
  padding: 12px 14px;
}
.court-planning-notes > summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--ink);
}
.court-planning-notes .field-grid { margin-top: 12px; }
.court-planning-notes .why-line { margin-top: 8px; }

/* v13: official form summary helpers */
.form-summary-mini {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.58);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* Paper Alibi dog logo mark */
.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 0;
}