/* Shared look for the four sites, loaded after style.css and seo.css. The accent (--brand, --brand2) is set per site at the end of the copy.
   Idea: the person's paper is the hero, marked up in highlighter and red pen. The page itself stays quiet: cool desk grey, ink, one accent. */
:root {
  --desk:#EDF1F4; --paper:#FFFFFF; --ink:#152231; --mute:#566474; --line:#D7DEE5; --marker:#FFE27A; --pen:#B8322A;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html, body { background:var(--desk); color:var(--ink); font-family:var(--sans); }
body { font-size:17px; line-height:1.55; }
#app { max-width:none; background:transparent; padding:0; min-height:100vh; }
#app > header.top, #app > main, #app > footer, #app > .landing { max-width:1080px; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px; }
.top { border-bottom:0; padding-top:16px; padding-bottom:6px; }
.logo { font-family:var(--serif); font-weight:700; font-size:22px; letter-spacing:0; color:var(--ink); display:inline-flex; align-items:center; gap:8px; }
.logo::before { content:""; width:20px; height:20px; border-radius:6px; background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
h1, h2, h3 { font-family:var(--serif); color:var(--ink); letter-spacing:0; }
h1 { font-weight:700; }
h2 { font-weight:700; }
h3 { font-weight:600; }
a { color:var(--brand2); }
:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }
.btn { border-radius:10px; font-family:var(--sans); font-size:17px; font-weight:650; padding:14px 18px; }
.btn.main { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn.main:hover { background:var(--brand2); border-color:var(--brand2); }
.btn.ghost { border-color:transparent; background:transparent; color:var(--brand2); text-decoration:underline; text-underline-offset:3px; font-weight:600; }
.lang button { background:transparent; border-color:var(--line); }
.lang button.on { background:var(--ink); border-color:var(--ink); }

/* Home */
.landing { padding-bottom:12px; }
.hero { display:grid; gap:28px; padding:18px 0 34px; align-items:center; }
.hero h1 { font-size:34px; line-height:1.12; margin:10px 0 14px; max-width:16em; }
.hero .sub { font-size:18.5px; color:var(--mute); max-width:32em; margin:0 0 20px; }
.ctas { display:grid; gap:2px; max-width:420px; }
.ctas .btn { margin:6px 0; }
.trust { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; max-width:440px; }
.trust li { display:flex; gap:10px; align-items:flex-start; font-size:15.5px; color:var(--ink); }
.ico { width:22px; height:22px; flex:none; color:var(--brand); margin-top:1px; }
.paper-wrap { margin:0; }
.paper { background:var(--paper); border:1px solid #C9D2DB; border-radius:4px; padding:18px 18px 16px; box-shadow:7px 7px 0 #D3DBE3; font-variant-numeric:tabular-nums; max-width:460px; }
.paper-head { display:flex; flex-direction:column; border-bottom:2px solid var(--ink); padding-bottom:8px; margin-bottom:6px; }
.paper-head b { font-family:var(--serif); font-size:19px; }
.paper-head span { font-size:13.5px; color:var(--mute); }
.paper-lines { list-style:none; margin:0; padding:0; }
.pl { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 12px; padding:9px 0 8px; border-bottom:1px dashed #D4DBE2; font-size:15px; position:relative; }
.pl-label { flex:1 1 60%; }
.pl-amt { font-weight:650; }
.pl.hl .t { background:linear-gradient(transparent 50%, var(--marker) 50%, var(--marker) 94%, transparent 94%); -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:0 2px; }
.pl.strike .t { text-decoration:line-through; text-decoration-color:var(--pen); text-decoration-thickness:2px; color:#6B7684; }
.pl-badge { position:absolute; right:-8px; top:-8px; border:2px solid var(--pen); color:var(--pen); border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; background:#fff; transform:rotate(-8deg); }
.pl-note { flex-basis:100%; font-family:var(--serif); font-style:italic; color:var(--brand2); font-size:15px; padding-left:12px; border-left:2px solid var(--brand); margin-top:2px; }
.pl.strike .pl-note { color:var(--pen); border-left-color:var(--pen); }
.paper-total { display:flex; justify-content:space-between; padding-top:10px; font-size:15.5px; }
.paper-total b { font-size:17px; }
.paper-stamp { display:inline-block; margin-top:12px; border:2px solid var(--brand); color:var(--brand); border-radius:6px; padding:4px 10px; font-weight:750; font-size:14.5px; transform:rotate(-2deg); }
.paper-wrap figcaption { font-size:13px; color:var(--mute); margin-top:14px; }
.steps, .why, .faq, .last { border-top:1px solid var(--line); padding:30px 0 8px; }
.steps h2, .why h2, .faq h2, .last h2 { font-size:27px; margin:0 0 16px; }
.steps ol { list-style:none; counter-reset:s; padding:0; margin:0; display:grid; gap:18px; }
.steps li { counter-increment:s; display:grid; grid-template-columns:44px 1fr; column-gap:12px; }
.steps li::before { content:counter(s); grid-row:span 2; font-family:var(--serif); font-size:34px; line-height:1; color:var(--brand); font-weight:700; }
.steps h3 { font-size:20px; margin:2px 0 2px; }
.steps p, .why p { margin:0; color:var(--mute); }
.why ul { list-style:none; padding:0; margin:0; display:grid; gap:20px; }
.why li { display:flex; gap:14px; }
.why .ico { width:26px; height:26px; }
.why h3 { font-size:19px; margin:0 0 2px; }
.faq details { border-top:1px solid var(--line); padding:4px 0; margin:0; }
.faq details:last-of-type { border-bottom:1px solid var(--line); }
.faq summary { font-family:var(--sans); font-weight:650; padding:12px 28px 12px 0; position:relative; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:4px; top:8px; font-size:22px; color:var(--brand); font-weight:500; }
.faq details[open] summary::after { content:"\2212"; }
.faq details p { margin:0 0 12px; color:var(--mute); max-width:44em; }
.last { padding-bottom:20px; }
.last p { color:var(--mute); max-width:36em; }
.last .btn { max-width:420px; }
@media (min-width:900px) {
  .hero { grid-template-columns:1.05fr 0.95fr; gap:56px; padding:40px 0 56px; }
  .hero h1 { font-size:46px; }
  .paper { transform:rotate(-1.2deg); margin-left:auto; }
  .paper-wrap figcaption { text-align:right; }
  .why ul { grid-template-columns:1fr 1fr; gap:26px 40px; }
  .steps ol { grid-template-columns:repeat(3, 1fr); gap:28px; }
}

/* App screens: a white sheet on the desk */
#app > main:not(.landing) { background:var(--paper); border:1px solid var(--line); border-radius:14px; max-width:680px; padding:4px 20px 24px; margin-top:8px; margin-bottom:8px; }
.sum h2 { font-size:26px; line-height:1.2; }
.big { border-radius:12px; }
.big strong { font-family:var(--serif); }
.card { background:#fff; }
.pay { background:#F4F7F9; border:1px solid var(--line); margin-left:0; margin-right:0; }
pre { font-size:15px; }
footer { border-top:1px solid var(--line); color:var(--mute); font-size:13.5px; padding-top:14px; padding-bottom:28px; }
footer a { color:var(--mute); }
.seo-links { max-width:1080px; padding:6px 20px 24px; }

/* Content pages: a readable column on a white sheet */
#app.seo > main { background:var(--paper); border:1px solid var(--line); border-radius:14px; max-width:760px; padding:6px 26px 26px; margin-top:8px; }
.seo h1 { font-size:32px; line-height:1.15; }
.seo h2 { font-size:23px; }
.seo .nav a { color:var(--ink); }
.seo .nav a.cta { background:var(--brand); color:#fff; }
.seo .btn.main { display:block; max-width:420px; }
@media (max-width:560px) {
  #app > main:not(.landing), #app.seo > main { border-radius:0; border-left:0; border-right:0; padding-left:18px; padding-right:18px; }
  .seo .nav { gap:10px; font-size:14.5px; }
}
@media print { .landing, .seo-links { display:none !important; } }

:root { --brand:#23407A; --brand2:#1B3361; }