/* EvidenceReady: the calm binder.

   Brand direction approved 2026-10-07: the opposite of assessment panic. A
   well-kept ring binder on a quiet desk: chalk paper, slate ink and a sage
   tab colour, Literata for headings (a book face, unhurried) and Hanken
   Grotesk for reading. The hero is the sample supplier's real 55-slot grid as
   the engine scored it; the 90-day plan is drawn to scale from the pack.
   Nothing is shared with the other five sites. Property names stay
   compatible with the inline blocks on the legal and order pages. */

@font-face { font-family: "Literata"; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url("fonts/Literata.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("fonts/Literata-Italic.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300 800;
  font-display: swap; src: url("fonts/HankenGrotesk.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --chalk: #f3f1ea;
  --chalk-2: #e8e5db;
  --page: #fffefa;
  --slate: #26313a;
  --slate-soft: #3a4650;
  --muted: #56616b;
  --sage: #47664f;
  --sage-deep: #2d4a37;
  --sage-tint: #dde6da;
  --ochre: #8f6210;
  --clay: #b8604a;
  --rule: rgba(38, 49, 58, .16);
  --ink: var(--slate);
  --ink-soft: var(--slate-soft);
  --paper: var(--chalk);
  --paper-deep: var(--chalk-2);
  --sheet: var(--page);
  --spot: var(--sage);
  --serif: "Literata", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --max: 1180px;
  --gut: clamp(18px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--chalk); color: var(--slate-soft); font: 400 18px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--slate); text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: var(--sage); }
a:hover { color: var(--sage-deep); }
:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; }
p { margin: 0 0 1em; }
b, strong { color: var(--slate); font-weight: 700; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--slate); color: #fff; padding: 12px 18px; }
.skip:focus { left: 0; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--slate); margin: 0; }
h1 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.08; letter-spacing: -.015em; }
h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; letter-spacing: -.01em; }
h3 { font-size: 22px; line-height: 1.25; font-weight: 600; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--sage); }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); margin: 0 0 14px; }

/* -- header: three rings and a name ----------------------------------------- */
.top { border-bottom: 1px solid var(--rule); background: var(--chalk); }
.top .wrap { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; min-height: 70px; }
.logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 25px; font-weight: 600;
  color: var(--slate); text-decoration: none; margin-right: auto; }
.logo .rings { display: inline-flex; flex-direction: column; gap: 4px; }
.logo .rings i { display: block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--sage); }
.logo b { color: var(--sage); font-weight: 600; }
.top nav { display: flex; gap: 6px 24px; flex-wrap: wrap; }
.top nav a { color: var(--slate-soft); text-decoration: none; font-size: 16px; padding: 6px 0; }
.top nav a:hover { color: var(--sage-deep); text-decoration: underline; }
.top .buy { background: var(--slate); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 10px 18px; border-radius: 8px; }
.top .buy:hover { background: var(--sage-deep); }

/* -- buttons ------------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 15px 28px;
  border-radius: 10px; background: var(--sage-deep); color: #fff; font: 700 18px/1.2 var(--sans); text-decoration: none;
  border: 2px solid var(--sage-deep); transition: background-color .15s, color .15s; }
.btn:hover { background: var(--slate); border-color: var(--slate); color: #fff; }
.btn.line { background: transparent; color: var(--slate); border-color: var(--slate); }
.btn.line:hover { background: var(--slate); color: #fff; }

/* -- hero ------------------------------------------------------------------- */
.hero { padding: clamp(44px, 6vw, 84px) 0 clamp(56px, 7vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero .lede { font-size: 20px; max-width: 31em; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.acts .ask { font-size: 16px; display: inline-flex; align-items: center; min-height: 28px; }
.promise { margin-top: 24px; font-size: 16px; max-width: 34em; background: var(--sage-tint); border-radius: 10px; padding: 14px 18px; }
.promise b { color: var(--sage-deep); }

/* The binder: the sample supplier's 55 slots as the engine scored them. */
.binder { position: relative; background: var(--page); border-radius: 6px 14px 14px 6px; padding: 26px 26px 22px 64px;
  box-shadow: 0 1px 0 rgba(38, 49, 58, .08), 0 30px 60px -36px rgba(38, 49, 58, .55); }
.binder::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 38px; border-radius: 6px 0 0 6px;
  background: var(--slate); }
.binder::after { content: ""; position: absolute; left: 12px; top: 22%; width: 14px; height: 14px; border-radius: 50%;
  background: var(--chalk-2); box-shadow: 0 140px 0 var(--chalk-2), 0 70px 0 var(--chalk-2); }
.binder .head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule); padding-bottom: 12px; margin: 0 0 16px; }
.theme { margin: 0 0 14px; }
.theme .name { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; font-weight: 700; color: var(--slate); margin: 0 0 7px; }
.theme .name span { font-weight: 400; color: var(--muted); }
.cells { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 5px; }
.cells i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--clay); }
.cells i.on { background: var(--sage); }
.cells i.part { background: #d9a43b; }
.cells i.na { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend span::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: var(--clay); }
.legend .on::before { background: var(--sage); }
.legend .part::before { background: #d9a43b; }
.legend .na::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule); }
.binder .src { font-size: 13.5px; color: var(--muted); margin: 12px 0 0; }

/* -- sections --------------------------------------------------------------- */
.sec { padding: clamp(60px, 7vw, 104px) 0; }
.sec.page { background: var(--page); }
.sec.sage { background: var(--sage-tint); }
.sec header { max-width: 46em; margin-bottom: 44px; }
.sec .lead { font-size: 19px; margin-top: 16px; }

/* What it does: index tabs down the edge of the page. */
.tabs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
.tabs li { position: relative; background: var(--page); border-radius: 0 12px 12px 0; padding: 24px 26px 22px 30px; border-left: 6px solid var(--sage); }
.tabs li:nth-child(2) { border-left-color: #6f8a73; } .tabs li:nth-child(3) { border-left-color: #8fa48f; } .tabs li:nth-child(4) { border-left-color: var(--slate-soft); }
.tabs h3 { margin-bottom: 8px; }
.tabs p { margin: 0; font-size: 16.5px; }
.sec.page .tabs li { background: var(--chalk); }

/* The 90 days, drawn to scale. */
.days { display: grid; gap: 0; margin: 0 0 30px; border-radius: 10px; overflow: hidden;
  grid-template-columns: 7fr 14fr 24fr 25fr 15fr 5fr; }
.days span { display: block; height: 14px; background: var(--sage); }
.days span:nth-child(2) { background: #5f7d66; } .days span:nth-child(3) { background: #78937c; }
.days span:nth-child(4) { background: #93aa95; } .days span:nth-child(5) { background: #aebfae; } .days span:nth-child(6) { background: var(--slate); }
.plan { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.plan li { background: var(--page); border-radius: 12px; padding: 20px 22px; border-top: 4px solid var(--sage); }
.plan li:nth-child(6) { border-top-color: var(--slate); }
.plan .when { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--sage-deep); margin: 0 0 6px; }
.plan p { margin: 0; font-size: 16px; }
.plan-note { font-size: 15.5px; margin: 24px 0 0; max-width: 50em; }

/* Real pages, in sheet protectors. */
.sleeves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); }
.sleeves figure { margin: 0; }
.sleeves .s { position: relative; padding: 12px 12px 12px 30px; border-radius: 6px;
  background: linear-gradient(115deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .25) 40%, rgba(255, 255, 255, .55));
  box-shadow: inset 0 0 0 1px rgba(38, 49, 58, .14), 0 22px 36px -28px rgba(38, 49, 58, .7); }
.sleeves .s::before { content: ""; position: absolute; left: 10px; top: 18%; width: 9px; height: 9px; border-radius: 50%;
  background: var(--chalk-2); box-shadow: inset 0 0 0 1px rgba(38, 49, 58, .25), 0 90px 0 var(--chalk-2), 0 180px 0 var(--chalk-2); }
.sleeves figcaption { margin-top: 14px; font-size: 15.5px; }
.sleeves figcaption b { font-family: var(--serif); font-weight: 600; }
.sleeves-note { font-size: 15.5px; margin-top: 26px; max-width: 46em; }

.checker { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 18px 32px; align-items: center;
  border: 1px solid var(--rule); border-radius: 14px; padding: 26px 28px; background: var(--page); margin-top: 44px; }
.checker h3 { font-size: 25px; }
.checker p { margin: 6px 0 0; }

/* After you pay. */
.after-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: s;
  border-top: 1px solid var(--rule); }
.after-steps li { counter-increment: s; padding: 22px 22px 0 0; }
.after-steps li::before { content: counter(s); display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; border: 2px solid var(--sage); font-family: var(--serif); font-weight: 600; color: var(--sage-deep); margin-bottom: 14px; }
.after-steps .when { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.after-steps h3 { margin: 4px 0 8px; font-size: 21px; }
.after-steps p { margin: 0; font-size: 16px; }

/* Price. */
.vat { font-size: 15px; max-width: 54em; margin: 0 0 28px; }
.prices { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; align-items: stretch; }
.price { background: var(--page); border-radius: 16px; padding: 30px 30px 28px; border: 1px solid var(--rule); display: flex; flex-direction: column; }
.price.main { border: 2px solid var(--sage-deep); }
.price .who { font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); margin: 0; }
.price .name { font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--slate); margin: 6px 0 0; }
.price .amt { font-family: var(--serif); font-size: 64px; font-weight: 500; line-height: 1; color: var(--slate); margin: 14px 0 4px; }
.price .amt small { font-family: var(--sans); font-size: 16px; font-weight: 400; color: var(--muted); }
.price ul { list-style: none; margin: 18px 0 24px; padding: 0; flex: 1; }
.price li { position: relative; padding: 8px 0 8px 26px; border-top: 1px solid var(--rule); font-size: 16px; }
.price li::before { content: ""; position: absolute; left: 3px; top: 15px; width: 10px; height: 6px;
  border-left: 2px solid var(--sage); border-bottom: 2px solid var(--sage); transform: rotate(-45deg); }
.price .buttons { display: flex; flex-direction: column; gap: 10px; }
.fine { font-size: 15px; max-width: 56em; margin: 22px 0 0; }

/* Founder note. */
.founder { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.founder .letter p { font-family: var(--serif); font-size: 20px; line-height: 1.6; color: var(--slate); }
.founder .letter .sig { font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--sage-deep); margin: 8px 0 0; }
.founder .letter .who { font-size: 15px; color: var(--muted); }
.founder dl { margin: 0; background: var(--page); border-radius: 12px; padding: 6px 22px 18px; }
.founder dt { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); margin-top: 14px; }
.founder dd { margin: 2px 0 0; color: var(--slate); overflow-wrap: anywhere; }

/* Limits. */
.limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.limits > div { background: var(--page); border-radius: 12px; padding: 22px 24px; }
.limits h3 { font-size: 20px; margin-bottom: 8px; }
.limits p { margin: 0; font-size: 16px; }

/* Questions. */
.qa { max-width: 860px; border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary { list-style: none; cursor: pointer; padding: 20px 52px 20px 0; position: relative; font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--slate); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; position: absolute; right: 8px; top: 26px; width: 10px; height: 10px;
  border-right: 2px solid var(--sage); border-bottom: 2px solid var(--sage); transform: rotate(45deg); }
.qa details[open] summary::after { transform: rotate(-135deg); top: 31px; }
.qa .a { padding: 0 0 20px; font-size: 17px; }
.qa .a p:last-child { margin: 0; }

/* Closing. */
.closing { background: var(--sage-deep); color: #fff; padding: clamp(52px, 6vw, 88px) 0; }
.closing .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: 22px 48px; align-items: center; }
.closing h2 { color: #fff; }
.closing h2 em { color: #cfe0cf; }
.closing p { margin: 14px 0 0; font-size: 19px; color: rgba(255, 255, 255, .88); }
.closing .btn { background: #fff; color: var(--slate); border-color: #fff; }
.closing .btn:hover { background: var(--slate); color: #fff; border-color: var(--slate); }

/* Footer. */
.foot { background: var(--chalk-2); padding: 46px 0 36px; font-size: 15px; }
.foot .cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px 48px; }
.foot .fh { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--slate); margin: 0 0 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a, .foot p a { display: inline-flex; align-items: center; min-height: 26px; }
.foot .legal { border-top: 1px solid var(--rule); margin-top: 28px; padding-top: 18px; font-size: 14px; color: var(--muted); }

.buybar { display: none; }

@media (max-width: 980px) {
  .hero .wrap, .founder, .closing .wrap, .checker, .prices { grid-template-columns: minmax(0, 1fr); }
  .tabs, .limits, .foot .cols { grid-template-columns: minmax(0, 1fr); }
  .plan, .after-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top nav { display: none; }
}
@media (max-width: 700px) {
  body { padding-bottom: 74px; }
  .top .buy { display: none; }
  .buybar { display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--slate); color: #fff; }
  .buybar .p { font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1; }
  .buybar .p small { font-family: var(--sans); font-size: 12.5px; font-weight: 400; opacity: .8; margin-left: 6px; }
  .buybar a { background: var(--sage); color: #fff; font-weight: 700; text-decoration: none; min-height: 48px; padding: 0 20px;
    border-radius: 10px; display: inline-flex; align-items: center; }
  .plan, .after-steps, .sleeves { grid-template-columns: minmax(0, 1fr); }
  .sleeves figure:nth-child(n+2) { display: none; }
  .binder { padding: 20px 16px 18px 50px; }
  .binder::before { width: 30px; }
  .binder::after { left: 8px; }
  .cells { gap: 4px; }
  .btn { width: 100%; }
  h1, h2 { overflow-wrap: break-word; }
}
@media print { .top nav, .buybar, .btn { display: none; } }