/* Paws & Papers v8. One typeface (Inter), hierarchy by weight and size, sentence case. White and a light grey surface,
   near-black text, one green for the brand, colour only where it means something (status). The planner is the product:
   it sits on the first screen with its answer; everything else is quiet support. */
@font-face { font-family: Inter; src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: Inter; src: url(/fonts/inter-cyrillic-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --bg: #FFFFFF; --surface: #F5F5F7; --card: #FFFFFF; --ink: #1D1D1F; --muted: #6E6E73; --line: #D2D2D7; --line-2: #E8E8ED;
  --brand: #1F6F4A; --brand-soft: #E6F2EB; --ok: #1F6F4A; --ok-soft: #E6F2EB; --late: #B3261E; --late-soft: #FBE9E7; --hard: #9A6700; --hard-soft: #FFF3D6;
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --r: 14px; --w: 1200px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 30; border-radius: 8px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.num { font-variant-numeric: tabular-nums; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.85); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid var(--line-2); }
.top-in { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px 20px; min-height: 52px; }
.logo { font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.logo:hover { text-decoration: none; }
.nav { justify-self: end; display: flex; gap: 4px; }
.nav a { font-size: 14px; color: var(--muted); padding: 7px 10px; border-radius: 8px; }
.nav a:hover { color: var(--ink); text-decoration: none; background: var(--surface); }
.nav a[aria-current=page] { color: var(--ink); font-weight: 600; }
.top-cta { font-size: 14px; font-weight: 600; color: #fff; background: var(--ink); padding: 8px 14px; border-radius: 999px; white-space: nowrap; }
.top-cta:hover { background: #000; text-decoration: none; }
.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 600; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); }
.lang summary::-webkit-details-marker { display: none; }
.globe { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lang ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; list-style: none; margin: 0; padding: 6px; min-width: 170px; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 12px 32px -12px rgba(0,0,0,.25); }
.lang li a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--ink); }
.lang li a:hover { background: var(--surface); text-decoration: none; }
.lang li a[aria-current] { font-weight: 600; color: var(--brand); }
@media (max-width: 760px) {
  .top-in { grid-template-columns: 1fr auto auto; padding-top: 8px; min-height: 0; }
  .nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; overflow-x: auto; scrollbar-width: none; margin: 0 -24px; padding: 0 14px 6px; }
  .nav::-webkit-scrollbar { display: none; } .nav a { flex: none; }
  .top-cta { padding: 7px 11px; font-size: 13px; } .lang summary { padding: 6px 9px; }
}

/* Hero: one headline, one line of text, the planner right under it */
.hero { padding: 26px 0 8px; }
.hero-row { display: grid; gap: 20px; align-items: center; margin-bottom: 18px; }
@media (min-width: 900px) { .hero-row { grid-template-columns: minmax(0, 1fr) 200px; gap: 40px; } }
.hero h1 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.03em; max-width: 22ch; }
.hero h1 span { color: var(--brand); }
.hero-lead { margin: 10px 0 0; font-size: 17px; color: var(--muted); max-width: 60ch; }
.trust { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.hero-photo { margin: 0; }
.hero-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 35%; border-radius: var(--r); background: var(--surface); }
.hero-photo figcaption { margin-top: 6px; font-size: 11px; color: var(--muted); text-align: right; }
.hero-photo figcaption a { color: var(--muted); }
@media (max-width: 899px) { .hero-photo { display: none; } .hero { padding-top: 18px; } }
.welcome, .suggest { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--brand-soft); font-size: 14px; }
.welcome p { margin: 0; } .welcome .btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
.suggest a { font-weight: 600; }
.sg-x { background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; padding: 2px 6px; }
.wfoot { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* Planner card */
.planner { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.bar { display: grid; grid-template-columns: 1fr 1fr; }
@media (min-width: 1000px) { .bar { grid-template-columns: 1.45fr 1.45fr 1fr .85fr 1fr 1fr; } }
.fld { display: block; margin: 0; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); min-width: 0; }
.fld:nth-child(2n) { border-right: 0; }
@media (min-width: 1000px) { .fld { border-bottom: 0; border-right: 1px solid var(--line-2) !important; } .fld:last-child { border-right: 0 !important; } }
.fl { display: block; padding: 0; margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.fld select, .fld input:not([type=checkbox]):not([type=radio]) { display: block; width: 100%; min-width: 0; -webkit-appearance: none; appearance: none; border: 0; background: transparent; padding: 0; color: var(--ink); font: 600 17px/1.3 var(--font); letter-spacing: -.01em; cursor: pointer; border-radius: 0; text-overflow: ellipsis; }
.fld select { padding-right: 18px; background: linear-gradient(45deg, transparent 50%, var(--muted) 50%) right 6px center / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--muted) 50%) right 0 center / 6px 6px no-repeat; }
.fld input::placeholder { color: #B0B0B5; font-weight: 500; }
.fld input[type=date] { font-size: 16px; }
.fld :focus { outline: none; }
.fld:focus-within { background: var(--surface); }
.pets { display: flex; gap: 6px; }
.pets label { position: relative; cursor: pointer; }
.pets input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pets span { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); transition: background .15s, border-color .15s, color .15s; }
.pets input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.pets input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.fld-ready { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fld-ready .fl { margin: 0; max-width: 62%; }
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .2s; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.switch input:checked + i { background: var(--brand); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px; }
.bar-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 16px; border-top: 1px solid var(--line-2); background: var(--surface); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 500 13px/1 var(--font); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.hint { margin: 0; font-size: 12px; color: var(--muted); max-width: 440px; }

/* Answer */
.live { display: grid; border-top: 1px solid var(--line-2); }
@media (min-width: 900px) { .live { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.live-main { padding: 16px 16px 18px; }
@media (min-width: 900px) { .live-main { border-right: 1px solid var(--line-2); } }
.live-ex { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--brand); }
.live-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.live-word { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.live[data-v=ok] .live-word { color: var(--ok); } .live[data-v=late] .live-word { color: var(--late); } .live[data-v=hard] .live-word { color: var(--hard); }
.live-line { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.live-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; max-width: 380px; }
.live-nums b { display: block; font-size: clamp(30px, 3.2vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.live-nums small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.meter { position: relative; height: 4px; border-radius: 2px; background: var(--line-2); margin: 14px 0 0; max-width: 380px; }
.m-have { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--ok); transition: width .5s cubic-bezier(.2,.8,.2,1), background .3s; }
.live[data-v=late] .m-have { background: var(--late); } .live[data-v=hard] .m-have { background: var(--hard); }
.m-need { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); transition: left .5s cubic-bezier(.2,.8,.2,1); }
.live-side { display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
@media (min-width: 900px) { .live-side { border-top: 0; } }
.live-docs { padding: 14px 16px; flex: 1; }
.ld-k { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.live-docs ol { list-style: none; margin: 0; padding: 0; counter-reset: d; columns: 2 200px; column-gap: 20px; }
.live-docs li { counter-increment: d; break-inside: avoid; display: flex; gap: 8px; padding: 5px 0; font-size: 14px; font-weight: 500; }
.live-docs li::before { content: counter(d, decimal-leading-zero); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.live-docs li.ld-more { color: var(--muted); font-weight: 400; }
.live-docs li.ld-more::before { content: ""; }
.live .go { margin: 0 16px 16px; border-radius: 10px; min-height: 46px; align-self: start; }

/* Status chips */
.chip-s { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: var(--surface); color: var(--ink); }
.chip-s::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.v-ok, .s-done { background: var(--ok-soft); color: var(--ok); }
.v-late, .s-risk { background: var(--late-soft); color: var(--late); }
.v-hard, .s-now { background: var(--hard-soft); color: var(--hard); }
.s-soon { background: var(--surface); color: var(--ink); } .s-later { background: var(--surface); color: var(--muted); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line); font: 600 14px/1.2 var(--font); text-align: center; cursor: pointer; background: #fff; color: var(--ink); transition: background .15s, border-color .15s; }
.btn:hover { text-decoration: none; border-color: var(--ink); }
.btn.primary, .btn.main, .btn.tag { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover, .btn.main:hover, .btn.tag:hover { background: #185A3C; }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 13px; background: var(--ink); border-color: var(--ink); color: #fff; }
.btn:disabled { opacity: .4; cursor: default; }

/* Sections */
.sec { padding: 56px 0 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 6px; }
.sec h2 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.025em; }
.sec-link { font-size: 14px; font-weight: 500; }
.sec-note { font-size: 13px; color: var(--muted); }
.sub { margin: 0 0 16px; color: var(--muted); font-size: 15px; max-width: 60ch; }

/* Destinations */
.board { border-top: 1px solid var(--line-2); }
.b-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 110px 170px; gap: 12px; align-items: center; width: 100%; padding: 12px 6px; border: 0; border-bottom: 1px solid var(--line-2); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.b-row:hover { background: var(--surface); text-decoration: none; }
.b-row.is-on { background: var(--brand-soft); }
.b-head { cursor: default; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.b-head:hover { background: none; }
.b-code { font-size: 18px; line-height: 1; }
.b-head .b-code { font-size: inherit; }
.b-dest { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.b-head .b-dest { font: inherit; }
.b-need { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.b-stat { justify-self: end; }
.b-row:not(.b-head) .b-stat { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.b-stat.s-ok { background: var(--ok-soft); color: var(--ok); } .b-stat.s-late { background: var(--late-soft); color: var(--late); } .b-stat.s-hard { background: var(--hard-soft); color: var(--hard); }
@media (max-width: 620px) { .b-row { grid-template-columns: 30px minmax(0, 1fr) auto; } .b-need { display: none; } }

/* Four facts and three steps: quiet rows */
.facts4 { display: grid; gap: 1px; grid-template-columns: 1fr 1fr; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
@media (min-width: 900px) { .facts4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { background: #fff; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.fact b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--late); }
.fact p { margin: 0; font-size: 14px; color: var(--ink); }
.fact a { margin-top: auto; font-size: 12px; color: var(--muted); }
.how3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
@media (min-width: 760px) { .how3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.how3 li { display: flex; gap: 14px; background: #fff; padding: 18px; }
.how-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; }
.how3 h3 { font-size: 16px; margin-bottom: 4px; }
.how3 p { margin: 0; font-size: 14px; color: var(--muted); }
.faq details { border-bottom: 1px solid var(--line-2); padding: 14px 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 300; font-size: 22px; line-height: 1; color: var(--muted); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 8px 0 0; max-width: 72ch; color: var(--muted); font-size: 15px; }
.foot { margin: 64px 0 0; padding: 22px 0 32px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--muted); }
.foot-in p { margin: 4px 0; } .foot b { color: var(--ink); } .foot a { color: var(--muted); }

/* Plan */
.plan { padding: 40px 0 0; scroll-margin-top: 60px; outline: none; }
.p-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; padding-bottom: 16px; }
.p-title { font-size: clamp(24px, 3vw, 36px); letter-spacing: -.03em; margin-top: 6px; }
.p-meta { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.stats { display: grid; gap: 1px; grid-template-columns: 1fr 1fr; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { background: #fff; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat small { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.stat b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat b span { font: inherit; }
.stat span { font-size: 13px; color: var(--muted); }
.stat-dark { background: var(--ink); color: #fff; }
.stat-dark small, .stat-dark span { color: #A1A1A6; } .stat-dark b { color: #fff; }
.sbar { display: block; height: 4px; border-radius: 2px; background: #3A3A3C; overflow: hidden; }
.sbar i { display: block; height: 100%; width: 0; background: #fff; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.v-word { margin: 0; font-size: 20px !important; font-weight: 700; letter-spacing: -.02em; }
.plan[data-verdict=ok] .v-word { color: var(--ok); } .plan[data-verdict=late] .v-word { color: var(--late); } .plan[data-verdict=hard] .v-word { color: var(--hard); }
.v-earliest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 12px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--late-soft); }
.v-earliest p { margin: 0; font-weight: 500; }
.v-skip { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.whatif { margin: 20px 0 0; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r); }
.whatif label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.whatif label b { font-weight: 700; }
.whatif input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; margin: 8px 0; cursor: pointer; background: linear-gradient(90deg, #EFC2BD 0 var(--min, 0%), #C8E3D4 var(--min, 0%) 100%); }
.whatif input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.whatif input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid var(--line); }
.slide-min { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.p-grid { display: grid; gap: 32px; margin-top: 28px; align-items: start; }
@media (min-width: 980px) { .p-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; } }
.p-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; }
.p-sub h3 { font-size: 20px; }
.progress { font-size: 13px; color: var(--muted); }

/* Timeline */
.tl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.tl-item, .tl-wait { display: grid; grid-template-columns: 90px 18px minmax(0, 1fr); gap: 0 12px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.tl-date time { display: block; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-rel { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.tl-dot { width: 10px; height: 10px; margin: 6px 0 0 4px; border-radius: 50%; border: 2px solid var(--muted); background: #fff; }
.tl-item.st-now .tl-dot, .tl-item.st-risk .tl-dot { border-color: var(--late); background: var(--late); }
.tl-item.st-soon .tl-dot { border-color: var(--hard); background: var(--hard); }
.tl-item.st-done .tl-dot { border-color: var(--ok); background: var(--ok); }
.tl-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.tl-name { font-size: 18px; letter-spacing: -.015em; }
.tl-item.st-done .tl-name { color: var(--muted); text-decoration: line-through; }
.tl-why { margin: 6px 0 0; font-size: 15px; max-width: 68ch; }
.tl-facts { display: grid; gap: 8px 20px; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); margin: 12px 0 0; }
.tl-facts dt { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.tl-facts dd { margin: 3px 0 0; font-size: 14px; font-weight: 500; }
.tl-more { margin-top: 10px; font-size: 14px; color: var(--muted); }
.tl-more summary { cursor: pointer; color: var(--brand); font-weight: 500; }
.tl-more p { margin: 6px 0 0; }
.tick { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; cursor: pointer; font-size: 14px; font-weight: 600; }
.tick input { width: 18px; height: 18px; margin: 0; accent-color: var(--ok); }
.tl-wait { padding: 10px 0; }
.tl-wait .tl-dot { width: 8px; height: 8px; margin: 7px 0 0 5px; border: 1px dashed var(--muted); background: none; }
.tl-wait p { margin: 0; font-size: 14px; color: var(--muted); }
.tl-wait p b { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); margin-right: 8px; }
.tl-go .tl-dot { border-color: var(--ink); background: var(--ink); }
.tl-go p { color: var(--ink); font-weight: 600; }
@media (max-width: 620px) {
  .tl-item, .tl-wait { grid-template-columns: 12px minmax(0, 1fr); gap: 0 12px; }
  .tl-date { grid-column: 2; grid-row: 1; display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
  .tl-rel { margin: 0; } .tl-dot { grid-column: 1; grid-row: 1; margin: 4px 0 0; }
  .tl-body, .tl-wait p { grid-column: 2; } .tl-wait .tl-dot { margin: 5px 0 0 2px; }
}
.all-done { margin: 16px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--ok-soft); }
.all-done b { display: block; font-size: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.side { display: grid; gap: 24px; }
.box { padding-top: 14px; border-top: 1px solid var(--line-2); }
.box h3 { font-size: 15px; margin-bottom: 8px; }
.box ul { margin: 0; padding-left: 18px; }
.box li { margin: 6px 0; font-size: 14px; }
.checked { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.disclaim { font-size: 12px; color: var(--muted); margin: 0; }
.next-up { display: none; }

/* Reminders and offer */
.offer-wrap { display: grid; gap: 1px; margin-top: 40px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
@media (min-width: 900px) { .offer-wrap { grid-template-columns: 1.2fr 1fr; } }
.remind, .offer, .lead { background: #fff; padding: 22px; }
.lead { grid-column: 1 / -1; background: var(--surface); }
.offer-k { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.remind p, .offer p, .lead p { color: var(--muted); font-size: 14px; }
.remind form, .lead form { display: grid; gap: 12px; margin-top: 12px; max-width: 440px; }
.field .legend { display: block; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.field input { width: 100%; font: 500 16px/1.3 var(--font); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; -webkit-appearance: none; appearance: none; }
.field input:focus { outline: none; border-color: var(--brand); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.consent input { width: 16px; height: 16px; flex: none; margin: 2px 0 0; accent-color: var(--brand); }
.err { color: var(--late); font-weight: 600; font-size: 13px; margin: 0; }
.thanks { font-size: 15px; font-weight: 600; }
.lead h3 { font-size: 18px; margin-bottom: 4px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; z-index: 40; font-size: 14px; }

/* Phone dock */
.dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 15; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 14px; background: rgba(255,255,255,.96); border: 1px solid var(--line); box-shadow: 0 12px 32px -12px rgba(0,0,0,.35); transform: translateY(140%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.dock.on { transform: none; }
.dock-t { flex: 1; min-width: 0; margin: 0; }
.dock-t b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.dock[data-v=late] .dock-t b { color: var(--late); } .dock[data-v=ok] .dock-t b { color: var(--ok); }
.dock-t small { font-size: 12px; color: var(--muted); }
.dock .btn { min-height: 38px; padding: 0 14px; font-size: 13px; }
@media (min-width: 1000px) { .dock { display: none; } }

/* Route pages, catalogue, method, privacy */
.page { padding: 28px 0 40px; }
.crumbs { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.page h1 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.03em; max-width: 26ch; margin-bottom: 14px; }
.answer { margin: 0 0 22px; max-width: 70ch; font-size: 17px; }
.facts { display: grid; gap: 1px; grid-template-columns: 1fr 1fr; margin: 0 0 32px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts > div { background: #fff; padding: 14px 16px; }
.facts dt { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 6px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.page h2, .prose h2 { font-size: 22px; letter-spacing: -.02em; margin: 32px 0 12px; }
.doc-pills { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
@media (min-width: 760px) { .doc-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.doc-pills li { background: #fff; padding: 12px 14px; font-size: 15px; font-weight: 600; }
.doc-pills small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--muted); }
.rsteps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.rsteps li { display: grid; gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
@media (min-width: 760px) { .rsteps li { grid-template-columns: 190px 1fr; } .rs-tags { grid-column: 2; } }
.rs-when { font-size: 13px; font-weight: 600; color: var(--muted); }
.rs-text { font-size: 15px; } .rs-text b { font-weight: 700; }
.rs-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: var(--surface); color: var(--muted); }
.pill-soft { background: var(--brand-soft); color: var(--brand); }
.note { margin: 16px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--hard-soft); max-width: 72ch; font-size: 14px; }
.cta-band { margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; padding: 20px 22px; background: var(--ink); color: #fff; border-radius: var(--r); }
.cta-band p { margin: 0; max-width: 60ch; color: #D1D1D6; font-size: 14px; }
.cta-band b { display: block; font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.cta-band .btn { background: #fff; border-color: #fff; color: var(--ink); }
.prose { max-width: 72ch; } .prose li { margin: 6px 0; } .prose p { margin: 10px 0; }
.src-list { padding-left: 18px; }
.route-faq { margin-top: 32px; }
.cat-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 8px; }
.cat-tools input { flex: 1 1 240px; font: 500 15px/1.3 var(--font); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; -webkit-appearance: none; appearance: none; }
.cat-tools input:focus { outline: none; border-color: var(--brand); }
.cat-empty { color: var(--muted); margin: 24px 0; }
.cat-group { margin: 32px 0 0; }
.cat-group h2 { font-size: 20px; margin: 0 0 8px; }
.cat-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.cat-list a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline; padding: 14px 6px; border-bottom: 1px solid var(--line-2); color: inherit; border-radius: 8px; }
.cat-list a:hover { background: var(--surface); text-decoration: none; }
.cat-code { font-size: 18px; line-height: 1; }
.cat-name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.cat-days { text-align: right; font-size: 13px; color: var(--muted); white-space: nowrap; }
.cat-days b { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cat-desc { grid-column: 2 / -1; font-size: 13px; color: var(--muted); margin: 0; }

/* Motion: short */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes nudge { 25%, 75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
.motion .deal > * { animation: rise .35s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 30ms); }
.pop { animation: fade .3s ease; } .nudge { animation: nudge .35s; }
.motion .tl.draw > li { animation: rise .35s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 40ms); }
.reveal { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

@media print {
  @page { margin: 14mm; }
  body { font-size: 11pt; }
  .top, .hero, .sec, .foot, .offer-wrap, .actions, .skip, .whatif, .dock, .tick input { display: none !important; }
  .p-grid { display: block; } .tl-item { break-inside: avoid; } .tl-more p { display: block; } a { color: #000; }
}
.hero-photo img { height: 200px; aspect-ratio: auto; }
@media (max-width: 999px) { .fld-ready { grid-column: 1 / -1; border-right: 0; } .fld-ready .fl { max-width: none; } }
@media (max-width: 899px) { .trust { display: none; } .hero-lead { font-size: 15px; } .hero h1 { font-size: clamp(26px, 7.2vw, 34px); } }
@media (max-width: 999px) { .fld-date { grid-column: 1 / -1; border-right: 0; } }

/* ===== v9: warmer. Paper instead of white, forest ink, sage for chosen things, sand for small warm touches.
   Softer corners, a bigger photograph of the two of them, pill buttons. Same type, same structure. ===== */
:root { --bg: #F7F4EC; --surface: #EFEBE1; --card: #FFFFFF; --ink: #22302B; --muted: #6B736E; --line: #D9D3C6; --line-2: #E8E3D8;
  --brand: #2F5D47; --brand-soft: #E3EBE2; --ok: #2F7A57; --ok-soft: #E3EFE7; --late: #B4503C; --late-soft: #F7E6E1; --hard: #9A6A1F; --hard-soft: #F7EBD3; --sand: #D9A66B; --r: 18px; }
.top { background: rgba(247,244,236,.86); }
.top-cta { background: var(--brand); border-radius: 999px; }
.top-cta:hover { background: #26503B; }
.hero { padding: 28px 0 8px; }
.hero-row { align-items: center; }
@media (min-width: 900px) { .hero-row { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; } }
.hero h1 { color: var(--ink); }
.hero h1 span { color: var(--brand); }
.hero-lead { color: #4E5752; }
.hero-photo img { height: auto; aspect-ratio: 4 / 3; object-position: 50% 45%; border-radius: 22px; }
@media (max-width: 899px) { .hero-photo { display: block; } .hero-photo img { aspect-ratio: 16 / 9; border-radius: 16px; } .hero-row { gap: 14px; } }
.planner { border-radius: var(--r); border-color: var(--line); box-shadow: 0 18px 50px -36px rgba(34,48,43,.4); }
.bar-foot { background: var(--surface); }
.fld:focus-within { background: var(--brand-soft); }
.pets span { border-radius: 999px; }
.pets input:checked + span { background: var(--brand); border-color: var(--brand); }
.chip[aria-pressed=true] { background: var(--brand); border-color: var(--brand); }
.chip { background: #fff; }
.live-ex { color: var(--muted); }
.live .go { border-radius: 999px; padding: 0 22px; }
.btn { border-radius: 999px; }
.btn.primary, .btn.main, .btn.tag { background: var(--brand); border-color: var(--brand); }
.btn.primary:hover, .btn.main:hover, .btn.tag:hover { background: #26503B; }
.btn.small { background: var(--brand); border-color: var(--brand); }
.chip-s { background: var(--surface); }
.b-row { border-radius: 12px; } .b-row:hover { background: #fff; } .b-row.is-on { background: var(--brand-soft); }
.b-row:not(.b-head) .b-stat.s-ok { background: var(--ok-soft); }
.facts4, .how3, .stats, .facts, .offer-wrap, .doc-pills { border-radius: var(--r); border-color: var(--line-2); background: var(--line-2); }
.fact, .how3 li, .stat, .facts > div, .remind, .offer, .doc-pills li { background: var(--card); }
.fact b { color: var(--brand); }
.fact { border-top: 4px solid var(--sand); }
.how-n { background: var(--sand); color: var(--ink); }
.stat-dark { background: var(--brand); } .stat-dark small, .stat-dark span { color: #BFD3C6; } .sbar { background: rgba(255,255,255,.2); } .sbar i { background: var(--sand); }
.whatif { background: var(--card); border-radius: var(--r); }
.welcome, .suggest { background: var(--brand-soft); border-radius: 12px; }
.all-done { background: var(--ok-soft); border-radius: 12px; }
.cta-band { background: var(--brand); } .cta-band p { color: #CFE0D4; }
.note { background: var(--hard-soft); }
.lead { background: var(--surface); }
.tl-item.st-soon .tl-dot { border-color: var(--sand); background: var(--sand); }
.foot { border-top-color: var(--line); }
.hero-photo figcaption a, .foot a { color: var(--muted); }
/* Reminders inside the answer */
.live-remind { padding: 14px 16px 16px; border-top: 1px solid var(--line-2); background: var(--surface); }
.lr-k { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.lr-row { display: flex; gap: 8px; }
.lr-row input { flex: 1; min-width: 0; font: 500 15px/1.3 var(--font); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; -webkit-appearance: none; appearance: none; }
.lr-row input:focus { outline: none; border-color: var(--brand); }
.lr-btn { min-height: 42px; padding: 0 16px; font-size: 13px; }
.lr-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.lr-note a { color: var(--muted); }
.lr-ok { margin: 0; font-size: 14px; font-weight: 600; color: var(--ok); }
.live .go { margin-bottom: 14px; }

/* ===== v10: the editorial type the user liked, on the compact v9 structure. Spectral for headings, document names
   and figures (regular, italic for the second line), Inter for everything else. Thin rules, terracotta figures,
   sand italic numerals, the vet photograph beside "how it works". ===== */
@font-face { font-family: Spectral; src: url(/fonts/spectral-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: Spectral; src: url(/fonts/spectral-cyrillic-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Spectral; src: url(/fonts/spectral-latin-600-normal.woff2) format('woff2'); font-weight: 500 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: Spectral; src: url(/fonts/spectral-cyrillic-600-normal.woff2) format('woff2'); font-weight: 500 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
:root { --serif: Spectral, Georgia, "Times New Roman", serif; --bg: #F5F2EA; --surface: #EEEAE0; --ink: #253D35; --brand: #253D35; --brand-2: #34503F; --terra: #A3462F; --sand: #D9A66B; --muted: #687068; --line: #D9D3C6; --line-2: #E6E1D6; --late: #A3462F; --r: 14px; }
body { color: #303532; }
h1, h2, h3, h4, .logo, .live-word, .tl-name, .p-title, .stat b, .offer-k, .box h3, .cta-band b, .b-dest, .cat-name, .facts dd, .doc-pills li, .fld select, .fld input:not([type=checkbox]):not([type=radio]), .live-nums b, .fact b, .lead h3, .faq summary, .how3 h3, .lr-k, .v-word, .cat-days b, .all-done b, .dock-t b { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; }
h1, h2, h3, h4 { color: var(--ink); }
.logo { font-size: 22px; display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 3px var(--bg), 0 0 0 1px var(--ink); }
.top { background: rgba(245,242,234,.9); }
.top-cta { background: transparent; color: var(--ink); border: 1px solid var(--ink); font-family: var(--font); }
.top-cta:hover { background: var(--ink); color: var(--bg); }
.nav a { font-family: var(--font); }
.hero { padding-top: 30px; }
.hero h1 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; font-weight: 500; letter-spacing: -.02em; max-width: 18ch; }
.hero h1 em { display: block; font-style: italic; font-weight: 400; color: var(--brand-2); }
.hero-lead { font-family: var(--font); color: #303532; }
.hero-photo img { border-radius: 6px; }
@media (min-width: 900px) { .hero-row { grid-template-columns: minmax(0, 1fr) 400px; } }
.planner { border-radius: 12px; box-shadow: 0 24px 60px -44px rgba(37,61,53,.5); }
.fld select, .fld input:not([type=checkbox]):not([type=radio]) { font-size: clamp(17px, 1.5vw, 22px); font-weight: 500; letter-spacing: 0; }
.fld input[type=date] { font-size: clamp(16px, 1.3vw, 19px); }
.fld input::placeholder { font-family: var(--serif); font-weight: 400; }
.fl { font-family: var(--font); letter-spacing: .1em; }
.bar-arrow { display: none; }
@media (min-width: 1000px) { .bar { grid-template-columns: 1.4fr auto 1.4fr 1.05fr .85fr 1fr 1.05fr; } .bar-arrow { display: grid; place-items: center; padding: 0 2px; color: var(--sand); font: 400 22px/1 var(--serif); border-right: 1px solid var(--line-2); } }
.pets span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; font-family: var(--font); }
.pets svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.pets svg circle, .pets svg path:last-child { fill: currentColor; stroke: none; }
.pets input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip[aria-pressed=true] { background: var(--ink); border-color: var(--ink); }
.live-word { font-size: clamp(26px, 2.8vw, 34px); }
.live-nums b { font-size: clamp(34px, 3.6vw, 46px); font-weight: 500; }
.live-docs li { font-family: var(--serif); font-size: 16px; font-weight: 400; }
.live .go, .btn.primary, .btn.main, .btn.tag, .btn.small { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.live .go:hover, .btn.primary:hover, .btn.main:hover, .btn.tag:hover { background: var(--brand-2); }
.lr-btn { background: #fff; color: var(--ink); }
.sec { padding-top: 72px; }
.sec h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 500; letter-spacing: -.015em; }
.sub { font-size: 16px; }
.b-dest { font-size: 19px; font-weight: 400; }
.b-row.is-on { background: #E5E9DD; }
/* Facts: thin rules and terracotta serif figures, no boxes */
.facts4 { gap: 0 32px; background: none; border: 0; border-radius: 0; }
.fact { background: none; padding: 20px 0 24px; border: 0; border-top: 1px solid var(--ink); }
.fact b { font-size: clamp(28px, 2.8vw, 36px); line-height: 1.1; color: var(--terra); }
.fact p { font-size: 15px; }
.fact a { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
/* How it works: the vet beside three steps on rules with italic sand numerals */
.how-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .how-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; } }
.how-photo { margin: 0; } .how-photo img { display: block; width: 100%; height: auto; border-radius: 6px; }
.how-photo figcaption { margin-top: 8px; font-size: 12px; color: var(--muted); } .how-photo figcaption a { color: var(--muted); }
.how-grid h2 { margin-bottom: 6px; }
.how3 { display: block; background: none; border: 0; border-radius: 0; border-top: 1px solid var(--line); }
.how3 li { display: block; background: none; padding: 18px 0 22px; border-bottom: 1px solid var(--line-2); }
.how-n { display: block; width: auto; height: auto; background: none; color: var(--sand); font: italic 400 36px/1 var(--serif); margin-bottom: 10px; }
.how3 h3 { font-size: 24px; margin-bottom: 6px; }
.how3 p { font-family: var(--font); font-size: 15px; }
.faq summary { font-size: 19px; }
.foot b { font-family: var(--serif); font-weight: 500; font-size: 18px; }
/* Plan */
.stats { background: var(--line); border-color: var(--line); border-radius: 10px; }
.stat { background: #fff; } .stat b { font-size: 30px; }
.stat-dark { background: var(--ink); } .sbar i { background: var(--sand); }
.tl-name { font-size: 21px; }
.tl-date time { font-family: var(--serif); font-size: 16px; font-weight: 500; }
.tl-item.st-soon .tl-dot { border-color: var(--sand); background: var(--sand); }
.cta-band { background: var(--ink); }
.whatif label b { font-family: var(--serif); font-size: 18px; }
.page h1 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 500; }
.answer { font-family: var(--serif); font-size: 20px; }
.doc-pills li { font-size: 18px; }
.cat-group h2 { font-size: 26px; }
@media (max-width: 899px) { .hero h1 { font-size: clamp(30px, 8vw, 40px); } }
@media (max-width: 480px) { .logo { font-size: 19px; } .top-cta { display: none; } .top-in { grid-template-columns: 1fr auto; } }

/* ===== v11: the planner reads as one sentence; the car-window dog in the hero; no logo mark ===== */
.logo-mark { display: none; }
.hero h1 { font-size: clamp(30px, 3.6vw, 50px); max-width: 24ch; }
@media (min-width: 900px) { .hero-row { grid-template-columns: minmax(0, 1fr) 420px; } }
.sentence { margin: 0; padding: 22px 22px 14px; font: 400 clamp(22px, 2.6vw, 34px)/1.7 var(--serif); color: var(--ink); }
.sentence .w { color: var(--muted); }
.tok { position: relative; display: inline-block; max-width: 100%; vertical-align: baseline; margin: 0 2px; }
.tok select, .tok input:not([type=checkbox]):not([type=radio]) { -webkit-appearance: none; appearance: none; font: 500 1em/1.25 var(--serif); color: var(--brand); background: transparent; border: 0; border-bottom: 2px solid var(--sand); border-radius: 0; padding: 0 1em 0 .1em; width: auto; max-width: 100%; cursor: pointer; letter-spacing: 0; text-transform: none; }
.tok::after { content: "▾"; position: absolute; right: .15em; bottom: .25em; font-size: .5em; color: var(--sand); pointer-events: none; }
.tok-name::after, .tok-date::after { content: none; }
.tok-name input { padding-right: .1em; cursor: text; font-style: italic; }
.tok-name input::placeholder { color: #B8B0A0; font-style: italic; }
.tok-date input { padding-right: .1em; font-family: var(--font); font-size: .66em; font-weight: 600; }
.tok select:focus, .tok input:focus { outline: none; background: var(--brand-soft); border-color: var(--brand); }
.sentence .seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); vertical-align: .1em; font-size: .5em; font-family: var(--font); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: .5em 1em; border-radius: 999px; font-weight: 600; line-height: 1.2; color: var(--ink); transition: background .2s, color .2s; }
.seg input:checked + span { background: var(--ink); color: var(--bg); }
.seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.bar-foot { align-items: center; }
.ready-row { display: flex; align-items: center; gap: 12px; cursor: pointer; max-width: 520px; }
.ready-row b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.ready-row small { display: block; font-size: 12px; color: var(--muted); }
@media (max-width: 760px) { .sentence { padding: 16px 16px 10px; font-size: clamp(21px, 6vw, 26px); line-height: 1.75; } .bar-foot { flex-direction: column; align-items: stretch; } }

/* ===== v12: logo, brief palette (sand #F4EFE7, deep green #1F3D33, terracotta #D9663F), country cards,
   route strip above the timeline, rolling day counts, paw prints on a ticked step ===== */
:root { --bg: #F4EFE7; --ink: #1F3D33; --brand: #1F3D33; --brand-2: #2C5245; --accent: #D9663F; --terra: #B4502F; --late: #B4502F; --surface: #ECE5D9; --line: #D8CFBF; --line-2: #E5DDD0; }
.top { background: rgba(244,239,231,.92); }
.logo { gap: 10px; color: var(--ink); }
.logo:hover { text-decoration: none; }
.logo .mark { width: auto; height: 30px; flex: none; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.logo:hover .mark { transform: rotate(-6deg); }
.logo i { font-style: italic; font-weight: 400; color: var(--accent); }
@media (max-width: 480px) { .logo .mark { height: 26px; } }
.hero h1 em { color: var(--brand-2); }
.live .go, .btn.primary { box-shadow: 0 10px 24px -14px rgba(31,61,51,.7); transition: transform .15s, background .2s, box-shadow .2s; }
.live .go:hover, .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -14px rgba(31,61,51,.8); }
.meter .m-have { background: var(--accent); }
.fact b { color: var(--terra); }

/* Country cards */
.board.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; border: 0; }
.b-card { display: flex; flex-direction: column; gap: 14px; min-height: 150px; padding: 16px 16px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s; }
.b-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(31,61,51,.55); border-color: var(--line); text-decoration: none; }
.b-card.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.bc-top { display: flex; gap: 10px; align-items: flex-start; }
.bc-flag { font-size: 24px; line-height: 1; }
.bc-dest { font: 500 18px/1.25 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.bc-num { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.bc-num small { flex-basis: 100%; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bc-num b { font: 500 40px/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.bc-num span { font-size: 14px; color: var(--muted); }
.bc-stat { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); }
.bc-stat.soon { background: #F6E7CF; color: #8A5A12; }
.v-late .bc-stat { background: var(--late-soft); color: var(--late); }
.v-hard .bc-stat { background: var(--hard-soft); color: var(--hard); }
.v-late .bc-num b { color: var(--late); }
@media (max-width: 520px) { .board.cards { grid-template-columns: 1fr 1fr; gap: 8px; } .b-card { min-height: 132px; padding: 12px; } .bc-dest { font-size: 16px; } .bc-num b { font-size: 32px; } }

/* Rolling digits */
.od { display: inline-flex; line-height: 1; vertical-align: baseline; }
.od-d { display: inline-block; height: 1em; overflow: hidden; }
.od-col { display: block; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.od-col > span { display: block; height: 1em; text-align: center; }
.od-d:nth-child(2) .od-col { transition-delay: 60ms; } .od-d:nth-child(3) .od-col { transition-delay: 120ms; }
@media (prefers-reduced-motion: reduce) { .od-col { transition: none; } }

/* Route strip: a boarding pass line of stations */
#strip-wrap:empty { display: none; }
.strip { margin: 20px 0 8px; padding: 14px 18px 12px; border: 1px solid var(--line-2); border-radius: 14px; background: #fff; }
.strip-k { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.strip-line { position: relative; display: flex; align-items: flex-start; gap: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.strip-line::before { content: ""; position: absolute; left: 22px; right: 22px; top: 21px; border-top: 2px dashed var(--line); }
.strip-line > li { position: relative; flex: 1 0 64px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.strip-end { flex: 0 0 44px !important; }
.strip-end b { font-size: 22px; line-height: 1; padding: 9px 0 4px; background: #fff; position: relative; }
.strip-end span { font: 600 11px/1 var(--font); letter-spacing: .06em; color: var(--muted); }
.strip-st button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 4px; border: 0; background: none; font: inherit; cursor: pointer; color: inherit; }
.strip-dot { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; background: var(--line); box-shadow: 0 0 0 1px var(--line); position: relative; transition: transform .2s; }
.strip-st button:hover .strip-dot, .strip-st button:focus-visible .strip-dot { transform: scale(1.25); }
.strip-d { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.st-done .strip-dot { background: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.st-now .strip-dot { background: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 6px rgba(217,102,63,.18); }
.st-soon .strip-dot { background: var(--sand); box-shadow: 0 0 0 1px var(--sand); }
.st-risk .strip-dot { background: var(--late); box-shadow: 0 0 0 1px var(--late); }
.st-now .strip-d, .st-risk .strip-d { color: var(--ink); }
.strip-tip { display: none; }
.strip-info { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--muted); min-height: 1.6em; }
.strip-info b { font: 500 16px/1.3 var(--serif); color: var(--ink); }
.strip-info .strip-src { color: var(--terra); }
.strip-info .strip-src::before { content: "↗ "; }

.motion .strip-st { animation: rise .35s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 50ms); }
@media (max-width: 620px) { .strip { padding: 12px 10px 10px; } }

/* Paw prints after a tick */
.paw-print { position: fixed; z-index: 50; width: 16px; height: 16px; pointer-events: none; color: var(--accent); animation: pawstep 1.3s ease-out both; }
.paw-print svg { width: 100%; height: 100%; fill: currentColor; transform: rotate(60deg); }
@keyframes pawstep { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1); } 70% { opacity: .9; } 100% { opacity: 0; transform: translateY(-6px); } }

/* Logo options page */
.brand-opt { margin: 28px 0; padding: 24px; border: 1px solid var(--line-2); border-radius: 14px; background: #fff; }
.brand-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.brand-big { height: 64px; width: auto; }
.brand-word { font: 500 clamp(28px, 4vw, 40px)/1 var(--serif); color: var(--ink); letter-spacing: -.01em; }
.brand-word i { font-weight: 400; color: var(--accent); }
.brand-sizes { display: flex; gap: 16px; align-items: flex-end; margin-top: 18px; }
.brand-sizes svg { width: auto; }
.brand-opt figcaption { margin-top: 14px; font-size: 15px; color: var(--muted); }
.brand-opt figcaption b { color: var(--ink); font-family: var(--serif); font-size: 18px; margin-right: 6px; }
.motion .tl-item.stamp { animation: stamp .45s cubic-bezier(.2,.8,.2,1); }
@keyframes stamp { 0% { background: rgba(217,102,63,.14); } 100% { background: transparent; } }
@media print { .strip, .paw-print { display: none !important; } }
b .od, b .od span { color: inherit; font: inherit; }
.wrap.page { padding: 28px 24px 40px; }
.paw-print { width: 18px; height: 18px; }
@media (max-width: 520px) { .bc-top { flex-direction: column; gap: 6px; } .bc-dest { overflow-wrap: normal; hyphens: auto; } }

/* ===== v13 premium: deep green header and hero with gold details, P monogram, spaced capitals, hairlines,
   paper cards with small radii, a dark band for the risks, the planner card overlapping the hero ===== */
:root { --night: #1A352C; --gold: #C9A15B; --gold-ink: #8A6A2E; --gold-soft: #E9DCC0; --paper: #FBF8F2; --ivory: #F4EFE7; --r: 8px; }
body { overflow-x: clip; }
/* Header */
.top { background: var(--night); border-bottom: 1px solid rgba(201,161,91,.28); backdrop-filter: none; -webkit-backdrop-filter: none; }
.logo { color: var(--ivory); gap: 12px; }
.logo .mark { height: 34px; }
.logo-word { font: 500 15px/1 var(--serif); letter-spacing: .2em; text-transform: uppercase; }
.logo-word i { font-style: italic; letter-spacing: 0; text-transform: none; color: var(--gold); font-size: 1.15em; padding: 0 .1em; }
.logo:hover .mark { transform: none; }
.nav a { color: rgba(244,239,231,.72); font-size: 13px; letter-spacing: .04em; }
.nav a:hover { color: var(--ivory); background: rgba(255,255,255,.06); }
.nav a[aria-current=page] { color: var(--ivory); font-weight: 600; box-shadow: inset 0 -1px 0 var(--gold); border-radius: 0; }
.lang summary { color: var(--ivory); border-color: rgba(244,239,231,.3); }
.top-cta { background: var(--gold); border-color: var(--gold); color: var(--night); font-weight: 600; letter-spacing: .02em; border-radius: 4px; }
.top-cta:hover { background: #D8B475; color: var(--night); }
@media (max-width: 480px) { .logo-word { font-size: 13px; letter-spacing: .14em; } .logo .mark { height: 28px; } }
/* Hero: the dark band */
.hero { background: var(--night); color: var(--ivory); padding: 44px 0 116px; position: relative; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,161,91,.45), transparent); }
.hero h1 { color: var(--ivory); font-size: clamp(32px, 3.9vw, 54px); line-height: 1.06; }
.hero h1 em { color: var(--gold); }
.hero-lead { color: #C8D3CC; font-size: 17px; }
.trust { color: #93A89C; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.7; }
.hero-photo { position: relative; }
.hero-photo img { border-radius: 2px; position: relative; z-index: 1; }
.hero-photo::before { content: ""; position: absolute; inset: 14px -14px 30px 14px; border: 1px solid var(--gold); border-radius: 2px; }
.hero-photo figcaption { position: relative; z-index: 1; color: #93A89C; } .hero-photo figcaption a { color: #93A89C; }
.welcome, .suggest { background: rgba(255,255,255,.07); color: var(--ivory); border: 1px solid rgba(201,161,91,.3); border-radius: 4px; }
.welcome a, .suggest a, .welcome button, .suggest button { color: var(--gold); }
/* Planner card overlaps the band */
.hero-tools { position: relative; z-index: 2; margin-top: -88px; }
.planner { border-radius: 6px; border: 1px solid var(--gold-soft); background: var(--paper); box-shadow: 0 40px 80px -50px rgba(10,30,24,.6), 0 2px 0 rgba(201,161,91,.25); }
.sentence { background: var(--paper); }
.tok select, .tok input:not([type=checkbox]):not([type=radio]) { border-bottom-color: var(--gold); }
.tok::after { color: var(--gold); }
.sentence .seg { background: var(--ivory); border: 1px solid var(--gold-soft); }
.bar-foot { background: var(--ivory); border-top: 1px solid var(--gold-soft); }
.chip { border-radius: 4px; background: var(--paper); border-color: var(--line); font-size: 12px; letter-spacing: .02em; }
.chip:hover { border-color: var(--gold); }
.chip[aria-pressed=true] { background: var(--night); border-color: var(--night); color: var(--ivory); }
.live { background: var(--paper); }
.live-side { border-left-color: var(--gold-soft); }
.live-remind { background: var(--ivory); }
.ld-k, .lr-k, .live-ex { letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
.ld-k { color: var(--gold-ink); }
.meter .m-have { background: var(--gold); }
.wfoot { color: var(--muted); }
/* Buttons: squarer, tracked */
.btn, .live .go, .lr-btn, .lr-row input { border-radius: 4px; }
.btn.primary, .live .go { background: var(--night); border-color: var(--night); color: var(--ivory); letter-spacing: .02em; box-shadow: inset 0 -2px 0 var(--gold); }
.btn.primary:hover, .live .go:hover { background: #24453A; transform: none; }
.btn.ghost { border-color: var(--line); background: transparent; }
/* Section heads: gold numeral over a hairline */
.sec-head { flex-wrap: wrap; }
.sec-n { flex-basis: 100%; display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font: italic 400 15px/1 var(--serif); color: var(--gold-ink); letter-spacing: .06em; }
.sec-n::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-soft), transparent); }
.how-grid .sec-n { margin-bottom: 14px; }
.sec h2 { letter-spacing: -.02em; }
/* Country cards: paper, hairlines, status as a dot and small capitals */
.b-card { background: var(--paper); border-color: var(--line-2); border-radius: 6px; }
.b-card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 18px 34px -26px rgba(10,30,24,.55); }
.b-card.is-on { border-color: var(--night); box-shadow: inset 0 0 0 1px var(--night); }
.bc-num small { color: var(--gold-ink); letter-spacing: .12em; }
.bc-stat { display: inline-flex; align-items: center; gap: 7px; padding: 0; background: none !important; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.bc-stat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bc-stat.soon { color: var(--gold-ink); }
/* Risks on the dark band */
.sec-dark { background: var(--night); color: var(--ivory); margin-top: 72px; padding: 64px 0 72px; }
.sec-dark h2 { color: var(--ivory); }
.sec-dark .sec-n { color: var(--gold); } .sec-dark .sec-n::after { background: linear-gradient(90deg, rgba(201,161,91,.5), transparent); }
.sec-dark .sec-note { color: #93A89C; }
.sec-dark .fact { border-top-color: rgba(201,161,91,.55); }
.sec-dark .fact b { color: var(--gold); }
.sec-dark .fact p { color: #D7DFD9; }
.sec-dark .fact a { color: #93A89C; }
.sec-dark + .sec { padding-top: 72px; }
/* How and FAQ */
.how-n { color: var(--gold); }
.how-photo img { border-radius: 2px; }
.faq summary { border-bottom-color: var(--line-2); }
/* Plan */
.stats { border-radius: 6px; }
.stat-dark { background: var(--night); } .stat-dark small { color: var(--gold); letter-spacing: .1em; }
.stat small { letter-spacing: .1em; }
.sbar i { background: var(--gold); }
.strip, .whatif, .box { border-radius: 6px; }
.strip { background: var(--paper); }
.strip-k { color: var(--gold-ink); }
.strip-end b { background: var(--paper); }
.st-now .strip-dot { background: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 0 6px rgba(201,161,91,.22); }
.tl-item.st-now .tl-dot { background: var(--gold); border-color: var(--gold); }
/* Listok box */
.listok-box { background: var(--paper); border: 1px solid var(--gold-soft); padding: 18px; }
.lb-k { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.listok-box h3 { margin: 0 0 8px; font-size: 20px; }
.listok-box p { margin: 0 0 10px; font-size: 14px; }
.listok-box ul { margin: 0 0 14px; padding: 0; list-style: none; }
.listok-box li { position: relative; padding: 6px 0 6px 22px; font-size: 14px; border-top: 1px solid var(--line-2); }
.listok-box li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 9px; height: 5px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.listok-box .btn { width: 100%; }
.lb-note { margin: 10px 0 0 !important; font-size: 12px !important; color: var(--muted); }
/* Footer */
.foot { background: var(--night); color: #93A89C; border-top: 1px solid rgba(201,161,91,.28); margin-top: 88px; padding: 32px 0 40px; }
.foot b { color: var(--ivory); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; }
.foot a { color: #C8D3CC; }
/* Inner pages under the dark header */
.page h1 { letter-spacing: -.02em; }
.cat-row, .cat-card { border-radius: 6px; }
@media (max-width: 899px) { .hero { padding: 26px 0 104px; } .hero-photo::before { inset: 10px -8px 26px 10px; } .hero-tools { margin-top: -78px; } }
@media print { .top, .foot, .hero { background: none !important; color: #000 !important; } }
/* v13: keep the planner and its button on the first screen of a laptop */
.hero { padding: 30px 0 100px; }
.hero h1 { font-size: clamp(30px, 3.4vw, 48px); }
@media (min-width: 900px) { .hero-row { grid-template-columns: minmax(0, 1fr) 380px; margin-bottom: 0; } .hero-photo img { aspect-ratio: 16 / 11; } }
.hero-tools { margin-top: -80px; }
@media (max-width: 899px) { .hero { padding: 22px 0 96px; } .hero-photo img { height: 170px; } }
@media (min-width: 900px) and (max-height: 820px) { .hero { padding: 18px 0 92px; } .hero h1 { font-size: clamp(28px, 3vw, 40px); } .hero-lead { font-size: 15px; margin-top: 6px; } .hero-row { grid-template-columns: minmax(0, 1fr) 320px; } .hero-photo img { aspect-ratio: 16 / 9; } .hero-photo figcaption { display: none; } .sentence { padding-top: 14px; padding-bottom: 8px; line-height: 1.6; } }
.brand-word { font-size: clamp(18px, 2.4vw, 26px); letter-spacing: .2em; text-transform: uppercase; }
.brand-word i { color: var(--gold); letter-spacing: 0; text-transform: none; }
.brand-opt { background: var(--paper); border-radius: 6px; }

/* ===== v14: one type system. Spectral 600 only for display (headlines, big figures, the planner sentence),
   Inter for everything else; no italics, no spaced capitals except the wordmark; bold accents. Wider page. ===== */
:root { --w: 1360px; }
.wrap { padding: 0 32px; }
@media (max-width: 620px) { .wrap { padding: 0 18px; } }
/* Back to Inter: names, labels, lists, small headings */
h3, h4, .tl-name, .bc-dest, .live-docs li, .doc-pills li, .faq summary, .box h3, .how3 h3, .cat-name, .lead h3, .lr-k, .offer-k, .tl-date time, .strip-info b, .listok-box h3, .facts dd, .cta-band b, .all-done b, .dock-t b, .whatif label b, .answer, .b-dest, .fld select, .fld input, .strip-tip b, .p-sub h3, .notes-box h3 { font-family: var(--font) !important; letter-spacing: -.01em; }
h3, h4, .tl-name, .bc-dest, .faq summary, .box h3, .how3 h3, .cat-name, .lead h3, .listok-box h3, .p-sub h3, .strip-info b, .all-done b, .dock-t b { font-weight: 650; }
.tl-name { font-size: 18px; } .bc-dest { font-size: 16px; } .faq summary { font-size: 17px; } .how3 h3 { font-size: 19px; } .listok-box h3 { font-size: 17px; }
.live-docs li { font-size: 15px; font-weight: 500; } .tl-date time { font-size: 15px; font-weight: 650; }
.answer { font-size: 18px; line-height: 1.55; }
/* Display: Spectral 600 */
h1, h2, .p-title, .live-word, .v-word, .live-nums b, .stat b, .bc-num b, .fact b, .sentence { font-family: var(--serif); }
h1, h2, .p-title, .live-word, .v-word, .live-nums b, .stat b, .bc-num b, .fact b { font-weight: 600; letter-spacing: -.02em; }
.hero h1 em { font-style: normal; font-weight: 600; }
.sentence .w { font-weight: 400; }
.tok select, .tok input:not([type=checkbox]):not([type=radio]) { font-weight: 600; }
.tok-name input, .tok-name input::placeholder { font-style: normal; }
.tok-date input { font-family: var(--serif); font-size: 1em; font-weight: 600; }
/* No italics or spaced capitals in labels */
.sec-n { font: 700 13px/1 var(--font); letter-spacing: 0; color: var(--gold-ink); }
.sec-dark .sec-n { color: var(--gold); }
.how-n { font: 700 15px/1 var(--font); color: var(--gold-ink); margin-bottom: 8px; }
.trust, .ld-k, .lr-k, .live-ex, .bc-num small, .bc-stat, .strip-k, .stat small, .lb-k, .stat-dark small, .fl, .tl-facts dt, .eyebrow { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--font); }
.trust { font-size: 13px; color: #A9BCB1; line-height: 1.5; }
.ld-k, .lr-k, .live-ex, .strip-k, .lb-k, .bc-num small, .stat small { font-size: 13px; font-weight: 650; }
.bc-stat { font-size: 13px; font-weight: 650; }
.tl-facts dt { font-size: 12px; font-weight: 650; }
.foot b { letter-spacing: .12em; }
/* Hero: what you get and the call to action */
.hero-gets { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.hero-gets li { position: relative; padding-left: 26px; font-size: 16px; color: #C8D3CC; }
.hero-gets li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 11px; height: 6px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.hero-gets b { color: var(--ivory); font-weight: 650; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 22px; }
.btn.big { min-height: 48px; padding: 0 22px; font-size: 15px; font-weight: 650; display: inline-flex; align-items: center; text-decoration: none; }
.hero .btn.primary { background: var(--gold); border-color: var(--gold); color: var(--night); box-shadow: none; }
.hero .btn.primary:hover { background: #D8B475; }
.hero .btn.ghost { color: var(--ivory); border-color: rgba(244,239,231,.4); }
.hero .btn.ghost:hover { border-color: var(--ivory); background: rgba(255,255,255,.06); }
.free { font-size: 13px; color: #A9BCB1; }
.hero-lead { color: #DCE4DF; }
/* Animals without checked rules */
.live[data-v=soon] .live-word { color: var(--gold-ink); }
.live[data-v=soon] .live-main .lr-row { margin-top: 14px; max-width: 460px; }
.live[data-v=soon] .lr-btn { background: var(--night); color: var(--ivory); border-color: var(--night); }
.soon-src { list-style: none; margin: 8px 0 0; padding: 0; }
.soon-src li { padding: 6px 0; border-top: 1px solid var(--line-2); font-size: 15px; }
.b-soon { margin: 0; padding: 22px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); grid-column: 1 / -1; }
@media (min-width: 900px) and (max-height: 820px) { .hero-gets { display: none; } .hero-cta { margin-top: 14px; } }
.live > * { min-width: 0; }
@media (max-width: 899px) { .live { grid-template-columns: minmax(0, 1fr); } }
.live-head { flex-wrap: wrap; }
@media (max-width: 620px) {
  .nav { gap: 0; } .nav a { padding: 7px 8px; font-size: 13px; letter-spacing: 0; }
  .hero-cta .btn.big { flex: 1 1 100%; justify-content: center; }
  .hero-photo img { height: 150px; }
  .sentence { font-size: clamp(20px, 5.6vw, 24px); }
}
@media (max-width: 620px) { .nav { margin-left: -8px; margin-right: 0; max-width: calc(100% + 8px); overflow-x: auto; scrollbar-width: none; } }
/* One primary action per screen: the hero button; the header button only on inner pages */
.home .top-cta { display: none; }
@media (min-width: 900px) { .home .top-in { grid-template-columns: auto 1fr auto; } }
.sentence { font-size: clamp(22px, 2.2vw, 31px); }
.tok-date input { width: 7.6em; }
.live .go { background: transparent; color: var(--night); border: 1px solid var(--night); box-shadow: none; }
.live .go:hover { background: var(--night); color: var(--ivory); }

/* ===== v15: no middle-dot fragments; facts sit in their own elements ===== */
.chip-s .chip-d { margin-left: 8px; padding-left: 8px; border-left: 1px solid currentColor; opacity: .85; }
.strip-info .strip-st-word { font-weight: 650; color: var(--ink); }
.p-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.p-meta span { padding: 3px 10px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; color: var(--ink); background: var(--paper); }
.src-list li { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; }
.src-list small { font-size: 12px; color: var(--muted); }
.foot-brand { margin-bottom: 6px !important; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px !important; }
.tag-q { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 650; background: var(--hard-soft); color: var(--hard); vertical-align: middle; }
.cat-days small { display: block; font-size: 12px; color: var(--muted); text-align: right; }
.trust-sub { margin: 10px 0 18px; max-width: 60ch; font-size: 15px; }

/* ===== v16: the landing as a path to starting preparation ===== */
/* 01 Who travels: a paper card over the hero with two equal choices */
.who { background: var(--paper); border: 1px solid var(--gold-soft); border-radius: 6px; padding: 26px 26px 18px; box-shadow: 0 40px 80px -50px rgba(10,30,24,.6); }
.who-head h2 { margin: 0 0 6px; font-size: clamp(28px, 3vw, 40px); }
.who-head .sub { margin: 0 0 18px; }
.who-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.who-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s cubic-bezier(.2,.8,.2,1); }
.who-card img { width: 100%; height: 100%; min-height: 170px; object-fit: cover; display: block; }
.who-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; }
.who-body b { font: 600 26px/1.1 var(--serif); color: var(--ink); }
.who-body span { font-size: 14px; color: var(--muted); line-height: 1.5; }
.who-body em { margin-top: auto; font-style: normal; font-weight: 650; font-size: 14px; color: var(--gold-ink); }
.who-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 18px 34px -26px rgba(10,30,24,.55); }
.who-card[aria-pressed=true] { border-color: var(--night); box-shadow: inset 0 0 0 1px var(--night); }
.who-card[aria-pressed=true] em { color: var(--night); }
.who-card[aria-pressed=true] em::before { content: "✓ "; }
.who-other { margin-top: 12px; padding: 6px 0; border: 0; background: none; font: 500 14px/1.4 var(--font); color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.who-other:hover { color: var(--ink); }
.trip-h { margin: 34px 0 12px; font: 600 22px/1.2 var(--font) !important; }
@media (max-width: 760px) { .who { padding: 18px 16px 12px; } .who-cards { grid-template-columns: 1fr; } .who-card { grid-template-columns: 110px minmax(0, 1fr); } .who-card img { min-height: 140px; } .who-body b { font-size: 22px; } }
/* 02 How it works: four stations on one line */
.how4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.how4::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; border-top: 2px dashed var(--line); }
.how4 li { position: relative; padding-right: 24px; }
.how4 .how-n { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; margin-bottom: 14px; border-radius: 50%; background: var(--night); color: var(--gold); font: 700 14px/1 var(--font); }
.how4 li:last-child .how-n { background: var(--gold); color: var(--night); }
.how4 h3 { margin: 0 0 4px; font-size: 18px; }
.how4 p { margin: 0; font-size: 15px; color: var(--muted); }
@media (max-width: 760px) { .how4 { grid-template-columns: 1fr 1fr; gap: 22px 0; } .how4::before { display: none; } }
/* 03 What we prepare */
.prep4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.prep4 article { padding: 20px 18px 22px; background: var(--paper); border: 1px solid var(--line-2); border-top: 3px solid var(--gold); border-radius: 6px; }
.prep4 h3 { margin: 0 0 8px; font-size: 18px; }
.prep4 p { margin: 0; font-size: 15px; color: var(--muted); }
@media (max-width: 980px) { .prep4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .prep4 { grid-template-columns: 1fr; } }
/* 04 Example: the real plan as a paper checklist */
.ex-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.ex-grid h2 { margin-top: 0; }
.ex-paper { background: #fff; border: 1px solid var(--line-2); border-radius: 6px; box-shadow: 0 30px 60px -40px rgba(10,30,24,.45); overflow: hidden; }
.ex-paper header { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; background: var(--night); color: var(--ivory); }
.ex-k { font: 600 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.ex-paper header b { font: 600 22px/1.2 var(--serif); }
.ex-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-tags span { padding: 2px 9px; border: 1px solid rgba(244,239,231,.35); border-radius: 4px; font-size: 13px; }
.ex-paper ol { list-style: none; margin: 0; padding: 6px 22px 10px; }
.ex-paper li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.ex-paper li:last-child { border-bottom: 0; }
.ex-paper li i { width: 18px; height: 18px; margin-top: 2px; border: 1.5px solid var(--line); border-radius: 4px; }
.ex-paper li div b { display: block; font-weight: 650; font-size: 15px; }
.ex-paper li div span { font-size: 13px; color: var(--muted); }
.ex-paper time { font-size: 13px; font-weight: 650; color: var(--ink); white-space: nowrap; }
.ex-paper li > a, .ex-paper li > span { grid-column: 2 / -1; font-size: 12px; color: var(--terra); }
.ex-paper li > a::before { content: "↗ "; }
.ex-go i { background: var(--gold); border-color: var(--gold) !important; }
@media (max-width: 900px) { .ex-grid { grid-template-columns: 1fr; gap: 20px; } .ex-paper ol { padding: 4px 14px 8px; } }
/* 05 Trust on the dark band, the cost of a mistake beside it */
.trust-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; }
.trust-p { color: #D7DFD9; font-size: 17px; line-height: 1.6; }
.sec-dark .btn.ghost { color: var(--ivory); border-color: rgba(244,239,231,.4); }
.risk-k { margin: 6px 0 14px; color: var(--gold) !important; font-size: 15px !important; }
.trust-grid .facts4 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .trust-grid { grid-template-columns: 1fr; gap: 24px; } }
/* 07 Final call */
.final { margin-top: 64px; padding: 56px 0; background: var(--paper); border-top: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft); }
.final-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.final h2 { margin: 0 0 6px; font-size: clamp(28px, 3vw, 40px); }
.final p { margin: 0; color: var(--muted); }
.final + .foot { margin-top: 0; }
main:has(.final) + .foot { margin-top: 0; }
/* iPhone Safari 26: the top bar is see-through and the sticky header sits under it, so page content showed above the header.
   A deep green sheet above the header hides it and gives the browser bar the header colour. */
.top::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; background: var(--night); pointer-events: none; }
@media (max-width: 360px) { .nav a { padding: 7px 6px; font-size: 12.5px; } .logo-word { letter-spacing: .1em; } }
@media (max-width: 340px) { .nav { padding-left: 8px; padding-right: 8px; } .nav a { padding: 7px 5px; font-size: 12px; } }

/* v17: dates of steps already done */
.done-dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; padding: 14px 22px 16px; background: var(--ivory); border-top: 1px solid var(--gold-soft); }
.done-dates[hidden], .dd[hidden] { display: none; }
.dd-h { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--muted); }
.dd { display: flex; flex-direction: column; gap: 4px; min-width: 170px; }
.dd span { font-size: 13px; font-weight: 650; color: var(--ink); }
.dd input { font: 600 15px/1.2 var(--font); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; }
.dd input:focus { outline: none; border-color: var(--night); }
@media (max-width: 620px) { .done-dates { padding: 12px 14px 14px; } .dd { min-width: 0; flex: 1 1 140px; } }
/* Guides */
.steps-list { padding-left: 22px; } .steps-list li { margin: 8px 0; }
.guide-link { margin: 4px 0 18px; font-weight: 650; } .guide-link a { color: var(--gold-ink); }
.lr-consent { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.lr-consent input { width: 16px; height: 16px; flex: none; margin: 1px 0 0; accent-color: var(--night); }
.logo .mark { height: 38px; }
@media (max-width: 480px) { .logo .mark { height: 32px; } }
.law-h { margin: 14px 0 4px; font: 650 13px/1.3 var(--font); color: var(--muted); }
.prose h3, .page h3 { margin: 18px 0 6px; font-size: 16px; }
/* v19: support */
.tl-report { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.tl-report:hover { color: var(--terra); }
.sup-form { display: grid; gap: 14px; max-width: 620px; margin-top: 18px; }
.sup-form .field { display: flex; flex-direction: column; gap: 6px; }
.sup-form select, .sup-form textarea, .sup-form input[type=email] { font: 500 15px/1.4 var(--font); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; }
.sup-form textarea { resize: vertical; }
.sup-kind { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.sup-kind legend { width: 100%; margin-bottom: 6px; font-weight: 650; font-size: 14px; }
.sup-kind label { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); cursor: pointer; font-size: 14px; }
.sup-kind input { accent-color: var(--night); }
.sup-form .btn { justify-self: start; }
.sup-first { font-size: 15px; color: var(--muted); }
/* FAQ page */
.faq-search { width: 100%; max-width: 620px; margin: 6px 0 10px; font: 500 16px/1.4 var(--font); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; }
.faq-search:focus { outline: none; border-color: var(--night); }
.faq-group h2 { margin-top: 30px; }
.faq-page details { border-bottom: 1px solid var(--line-2); padding: 10px 0; }
.faq-page summary { cursor: pointer; font-weight: 650; }
.faq-page details p { margin: 8px 0 4px; }
.faq-all { margin-top: 18px; font-weight: 650; } .faq-all a { color: var(--gold-ink); }