:root {
  --ink: #111719;
  --muted: #66706c;
  --line: #ded7cb;
  --paper: #f5f0e7;
  --panel: #fffaf1;
  --white: #ffffff;
  --brass: #a47737;
  --brass-dark: #785322;
  --blue: #315f9f;
  --shadow: 0 24px 70px rgba(17, 23, 25, 0.12);
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at top left, rgba(164, 119, 55, 0.18), transparent 34rem),
    linear-gradient(180deg, #fbf8f1 0%, #f1eadf 48%, #fffaf1 100%);
}

button,
input,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Accessible "skip to main content" link, shared by every public page whose
   header includes it. Hidden until a keyboard user focuses it.

   It is hidden with a transform on a position:fixed element — NOT a negative
   `top` that parks it just above the viewport — so elastic/rubber-band
   overscroll can never reveal or "stick" its edge above the header. Fixed +
   transform also keeps it out of normal flow, so it never adds space above the
   header. It stays focusable (no display:none / visibility:hidden / hidden /
   aria-hidden / tabindex=-1), and Tab reveals it. */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-weight: 800;
  transform: translateY(calc(-100% - 2rem));
  transition: transform 0.16s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--brass);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding: 10px clamp(20px, 5vw, 64px);
  background: rgba(255, 250, 241, 0.88);
  border-bottom: 1px solid rgba(222, 215, 203, 0.8);
  backdrop-filter: blur(16px);
}

.landing-brand {
  display: inline-grid;
  grid-template-columns: auto;
  align-items: center;
  gap: 0;
  position: relative;
}

.landing-brand-mark {
  display: grid;
  place-items: center;
  width: clamp(240px, 26vw, 300px);
  height: 64px;
  max-height: 64px;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}

.landing-brand-mark img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 64px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.landing-brand > span:last-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.landing-brand strong,
.landing-brand small {
  display: block;
}

.landing-brand strong {
  letter-spacing: -0.03em;
  font-weight: 800;
}

.landing-brand small {
  color: var(--muted);
  font-size: 0.76rem;
}

.landing-nav nav {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.landing-nav nav a {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 9px 13px;
}

.landing-nav nav a:hover,
.nav-dashboard-link {
  background: var(--ink);
  color: var(--white);
}

main {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: clamp(26px, 5vw, 64px);
  align-items: center;
  padding: clamp(28px, 5vw, 64px) 0 clamp(8px, 1.8vw, 22px);
}

.hero-copy h1 {
  margin: 12px 0 18px;
  max-width: 760px;
  font: clamp(2.85rem, 5.1vw, 4.9rem) / 1 "Libre Caslon Display", Georgia, serif;
  letter-spacing: -0.025em;
}

.hero-copy p {
  max-width: 710px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brass-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-actions,
.form-actions,
.result-actions,
.public-report-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.hero-actions {
  margin-top: 26px;
}

.hero-note {
  margin-top: 18px;
  font-size: 0.94rem !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(17, 23, 25, 0.18);
}

.btn-brass {
  background: linear-gradient(135deg, var(--brass), var(--brass-dark));
  color: var(--white);
  box-shadow: 0 10px 24px rgba(120, 83, 34, 0.22);
}

.btn-quiet {
  background: rgba(17, 23, 25, 0.07);
  color: var(--ink);
}

.hero-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: var(--shadow);
}

.hero-card div {
  display: grid;
  grid-template-columns: 42px auto;
  gap: 10px 14px;
  align-items: center;
  padding: 18px;
  border-radius: 22px;
  background: var(--panel);
}

.hero-card span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--white);
  font-weight: 800;
}

.hero-card strong,
.hero-card small {
  display: block;
}

.hero-card small {
  color: var(--muted);
}

.calculator-shell,
.ledger-entry-shell,
.feature-strip,
.save-panel {
  margin-bottom: 34px;
}

.calculator-shell,
.ledger-entry-shell,
.save-panel {
  border: 1px solid var(--line);
  border-radius: 34px;
  background: rgba(255, 250, 241, 0.82);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 34px);
}

.section-heading {
  margin-bottom: 24px;
}

.section-heading h2,
.save-panel h2 {
  margin: 8px 0 8px;
  font: clamp(2rem, 4vw, 3.4rem) / 0.94 "Libre Caslon Display", Georgia, serif;
  letter-spacing: -0.045em;
}

.section-heading p,
.save-panel p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.compact h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.calculator-grid,
.entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.65fr);
  gap: 18px;
  align-items: start;
}

.calculator-card,
.entry-card,
.result-card,
.entry-list-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  padding: clamp(18px, 3vw, 26px);
}

.public-matter-card {
  margin-bottom: 18px;
}

.public-summary-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.45fr) repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.summary-card {
  min-height: 124px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  padding: 20px;
  overflow: hidden;
}

.summary-card.primary {
  position: relative;
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.summary-card.primary::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -48px;
  top: -53px;
  border: 1px solid rgba(164, 119, 55, 0.4);
  border-radius: 50%;
  box-shadow: 0 0 0 14px rgba(164, 119, 55, 0.07), 0 0 0 30px rgba(164, 119, 55, 0.04);
}

.summary-card label {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.summary-card.primary label,
.summary-card.primary small {
  color: #cfc8bb;
}

.summary-card strong {
  display: block;
  margin-top: 14px;
  font: 2rem / 1 "Libre Caslon Display", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.summary-card.primary strong {
  color: var(--white);
  font-size: 2.55rem;
}

.summary-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.76rem;
}

.public-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
  gap: 18px;
  align-items: start;
}

.public-panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
  box-shadow: 0 12px 45px rgba(38, 40, 36, 0.035);
}

.public-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}

.date-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.date-view-toggle .date-view-icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.date-view-toggle:hover {
  border-color: var(--brass);
  color: var(--brass-dark);
}

.date-view-toggle.is-newest {
  border-color: var(--brass);
  color: var(--brass-dark);
  background: #f7efe0;
}

.date-view-toggle:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(164, 119, 55, 0.22);
}

.public-panel-header h2 {
  margin: 0;
  font: 1.75rem / 1 "Libre Caslon Display", Georgia, serif;
  font-weight: 400;
}

.public-panel-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.public-entry-form {
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  background: rgba(255, 253, 248, 0.78);
  box-shadow: none;
}

.ledger-list-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 4px 22px 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.78);
}

.ledger-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ledger-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid #e5ded1;
}

.ledger-row:last-child {
  border-bottom: 0;
}

.entry-type-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 700;
}

.entry-type-icon.cost {
  color: #9b493f;
  background: #f5e8e3;
}

.entry-type-icon.payment {
  color: #2f6657;
  background: #e3eee8;
}

.entry-main {
  min-width: 0;
}

.entry-main strong,
.entry-main span,
.entry-amount strong,
.entry-amount small,
.entry-balance strong,
.entry-balance small {
  display: block;
}

.entry-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}

.entry-main span {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.74rem;
}

.ccp-badge {
  border-radius: 999px;
  padding: 3px 7px;
  background: #e3eee8;
  color: #2f6657;
  font-style: normal;
  font-weight: 800;
}

.entry-amount,
.entry-balance {
  text-align: right;
}

.entry-amount strong,
.entry-balance strong {
  font: 1.15rem / 1.1 "Libre Caslon Display", Georgia, serif;
  font-weight: 400;
}

.entry-amount small,
.entry-balance small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.entry-menu {
  display: flex;
  gap: 2px;
}

.entry-menu > button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 18px;
}

.entry-menu > button:hover {
  background: var(--paper);
}

.public-ledger-empty {
  border-bottom: 0;
  padding: 22px;
  text-align: center;
}

.public-ledger-empty .empty-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--brass-dark);
  font-size: 24px;
}

.public-ledger-empty h3 {
  margin: 0 0 7px;
  font: 1.45rem / 1 "Libre Caslon Display", Georgia, serif;
  font-weight: 400;
}

.public-ledger-empty p {
  margin: 0;
  color: var(--muted);
}

.public-calculation-panel {
  position: sticky;
  top: 96px;
}

.calculation-body {
  padding: 22px;
}

.calc-list {
  display: grid;
  gap: 9px;
  margin: 0;
}

.calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.82rem;
  line-height: 1.28;
}

.calc-row dt {
  color: var(--muted);
}

.calc-row dt small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72em;
  font-weight: 700;
}

.calc-row dd {
  margin: 0;
  font-weight: 800;
  text-align: right;
}

.calc-row.total {
  margin-top: 2px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.calc-row.total dt {
  color: var(--ink);
  font-weight: 800;
}

.calc-row.total dd {
  font: 1.6rem / 1 "Libre Caslon Display", Georgia, serif;
  font-weight: 400;
}

.method-note {
  margin: 19px 0 0;
  padding: 14px;
  border-radius: 14px;
  background: #f2ebdf;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.55;
}

.panel-footer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(128px, 1fr));
  gap: 8px;
  padding: 17px 20px;
  border-top: 1px solid var(--line);
  background: rgba(245, 240, 231, 0.72);
}

.panel-footer-actions .btn {
  min-height: 38px;
  padding: 0 12px;
  font-size: 0.78rem;
  line-height: 1.15;
  white-space: nowrap;
}

.hidden {
  display: none !important;
}

.field-hint {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field {
  display: grid;
  gap: 7px;
  position: relative;
}

.field.full {
  grid-column: 1 / -1;
  margin-bottom: 14px;
}

label {
  color: #263034;
  font-size: 0.83rem;
  font-weight: 800;
}

label span {
  color: var(--muted);
  font-weight: 700;
}

input,
textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d9d1c3;
  border-radius: 16px;
  background: #fffdf8;
  color: var(--ink);
  outline: none;
  padding: 12px 14px;
}

textarea {
  resize: vertical;
}

input:focus,
textarea:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 4px rgba(164, 119, 55, 0.16);
}

.money-field input,
.rate-field input {
  padding-left: 34px;
}

.field-prefix,
.field-suffix {
  position: absolute;
  bottom: 12px;
  color: var(--muted);
  font-weight: 800;
}

.field-prefix {
  left: 14px;
}

.field-suffix {
  right: 14px;
}

.rate-note {
  display: grid;
  grid-template-columns: 24px auto;
  gap: 10px;
  margin: 18px 0;
  padding: 14px;
  border-radius: 18px;
  background: #f6efe3;
  color: var(--muted);
}

.rate-note svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--brass-dark);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rate-note p {
  margin: 0;
  line-height: 1.55;
}

.entry-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 14px;
  padding: 5px;
  border-radius: 999px;
  background: #f2ebdf;
}

.entry-type-button {
  min-width: 0;
  border: 0;
  min-height: 42px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}

.entry-type-button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--white);
}

.entry-type-button:focus-visible {
  outline: 3px solid rgba(164, 119, 55, 0.42);
  outline-offset: 2px;
}

.entry-fast-submit {
  margin-bottom: 14px;
}

.entry-submit-button:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(164, 119, 55, 0.22);
}

.entry-validation-message {
  margin: 10px 0 0;
  color: #8c2f1b;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
}

.result-card {
  position: sticky;
  top: 92px;
}

.result-total {
  margin: 12px 0 18px;
  padding: 20px;
  border-radius: 24px;
  background: var(--ink);
  color: var(--white);
}

.result-total span,
.result-total strong {
  display: block;
}

.result-total span {
  color: #ccd5d2;
  font-size: 0.83rem;
}

.result-total strong {
  margin-top: 6px;
  font: 2.6rem / 1 "Libre Caslon Display", Georgia, serif;
}

.result-panel dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0 0 18px;
}

.result-panel dl div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.result-panel dt {
  color: var(--muted);
}

.result-panel dd {
  margin: 0;
  font-weight: 800;
}

.entry-card .btn {
  width: 100%;
  margin-top: 14px;
}

.entry-list-card h3 {
  margin-top: 0;
}

.landing-empty {
  margin: 0;
  color: var(--muted);
}

.public-entry {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.public-entry strong,
.public-entry span,
.public-entry small {
  display: block;
}

.public-entry span,
.public-entry small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.86rem;
}

.public-entry button {
  border: 0;
  background: transparent;
  color: var(--brass-dark);
  font-weight: 800;
  cursor: pointer;
}

.feature-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.feature-strip article {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--white);
  padding: 24px;
}

.feature-strip span {
  color: var(--brass-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.feature-strip h3 {
  margin: 10px 0 8px;
}

.feature-strip p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.save-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr) auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 70px;
}

.plan-list {
  display: grid;
  gap: 9px;
}

.plan-list div {
  padding: 13px 15px;
  border-radius: 18px;
  background: var(--white);
  border: 1px solid var(--line);
}

.plan-list strong,
.plan-list span {
  display: block;
}

.plan-list span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.88rem;
}

.plan-card-single strong {
  font-size: 1.05rem;
}

.plan-card-single .plan-price {
  margin-top: 2px;
  color: var(--brass-dark);
  font-weight: 800;
  font-size: 1.15rem;
}

.plan-card-single .plan-trial {
  margin-top: 8px;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.82rem;
}

.mock-trial-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7efe0;
  color: var(--brass-dark);
  font-size: 0.82rem;
  font-weight: 700;
}

.public-report-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #2f3334;
}

.public-report-overlay[hidden] {
  display: none;
}

.public-report-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.public-report-toolbar strong,
.public-report-toolbar span {
  display: block;
}

.public-report-toolbar span {
  color: var(--muted);
  font-size: 0.86rem;
}

.public-report-overlay iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #eeeae2;
}

/* Save/account flow modal (Create Account → verification → success).
   These styles live in styles.css for the dashboard; the public page loads only
   landing.css, so the same overlay must be styled here or the modal appends to the
   body unstyled and off-screen. */
.mock-flow-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 26, 28, 0.66);
  backdrop-filter: blur(6px);
}
.mock-flow-card {
  width: min(920px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 35px 100px rgba(18, 24, 25, 0.32);
}
.mock-flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 27px 30px 21px;
  border-bottom: 1px solid var(--line);
}
.mock-flow-header h2 {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-weight: 400;
  font-size: 34px;
  margin: 5px 0 4px;
}
.mock-flow-header p { margin: 0; color: var(--muted); font-size: 12px; }
.mock-flow-overlay .icon-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.mock-flow-overlay .icon-btn:hover { border-color: var(--brass); color: var(--brass-dark); }
.mock-flow-overlay .icon-btn:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.mock-draft-summary {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1px;
  margin: 0 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--line);
}
.mock-draft-summary div, .mock-checkout-summary div, .mock-success-grid div {
  padding: 13px 15px;
  background: #faf6ee;
}
.mock-draft-summary span, .mock-checkout-summary span, .mock-success-grid span {
  display: block;
  color: #737a77;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mock-draft-summary strong, .mock-checkout-summary strong, .mock-success-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 13px;
}
.mock-flow-body { padding: 24px 30px 30px; }
.mock-todo-note {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px dashed #d4bd92;
  border-radius: 13px;
  background: #fff8ea;
  color: #75684f;
  font-size: 10px;
  line-height: 1.55;
}
.mock-flow-error {
  margin: 18px 30px 0;
  padding: 11px 13px;
  border-radius: 12px;
  color: #8c2f1b;
  background: #f7e7e1;
  font-size: 11px;
  font-weight: 700;
}
.mock-flow-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.mock-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.mock-plan-card {
  display: flex;
  flex-direction: column;
  min-height: 222px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(250, 246, 238, 0.82);
}
.mock-plan-card span { color: var(--brass-dark); font-size: 11px; font-weight: 700; }
.mock-plan-card h3 { font-family: "Libre Caslon Display", Georgia, serif; font-size: 24px; font-weight: 400; line-height: 1.05; margin: 12px 0 9px; }
.mock-plan-card p { color: #6f7673; font-size: 11px; line-height: 1.5; margin: 0 0 18px; }
.mock-plan-card .btn { margin-top: auto; width: 100%; padding-inline: 10px; }
.mock-checkout-summary, .mock-success-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--line);
}
.mock-confirmation-copy { color: #68706d; font-size: 12px; line-height: 1.7; margin: 0; }

/* Public "Generate Report" options modal (Full report vs date-limited entries). */
.report-scope-overlay {
  position: fixed;
  inset: 0;
  z-index: 270;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 26, 28, 0.66);
  backdrop-filter: blur(6px);
}
.report-scope-card {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 35px 100px rgba(18, 24, 25, 0.32);
}
.report-scope-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 26px 28px 18px;
  border-bottom: 1px solid var(--line);
}
.report-scope-header h2 {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  margin: 6px 0 5px;
}
.report-scope-header p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.report-scope-overlay .icon-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.report-scope-overlay .icon-btn:hover { border-color: var(--brass); color: var(--brass-dark); }
.report-scope-overlay .icon-btn:focus-visible,
.report-scope-overlay .btn:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.report-scope-body { padding: 22px 28px 26px; }
.report-scope-options { display: grid; gap: 12px; }
.report-scope-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
/* Reset the global input styling (width:100%, min-height:46px, padding, border)
   for the radio buttons only — otherwise each radio becomes a full-width box that
   pushes the option label text out of the card. Text inputs keep the global style. */
.report-scope-option input[type="radio"] {
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--brass);
}
.report-scope-option > span { min-width: 0; }
.report-scope-option strong { display: block; font-size: 14px; }
.report-scope-option small { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.report-scope-option.is-selected { border-color: var(--brass); background: #f7efe0; }
.report-scope-option:focus-within { border-color: var(--brass); }
.report-scope-range { margin-top: 16px; }
.report-scope-error { margin: 10px 0 0; color: #8c2f1b; font-size: 0.82rem; font-weight: 700; }
.report-scope-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }

@media (max-width: 700px) {
  .mock-flow-overlay { padding: 12px; }
  .mock-plan-grid { grid-template-columns: 1fr 1fr; }
  .report-scope-overlay { padding: 12px; }
}

@media (max-width: 960px) {
  .landing-nav,
  .hero,
  .calculator-grid,
  .entry-grid,
  .public-summary-grid,
  .public-content-grid,
  .feature-strip,
  .save-panel {
    grid-template-columns: 1fr;
  }

  .landing-nav {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-nav nav {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 4px;
  }

  .result-card {
    position: static;
  }

  .hero-copy h1 {
    font-size: 4.15rem;
  }

  .public-calculation-panel {
    position: static;
  }
}

@media (max-width: 640px) {
  main {
    width: min(100% - 24px, 1180px);
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .entry-type-button {
    padding-inline: 8px;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .hero-copy h1 {
    font-size: 2.85rem;
  }

  .public-entry,
  .ledger-row,
  .public-report-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-brand-mark {
    width: min(240px, 76vw);
    height: 52px;
    max-height: 52px;
  }

  .landing-brand-mark img {
    max-height: 52px;
  }

  .ledger-row {
    display: flex;
  }

  .entry-amount,
  .entry-balance {
    text-align: left;
  }

  .public-report-actions {
    width: 100%;
  }
}

/* Sign-in / create-account screens shown by the "Save my ledger" flow. */
.auth-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--panel);
  font-size: 12px;
}

.auth-note[hidden] { display: none; }

.auth-flow-overlay .text-btn {
  border: 0;
  padding: 0;
  margin-right: auto;
  color: var(--muted);
  background: transparent;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.auth-flow-overlay .text-btn:hover { color: var(--brass-dark); }
.auth-flow-overlay .mock-flow-actions { align-items: center; gap: 14px; }

/* ---- Shared public footer ----
   Used by both the homepage (index.html) and the About page (about.html) so the
   branded footer is identical on both. Kept here in the shared public stylesheet
   rather than about.css so there is a single source of truth. */
.about-footer {
  border-top: 1px solid var(--line);
  background: rgba(255, 250, 241, 0.7);
}

.about-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 32px 0 18px;
}

.about-footer-brand img {
  height: 46px;
  width: auto;
  display: block;
}

.about-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.about-footer-nav a {
  border-radius: 999px;
  padding: 8px 13px;
}

.about-footer-nav a:hover,
.about-footer-nav a[aria-current="page"] {
  background: var(--ink);
  color: var(--white);
}

.about-footer-note {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 0 0 34px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}