/**
 * The public pages: the landing page, the guides, the tools, the legal copy.
 *
 * app.css stays the application's stylesheet. This one is the marketing surface only, so a change
 * to the app cannot move a page a stranger reads, and the other way round.
 *
 * Tokens: warm paper for reading pages, the green as the single action colour, and the four status
 * colours used the way the app uses them (sky, gold, amber, coral) for the four reminders.
 */

:root {
  --paper: #fdfaf4;
  --ink: #232e38;
  --dim: #6f7a86;
  --line: #ece2d2;
  --green: #3f8a6e;
  --green-dark: #2f6f59;
  --sky: #4a95c4;
  --gold: #c9a227;
  --sun: #e0892e;
  --coral: #cf5147;
  /* The four status colours are too pale to carry words at a small size as they come: 2.38:1 to 4.20:1
     on white, all under AA. Labels and day numbers use the same hues mixed down to ink (5.28:1 to
     8.22:1). Bars, dots and the slider's thumb keep the raw accents. */
  --ink-sky: color-mix(in srgb, var(--sky) 62%, #0a0a0a);
  --ink-gold: color-mix(in srgb, var(--gold) 62%, #0a0a0a);
  --ink-sun: color-mix(in srgb, var(--sun) 62%, #0a0a0a);
  --ink-coral: color-mix(in srgb, var(--coral) 62%, #0a0a0a);
}

body { background: var(--paper); color: var(--ink); }

/* ---------- notices on the public pages ---------- */

.notice { border-radius: 12px; padding: 12px 14px; margin: 14px 0 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.notice.warn { background: #fbeceb; border: 1px solid #f3c9c5; color: #8f2f26; }
.notice.ok { background: #e8f4ee; border: 1px solid #c2e0d2; color: #245c47; }
.site-header nav a.nav-login { font-weight: 700; color: var(--green-dark); }

/* ---------- landing page ---------- */

.hero { padding: 30px 20px 0; }
.hero .eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 800; margin: 0 0 10px; }
.hero h1 { font-family: Georgia, "Times New Roman", serif; font-size: 36px; line-height: 1.07; letter-spacing: -.01em; margin: 0; }
.hero h1 .accent { color: var(--green); }
.hero .sub { font-size: 15px; line-height: 1.55; color: #4c5763; margin: 14px 0 0; }
.price-line { font-size: 13.5px; font-weight: 700; margin: 16px 0 0; background: #f6efdf; border: 1px solid #ecdfc4; border-radius: 12px; padding: 12px 14px; }
.price-line b { color: var(--green-dark); }

a.button, button.button {
  display: block; text-align: center; background: var(--green); color: #fff; text-decoration: none;
  font-size: 16px; font-weight: 700; padding: 16px; border: 0; border-radius: 14px; margin: 16px 0 0;
  box-shadow: 0 10px 24px rgba(63, 138, 110, .22); width: 100%; cursor: pointer;
}
a.button.ghost { background: transparent; color: var(--green-dark); border: 1.5px solid #cfe0d8; box-shadow: none; font-size: 14.5px; padding: 13px; }
.trust { font-size: 11.5px; color: var(--dim); text-align: center; margin: 12px 0 0; }

section.block { padding: 30px 20px 0; }
h2 { font-family: Georgia, "Times New Roman", serif; font-size: 24px; line-height: 1.2; margin: 0 0 8px; }
.lede { font-size: 13.5px; color: #55606c; margin: 0 0 16px; line-height: 1.5; }

/* ---------- the ladder, and the slider that walks it ----------

   All four reminders are real markup in every state: the slider moves the emphasis, it never reveals or
   hides anything, so a crawler, an assistant and a reader with no script all get the same four. Same
   reason the FAQ block is markup rather than an accordion.

   The control is a native range, styled rather than replaced, so dragging, tapping, arrow keys and a
   screen reader all come from the browser. Two numbers have to stay honest for that: --thumb is the
   thumb's real width, because the four day stops are placed on the track by the same geometry the
   browser moves the thumb with (its centre travels from --thumb/2 to 100% - --thumb/2), and the input
   is 44px tall so a finger has a target while the thumb stays 22px. Measure the thumb after any change
   to it: 3px of disagreement puts the day under the thumb off its day.

   Selection carries more than colour: the lit rung takes its own accent bar, an 8% tint of it and the
   accent's ink for its name, while the other three sit grey. */

/* --dim as the palette defines it is 4.37:1 on white, a shade under AA for the small labels this section
   leans on (the slider's label, the day under each rung, the name of an unlit rung). Darkened inside the
   ladder only, to 5.03:1: the one place it is carrying words rather than ornament. */
.ladder { --thumb: 22px; --dim: #66707c; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }

.ladder-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 0; padding: 13px 14px; border-bottom: 1px solid #f4ede1; font-size: 12.5px; }
.ladder-head b { font-weight: 800; letter-spacing: .05em; }
.ladder-head span { font-size: 11.5px; font-weight: 600; color: var(--dim); }

.slider { padding: 14px 14px 8px; border-bottom: 1px solid #f4ede1; }
.slider-label { display: block; margin: 0 0 10px; font-size: 11.5px; font-weight: 700; color: var(--dim); }
.slider-input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; }
.slider-input::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: var(--line); }
/* No border on the thumb: a border adds to a pseudo-element's box in some engines and not others, and that
   box is what the day stops below are placed from. The white ring is a shadow, so it can only be paint. */
.slider-input::-webkit-slider-thumb { -webkit-appearance: none; width: var(--thumb); height: var(--thumb); margin-top: -9.5px; border: 0; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px #fff, 0 1px 5px rgba(35, 46, 56, .3); cursor: grab; }
.slider-input::-moz-range-track { height: 3px; border-radius: 3px; background: var(--line); }
.slider-input::-moz-range-thumb { width: var(--thumb); height: var(--thumb); border: 0; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px #fff, 0 1px 5px rgba(35, 46, 56, .3); cursor: grab; }
.slider-input:focus-visible { outline: 0; }
.slider-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(63, 138, 110, .32); }
.slider-input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(63, 138, 110, .32); }

.stops { position: relative; height: 20px; margin: 10px 0 0; }
.stops span { position: absolute; top: 0; width: 30px; margin-left: -15px; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.stops .s1 { left: calc(var(--thumb) / 2); color: var(--ink-sky); }
.stops .s2 { left: calc(var(--thumb) / 2 + (100% - var(--thumb)) / 3); color: var(--ink-gold); }
.stops .s3 { left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * 2 / 3); color: var(--ink-sun); }
.stops .s4 { left: calc(100% - var(--thumb) / 2); color: var(--ink-coral); }

.rung { display: flex; gap: 12px; padding: 14px; border-top: 1px solid #f4ede1; border-left: 5px solid var(--line); align-items: flex-start; transition: background-color .18s ease, border-color .18s ease; }
.rung:first-child { border-top: 0; }
.rung .day { flex: 0 0 46px; font-family: Georgia, serif; font-size: 17px; font-weight: 700; }
.rung .day span { display: block; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.rung .what { font-size: 13px; line-height: 1.45; color: #3c4753; }
.rung .what b { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 2px; }
.rung .quote { font-style: italic; color: #5c6773; font-size: 12.5px; margin-top: 5px; padding-left: 10px; border-left: 2px solid #eadfcc; }
.rung.g1 { --accent: var(--sky); --accent-ink: var(--ink-sky); }
.rung.g2 { --accent: var(--gold); --accent-ink: var(--ink-gold); }
.rung.g3 { --accent: var(--sun); --accent-ink: var(--ink-sun); }
.rung.g4 { --accent: var(--coral); --accent-ink: var(--ink-coral); }

/* The script's whole job: data-step on the ladder names the day, data-rung on each row names itself, so
   these rules never have to know about position, and the markup's data-step="0" is already the first
   reminder lit if the script never runs. */
.ladder[data-step] .rung .what b { color: var(--dim); }
.ladder[data-step="0"] [data-rung="0"],
.ladder[data-step="1"] [data-rung="1"],
.ladder[data-step="2"] [data-rung="2"],
.ladder[data-step="3"] [data-rung="3"] { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, #fff); }
.ladder[data-step="0"] [data-rung="0"] .what b,
.ladder[data-step="1"] [data-rung="1"] .what b,
.ladder[data-step="2"] [data-rung="2"] .what b,
.ladder[data-step="3"] [data-rung="3"] .what b { color: var(--accent-ink); }

.ladder-ends { margin: 12px 0 0; font-size: 12.5px; color: var(--green-dark); font-weight: 700; }

/* The trades band at the foot of the page. The photograph is a studio shot on a light grey backdrop, so
   it sits on a white full-bleed strip rather than loose on the cream: without the strip its own edges
   disappear into the page and the band reads as bolted on. Lazy, because it is the last thing down a page
   nobody has scrolled yet. */
.trades-band { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 20px; }
.trades-band img { display: block; width: 100%; height: auto; max-width: 680px; margin: 0 auto; border-radius: 12px; }
.trades-band .trades-note { margin: 15px 0 0; text-align: center; font-size: 13.5px; font-weight: 700; color: #4c5763; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 13px; }
.steps li strong { font-size: 13.5px; display: block; }
.steps li span { font-size: 12.5px; color: #5c6773; line-height: 1.45; display: block; margin-top: 3px; }

.plans { display: grid; gap: 12px; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 17px 15px; position: relative; }
.plan.paid { border: 2px solid var(--green); box-shadow: 0 12px 28px rgba(63, 138, 110, .14); }
.plan .name { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 800; }
.plan .amount { font-family: Georgia, serif; font-size: 31px; font-weight: 700; margin: 6px 0 2px; }
.plan .amount small { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 12px; color: var(--dim); font-weight: 600; }
.plan ul { list-style: none; margin: 12px 0 0; padding: 0; }
.plan li { font-size: 12.5px; color: #4c5763; padding: 5px 0 5px 20px; position: relative; }
.plan li:before { content: "\2713"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.badge { position: absolute; top: -9px; right: 14px; background: var(--green); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; }

.cta-band { margin: 30px 0 0; background: linear-gradient(135deg, var(--green), var(--green-dark)); color: #fff; padding: 28px 20px; }
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { font-size: 13px; color: #dcece5; margin: 0 0 16px; line-height: 1.5; }
.cta-band a.button { background: #fff; color: var(--green-dark); box-shadow: none; }

/* ---------- content pages ---------- */

.content-page { padding: 24px 0 8px; }
.wrap.narrow { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.crumbs { font-size: 12px; color: var(--dim); margin-bottom: 14px; }
.crumbs a { color: var(--dim); text-decoration: none; }
.content-page h1 { font-family: Georgia, serif; font-size: 32px; line-height: 1.12; margin: 0 0 10px; }
.content-page .lede { font-size: 15px; color: #4c5763; }
.byline { font-size: 12px; color: var(--dim); margin: 10px 0 0; }
.quick-answer { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 14px; padding: 16px; margin: 20px 0 4px; }
.quick-answer h2 { font-size: 15px; font-family: -apple-system, "Segoe UI", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 0 0 7px; }
.quick-answer p { font-size: 14.5px; line-height: 1.6; margin: 0; }
.content-page h2 { margin: 30px 0 10px; }
.content-page h3 { font-size: 15px; margin: 18px 0 6px; }
.content-page p, .content-page li { font-size: 14.5px; line-height: 1.65; color: #2f3944; }
.content-page ul, .content-page ol { padding-left: 22px; }
.content-page li { margin: 5px 0; }
.callout { background: #f6efdf; border: 1px solid #ecdfc4; border-radius: 14px; padding: 15px; margin: 18px 0; }
.callout h3 { margin: 0 0 6px; font-size: 14.5px; }
.callout p { margin: 0; font-size: 14px; white-space: pre-wrap; }
.disclaimer { margin: 24px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #f8f4eb; }
.disclaimer p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--dim); }
.disclaimer strong { color: var(--ink); }
.content-page h2 .steps, .steps { margin: 14px 0 0; }
.content-page .steps { counter-reset: step; }
.content-page .steps li { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 13px 14px; }
.table-scroll { overflow-x: auto; margin: 16px 0; }
.content-page table { border-collapse: collapse; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; }
.content-page th, .content-page td { text-align: left; padding: 10px 12px; border-top: 1px solid #f4ede1; vertical-align: top; }
.content-page thead th { border-top: 0; background: #f8f4eb; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
blockquote { margin: 18px 0; padding: 14px 16px; background: #fff; border-left: 4px solid var(--gold); border-radius: 0 12px 12px 0; font-size: 14px; color: #3c4753; }
.faq { margin: 12px 0 0; }
.faq dt { font-size: 15px; font-weight: 700; margin: 16px 0 4px; }
.faq dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: #2f3944; }
.sources li, .related li { font-size: 13.5px; margin: 6px 0; }
.sources a { color: var(--green-dark); }
.related a { color: var(--ink); font-weight: 600; text-decoration: none; }
.related a:hover, .sources a:hover { text-decoration: underline; }
.inline-cta { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin: 26px 0 10px; }
.inline-cta p { margin: 0 0 4px; font-size: 14.5px; }

.tool { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin: 22px 0 6px; }
.tool h3 { margin: 0 0 10px; font-size: 15px; }
.tool label { display: block; font-size: 12.5px; font-weight: 700; margin: 12px 0 4px; }
.tool input, .tool select, .tool textarea { width: 100%; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 11px; font-size: 15px; background: #fdfaf4; }
.tool .help { font-size: 11.5px; color: var(--dim); margin: 5px 0 0; }
.tool .row2 { display: grid; gap: 12px; }
@media (min-width: 620px) { .tool .row2 { grid-template-columns: 1fr 1fr; } }
.tool .out { background: #f8f4eb; border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 14px 0 0; font-size: 14px; }
.tool pre { white-space: pre-wrap; word-wrap: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; margin: 0; }
.tool .copy { display: inline-block; width: auto; margin: 10px 0 0; padding: 10px 14px; font-size: 13.5px; }
.tool .disclaimer { font-size: 12px; color: var(--dim); margin: 14px 0 0; }

.page-list { list-style: none; padding: 0; margin: 18px 0 0; }
.page-list li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 15px; margin-bottom: 10px; }
.page-list a { font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none; }
.page-list a:hover { text-decoration: underline; }
.page-list span { display: block; font-size: 13px; color: #5c6773; margin-top: 4px; line-height: 1.5; }

/* ---------- desktop ---------- */

@media (min-width: 760px) {
  .hero, section.block, .content-page .wrap.narrow { max-width: 760px; margin: 0 auto; }
  .hero h1 { font-size: 46px; }
  .content-page h1 { font-size: 40px; }
  .plans { grid-template-columns: 1fr 1fr; }
  .ladder { }
}

/* The rung's fade is decoration: with motion reduced, the state change is instant and still visible. */
@media (prefers-reduced-motion: reduce) {
  .rung { transition: none; }
}

/* ---------- print ---------- */

/* A guide or a tool page is something people print: an invoice template, a letter, a checklist.
   Everything worth keeping is already plain markup, so this only takes the chrome away and drops
   the coloured panels for something a black and white printer handles. */
@media print {
  .site-header, .site-footer, .crumbs, .inline-cta, .tool .copy { display: none; }
  .content-page .wrap.narrow, .hero, section.block { max-width: none; margin: 0; }
  .quick-answer, .callout, blockquote, .content-page table, .tool { background: #fff; border-color: #8a8a8a; }
  .content-page h1 { font-size: 26px; }
  a { color: inherit; text-decoration: none; }
}