/* Lora, Source Sans 3, and Allura, each under the SIL Open Font License. Served from KinGuide itself. */
@font-face { font-family: "Allura"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Allura-Regular.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("fonts/Lora-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/Lora-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("fonts/SourceSans3-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/SourceSans3-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --sage-900: #1b2d25;
  --sage-800: #243e33;
  --sage-700: #2d4b3e;
  --sage-100: #e6efea;
  --sage-50: #f2f7f4;
  --linen: #fbf9f5;
  --card: #ffffff;
  --muted: #f3efea;
  --line: #e5dfd5;
  --ink: #1a2420;
  --slate: #384841;
  --hint: #5c6e66;
  --jade-700: #0b6b4d;
  --jade-600: #177f5d;
  --jade-200: #bfe6d6;
  --jade-100: #e3f4ec;
  --jade-50: #f1faf6;
  --amber: #a85a14;
  --amber-soft: #fdf4e7;
  --amber-line: #e8be88;
  --serif: "Lora", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --script: "Allura", "Segoe Script", "Apple Chancery", cursive;
  --shadow: 0 8px 24px rgba(27, 45, 37, 0.06);
  --radius: 20px;
}

* { box-sizing: border-box; }

html { font-size: 18px; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  overflow-x: clip;
}

button, input, textarea { font: inherit; color: inherit; }

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  background: var(--sage-700);
  color: white;
  padding: 10px 14px;
  border-radius: 8px;
  z-index: 5;
}

.skip:focus { top: 12px; }

.site-header {
  position: sticky;
  top: 0;
  /* Above form/task overlays so Account and the logo stay clickable. Overlays fill the space below. */
  z-index: 110;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  min-height: 36px;
  padding: 6px 20px;
  background: var(--sage-800, #234036);
  color: #f4f1ea;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.trust-lock {
  display: inline-flex;
  margin-right: 8px;
  opacity: 0.9;
}

.trust-strip .trust-item + .trust-item::before {
  content: "·";
  margin: 0 10px;
  opacity: 0.45;
  font-weight: 400;
}

.trust-card {
  display: block;
  margin: 36px auto 8px;
  padding: 22px 24px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.trust-head { display: flex; align-items: center; gap: 14px; }

.trust-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--sage-100);
  color: var(--sage-800);
}

.trust-card h2 {
  font-family: var(--sans);
  font-size: 1.15rem;
  margin: 0;
}

.trust-card p { margin: 0; color: var(--slate); line-height: 1.45; }

.trust-card ul {
  display: grid;
  gap: 10px;
  list-style: none;
  width: 100%;
  margin: 16px 0 0;
  padding: 0;
}

.trust-card li {
  position: relative;
  padding-left: 26px;
  color: var(--slate);
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: left;
}

.trust-card li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.5em;
  width: 6px;
  height: 11px;
  border: solid var(--sage-800);
  border-width: 0 2px 2px 0;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.8;
}

.header-inner, .container {
  width: min(960px, calc(100% - 32px));
  margin: 0 auto;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  min-height: 76px;
}

.header-top {
  display: contents;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.brand-symbol {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f4efe6;
}

.brand-symbol img {
  width: 170%;
  height: 170%;
  max-width: none;
  object-fit: cover;
  object-position: center 36%;
  transform: translateY(-6%);
}

.brand-name {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sage-800);
}

.brand-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.brand-tag { margin-top: 2px; font-size: 0.82rem; font-weight: 500; color: var(--slate); line-height: 1.25; max-width: 14rem; }

#map-detail, #stage-detail { scroll-margin-top: 140px; }

.header-actions { display: flex; align-items: center; gap: 10px; }

.beta {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--sage-100);
  color: var(--sage-800);
  border-radius: 999px;
  padding: 2px 8px;
}

.mode-toggle {
  display: flex;
  background: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}

.mode-btn {
  border: 0;
  background: transparent;
  border-radius: 999px;
  min-height: 40px;
  padding: 6px 14px;
  font-weight: 700;
  cursor: pointer;
  color: var(--slate);
}

.mode-btn.on { background: var(--sage-700); color: white; }

.sheet {
  background: white;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 26px 32px;
  box-shadow: var(--shadow);
}

.sheet-head, .estate-bar, .next-row, .task-row, .progress-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.province {
  display: inline-block;
  background: var(--muted);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 10px;
}

.count-pills { display: flex; gap: 8px; }
.count-pills span, .status {
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--sage-100);
  color: var(--sage-800);
  font-weight: 700;
  font-size: 0.9rem;
}
.count-pills .left, .status { background: var(--muted); color: var(--slate); font-weight: 650; }
.status.ready { background: #eaf5ee; color: #2c6e49; }
.status.sent { background: #eaf0f2; color: #335c67; }

.estate-bar, .progress-card, .next-card, .detail-panel {
  background: var(--sage-50);
  border-radius: 16px;
  padding: 18px 18px 16px;
  margin: 16px 0;
}
.progress-card, .detail-panel { background: var(--muted); display: block; }
.progress-card { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; }
.progress-card .map-bar { grid-column: 1 / -1; margin: 0; }
.kicker { margin: 0 0 4px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage-700); }
.who { margin: 0; font-size: 1.2rem; }
.who span { font-weight: 500; color: var(--slate); font-size: 0.95rem; }
.estate-actions { display: flex; gap: 8px; }
.estate-actions .btn-primary, .estate-actions .btn-secondary, .next-row .btn-primary { width: auto; }

.next-card { border: 2px solid var(--sage-700); background: linear-gradient(180deg, var(--sage-50), white); }
.next-card h2 { font-size: 1.7rem; margin-bottom: 6px; }
.next-row .btn-primary { min-width: 12rem; align-self: center; }

.task-row {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-top: 12px;
}
.task-row { flex-wrap: wrap; }
.task-row > div:first-child { flex: 1; min-width: 16rem; }
.offer-row {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
  min-width: 0;
}
.offer-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 10px;
  width: 100%;
}
.offer-choices:empty { display: none; }
.offer-row > .offer-block { width: 100%; }
.offer-row .btn-mail {
  min-height: 72px;
  font-size: 1.08rem;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
}
.offer-row .btn-secondary,
.offer-row .btn-primary {
  flex-direction: column;
  gap: 6px;
  min-height: 72px;
  padding: 14px 18px;
  border-radius: 16px;
  white-space: normal;
}
/* Pre-Filled PDF on the card: solid sage block, clear border, never a borderless white ghost. */
.offer-row .btn-file,
.offer-row .btn-primary.btn-file {
  border: 2px solid var(--sage-800);
  background: var(--sage-800);
  color: white;
  box-shadow: 0 1px 0 rgba(27, 45, 37, 0.12);
}
.offer-row .btn-file span,
.offer-row .btn-primary.btn-file span {
  background: white;
  color: var(--sage-800);
  opacity: 1;
}
.letter-actions .btn-primary,
.letter-actions .btn-secondary,
.letter-actions .btn-mail {
  flex-direction: column;
  gap: 6px;
  min-height: 64px;
  padding: 12px 16px;
}
@media (max-width: 700px) {
  .offer-choices { grid-template-columns: 1fr; }
  .offer-row .btn-secondary,
  .offer-row .btn-mail { white-space: normal; }
}
.task-row p { margin: 0 0 6px; }
.task-row .note { color: var(--hint); font-style: italic; }
.task-kicker { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.task-kicker span, .agency {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hint);
}
.agency, .task-kicker .agency { flex-basis: 100%; display: block; background: none; color: var(--hint); border-radius: 0; padding: 0; letter-spacing: 0; text-transform: none; font-size: 0.85rem; font-weight: 400; line-height: 1.35; }
.task-side { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.item-action {
  border: 1px solid var(--line);
  background: white;
  border-radius: 999px;
  min-height: 40px;
  padding: 6px 14px;
  font-weight: 700;
  cursor: pointer;
}

.header-link {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  min-height: 44px;
  padding: 8px 16px;
  font-weight: 650;
  cursor: pointer;
}

.header-link:hover { border-color: var(--sage-700); }

/* Compact account control: icon + Sign in / Account. Email lives in the sign-in sheet. */
.account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  min-height: 36px;
  min-width: 0;
  padding: 6px 12px;
  font-size: 0.92rem;
  white-space: nowrap;
}
.account-btn .account-ico { flex: none; }
.header-inner > .brand-group { margin-right: auto; }
.header-inner > .mode-toggle { flex: none; }

.container { padding: 36px 0 72px; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0;
}

h1:focus, h2:focus { outline: none; }

.hero { text-align: center; padding-top: 8px; }

.hero h1 {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--sage-900);
  max-width: 18ch;
  margin: 0 auto 14px;
}

.hero .quiet {
  font-size: 1.15rem;
  max-width: 38rem;
  margin: 0 auto 32px;
  line-height: 1.55;
}

.door p {
  margin: 0 0 18px;
  color: var(--slate);
  font-size: 1rem;
  line-height: 1.45;
}

.door.plan { border-color: var(--sage-700); background: linear-gradient(180deg, #fff, var(--sage-50)); }
.door.passed { border-color: #e7d7c0; }

.quiet { color: var(--slate); }

.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: left;
}

.door {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  min-height: 230px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.door:hover { border-color: var(--sage-700); transform: translateY(-2px); }

.door strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  margin: 10px 0 8px;
}

.door em {
  font-style: normal;
  color: var(--sage-700);
  font-weight: 650;
}

.door-go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--sage-700);
  color: white;
  font-weight: 700;
  padding: 12px 18px;
  pointer-events: none;
}

.story-section {
  margin-top: 36px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 34px 32px;
  box-shadow: var(--shadow);
}

.story-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.story-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sage-100);
  color: var(--sage-800);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.15rem;
  flex: none;
}

.story-header h2 { font-size: 1.45rem; color: var(--sage-900); }

.story-header p { margin: 2px 0 0; color: var(--slate); font-size: 0.95rem; }

.story-quote {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--ink);
}

.story-quote p { margin: 0 0 16px; }

.story-quote p:last-child {
  margin: 0;
  font-weight: 650;
  color: var(--sage-800);
}

.ask {
  max-width: 640px;
  margin: 0 auto;
  padding-top: 6vh;
}

.ask-num { margin: 0 0 14px; color: var(--sage-700); font-weight: 700; }

.ask h1 { font-size: 2.5rem; margin-bottom: 28px; }

.ask input:not([type="file"]),
.ask textarea,
.panel input:not([type="file"]),
.panel textarea {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid #c4b8a4;
  box-shadow: none;
  outline: none;
  padding: 8px 0 12px;
  margin: 0;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.3;
  color: var(--ink);
}

.ask input:not([type="file"]):focus,
.ask textarea:focus,
.panel input:not([type="file"]):focus,
.panel textarea:focus {
  border-bottom-color: var(--jade-600);
  box-shadow: 0 2px 0 0 var(--jade-600);
  background-color: var(--jade-50);
}

input::placeholder, textarea::placeholder { color: #b7ad9c; }

.ask textarea, .panel textarea { min-height: 4.5rem; resize: vertical; }

.ask-ok { margin-top: 28px; }

.btn-primary, .btn-secondary, .btn-mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 700;
  cursor: pointer;
  padding: 12px 18px;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}

.btn-primary {
  background: var(--sage-700);
  color: #f7f3ec;
  border: 0;
}

.btn-primary:hover { background: var(--sage-800); }

/* Secondary was only styled on <a>, so <button class="btn-secondary"> fell back to the browser’s grey control. */
.btn-secondary,
a.btn-secondary {
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--sage-700);
  text-decoration: none;
  box-sizing: border-box;
}
.btn-secondary:hover,
a.btn-secondary:hover {
  background: var(--sage-50);
  border-color: var(--sage-800);
}

.btn-mail {
  background: var(--amber);
  color: white;
  border: 0;
}

.btn-mail:hover { background: #a65210; }

.text-btn {
  background: none;
  border: 0;
  color: var(--sage-700);
  padding: 12px 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  font-weight: 650;
}

.ask-back {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.ask-back .text-btn {
  display: block;
  padding: 10px 0;
  line-height: 1.3;
}

.big-list { display: grid; gap: 12px; }

.big-choice {
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 16px;
  min-height: 72px;
  padding: 18px 20px;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.35rem;
}

.big-choice:hover, .big-choice[aria-pressed="true"] {
  border-color: var(--sage-700);
  background: var(--sage-50);
}

.keep-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; }
.keep-title { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; }
.keep-title em {
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--sage-100);
  color: var(--sage-800);
  border-radius: 999px;
  padding: 4px 8px;
}
.concierge-card {
  margin-top: 18px;
  background: transparent;
  border: 0;
  padding: 0;
}
.plan-offers {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 12px;
}
/* Three equal cards on a laptop; one column on a phone — never 2-up with Concierge orphaned. */
.plan-offers-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  max-width: none;
  margin: 0;
}
.plan-offers-3 .plan-tier {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  padding: 22px 20px 18px;
  min-width: 0;
  height: 100%;
  border-radius: 18px;
  box-shadow: var(--shadow);
  background: var(--card);
}
.plan-offers-3 .plan-tier-head {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 6px;
  margin-bottom: 16px;
  min-height: 10.5rem;
}
.plan-offers-3 .plan-tier-head .kicker { margin: 0; }
.plan-offers-3 .plan-tier-head h3, .plan-tier-head .tier-name { margin: 0; }
.plan-offers-3 .plan-tier-head .plan-price { margin: 2px 0 0; }
.plan-offers-3 .plan-tier-head .tier-free { align-self: end; }
.plan-offers-3 .plan-tier-free {
  background: linear-gradient(180deg, var(--sage-50), #fff);
  border-color: #c5d6cc;
}
.plan-offers-3 .plan-tier-up {
  border-color: var(--amber-line);
  background: linear-gradient(180deg, var(--amber-soft), #fff);
}
.plan-offers-3 .plan-tier h3, .plan-tier .tier-name {
  font-size: 1.28rem;
  line-height: 1.2;
}
.plan-offers-3 .plan-price {
  font-size: 1.85rem;
  margin: 0;
}
.plan-offers-3 .tier-free,
.plan-offers-3 .tier-free-more {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 550;
  line-height: 1.35;
}
.plan-offers-3 .tier-free-more { color: var(--slate); }
.plan-offers-3 .tier-promise { display: none; }
.plan-offers-3 .tier-lines {
  gap: 12px;
  margin: 0;
  align-content: start;
}
.plan-offers-3 .tier-lines li { gap: 6px; }
.plan-offers-3 .tier-lines strong {
  font-size: 0.92rem;
  color: var(--sage-900);
}
.plan-offers-3 .tier-lines span,
.plan-offers-3 .tier-lines .tier-text {
  font-size: 0.88rem;
  line-height: 1.35;
}
.plan-offers-3 .plan-on {
  margin: 12px 0 0;
  font-size: 0.88rem;
}
.plan-offers-3 .plan-footnote {
  margin: 12px 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--hint);
}
.plan-offers-3 .plan-tier-foot {
  padding-top: 18px;
}
.plan-offers-3 .plan-tier-foot .btn-primary,
.plan-offers-3 .plan-tier-foot .btn-secondary,
.plan-offers-3 .plan-tier-foot .btn-mail,
.plan-offers-3 .plan-tier-foot .btn-copper {
  width: 100%;
  margin: 0;
  min-height: 48px;
}
.plan-offers-3 .plan-tier .btn-mail { margin-top: 0; }
.plan-offers-3 .btn-copper {
  border: 0;
  background: var(--amber);
  color: #fff;
  box-shadow: 0 6px 16px rgba(168, 90, 20, 0.28);
}
.plan-offers-3 .btn-copper:hover { background: #8f4a0f; }
.sales-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--sage-50);
  border: 1px solid #c5d6cc;
  color: var(--slate);
  font-size: 0.95rem;
  line-height: 1.4;
}
.plan-tier {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 16px 14px;
}
.plan-tier-up { border-color: var(--amber-line); }
.plan-tier h3, .plan-tier .tier-name { margin: 0; font-size: 1.45rem; }
.plan-price {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.1;
  margin: 6px 0 12px;
}
.plan-tier-up .plan-price { color: var(--amber); }
.plan-price span {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--slate);
}
.tier-promise { margin: 0 0 12px; }
.tier-free { margin: 0 0 12px; color: var(--slate); font-size: 0.95rem; font-weight: 600; }
.tier-free + .tier-free-more { margin-top: -8px; }
.file-notice { color: var(--ink); font-weight: 600; }
.tier-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.tier-lines li { display: grid; gap: 4px; }
.tier-lines strong { font-size: 0.98rem; }
.tier-lines span { color: var(--slate); font-size: 0.95rem; line-height: 1.35; font-weight: 500; }
.tier-lines .tier-text { display: grid; gap: 12px; color: var(--slate); font-size: 0.95rem; line-height: 1.5; font-weight: 500; margin-top: 2px; }
.tier-lines .tier-text p { margin: 0; }
.tier-lines .tier-text .tier-quiet { font-size: 0.88rem; font-style: italic; color: var(--hint); font-weight: 400; }
.plan-tier .btn-mail { margin-top: 16px; }
.signin-nudge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 12px 0 16px;
}
.signin-nudge p { margin: 0; }
.signin-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.signin-actions .btn-secondary { width: auto; min-height: 44px; }
.signin-choices { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 12px; }
@media (max-width: 900px) {
  .plan-offers-3 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .plan-offers { grid-template-columns: 1fr; }
  .signin-nudge { flex-direction: column; align-items: stretch; }
}
.keep-file { margin-top: 18px; }
.keep-file-box { display: grid; gap: 10px; }
.keep-file-box .quiet, .file-signin .quiet { margin: 0; }
.file-label { font-weight: 600; color: var(--slate); }
.row-kept { display: block; color: var(--slate); }
/* Branded file control: hide the native Choose File pill; our button is the target. */
.file-pick, .row-file {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: fit-content;
  max-width: 100%;
}
.file-pick {
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--sage-700);
  background: #fff;
  color: var(--sage-900);
  font: inherit;
  font-weight: 650;
  box-shadow: 0 1px 0 rgba(27, 45, 37, 0.04);
}
.file-pick:hover { background: var(--sage-50); }
.file-pick-label { pointer-events: none; }
.file-pick input,
.row-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.file-kept, .file-uploading {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 12px 14px; border: 1px solid var(--jade-200); border-radius: 14px; background: var(--jade-50); color: var(--ink);
}
.file-kept-tag { background: var(--jade-100); color: var(--jade-700); border: 1px solid var(--jade-200); border-radius: 999px; padding: 2px 10px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.03em; }
.file-kept-name { font-weight: 700; overflow-wrap: anywhere; min-width: 0; flex: 1 1 160px; }
.file-kept-size { color: var(--slate); font-size: 0.92rem; }
.file-kept-actions { display: inline-flex; gap: 14px; margin-left: auto; }
.file-legacy { background: var(--muted); border-color: var(--line); }
.file-progress { flex: 1 1 180px; height: 10px; accent-color: var(--jade-600); }
.file-pct { color: var(--slate); font-size: 0.92rem; min-width: 3ch; text-align: right; }
.file-signin { display: grid; gap: 10px; justify-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--sage-50); }
.file-signin .btn-secondary { width: auto; }

.page-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 18px;
}

.file-head { align-items: flex-start; }
.on-file { margin-top: 8px; }
.on-file-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  margin: 10px 0 4px;
}
.on-file-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
  min-height: 0;
}
.on-file-card strong { font-size: 1rem; }
.on-file-card span { color: var(--slate); font-size: 0.9rem; font-weight: 500; line-height: 1.3; }
textarea.field-input.note-edit { min-height: 22rem; margin: 8px 0 12px; line-height: 1.5; resize: vertical; }
@media (max-width: 600px) { textarea.field-input.note-edit { min-height: 20rem; } }
.letter-edit-row { margin: 8px 0 0; }
.file-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.file-actions .btn-secondary { width: auto; }

.page-title h1 { font-size: 2.2rem; color: var(--sage-900); }

.tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.category-tile {
  text-align: left;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 16px;
  min-height: 128px;
  padding: 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}

.category-tile:hover { border-color: var(--sage-700); }

.category-tile.active {
  border-color: var(--sage-700);
  background: var(--sage-50);
}

.category-tile.has-gap {
  border-style: dashed;
  border-color: var(--amber-line);
  background: #fffdf9;
}

.category-tile.done { border-color: #b7cfc2; }

.tile-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.tile-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
}

.tile-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--muted);
  color: var(--sage-700);
  display: grid;
  place-items: center;
  flex: none;
}

/* Status pinned to the bottom, one line — so “None yet” never wraps under a tall title. */
.tile-status {
  color: var(--slate);
  font-size: 0.95rem;
  margin-top: auto;
  padding-top: 12px;
  white-space: nowrap;
  line-height: 1.3;
}
.tile-status.start { color: var(--amber); font-weight: 700; }

.panel, .letter-sheet {
  background: var(--card);
  border: 2px solid var(--sage-700);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}

.panel, .letter-sheet { border-color: var(--line); margin-top: 8px; }

.panel h2 { font-size: 1.8rem; margin-bottom: 6px; }

.panel p { margin: 0 0 16px; font-size: 1.15rem; }

.actions { display: grid; gap: 10px; margin-top: 8px; }

/* Pre-Filled PDF: solid sage primary (never the old white "weird" rest state). Price badge stays light on sage. */
.btn-file, .btn-primary.btn-file {
  border-color: var(--sage-800); background: var(--sage-800); color: white;
}
.btn-file span, .btn-primary.btn-file span, .btn-secondary.btn-file span {
  background: white; color: var(--sage-800); opacity: 1;
}
.btn-file:hover, .btn-file:focus-visible, .btn-file:active,
.btn-primary.btn-file:hover, .btn-primary.btn-file:focus-visible, .btn-primary.btn-file:active {
  background: var(--sage-700); border-color: var(--sage-700); color: white;
}
.btn-file:hover span, .btn-file:focus-visible span, .btn-file:active span,
.btn-primary.btn-file:hover span, .btn-primary.btn-file:focus-visible span, .btn-primary.btn-file:active span {
  background: white; color: var(--sage-800);
}
.btn-secondary.btn-file {
  border-color: var(--sage-800); background: var(--sage-800); color: white;
}
.tax-hands { margin-top: 12px; }
.tax-hands .hand-row { display: grid; gap: 2px; }
.tax-hands .hand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  text-decoration: none;
  padding: 6px 0;
}
.tax-hands .hand strong { text-decoration: underline; text-underline-offset: 0.18em; }
.tax-hands .hand span { color: var(--slate); font-weight: 500; font-size: 0.92rem; }
.recipients { margin: 16px 0 4px; }
.recipients ul { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.recipients li {
  background: var(--linen);
  border-radius: 12px;
  padding: 10px 12px;
}
.recipients li span { display: block; color: var(--slate); font-size: 0.95rem; margin-top: 2px; }

.note-sheet {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.5;
  user-select: text;
}

/* Quiet path above the envelope: free copy, or Click to Send. Not copied. */
.note-path {
  margin: 0 0 12px;
  font-size: 0.95rem;
  color: var(--slate);
  line-height: 1.45;
  user-select: none;
  -webkit-user-select: none;
}
.note-path button {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 650;
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.note-path button:hover { color: var(--sage-800); }

/* Envelope above a note: where it goes — never copied with the body. */
.note-envelope {
  user-select: none;
  -webkit-user-select: none;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--jade-200);
  background: var(--jade-50);
  margin: 0 0 10px;
}
.note-envelope .env-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage-700);
}
.note-envelope .env-row {
  display: grid;
  grid-template-columns: 4.4rem 1fr;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 6px;
}
.note-envelope .env-row:last-child { margin-bottom: 0; }
.note-envelope .env-label { font-size: 0.8rem; font-weight: 700; color: var(--hint); }
.note-envelope .env-value { color: var(--ink); font-size: 0.98rem; }
.note-envelope .env-value.env-edit {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
}
.note-envelope .env-value.env-edit:hover {
  color: var(--sage-800);
  text-decoration-color: currentColor;
}
.note-envelope .env-add {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 650;
  color: var(--jade-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  text-align: left;
}
.note-envelope .env-add:hover { color: var(--sage-800); }
.env-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
}
.env-switch .map-chip.on {
  background: var(--sage-50);
  border-color: var(--sage-700);
  color: var(--sage-800);
}

/* Quiet date nudge between envelope and note — not copied. Soft jade pill. */
.date-nudge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 12px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--jade-200);
  background: var(--jade-50);
  font-size: 0.92rem;
  color: var(--slate);
  line-height: 1.3;
}
.date-nudge button {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--jade-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.date-nudge button:hover { color: var(--sage-800); }

/* Branded date card (mock look): rounded fields, sage Save — not the intake underline picker. */
.date-card-body {
  padding: 8px 0 4px;
  display: grid;
  gap: 12px;
}
.date-card-parts {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 0.9fr;
  gap: 10px;
}
@media (max-width: 520px) {
  .date-card-parts { grid-template-columns: 1fr; }
}
.date-card-parts label {
  display: grid;
  gap: 4px;
  font-weight: 650;
  font-size: 0.9rem;
  color: var(--ink);
}
.date-card-parts select,
.date-card-parts input {
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #c4b8a4;
  background: #fff;
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  outline: none;
}
.date-card-parts select {
  cursor: pointer;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%232d4b3e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.date-card-parts select:focus,
.date-card-parts input:focus {
  border-color: var(--jade-600);
  box-shadow: 0 0 0 3px var(--jade-50);
}
.date-card-actions {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}
.date-card-actions .btn-primary { width: 100%; }
.date-card-actions .text-btn {
  justify-self: center;
  min-height: 44px;
}

.help-steps {
  margin: 8px 0 18px;
  padding-left: 1.2rem;
}

.help-steps li { margin: 10px 0; }

.phone {
  display: block;
  margin: 4px 0 16px;
  font-family: var(--serif);
  font-size: 2.4rem;
  color: var(--sage-800);
  text-decoration: none;
}

ul.plain { margin: 8px 0 0; padding-left: 1.2rem; }
ul.plain li { margin: 8px 0; font-size: 1.15rem; }

.item-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  background: var(--linen);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
}

.people-group { margin-top: 22px; }
.people-group h3 { margin: 0; font-size: 1.35rem; }
.role-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.role-pick {
  border: 1.5px solid var(--line);
  background: white;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}
.role-pick[aria-pressed="true"] {
  background: var(--sage-50);
  border-color: var(--sage-700);
  color: var(--sage-800);
}
.person-form { max-width: 640px; margin: 0 auto; padding: 4vh 0 48px; }
.person-form h1 { font-size: 2.2rem; margin-bottom: 8px; }
.person-form label,
.person-form .field-label { display: block; font-weight: 700; margin: 18px 0 6px; }
.person-form input {
  display: block;
  width: 100%;
  font-family: var(--serif);
  font-size: 1.25rem;
  border: 0;
  border-bottom: 2px solid #c4b8a4;
  background: transparent;
  padding: 8px 0 12px;
  color: var(--ink);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.person-form input:focus { border-bottom-color: var(--jade-600); box-shadow: 0 2px 0 0 var(--jade-600); background-color: var(--jade-50); }
.confirm-card { max-width: 420px; margin-top: 18vh; }
.confirm-card h3 { font-size: 2rem; margin: 0 0 8px; }
.confirm-card .actions { display: flex; gap: 10px; margin-top: 18px; }
.confirm-card .actions button { flex: 1; }
.item-actions { display: flex; gap: 12px 28px; align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.item-actions .text-btn { padding: 8px 2px; }
.item-row span { color: var(--slate); }

.map-note { margin: 0 0 14px; color: var(--slate); }

.map-bar {
  height: 10px;
  background: #e6ddcf;
  border-radius: 99px;
  margin: 0 0 18px;
  overflow: hidden;
}

.map-bar span {
  display: block;
  height: 100%;
  background: var(--sage-700);
}

.page-title .btn-secondary { width: auto; min-width: 7rem; }
.item-row span { display: block; }

.letter-paper {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 32px 34px;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.55;
  color: #222;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.02);
}

.letter-modal {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 8px 8px 22px;
  max-width: 980px;
  margin: 0 auto;
}

.letter-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px 8px;
}

.letter-top h2 { font-family: var(--sans); font-size: 1.35rem; }

.letter-meta-grid {
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
  font-family: var(--sans);
  font-size: 0.98rem;
}

.letter-meta-grid div { display: flex; gap: 8px; }
.letter-meta-grid span { color: #555; min-width: 6.5rem; }
.letter-content .signoff { margin-top: 22px; }

.pay-badge, .btn-mail span {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
}

.pay-badge, .btn-mail span { background: rgba(255,255,255,0.25); color: white; margin: 0 0 6px; }
.btn-mail span { margin: 0 0 0 8px; }

.plan-price { align-items: flex-start; }

.print-only { display: none; }

.letter-paper h2 {
  font-family: var(--sans);
  font-size: 1.25rem;
  color: var(--sage-800);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.letter-content p { margin: 0 0 14px; }
.letter-content ul { margin: 0 0 14px; padding-left: 1.3rem; }
.letter-content li { margin: 6px 0; }

.attach {
  background: var(--sage-50);
  border: 1px solid var(--sage-100);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.attach h3 {
  font-family: var(--sans);
  font-size: 0.98rem;
  margin-bottom: 10px;
  color: var(--sage-800);
}

.attach-list { list-style: none; margin: 0; padding: 0; }
.attach-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0;
  line-height: 1.4;
}
.tick {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 4px;
  background: var(--sage-600, #3d6b4f);
  box-shadow: inset 0 0 0 2px white;
  position: relative;
}
.tick::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Letter page: one calm column — Copy / Print / Mark quiet, green Pre-Filled, blank secondary, Click to Send last (copper). */
.letter-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 16px;
  padding: 0;
  width: min(520px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.free-line, .paid-line {
  display: grid;
  gap: 8px;
  align-items: stretch;
}

.free-line { grid-template-columns: 1fr; }
.paid-line { grid-template-columns: 1fr; }
.offer-block { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }

.letter-actions .btn-primary,
.letter-actions .btn-secondary,
.letter-actions .btn-mail,
.letter-actions .btn-copy-note,
.letter-actions .btn-send {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  white-space: normal;
  padding: 12px 18px;
}
.letter-actions .btn-primary,
.letter-actions .btn-secondary,
.letter-actions .btn-mail {
  border-radius: 14px;
}
/* Free path: soft sage wash + subline — distinct from Print/Mark, not a second solid primary. */
.letter-actions .btn-copy-note {
  background: var(--sage-50, #f2f7f4);
  border-color: var(--sage-700);
  border-radius: 14px;
}
.letter-actions .btn-copy-note:hover {
  background: #e7f0ea;
}
.letter-actions .send-cta {
  margin-top: 6px;
}

.btn-caption {
  margin: 8px 4px 0;
  color: var(--hint);
  font-size: 0.92rem;
  line-height: 1.35;
}

.paid-line > div { min-width: 0; }
.sign-script {
  font-family: var(--script);
  font-weight: 400;
  font-size: 2.45rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--ink);
  display: inline-block;
  min-width: 12rem;
  margin-top: 4px;
  padding-bottom: 0.08em;
}

/* Must beat .modal-card { width: min(680px…) } later in this file — same specificity lost before. */
.modal-card.paywall-card,
.modal-card.calls-detail { width: min(960px, 100%); }

.pdf-kicker {
  width: min(720px, 100%);
  margin: 0 auto 12px;
  color: var(--slate);
}

.pdf-sign {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  padding-top: 8px;
}
.pdf-sign span {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hint);
}
.pdf-sign strong { display: block; margin-top: 12px; }
.sign-script.unsigned { font-family: var(--sans); font-style: italic; font-weight: 400; color: var(--hint); font-size: 1.2rem; border-bottom-style: dashed; padding-bottom: 0; }

.pdf-screen {
  position: fixed;
  top: var(--header-h, 118px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  overflow: auto;
  background: #e7e1d6;
  padding: 8px 16px 48px;
}

.pdf-back {
  width: min(860px, 100%);
  margin: 4px auto 8px;
}

.form-stage {
  position: relative;
  width: min(860px, 100%);
  margin: 12px auto 28px;
  background: white;
  container-type: inline-size;
  box-shadow: 0 10px 30px rgba(40, 32, 22, 0.12);
}

.form-stage img { width: 100%; height: auto; display: block; }

/* One Gate 1 column: title, offers, fill strip share the same width. Form page image stays full sheet width. */
.form-gate {
  width: min(520px, 100%);
  margin: 0 auto 8px;
}
.form-gate .form-offers,
.form-gate .form-file-bar,
.form-gate .form-file-actions {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.form-gate .page-title,
.form-gate .lede,
.form-gate .kicker {
  text-align: left;
}
.form-ink-lock {
  margin: 8px 0 0;
}
/* Blank path: same centred column as form-offers / Gate 1 — not full-bleed across the pdf-screen. */
.form-file-bar {
  display: grid;
  gap: 12px;
  width: min(520px, 100%);
  margin: 12px auto;
}
.pdf-screen > .pdf-kicker,
.pdf-screen > .form-file-bar + .signing-row,
.pdf-screen .form-file-bar .signing-row {
  width: min(520px, 100%);
  margin-left: auto;
  margin-right: auto;
}
.pdf-screen > .signing-row {
  width: min(520px, 100%);
}
.form-offer-free {
  background: var(--card);
}
.form-offers {
  width: min(520px, 100%);
  margin: 8px auto 4px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}
.form-offers-stack {
  grid-template-columns: 1fr;
  gap: 10px;
}
.form-owned-chip {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--sage-50, #f2f7f4);
  color: var(--sage-700);
  font-size: 0.92rem;
  font-weight: 650;
}
.form-sign-block {
  width: 100%;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}
.form-sign-label { margin: 0 0 4px; }
.form-sign-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}
.form-sign-row .field-input {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
}
.form-sign-placed { margin: 4px 0 6px; }
.form-offer-free-first,
.form-offer-guest {
  background: linear-gradient(180deg, var(--sage-50, #f2f7f4), #fff);
  border-color: var(--sage-700);
}
.form-offer-included {
  background: #fff;
}
/* Quiet Concierge: text only — no peach promo box (trust). */
.form-concierge-quiet {
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hint);
  font-size: 0.92rem;
  line-height: 1.4;
}
.form-concierge-quiet .text-btn {
  color: var(--sage-700);
  font-weight: 650;
}
.form-instr {
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--sage-50, #f2f7f4);
  border: 1px solid #c5d6cc;
}
.form-instr .signing-row,
.form-instr .pdf-kicker {
  margin: 0 0 8px;
}
.form-instr .signing-row:last-child,
.form-instr .pdf-kicker:last-child {
  margin-bottom: 0;
}
.form-fill-strip {
  margin: 10px 0 0;
}
.form-fill-lede {
  margin: 0 0 10px;
  color: var(--slate, #384841);
  font-weight: 650;
}
.form-fill-pills {
  margin: 0 0 10px;
}
.form-fill-sin,
.form-fill-wet,
.form-fill-sign-hint {
  margin: 0 0 6px;
}
.form-fill-critical {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--copper, #a66b4a) 12%, #fff);
  color: var(--slate, #384841);
  font-size: 0.95rem;
  line-height: 1.4;
}
.form-fill-critical strong {
  font-weight: 650;
}
.form-ink-sign {
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
}
.form-strip-link {
  margin: 0 0 12px;
}
.send-gaps {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--copper, #a66b4a) 12%, #fff);
  color: var(--slate, #384841);
  font-size: 0.95rem;
  line-height: 1.45;
}
.form-quiet-sign {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line, #e5dfd5);
}
.form-quiet-sign .form-sign-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.form-quiet-sign .field-input {
  flex: 1 1 160px;
}
.form-offers-stack .form-offer.all {
  align-items: flex-start;
  gap: 4px;
}
.form-offers-stack .offer-cta {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 12px;
  background: var(--sage-700);
  color: #fff;
  font-weight: 700;
}
.form-offer-or {
  margin: 2px 0 0;
  color: var(--slate);
  font-size: 0.95rem;
}
.form-file-actions-quiet {
  margin-top: 4px;
}
.form-offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  margin: 0;
  padding: 16px 18px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: none;
}
button.form-offer {
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
}
.form-offer .offer-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hint);
}
.form-offer .offer-price {
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--sage-900);
}
.form-offer .offer-detail {
  color: var(--slate);
  font-size: 0.95rem;
  line-height: 1.35;
}
/* Pack primary stays calm white + sage — not a dark pop-up card. */
.form-offer.all {
  background: #fff;
  border-color: var(--sage-700);
  color: var(--ink);
  justify-content: flex-start;
}
.form-offer.all .offer-kicker { color: var(--sage-700); }
.form-offer.all .offer-price { color: var(--sage-900); }
.form-offer.all .offer-detail { color: var(--slate); opacity: 1; }
.form-offer .form-file-actions {
  width: 100%;
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Blank path: clean 2×2 Open / Save / Print / Email */
.form-offer .form-file-actions.form-file-actions-2x2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-offer .btn-primary,
.form-offer .btn-secondary {
  min-height: 42px;
  padding: 8px 10px;
  font-size: 0.95rem;
}
.form-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: min(520px, 100%);
  margin: 8px auto 0;
}

.form-ink {
  position: absolute;
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 2.15cqw;
  line-height: 1;
  color: #16324f;
  overflow: hidden;
  white-space: nowrap;
}

.form-ink.gap {
  color: #9a3412;
  font-style: italic;
  font-size: 1.8cqw;
}

.form-ink.sign-script {
  font-family: var(--script);
  font-weight: 400;
  font-size: 3.6cqw;
  margin: 0;
  border: 0;
  min-width: 0;
  display: block;
  line-height: 1;
}

.pdf-page {
  width: min(720px, 100%);
  margin: 0 auto 18px;
  background: white;
  border-radius: 4px;
  padding: 36px 40px 48px;
  box-shadow: var(--shadow);
}
.disclaimer {
  background: var(--sage-50, #f3f6f2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
  line-height: 1.45;
}

.btn-primary span,
.btn-secondary span,
.btn-mail span {
  display: inline-block;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--sage-100);
  color: var(--sage-800);
  line-height: 1.2;
}

.btn-primary span { background: rgba(255, 255, 255, 0.22); color: white; }

@media (max-width: 800px) {
  .free-line { grid-template-columns: 1fr 1fr; }
  .letter-actions .btn-primary,
  .letter-actions .btn-secondary,
  .letter-actions .btn-mail { white-space: normal; }
}

.gov-form-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 2px solid #2c3e50;
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.gov-form-header strong {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #555;
}

.gov-form-header h2 {
  font-family: var(--sans);
  font-size: 1.35rem;
  font-weight: 800;
  margin-top: 4px;
}

.form-code-pill {
  background: #2c3e50;
  color: white;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 4px;
  white-space: nowrap;
}

.gov-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #bdc3c7;
}

.gov-field-box { background: white; padding: 12px 14px; }

.gov-field-box label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #7f8c8d;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.gov-field-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2c3e50;
}
.gov-field-asks {
  margin-top: 1px;
  background: white;
  padding: 12px 14px;
  border: 1px solid #bdc3c7;
  border-top: 0;
}
.gov-field-asks label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #7f8c8d;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.gov-field-asks .gov-field-value { font-weight: 600; }

.gov-field-box input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #c4b8a4;
  border-radius: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 2px 0 4px;
  box-shadow: none;
}

.form-note { margin: 12px 0 0; color: var(--slate); font-size: 0.95rem; }

.modal-overlay {
  position: fixed;
  top: var(--header-h, 118px);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(27, 45, 37, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 90;
  padding: 16px;
  overflow: auto;
}

.modal-card {
  width: min(680px, 100%);
  margin: 16px auto 32px;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.modal-body { overflow: visible; }

.ask-screen {
  position: fixed;
  top: var(--header-h, 118px);
  left: 0;
  right: 0;
  bottom: 0;
  /* Above task/detail modals; site header stays above so Account stays clickable. */
  z-index: 95;
  overflow: auto;
  background: var(--linen);
  padding: 28px 20px 72px;
}
.ask-screen .modal-escape { z-index: 105; }

.copy-actions {
  display: grid;
  gap: 14px;
  margin: 18px 0 8px;
  justify-items: stretch;
}
.btn-copy-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  border: 1px solid var(--sage-700);
  border-radius: 999px;
  background: var(--card);
  color: var(--sage-900);
  font: inherit;
  font-weight: 650;
  line-height: 1.25;
  cursor: pointer;
  box-shadow: none;
}
.btn-copy-note:hover {
  background: var(--sage-50);
}
.btn-copy-note .btn-sub,
.btn-copy-note span.btn-sub {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--hint);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
}
.copy-reassure {
  margin: 0;
  text-align: center;
}
.copy-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.note-paywall .lede {
  margin: 0 0 16px;
  color: var(--slate);
}
.note-rule {
  height: 1px;
  margin: 24px 0 18px;
  border: 0;
  background: var(--line);
}
.note-concierge {
  display: grid;
  gap: 10px;
  padding: 18px 16px 16px;
  border-radius: 16px;
  border: 1px solid var(--amber-line);
  background: linear-gradient(180deg, var(--amber-soft), #fff);
}
.note-concierge .kicker { margin: 0; }
.note-concierge h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
}
.note-concierge p { margin: 0; color: var(--slate); }
.btn-send-in-sheet {
  flex-direction: column;
  gap: 4px;
  min-height: 64px;
  margin-top: 6px;
  font-size: 1.15rem;
}
.btn-send-in-sheet .btn-sub {
  display: block;
  font-size: 0.82rem;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0;
  text-transform: none;
  background: none;
  padding: 0;
  border-radius: 0;
}
.paywall-card .modal-body {
  display: grid;
  gap: 16px;
}
.paywall-card .tier-list { margin-top: 4px; }
.part-of-concierge { color: var(--hint); font-weight: 500; }

.modal-escape {
  position: fixed;
  /* Sit just under the sticky header (not under it) so Close is never trapped behind Account. */
  z-index: 105;
  top: calc(var(--header-h, 118px) + 8px);
  right: 12px;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.modal-header, .modal-body, .modal-footer { padding: 22px 24px; }


.modal-body input::placeholder,
.modal-body textarea::placeholder {
  color: var(--hint);
  font-size: 1.05rem;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--linen);
  border-bottom: 1px solid var(--line);
}

.modal-header h3 { font-size: 1.6rem; }

.modal-close-btn {
  flex: none;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--slate);
}

.tier-list { display: grid; gap: 10px; margin: 18px 0; }
.tier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
}
.tier > span { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.tier strong { display: block; font-size: 1.05rem; }
.tier .quiet { display: block; line-height: 1.35; }
.tier b { flex: none; align-self: center; font-size: 1.5rem; color: var(--amber); white-space: nowrap; }
.tier.on { border-color: var(--sage-700); background: var(--sage-50); }
.tier.tier-all,
.tier.tier-all.on {
  background: var(--amber);
  color: white;
  border-color: var(--amber);
}
.tier.tier-all:hover { background: #a65210; border-color: #a65210; }
.tier.tier-all .quiet { color: #fdf4e7; }
.tier.tier-all b { color: white; }
.tier.tier-all.on { outline: 3px solid #a65210; }
.include-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.include-grid div { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.include-grid strong { display: block; margin-bottom: 4px; }
.include-grid span { color: var(--slate); }
.include-stack {
  display: grid;
  gap: 12px;
  margin: 16px 0 20px;
}
.include-stack div {
  background: var(--sage-50);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 16px 14px;
}
.include-stack strong { display: block; margin-bottom: 6px; color: var(--sage-900); }
.include-stack span { color: var(--slate); font-size: 0.95rem; line-height: 1.4; }
.everything .lede { margin: 0 0 6px; color: var(--slate); font-size: 1.02rem; }
.everything .plan-footnote { margin: 0 0 14px; color: var(--hint); font-size: 0.9rem; }
.everything .send-task {
  margin: 14px 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--sage-50);
}
.everything .send-task-title { margin: 0 0 4px; }
.everything .send-task-line { margin: 0 0 8px; }
.everything .send-task .send-steps { margin: 0; }
.everything .btn-send-in-sheet { margin-top: 8px; }
.everything > .quiet { margin-top: 12px; text-align: center; }
.form-stack { display: grid; gap: 12px; }
@media (max-width: 700px) { .include-grid { grid-template-columns: 1fr; } }

.foot { margin-top: 28px; color: var(--hint); font-size: 0.95rem; }
.container.site-foot { padding: 0 0 48px; margin-top: -28px; }
/* Header links to the site pages */
.site-nav-bar { border-bottom: 1px solid var(--line); background: var(--linen); }
.site-nav { width: min(960px, calc(100% - 32px)); margin: 0 auto; display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 0; }
.site-nav-link { background: none; border: 0; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--slate); cursor: pointer; }
.site-nav-link:hover { background: var(--sage-50); color: var(--sage-900); }
.site-nav-link.on { color: var(--sage-900); background: var(--sage-100); }

/* Links to a page of this site look the same as the buttons they replaced */
a.brand-group, a.site-nav-link, a.category-tile, a.text-btn { text-decoration: none; color: inherit; }
a.text-btn { color: var(--sage-700); text-decoration: underline; text-underline-offset: 0.18em; }
a.site-nav-link { display: inline-block; color: var(--slate); }
a.site-nav-link:hover, a.site-nav-link.on { color: var(--sage-900); }
a.foot-tile { color: var(--ink); }
/* The site pages */
.site-wrap { max-width: 720px; margin: 0 auto; }
.site-page-head { margin: 8px 0 8px; }
.site-page-head h1 { font-size: 2.2rem; color: var(--sage-900); margin: 0 0 10px; }
.site-page-head .lede { margin: 0; font-size: 1.15rem; line-height: 1.5; color: var(--slate); }
.site-updated { margin: 10px 0 0; font-size: 0.92rem; }
.site-section { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.site-section h2 { font-size: 1.35rem; color: var(--sage-900); margin: 0 0 8px; }
.site-section p { line-height: 1.6; margin: 0 0 12px; }
.site-section .text-btn { padding: 0; text-decoration: underline; }
.site-more { margin: 32px 0 0; }
.site-more p { margin: 0; color: var(--slate); }
.site-more .text-btn { padding: 0; text-decoration: underline; }
.collect-where { color: var(--hint); font-size: 0.95rem; margin: 0 0 10px; }
.collect-list { list-style: none; margin: 0; padding: 0; }
.collect-list li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.collect-list li:last-child { border-bottom: 0; }
.collect-list span { color: var(--slate); }
.contact-form label { display: block; font-weight: 650; margin: 16px 0 6px; }
.contact-form label .quiet { font-weight: 500; }
textarea.contact-input { min-height: 9rem; }
.contact-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-error { color: #8a2f1b; min-height: 1.4em; margin: 8px 0; }
.contact-sent { background: var(--jade-50); border: 1px solid var(--jade-200); border-radius: 14px; padding: 20px; }

.foot-tiles { display: grid; grid-auto-rows: 1fr; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 22px 0 0; }
.foot-tile { min-height: 72px; min-width: 0; padding: 16px; color: var(--ink); font: inherit; overflow-wrap: anywhere; }
.foot-tile .tile-title { min-width: 0; overflow-wrap: anywhere; }
.foot p { margin: 0 0 4px; }

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--jade-600);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .header-inner, .container { width: min(960px, calc(100% - 24px)); }
  .header-inner {
    flex-wrap: wrap;
    align-items: flex-start;
    min-height: 0;
    padding: 10px 0 12px;
    gap: 10px;
  }
  .header-actions, .mode-toggle { width: 100%; }
  .mode-btn {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font-size: 0.92rem;
    line-height: 1.25;
    white-space: normal;
  }
  .brand-symbol { width: 40px; height: 40px; flex: none; }
  .brand-name { font-size: 1.15rem; }
  .container { padding: 18px 0 48px; }
  .sheet { padding: 16px 14px 22px; }
  .sheet-head, .estate-bar, .next-row, .progress-card, .page-title, .task-row, .item-row, .letter-top {
    flex-wrap: wrap;
  }
  .task-row > div:first-child { min-width: 0; flex-basis: 100%; }
  .task-side { justify-content: flex-start; }
  .next-row .btn-primary, .estate-actions .btn-primary, .estate-actions .btn-secondary { width: 100%; }
  .doors { grid-template-columns: 1fr; display: grid; }
  .hero h1, .ask h1, .page-title h1 { font-size: 1.85rem; }
  .ask { padding-top: 12px; }
  .ask input:not([type="file"]),
  .ask textarea,
  .panel input:not([type="file"]),
  .panel textarea { font-size: 1.35rem; }
  .tiles-grid { grid-template-columns: 1fr 1fr; }
  .category-tile, .tile-title { min-width: 0; overflow-wrap: break-word; }
  .category-tile { padding: 14px; min-height: 112px; }
  .foot-tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .site-nav { width: min(960px, calc(100% - 24px)); flex-wrap: nowrap; overflow-x: auto; }
  .site-nav-link { white-space: nowrap; padding: 8px 10px; }
  .site-page-head h1 { font-size: 1.85rem; }
  /* On a phone the page title, its intro and the date sit in the middle. The Back link and the sections stay left. */
  .site-page-head, .site-page-head h1, .site-page-head .lede, .site-page-head .site-updated { text-align: center; }
  .tile-top { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
  .tile-title { font-size: 1.2rem; hyphens: manual; }
  .free-line, .paid-line, .include-grid, .gov-fields-grid { grid-template-columns: 1fr; }
  .letter-actions { padding: 0; }
  .letter-actions .btn-primary,
  .letter-actions .btn-secondary,
  .letter-actions .btn-mail,
  .offer-row .btn-secondary,
  .offer-row .btn-mail { white-space: normal; }
  .letter-paper, .pdf-page { padding: 16px; }
  .letter-meta-grid div { flex-wrap: wrap; }
  .letter-meta-grid span { min-width: 0; }
  .modal-overlay { padding: 8px; }
  .modal-card { width: 100%; margin: 8px auto 24px; }
  .item-actions { width: 100%; justify-content: flex-end; }
  /* Banner: lock on top, then each line centered, no separator dots. */
  .trust-strip { flex-direction: column; justify-content: center; align-items: center; gap: 2px; text-align: center; padding: 8px 12px; }
  .trust-lock { margin: 0; }
  .trust-strip .trust-item + .trust-item::before { display: none; }
  /* Header: brand + Account on one row; mode toggle full width under. Beta off on phones. */
  .beta { display: none; }
  .header-inner {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
  }
  .brand-group { flex: 1 1 auto; min-width: 0; }
  .header-inner > .brand-group { margin-right: 0; }
  .account-btn {
    flex: 0 0 auto;
    min-height: 34px;
    min-width: 0;
    padding: 5px 10px;
    font-size: 0.88rem;
  }
  .header-inner > .mode-toggle {
    flex: 1 1 100%;
    width: 100%;
  }
  .header-actions { flex-wrap: wrap; justify-content: center; }
  .header-link { flex: none; min-width: 5.5rem; max-width: 100%; text-align: center; }
  .site-nav { flex-wrap: wrap; overflow: visible; justify-content: center; }
}

@media print {
  .no-print, .site-foot, .site-header, .letter-modal, .modal-overlay, .stage-path-dock { display: none !important; }
  body { background: white; }
  .pdf-screen { position: static; background: white; padding: 0; overflow: visible; }
  .pdf-page { box-shadow: none; width: auto; padding: 0; }
  .print-only {
    display: block !important;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
}

/* grokbot-cleanup: one close control per dialog (the × in the header, plus Esc) */
.modal-escape { display: none !important; }
.modal-header { position: sticky; top: 0; z-index: 2; border-radius: var(--radius) var(--radius) 0 0; }

/* Account / Sign in pill stays short; email is not shown in the header. */
.header-link:not(.account-btn) {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Date picker: month, day and year */
.date-pick {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 22px;
  align-items: end;
  margin-top: 8px;
}
.date-part { display: grid; gap: 2px; min-width: 0; }
.date-part span { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; color: var(--hint); }
.date-pick select,
.ask .date-pick input:not([type="file"]) {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 2px solid #c4b8a4;
  border-radius: 0;
  outline: none;
  padding: 8px 0 12px;
  margin: 0;
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1.3;
  color: var(--ink);
}
.date-pick select {
  cursor: pointer;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%232d4b3e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
}
.date-pick select:focus,
.ask .date-pick input:not([type="file"]):focus { border-bottom-color: var(--jade-600); box-shadow: 0 2px 0 0 var(--jade-600); background-color: var(--jade-50); }
.date-pick select:focus-visible { outline: 3px solid var(--jade-600); outline-offset: 4px; }
.date-read { min-height: 1.6rem; width: min(720px, 100%);
  margin: 14px auto 0; font-size: 1.05rem; color: var(--sage-700); }
@media (max-width: 560px) {
  .date-pick { gap: 14px; }
  .date-pick select, .ask .date-pick input:not([type="file"]) { font-size: 1.35rem; }
}

/* Google's own button look: white, thin grey border, their G. */
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 0 16px;
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0; border-radius: 999px;
  font: 500 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer;
}
.google-btn:hover { background: #f8f9fa; border-color: #c6c9cc; }
.google-btn:focus-visible { outline: 3px solid #4285F4; outline-offset: 2px; }
.google-btn .google-g { flex: none; }

/* First screen: two plain doors, the grief door first. */
.hero .quiet { margin-bottom: 26px; }
.door { min-height: 210px; }
.door.passed { border-color: var(--sage-700); background: linear-gradient(180deg, #fff, var(--sage-50)); }
.door.plan { border-color: var(--line); background: var(--card); }
.door.plan .door-go { background: transparent; color: var(--sage-800); border: 2px solid var(--sage-700); }
.door strong { margin-top: 0; }
.hero-promise { text-align: center; color: var(--hint); font-weight: 600; margin: 22px 0 0; }
.hero .quiet { margin-bottom: 14px; }
.hero-pick { text-align: center; color: var(--hint); font-weight: 600; margin: 0 auto 24px; }
.door-kicker { display: block; color: var(--hint); font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; }
.story-sign { margin-top: 18px; font-style: normal; font-weight: 600; color: var(--sage-800); }

/* Same centred column as blank actions / Gate 1 (form pages stay 860). */
.form-source {
  width: min(520px, 100%);
  margin: 14px auto 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--slate);
  overflow-wrap: anywhere;
}

.form-source a {
  color: inherit;
  font-weight: 650;
}

.quiet-prefill-price {
  display: block;
  margin-top: 4px;
  color: var(--slate);
}
.form-blank-foot {
  width: min(520px, 100%);
  margin: 18px auto 8px;
  text-align: left;
}

.form-handling {
  width: min(520px, 100%);
  margin: 8px auto 0;
}
.form-handling .btn-secondary {
  width: 100%;
}

.form-offer .offer-price s {
  opacity: 0.55;
}

/* Notes and callouts are one even soft box: the same inset on every side, one radius, a full 1px border, no left bar. */
.needs-line { margin: 8px 0 0; padding: 12px 14px; border: 1px solid var(--line); background: var(--sage-50); border-radius: 12px; color: var(--slate); font-size: 0.95rem; line-height: 1.45; text-align: left; }
.needs-line strong { color: var(--ink, #1b2d25); }
.needs-original, .needs-person { border-color: #e6c9a6; background: #fdf6ec; }
.needs-copy { border-color: var(--jade-200); background: var(--jade-50); }

/* grokbot-cleanup K: the phone company picker */
.provider-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.provider-btn {
  font: inherit; font-size: 1rem; cursor: pointer;
  background: var(--card); color: var(--sage-900);
  border: 2px solid var(--line); border-radius: 999px; padding: 8px 16px; min-height: 44px;
}
.provider-btn:hover, .provider-btn:focus-visible { border-color: var(--sage-700); background: var(--sage-50); }
.provider-route { margin: 8px 0; padding: 12px 14px; border: 1px solid var(--line); background: var(--sage-50); border-radius: 12px; }
.provider-route p { margin: 4px 0 0; font-size: 1rem; }
.provider-route .help-steps { margin: 8px 0 0; }

/* grokbot-cleanup L: arriving at the map from a task, and the way back */
.back-link {
  font: inherit; font-size: 1rem; cursor: pointer; background: none; border: 0;
  color: var(--sage-700); text-decoration: underline; padding: 8px 0; min-height: 44px; text-align: left;
}
.back-link:hover, .back-link:focus-visible { color: var(--sage-900); }
/* Arrival (one shared helper, arrive() in app.js): the card the person landed on gets a jade frame that fades.
   Text on it is ink or slate on a very light jade, 9:1 or better. The frame is 2px jade (about 5:1 on white). */
.arrive {
  box-shadow: 0 0 0 2px var(--jade-600), 0 0 0 9px rgba(23, 127, 93, 0.16);
  background-color: var(--jade-50);
  border-radius: 14px;
  animation: kg-arrive 4.5s ease-out 1 forwards;
}
/* Primary/secondary pills: keep sage fill, sans, and full pill radius — jade frame only. */
.btn-primary.arrive,
.btn-secondary.arrive,
.btn-copy-note.arrive,
.btn-send.arrive {
  font-family: var(--sans);
  border-radius: 999px;
  animation: kg-arrive-btn 4.5s ease-out 1 forwards;
}
.btn-primary.arrive {
  background-color: var(--sage-700);
  color: #f7f3ec;
}
.btn-secondary.arrive {
  background-color: white;
  color: var(--ink);
}
@keyframes kg-arrive {
  0%, 72% { box-shadow: 0 0 0 2px var(--jade-600), 0 0 0 9px rgba(23, 127, 93, 0.16); background-color: var(--jade-50); }
  100% { box-shadow: 0 0 0 2px rgba(23, 127, 93, 0), 0 0 0 9px rgba(23, 127, 93, 0); background-color: transparent; }
}
@keyframes kg-arrive-btn {
  0%, 72% { box-shadow: 0 0 0 2px var(--jade-600), 0 0 0 9px rgba(23, 127, 93, 0.16); }
  100% { box-shadow: 0 0 0 2px rgba(23, 127, 93, 0), 0 0 0 9px rgba(23, 127, 93, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .arrive { animation: none; }
  .btn-primary.arrive { background-color: var(--sage-700); }
  .btn-secondary.arrive { background-color: white; }
}
#map-detail, #stage-detail, #plans, .letter-top, [data-arrive] { scroll-margin-top: calc(var(--header-h, 0px) + 14px); }

/* Saved items: the same soft jade row everywhere (lighter than the arrival frame). Edit is a link, Delete is quieter. */
.item-row.saved, .on-file-card {
  background-color: var(--jade-50);
  border: 1px solid var(--jade-200);
}
.item-row.saved.is-example {
  position: relative;
  padding-top: 22px;
}
.example-pill {
  position: absolute;
  top: 8px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--sage-700);
  background: #fff;
  color: var(--sage-800);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
}
.on-file-card:hover { background: var(--jade-100); }
.item-actions .delete-btn { color: var(--hint); font-weight: 500; font-size: 0.95rem; }
.item-actions .delete-btn:hover, .item-actions .delete-btn:focus-visible { color: var(--slate); }

/* The calm line that stands in for the plan cards while someone is arriving from a task or the card is empty */
.plans-line { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 14px 0 0; color: var(--slate); }
.plans-line .text-btn { padding: 8px 0; }

/* grokbot-cleanup I: plan card tags */

/* grokbot-cleanup H: sign-in code shown on screen, and the beta note */
.signin-code { margin: 12px 0; padding: 12px 16px; background: var(--sage-50); border: 2px solid var(--sage-700); border-radius: 12px; font-size: 1.15rem; }
.signin-code strong { letter-spacing: 0.2em; font-size: 1.5rem; }
.beta-note { margin: 4px 0 12px; }

/* A quiet line when Next cannot go yet */
.nudge { margin: 8px 0 0; color: var(--hint, #5c6e66); font-size: 0.95rem; }

/* Click to Send: the strongest action on a task where it exists. The button, one true line, then the price. */
.send-cta { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 4px 0 10px; }
.btn-send {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 88px; padding: 16px 22px;
  background: var(--amber); color: #fff; border: 0; border-radius: 999px;
  font-size: 1.3rem; font-weight: 800; letter-spacing: 0.01em; cursor: pointer;
  box-shadow: 0 6px 16px rgba(168, 90, 20, 0.28);
}
.btn-send:hover { background: #8f4a0f; }
.send-line { margin: 0; color: var(--ink); font-weight: 600; text-align: center; }
.send-not-yet { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--paper-2, #f4efe6); color: var(--ink); font-size: 0.95rem; text-align: left; }
.send-price { margin: 0; color: var(--slate); font-size: 0.95rem; text-align: center; }
.send-price s { color: var(--hint); }
.send-price strong { color: var(--sage-800, var(--sage-700)); }
.in-person { margin: 6px 0 0; color: var(--slate); font-size: 0.95rem; }
.send-price-line { margin: 0 0 8px; color: var(--slate); }
.send-price-line s { color: var(--hint); }
.everything h3 { margin: 16px 0 6px; }
.send-does, .send-steps { margin: 0 0 8px; padding-left: 1.3rem; color: var(--slate); }
.send-does li, .send-steps li { margin: 0 0 6px; }
.send-steps { font-weight: 500; }

/* "This one deserves a call": a calm jade note above Click to Send, and a warm Call button beside it.
   Click to Send stays the biggest thing on the task. The call is clearly second, never a gate. */
.send-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.send-row .btn-send { flex: 3 1 15rem; width: auto; }
.call-buttons { flex: 1 1 11rem; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.btn-call {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 10px 18px; border-radius: 999px; box-sizing: border-box;
  background: var(--jade-50); color: var(--jade-700); border: 2px solid var(--jade-600);
  font-size: 1.05rem; font-weight: 700; text-decoration: none; cursor: pointer;
}
.btn-call:hover, .btn-call:focus-visible { background: var(--jade-100); }
/* tel: Call only makes sense on a phone / touch device */
@media (hover: hover) and (pointer: fine) {
  .btn-call { display: none !important; }
}
.call-focus-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.call-focus-chip {
  min-height: 36px; padding: 4px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.95rem;
  background: var(--card); color: var(--ink); border: 1.5px solid var(--line);
}
.call-focus-chip:hover, .call-focus-chip:focus-visible { border-color: var(--jade-600); background: var(--jade-50); }
.call-focus-chip.on, .call-focus-chip[aria-pressed="true"] {
  border-color: var(--jade-600); background: var(--jade-50); color: var(--sage-800);
  box-shadow: inset 0 0 0 1px var(--jade-600);
}
.call-note-actions { margin: 8px 0 0; }
.call-notes { display: grid; gap: 12px; margin: 0; }
.call-note,
.plan-call-example {
  background: var(--jade-50);
  border: 1px solid var(--jade-200);
  border-radius: 14px;
  padding: 16px;
  text-align: left;
}
.call-note p { margin: 0 0 6px; }
.call-head span { font-weight: 500; color: var(--slate); }
.call-lede { color: var(--ink); }
.call-why { color: var(--slate); font-size: 0.95rem; }
.call-words { margin: 8px 0; padding: 12px 14px; border: 1px solid var(--jade-200); background: #fff; border-radius: 12px; font-family: var(--serif); color: var(--ink); }
.call-words p { margin: 0 0 4px; }
.call-another { padding: 8px 0; }
.call-edit-btn { padding: 6px 0; margin: 0 0 4px; display: inline-block; }
.call-words-block { display: grid; gap: 2px; justify-items: start; }
textarea.field-input.call-edit { min-height: 8rem; margin: 8px 0 8px; }
.parent-word { margin: 10px 0 12px; }
.parent-word-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.parent-word-pick {
  min-height: 40px; padding: 6px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600;
  background: var(--card); color: var(--ink); border: 1.5px solid var(--line);
}
.parent-word-pick:hover, .parent-word-pick:focus-visible { border-color: var(--jade-600); background: var(--jade-50); }
.parent-word-pick.on, .parent-word-pick[aria-pressed="true"] {
  border-color: var(--jade-600); background: var(--jade-50); color: var(--sage-800);
  box-shadow: inset 0 0 0 1px var(--jade-600);
}
.call-roster {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--jade-200);
  background: var(--jade-50);
  border-radius: 14px;
}
.call-roster-title { margin: 0 0 10px; }
.call-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.call-chips-scroll {
  max-height: min(50vh, 22rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}
.call-chip {
  min-height: 36px; padding: 4px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.95rem;
  background: var(--jade-600); color: #fff; border: 2px solid var(--jade-600);
}
.call-chip:hover, .call-chip:focus-visible { background: var(--jade-700); border-color: var(--jade-700); color: #fff; }
.call-chip.on, .call-chip[aria-pressed="true"] { background: var(--jade-600); border-color: var(--jade-600); color: #fff; }
.call-chip.done { background: var(--sage-100); color: var(--sage-800); border-color: var(--jade-200); }
.call-chip.done:hover, .call-chip.done:focus-visible { background: var(--jade-50); border-color: var(--jade-600); color: var(--sage-800); }
.call-chip.done.on, .call-chip.done[aria-pressed="true"] { background: var(--jade-600); border-color: var(--jade-600); color: #fff; }
.call-roster-hint { margin: 10px 0 0; font-size: 0.9rem; }
.login-pick { display: grid; gap: 4px; margin-bottom: 4px; }
.login-help-link { margin: 0 0 8px 4px; }
.call-done-tag { margin-left: 8px; font-size: 0.85rem; font-weight: 600; color: var(--sage-700); }
.call-note-done { margin-top: 12px; }
.call-note-done .btn-secondary,
.call-note-done .btn-primary { width: 100%; }
.call-note.is-done { border-color: var(--jade-200); background: var(--sage-50); }
.call-on-list { margin: 4px 0 10px; }
.call-pickup { margin: 8px 0 0; color: var(--slate); font-size: 0.95rem; text-align: left; }

/* Service details form (Funeral Wishes) — same field branding as calls */
.person-form .service-fields {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}
.person-form .service-fields .field { margin: 0; }
.person-form .service-fields .field-label { margin: 14px 0 0; }
.person-form .big-list { margin: 12px 0 4px; }

/* Funeral Wishes map card */
.arrangements-board {
  display: grid;
  gap: 16px;
}
.arrangements-block {
  padding: 12px 0;
  border-top: 1px solid var(--line, #e5dfd5);
}
.arrangements-block:first-child { border-top: 0; padding-top: 0; }
.arrangements-block .map-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 8px;
}
.arrangements-block .map-add { margin-top: 8px; }
.notify-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.notify-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--jade-50, #f1faf6);
  border: 1px solid var(--jade-200, #bfe6d6);
  cursor: pointer;
}
.notify-row input { margin-top: 4px; }
.notify-row span { display: grid; gap: 2px; min-width: 0; }
.social-post2 {
  margin: 16px 0 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--muted, #f3efea);
  border: 1px solid var(--line, #e5dfd5);
}
.social-post2 .note-sheet { margin: 8px 0 12px; }

/* ONE layout for planning + after: main column, sticky roster (same proportions). */
.calls-flow,
.people-with-calls {
  display: grid;
  gap: 1.25rem;
  align-items: start;
  width: 100%;
}
.calls-flow .calls-picker-main,
.people-with-calls .calls-picker-main {
  min-width: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}
/* Edit card in the picker matches the jade call / roster tiles. */
.calls-flow .call-row,
.calls-picker .call-row {
  border-radius: 14px;
  padding: 16px;
  background: var(--jade-50);
  border: 1px solid var(--jade-200);
  box-shadow: none;
}
/* After guide: call + roster use the full task width, like the planning panel. */
.task-calls-panel {
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
  margin-top: 10px;
}
.task-row-calls .task-calls-panel .calls-flow {
  margin: 0;
}
@media (min-width: 900px) {
  .calls-flow,
  .people-with-calls {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem);
    gap: 1.25rem;
  }
  .call-roster-aside {
    position: sticky;
    top: calc(var(--header-h, 72px) + 1rem);
    margin: 0;
    align-self: start;
  }
}
@media (max-width: 899px) {
  .call-roster-aside { order: -1; }
  .calls-flow .call-roster-aside,
  .people-with-calls .call-roster-aside {
    position: static;
  }
}

/* The picker */
.calls-picker { margin: 16px 0 4px; }
.call-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.call-pick {
  min-height: 44px; padding: 8px 16px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600;
  background: var(--card); color: var(--sage-800); border: 2px solid var(--line);
}
.call-pick:hover, .call-pick:focus-visible { border-color: var(--jade-600); background: var(--jade-50); }
.call-pick.on, .call-pick[aria-pressed="true"] {
  background: var(--jade-600); color: #fff; border-color: var(--jade-600);
}
.call-pick.on:hover, .call-pick[aria-pressed="true"]:hover,
.call-pick.on:focus-visible, .call-pick[aria-pressed="true"]:focus-visible {
  background: var(--jade-700); border-color: var(--jade-700); color: #fff;
}
.call-rows { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 10px; }
.call-row { padding: 12px 16px; border-radius: 14px; display: grid; gap: 8px; }
.call-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.call-summary { margin: 6px 0 0; }
.calls-picker .ask-ok { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }
@media (max-width: 700px) {
  .send-row .btn-send { flex: 1 1 100%; }
  .call-buttons { flex: 1 1 100%; }
}
.call-note .text-btn { padding: 0; display: inline; min-height: 0; }
.call-note .call-another { display: inline-block; padding: 6px 0; margin: 0 0 4px; }
.call-note .quiet { margin: 4px 0 0; line-height: 1.4; }

/* Many people on the call list: one shared note, quiet short lines */
.call-compact { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.call-compact-row { padding: 8px 0; border-top: 1px solid var(--jade-200); }
.call-compact-row .call-words { margin: 4px 0; }
.call-compact-row p { margin: 0 0 2px; }


/* ONE boxed field, used everywhere a form sits on a card, sheet or page: sign-in, contact, the call list, the signature,
   the letter and note editors. (The big underlined line is for the one-question-at-a-time steps and stays as it is.)
   Same radius, border, inset, font and jade focus everywhere; scripts/test-fields.js holds it to that. */
.field-input.field-input:not([type="file"]) {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  margin: 0;
  padding: 12px 14px;
  background: white;
  color: var(--ink);
  border: 1px solid #c4b8a4;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.4;
  outline: none;
  text-transform: none;
}
textarea.field-input.field-input { min-height: 7rem; line-height: 1.45; resize: vertical; }
.field-input::placeholder { color: var(--hint); }
.field-input.field-input:focus, .field-input.field-input:focus-visible {
  outline: none;
  border-color: var(--jade-600);
  background-color: var(--jade-50);
  box-shadow: 0 0 0 3px var(--jade-200);
}
.field { display: grid; gap: 6px; min-width: 0; }
.field .field-label { font-weight: 650; color: var(--ink); font-size: 1rem; }
.field-label em { font-style: normal; font-weight: 500; color: var(--hint); }
.signin-choices label { font-weight: 650; }

/* One small quiet button: Remove, and the like. A real button, not a bare link. */
.btn-quiet {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 18px; width: auto;
  border-radius: 999px; border: 1.5px solid var(--line); background: white; color: var(--sage-800);
  font: inherit; font-weight: 650; cursor: pointer; text-decoration: none;
}
.btn-quiet:hover, .btn-quiet:focus-visible, .btn-quiet:active { border-color: var(--sage-700); background: var(--sage-50); color: var(--sage-900); }

/* The call list person card */
.call-row { padding: 16px; gap: 14px; grid-template-columns: minmax(0, 1fr); justify-content: stretch; align-items: stretch; }
.call-row-head { align-items: center; }
.call-row-head strong { font-family: var(--serif); font-size: 1.25rem; }
.call-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.call-fields .field-who { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .call-fields { grid-template-columns: 1fr; }
  .call-row-head .btn-quiet { min-height: 44px; }
}
.skip-line { color: var(--slate); margin: 6px 0 0; }
.skip-btn { margin-top: 2px; }
.signing-row {
  width: min(860px, 100%);
  margin: 10px auto;
}
.signing-line {
  color: var(--slate);
  margin: 0;
  text-align: left;
}
.pdf-screen .signing-row,
.modal-card .signing-row {
  width: min(860px, 100%);
  margin: 10px auto;
}
.modal-body > .signing-row {
  width: 100%;
  margin: 10px 0;
}
.keep-signed { margin: 14px 0; }
.keep-signed .quiet { margin: 4px 0 8px; }
.near-you { margin: 14px 0; }
.near-you .quiet { margin: 8px 0 0; }
.sin-step { margin: 14px 0; padding: 14px 16px; border: 1px solid #c4b8a4; border-radius: 12px; background: #fff; }
.sin-step p { margin: 0 0 8px; }
.sin-row { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; }
.sin-row .sin-input { flex: 1 1 auto; min-width: 0; letter-spacing: 0.12em; -webkit-text-security: disc; text-security: disc; }
.sin-row .sin-input.sin-shown { -webkit-text-security: none; text-security: none; }
.sin-note { min-height: 1.3em; }

.pick-group { margin: 14px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--hint); letter-spacing: 0.02em; }
.big-list .pick-group:first-child { margin-top: 0; }

/* "On your map" at the top of every task window that belongs to a card: one look everywhere. */
.map-panel { margin: 14px 0 10px; padding: 14px 16px; background: var(--jade-100); border: 1px solid var(--line, #d9e2da); border-radius: 12px; }
.map-panel > .kicker { margin: 0 0 8px; }
.map-group + .map-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.map-head { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.map-title { font-weight: 700; }
.map-tile { color: var(--slate); font-size: 0.85rem; }
.map-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.map-chip { min-height: 44px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--jade-600, #2f6f5b); color: var(--jade-700, #1f5a47); font-weight: 600; cursor: pointer; }
.map-chip:hover { background: var(--jade-100); }
.map-chip.map-chip-add {
  background: var(--card); color: var(--ink); border-style: dashed; border-color: var(--line); font-weight: 600;
}
.map-chip.map-chip-add:hover { border-color: var(--jade-600); background: var(--jade-50); color: var(--sage-800); }
.map-accuracy { margin: 10px 0 14px; display: grid; gap: 10px; }
.map-accuracy-label { margin: 0 0 4px; }
.map-accuracy .map-chips { margin: 0; }
.map-contact { margin: 4px 0 0; }
.note-letter-preview { max-height: min(50vh, 28rem); overflow: auto; }
.note-letter-preview h2 { font-size: 1.15rem; margin: 0 0 8px; }
.note-letter-preview .letter-meta-grid { font-size: 0.9rem; }
.map-none { margin: 0 0 10px; }
.map-add { min-height: 44px; }

/* The one Back control (backBtn() in app.js): first thing inside every multi-step form, picker and flow. Never in the header.
   A quiet text button, sage on white (about 9:1), a jade focus ring from the shared rule, 44px tall (48px on a phone). */
.flow-back { margin: 0 0 6px; text-align: left; }
.flow-back-btn {
  font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; background: none; border: 0; border-radius: 10px;
  color: var(--sage-700); padding: 8px 12px 8px 0; min-height: 44px; text-align: left; text-decoration: none;
}
.flow-back-btn:hover { color: var(--sage-900); text-decoration: underline; }
.flow-back-btn:focus-visible { outline: 3px solid var(--jade-600); outline-offset: 2px; }
@media (max-width: 600px) { .flow-back-btn { min-height: 48px; font-size: 1.05rem; } }
.plan-on { margin: 10px 0 0; font-weight: 650; color: var(--jade-700); }

/* Linked cards: what a row points at, and what points at it. */
.row-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.row-links .map-chip { min-height: 36px; padding: 4px 12px; font-size: 0.9rem; }

/* Money: two headed groups, the debt nudge, and the "Did they owe anything?" answers */
.owe-nudge { margin-top: 10px; }
.owed-choice { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.task-more { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; }
.task-more summary { cursor: pointer; font-weight: 600; }
.task-more p { margin: 8px 0 0; }
/* Task detail: map / signing / keep-signed sit folded under the action ladder so free path stays first. */
.task-detail-more { margin-top: 18px; background: var(--muted, #f3f6f4); }
.task-detail-more summary { color: var(--slate); font-size: 0.95rem; }
.task-detail-more .map-panel,
.task-detail-more .signing-row,
.task-detail-more .keep-signed { margin-top: 12px; }
.task-detail-more .map-panel:first-child { margin-top: 10px; }

/* Consistency: a title with an Add button is ONE row on every phone and desktop. The title takes the room, the button keeps one fixed
   size and spot at the right, centered on the title, never dropping under it however long the title or hint is. */
.page-title.head-add { flex-wrap: nowrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.page-title.head-add > h2, .page-title.head-add > h3 { margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.page-title.head-add > .btn-secondary { flex: none; width: 6rem; min-width: 6rem; min-height: 44px; padding: 8px 14px; white-space: nowrap; }
.people-group > .quiet { margin-top: 0; }

/* Consistency: Sign in / Account is the header's outlined pill. Nudges keep a short text pill. */
.header-link.account-btn[data-signin="open"] { min-width: 0; text-align: center; }
.signin-actions .header-link, .file-signin .header-link { flex: none; width: auto; min-width: 5.5rem; text-align: center; }
.signin-actions { flex-wrap: wrap; row-gap: 4px; }
.signin-actions .text-btn { padding: 8px 4px; }
@media (max-width: 700px) {
  .signin-actions { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* A small soft "Start here" in place of the "None yet" status on one map card; no banner, no extra button. */
.start-here { display: inline-block; margin: -3px 0 -3px -2px; padding: 3px 12px; border-radius: 999px; background: var(--sage-100); color: var(--sage-700); font-size: 0.85rem; font-weight: 600; white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.examples-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
}
.examples-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--sage-700);
  background: #fff;
  color: var(--sage-800);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
}
.examples-pill[aria-pressed="true"],
.examples-pill:hover { background: var(--sage-50); }
.sample-banner {
  display: grid;
  gap: 10px;
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--jade-200);
  background: var(--jade-50);
  font-size: 0.95rem;
  color: var(--slate);
}
.sample-banner-text { margin: 0; }
.sample-banner .sample-clear-btn {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}
.examples-clear-pill {
  border-color: var(--jade-700);
  color: var(--jade-800);
}

.map-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 14px;
  background: var(--sage-50);
  border: 1px solid var(--sage-100);
  border-radius: 14px;
}
.map-invite p { margin: 0; flex: 1 1 200px; color: var(--slate); }
.map-invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.map-invite-actions .btn-primary {
  width: auto;
  min-height: 44px;
  padding: 10px 18px;
}

/* Guide sets: short labels; phone = bottom bar; wide = left rail. Keeps the sticky header free. */
.stage-path-short { display: inline; }
.stage-path-full { display: none; }
@media (min-width: 720px) {
  .stage-path-dock .stage-path-short { display: none; }
  .stage-path-dock .stage-path-full { display: inline; }
  .stage-path-dock .stage-path-item { font-size: 0.88rem; padding: 8px 10px; }
}
.stage-path-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Above sticky header (80); below modal overlays (90+). Mounted on body so fixed is not trapped in #app. */
  z-index: 85;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 20px rgba(27, 45, 37, 0.06);
  /* iPad / mobile browser chrome: when the toolbar resizes on scroll, fill any gap below the dock. */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.stage-path-dock::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 120px;
  background: var(--card);
  pointer-events: none;
}
.stage-path-dock .stage-path {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 6px;
  width: min(960px, 100%);
  margin: 0 auto;
  padding: 0;
  overflow-x: auto;
  scroll-padding-inline: 12px;
  -webkit-overflow-scrolling: touch;
}
.stage-path-dock .stage-path-item {
  flex: 1 1 0;
  min-width: 4.5rem;
  min-height: 44px;
  padding: 8px 4px;
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.2;
  text-align: center;
}
html.has-stage-path {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
.stage-path {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 8px 0;
}
.modal-card > .stage-path {
  position: sticky; top: 0; z-index: 3; margin: 0; padding: 8px 12px 10px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
}
.modal-card > .stage-path .stage-path-item {
  flex: 1 1 0; min-width: 0; padding: 8px 4px; border-radius: 12px; font-size: 0.82rem; text-align: center;
}
.stage-path-item {
  min-height: 44px; padding: 8px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600;
  background: var(--card); color: var(--ink); border: 1.5px solid var(--line);
}
.stage-path-item:hover, .stage-path-item:focus-visible { border-color: var(--jade-600); background: var(--jade-50); }
.stage-path-item.on, .stage-path-item[aria-current="step"] {
  border-color: var(--jade-600); background: var(--jade-50); color: var(--sage-800);
  box-shadow: inset 0 0 0 1px var(--jade-600);
}
/* Side rail parked for now — revisit. Bottom bar on every width until then. */
.stage-group, .stage-more { margin: 18px 0 0; }
.stage-group > summary, .stage-more > summary { cursor: pointer; font-family: Lora, Georgia, serif; font-size: 1.15rem; color: var(--sage-800); padding: 14px 4px; min-height: 44px; list-style-position: inside; }
.stage-group > .tiles-grid { margin-top: 8px; }
.stage-more > .task-row { margin-top: 16px; }
.detail-panel .file-head .text-btn { display: inline-block; margin: 2px 0 8px; }

.milestone-note { margin: 22px 4px; color: var(--slate); font-size: 0.98rem; line-height: 1.55; text-align: left; }

.send-everything .concierge-tag { display: inline-block; margin-left: 6px; font-size: 0.8rem; font-weight: 500; color: var(--hint); }
.needs-line .text-btn { display: inline; text-align: left; }
.part-of-concierge { color: var(--hint); font-size: 0.85rem; font-weight: 500; white-space: nowrap; }

/* S-H2: badge readable on the light paywall header (contrast above 4.5:1). */
.paywall-card .pay-badge { background: #2f4a3f; color: #fff; }
.plan-offers-1 { display: block; max-width: 520px; }
.compare-plans { margin-top: 16px; }
.compare-plans > summary { cursor: pointer; font-weight: 650; text-decoration: underline; padding: 8px 0; }
/* Yearly Concierge sheet: lede + copper buy above the fold; features scroll below. Not now is footer secondary. */
.yearly-paywall .yearly-lede { margin: 0 0 12px; }
.yearly-paywall .yearly-buy { width: 100%; margin: 0 0 16px; }
.yearly-paywall .modal-footer .btn-secondary { width: 100%; min-height: 48px; }
.yearly-paywall .plan-offers-1 { margin-top: 4px; }

.closing-card { background: #f3f7f4; border: 1px solid #cfdcd3; border-radius: 16px; padding: 24px; margin: 0 0 20px; }
.closing-card h2 { margin: 4px 0 10px; }

/* S-M6: on narrow phones the bottom stage bar scrolls. Snap to each stage and fade the right edge so it reads as scrollable. */
@media (max-width: 719px) {
  .stage-path-dock .stage-path {
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
    padding-right: 28px;
  }
  .stage-path-dock .stage-path-item { scroll-snap-align: start; flex: 0 0 auto; padding: 8px 10px; }
}
/* S-M8: folded groups on What we collect */
details.collect-group > summary { cursor: pointer; list-style: revert; }
details.collect-group > summary h2 { display: inline; }
/* R2-M4: a very long name with no spaces wraps instead of widening the page. */
h1, h2, h3, .tile-title, .task-row, .next-card, .map-row, .note-sheet, .page-title, .category-tile, .person-row { overflow-wrap: anywhere; }

/* Tile status wraps and fits on narrow cards. */
.tile-status { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 600px) { .closing-card { padding: 18px; margin: 0 0 16px; } .closing-card h2 { font-size: 1.35rem; } }
.search-step { border: 1px solid #dfe6e1; border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.search-step h4 { margin: 0 0 6px; }
.search-links { margin: 0 0 8px; padding-left: 18px; }
.account-section { border-top: 1px solid #e3e8e4; padding-top: 12px; margin-top: 12px; }
.account-section h4 { margin: 0 0 6px; }
.access-list { list-style: none; padding: 0; margin: 8px 0; }
.access-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; overflow-wrap: anywhere; padding: 4px 0; }
/* Map and footer tile titles break between words, not inside them. They shrink a little on narrow phones to fit. */
.tile-title { overflow-wrap: normal; word-break: normal; }
@media (max-width: 420px) { .category-tile .tile-title, .foot-tile .tile-title { font-size: clamp(1rem, 4.6vw, 1.2rem); } }
@media (max-width: 370px) { .category-tile { padding: 12px; } }
/* Tile titles: words wrap whole, or split with a hyphen. Never a bare mid-word break. */
.tiles-grid .tile-title, .category-tile .tile-title, .foot-tile .tile-title { overflow-wrap: normal; word-break: normal; hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 420px) { .tiles-grid .tile-title, .category-tile .tile-title, .foot-tile .tile-title { font-size: clamp(0.95rem, 4.2vw, 1.1rem); } }
/* D-M2: a popup heading takes focus for screen readers, with no visible box. Keyboard focus rings stay on real controls. */
[role="dialog"] [tabindex="-1"]:focus, [role="dialog"] [tabindex="-1"]:focus-visible, h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, h3[tabindex="-1"]:focus { outline: none; box-shadow: none; }
/* The filled form button is a real button with a visible edge, on task cards and in popups alike. */
.btn-file, .btn-primary.btn-file, .btn-secondary.btn-file { border: 2px solid var(--sage-700); }
/* The note: same padding as other cards, text starts at the edge of that padding, box ends with the text. */
.note-sheet { padding: 14px 16px; height: auto; min-height: 0; }
.note-sheet > p { margin: 0; white-space: normal; }
.note-sheet > p + p { margin-top: 0.9em; }
/* Envelope rows: label and value share the first line; a long value wraps under itself. */
.note-envelope .env-row { align-items: start; grid-template-columns: 4.6rem minmax(0, 1fr); }
.note-envelope .env-label, .note-envelope .env-value, .note-envelope .env-add { font-size: 0.95rem; line-height: 1.4; padding: 0; margin: 0; }
.note-envelope .env-label { font-size: 0.8rem; line-height: calc(0.95rem * 1.4); }
.note-envelope .env-add, .note-envelope .env-value { overflow-wrap: anywhere; justify-self: start; }

/* Electronic signature capture (Signing wired, 2026-11-01). */
.esig .esig-img { display: block; max-width: 260px; width: 100%; height: auto; border-bottom: 1px solid var(--line, #c9d1cc); margin: 4px 0 6px; }
.esig-tabs { display: flex; gap: 8px; margin: 6px 0 10px; }
.esig-tab { border: 1px solid var(--line, #c9d1cc); background: #fff; border-radius: 999px; padding: 6px 16px; min-height: 40px; font: inherit; cursor: pointer; }
.esig-tab.on { background: var(--sage-800); color: #fff; border-color: var(--sage-800); }
.esig-typed { min-height: 56px; margin: 6px 0; overflow-wrap: anywhere; }
.esig-pad { display: block; width: 100%; max-width: 420px; aspect-ratio: 10 / 3; height: auto; background: #fff; border: 1px dashed var(--hint, #8a958f); border-radius: 8px; touch-action: none; }
.esig-consent { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 6px; line-height: 1.4; }
.esig-consent input { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.esig-status { margin: 6px 0 8px; line-height: 1.45; }
.esig-pen { color: var(--sage-900); }
@media print { .esig { display: none; } }

/* Brand rule (t363u): the name is always KinGuide, never all caps. Wrap it in .brand inside any uppercase-styled element. */
.brand { text-transform: none; }

/* A few quick checks (t370u): calm inline card above the Pre-Filled PDF. */
.quick-check { border: 1px solid #e6dcc4; background: #fffaf0; border-radius: 12px; padding: 14px 16px; margin: 12px 0; }
.quick-check .kicker { margin: 0 0 6px; }
.qc-ask { font-size: 1.05rem; line-height: 1.4; margin: 0 0 10px; color: inherit; }
.qc-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qc-choices .big-choice { margin: 0; min-height: 44px; }
.qc-left, .qc-hint { margin: 8px 0 0; font-size: 0.9rem; }
.qc-notes { margin: 10px 0 0; padding-left: 18px; font-size: 0.9rem; color: #7a4a00; }
.qc-notes li { margin: 4px 0; }
.quick-check-done { background: #fffdf6; }
.qc-pending { margin: 8px 0; font-size: 0.95rem; }
.qc-pending .text-btn { font-weight: 600; }
.qc-choices .big-choice { font-family: inherit; font-size: 1rem; line-height: 1.2; padding: 10px 12px; text-align: center; justify-content: center; }
.qc-pending-hint { display: block; margin-top: 2px; font-size: 0.9rem; }
@media (hover: none) { .qc-choices .big-choice:hover:not([aria-pressed="true"]) { background: #fff; border-color: inherit; } }

/* Pop-ups and sheets: the header sits flush at the top, so nothing behind shows through. Safe area covered on iPhone. */
.modal-overlay { padding-top: 0; }
.modal-card { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
.modal-header { top: 0; border-radius: 0; padding-top: calc(22px + env(safe-area-inset-top, 0px)); }

/* Big choices with a title + line under it (e.g. "Is this for the person you planned for?"):
   bold serif title on its own line, then the description in the normal body font, smaller and muted. */
.big-choice > strong { display: block; }
.big-choice > strong + span { display: block; margin-top: 4px; font-family: var(--sans, inherit); font-size: 1rem; line-height: 1.4; font-weight: 400; color: var(--slate); }

/* Card titles never break mid-word (no auto hyphens, Shawn Nov 1). On narrow cards the title shrinks a little so whole words fit. */
.tiles-grid .tile-title { font-size: clamp(1rem, 0.9rem + 0.6vw, 1.35rem); }
@media (max-width: 420px) { .tiles-grid .tile-title { font-size: 1.05rem; } }
.map-name-ask { margin: 6px 0 0; font-size: 0.95rem; }
.map-name-ask summary { cursor: pointer; color: var(--sage-700); }
.map-name-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.map-name-row .field-input { flex: 1 1 180px; min-width: 0; }
/* Direction line above the sets (Nov 2) */
.direction-line { margin: 0 0 8px; color: var(--ink); font-size: 1rem; }
/* Bird's-eye view and Forms list (Nov 2) */
.path-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.overview-set { margin: 18px 0 0; }
.overview-set h4 { margin: 0 0 6px; font-size: 1rem; }
.overview-set h4 .quiet { font-weight: 400; font-size: 0.85rem; margin-left: 6px; }
.overview-list { list-style: none; margin: 0; padding: 0; }
.overview-row { display: flex; width: 100%; gap: 10px; align-items: flex-start; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 10px 2px; cursor: pointer; font: inherit; color: var(--ink); }
.overview-row:hover, .overview-row:focus-visible { background: var(--sage-50); }
.overview-mark { width: 1.2em; flex: 0 0 auto; color: var(--hint); }
.overview-row.done .overview-mark { color: var(--jade-700); }
.overview-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.overview-text small { color: var(--hint); font-size: 0.85rem; }
.overview-state { flex: 0 0 auto; font-size: 0.85rem; color: var(--hint); }
.overview-row.done .overview-text strong { color: var(--muted); }

.near-row { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-overlay[aria-labelledby="signin-title"] { z-index: 93; }

/* Stripe checkout: one quiet status line after returning (Nov 2 2026). */
.checkout-note { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 95; background: #fff; border: 1px solid #e5dfd5; border-radius: 12px; padding: 10px 16px; box-shadow: 0 6px 24px rgba(0,0,0,.12); max-width: 92vw; margin: 0; }
.forms-pack-block { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid #e5dfd5; }

/* All the forms (Nov 2): phone-first list, sticky buy bar */
.pack-price { font-weight: 600; margin: .25rem 0 1rem; }
.pack-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.pack-row { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; text-align: left; padding: .85rem 1rem; border: 1px solid var(--line, #ddd); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: inherit; }
.pack-row-main { display: grid; gap: .15rem; }
.pack-ready { font-size: .9rem; color: var(--muted, #555); }
.pack-chip { flex: none; padding: .2rem .6rem; border-radius: 999px; border: 1px solid currentColor; font-size: .85rem; font-weight: 600; }
.pack-chip.is-free, .pack-chip.is-yours { background: #eef6ee; color: #2d6a3e; }
.pack-card .modal-footer { position: sticky; bottom: 0; background: #fff; }
.pack-footer { display: grid; gap: .5rem; width: 100%; }
.pack-footer .btn-primary, .pack-footer .btn-secondary { width: 100%; min-height: 48px; }
.pack-footer .quiet { text-align: center; margin: 0; }
.pack-owned { justify-self: center; padding: .5rem 1rem; }