/* BoatProblem: "harbour chart" design system (SPEC 3). Own CSS, not derived from any sibling site. */
@font-face { font-family: "Big Shoulders"; src: url("/assets/fonts/big-shoulders-display-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Hanken"; src: url("/assets/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Overpass Mono"; src: url("/assets/fonts/overpass-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --paper: #f5f0e6;
  --paper-2: #ece4d3;
  --card: #fffdf8;
  --ink: #0f2c3f;
  --ink-2: #33505f;
  --muted: #5b6f78;
  --line: #d4c9b2;
  --orange: #e2531e;
  --orange-dk: #b53d10;
  --green: #23744f;
  --red: #b3262e;
  --shallow: #d7e7ec;
  --deep: #0f2c3f;
  --deep-2: #163a51;
  --own: #e2531e;
  --rent: #b3262e;
  --club: #6a4fb3;
  --share: #23744f;
  --display: "Big Shoulders", "Arial Narrow", sans-serif;
  --body: "Hanken", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Overpass Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 4px;
  --shell: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); }
img, svg { max-width: 100%; }
a { color: var(--ink); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--orange-dk); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 820px; }
small { font-size: .82em; }
code { font: 500 .9em var(--mono); background: var(--paper-2); padding: .1em .35em; border-radius: 3px; word-break: break-all; }
.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* type */
.display { font: 800 clamp(3rem, 7.4vw, 6.2rem)/.92 var(--display); letter-spacing: -.01em; text-transform: uppercase; margin: .2em 0 .25em; }
.h1 { font: 800 clamp(2.4rem, 5vw, 3.8rem)/.98 var(--display); text-transform: uppercase; margin: .15em 0 .3em; }
.h2 { font: 800 clamp(2rem, 3.8vw, 3rem)/1 var(--display); text-transform: uppercase; margin: .1em 0 .5em; }
.h3 { font: 700 1.75rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 .6em; }
.h4 { font: 700 1.05rem/1.3 var(--body); margin: 0 0 .8em; display: flex; align-items: center; gap: .5rem; }
.eyebrow { font: 700 1rem/1.2 var(--body); color: var(--orange-dk); margin: 0; display: flex; align-items: center; gap: .55rem; }
.eyebrow::before { content: ""; width: 12px; height: 12px; border: 3px solid currentColor; border-radius: 50%; flex: none; }
.eyebrow--light { color: #ffb08f; }
.lede { font-size: 1.2rem; color: var(--ink-2); max-width: 46rem; margin: 0 0 1rem; }
.fine { font-size: .9rem; color: var(--muted); }
.btns { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.4rem; border: 2px solid var(--orange); background: var(--orange); color: #fff; font: 700 1rem/1 var(--body); letter-spacing: .02em; text-decoration: none; border-radius: var(--r); cursor: pointer; }
.btn:hover { background: var(--orange-dk); border-color: var(--orange-dk); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--small { min-height: 40px; padding: .5rem 1rem; font-size: .95rem; }
.btn--danger { background: var(--red); border-color: var(--red); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.lnk { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; cursor: pointer; }
.lnk--x { font-size: .85rem; color: var(--muted); }

/* header */
.hdr { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.hdr__in { display: flex; align-items: center; gap: 2rem; min-height: 72px; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.brand__name { font: 700 1.9rem/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.brand__name b { color: var(--orange); font-weight: 800; }
.mark { width: 40px; height: 40px; }
.mark__ring { fill: var(--ink); }
.mark__hull { fill: var(--orange); }
.mark__sail { fill: none; stroke: var(--paper); stroke-width: 2.6; stroke-linejoin: round; }
.mark__wave { fill: none; stroke: var(--shallow); stroke-width: 2.2; }
.menu { display: flex; gap: 1.6rem; flex: 1; }
.menu a { font-weight: 600; text-decoration: none; padding: .4rem 0; border-bottom: 3px solid transparent; }
.menu a[aria-current] { border-color: var(--orange); }
.menu a:hover { border-color: var(--ink); color: var(--ink); }
.hdr__cta { display: inline-flex; align-items: center; min-height: 42px; padding: .5rem 1.1rem; background: var(--ink); color: var(--paper); font: 700 .95rem/1 var(--body); text-decoration: none; border-radius: 999px; white-space: nowrap; }
.hdr__cta:hover { background: var(--orange); color: #fff; }

/* bands */
.band { padding: 72px 0; }
.band--paper { background: var(--paper); }
.band--quick { background: var(--shallow); padding: 40px 0; }
.band--deep { background: var(--deep); color: #eef3f5; }
.band--deep a:not(.btn) { color: #fff; }
.band--price { background: var(--paper-2); }
.band--src { background: var(--paper); border-top: 1px solid var(--line); padding: 40px 0; }

/* hero */
.hero { position: relative; overflow: hidden; background: var(--paper); border-bottom: 1px solid var(--line); }
.hero__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.ct path { fill: none; stroke: #c9dde3; stroke-width: 1.5; }
.snd text { font: 500 13px var(--mono); fill: #9fb7c0; }
.hero__in { position: relative; display: grid; grid-template-columns: 1.25fr .9fr; gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 80px; }
.hero__fine { font-size: .95rem; color: var(--muted); margin-top: 1rem; }
.answer { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 28px; box-shadow: 10px 10px 0 var(--ink); }
.answer__k { margin: 0; font: 600 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; display: flex; justify-content: space-between; gap: 1rem; }
.answer__k span { color: var(--orange-dk); }
.answer__q { font-weight: 600; margin: .9rem 0 .2rem; }
.answer__big { margin: 0 0 1rem; color: var(--ink-2); }
.answer__big b { display: block; font: 800 4.4rem/1 var(--display); color: var(--ink); }
.answer__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.answer__rows li { display: grid; grid-template-columns: 26px 1fr auto auto; gap: .6rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.answer__rows b { font: 600 1.05rem var(--mono); }
.answer__rows small { color: var(--muted); }
.answer__fine { font-size: .85rem; color: var(--muted); margin: .9rem 0 0; }

/* buoy badges */
.buoy { width: 24px; height: 24px; flex: none; }
.buoy--own { fill: var(--own); }
.buoy--rent { fill: var(--rent); }
.buoy--club { fill: var(--club); }
.buoy--share { fill: var(--share); }
.buoy__w { fill: none; stroke: var(--ink); stroke-width: 1.6; }

/* quick check */
.quick { display: grid; grid-template-columns: repeat(6, 1fr) auto; gap: 12px; align-items: end; }
.quick label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; }
.quick input { width: 100%; min-height: 48px; border: 2px solid var(--ink); border-radius: var(--r); padding: .5rem .7rem; font: 500 1rem var(--mono); background: #fff; color: var(--ink); }
.quick__fine { margin: .8rem 0 0; font-size: .92rem; }
.band--quick .h2 { font-size: 1.9rem; margin-bottom: .6rem; }

/* four ways */
.ways__head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: end; margin-bottom: 1.6rem; }
.ways__head .h2 { margin: 0; }
.ways__lede { margin: 0; color: var(--ink-2); font-size: 1.1rem; }
.waytbl { width: 100%; border-collapse: collapse; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); }
.waytbl thead th { text-align: left; font: 600 .78rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--paper); background: var(--ink); padding: .8rem 1rem; }
.waytbl tbody th { text-align: left; font: 800 1.45rem/1.05 var(--display); text-transform: uppercase; white-space: nowrap; padding: 1.1rem 1rem; vertical-align: top; }
.waytbl tbody th .buoy { vertical-align: -4px; margin-right: .35rem; }
.waytbl td { padding: 1.1rem 1rem; color: var(--ink-2); vertical-align: top; border-left: 1px dashed var(--line); }
.waytbl td:last-child { font-weight: 700; color: var(--ink); }
.waytbl tbody tr + tr > * { border-top: 1px solid var(--line); }

/* crossover */
.cross { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: center; }
.cross__be { font-size: 1.15rem; }
.cross__be b { color: #ffb08f; }
.xchart { margin: 0; background: var(--card); color: var(--ink); border-radius: var(--r); padding: 18px 12px 12px; }
.xchart svg { display: block; width: 100%; height: auto; }
.xchart figcaption { font-size: .85rem; color: var(--muted); padding: .4rem .6rem 0; }
.xchart__grid { stroke: #e6dfcf; stroke-width: 1; }
.xchart__axis { stroke: var(--ink); stroke-width: 1.5; }
.xchart__tick { stroke: var(--ink); }
.xchart__ty { font: 500 12px var(--mono); fill: var(--muted); text-anchor: end; }
.xchart__tx { font: 500 12px var(--mono); fill: var(--muted); text-anchor: middle; }
.xchart__lab { font: 600 13px var(--body); fill: var(--ink-2); text-anchor: middle; }
.xchart__mark { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.xchart__markt { font: 600 12px var(--mono); fill: var(--ink); }
.xchart__l { stroke-width: 4; stroke-linecap: round; }
.xchart__l--own { stroke: var(--own); }
.xchart__l--rent { stroke: var(--rent); stroke-dasharray: 10 6; }
.xchart__l--club { stroke: var(--club); stroke-dasharray: 2 6; }
.xchart__l--share { stroke: var(--share); }
.xchart__end { font: 700 13px var(--body); }
.xchart__end--own { fill: var(--orange-dk); }
.xchart__end--rent { fill: var(--rent); }
.xchart__end--club { fill: var(--club); }
.xchart__end--share { fill: var(--share); }
.band--deep .xchart { box-shadow: -10px 10px 0 #071a26; }

/* ledger promo */
.ledgerpromo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.sample { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; transform: rotate(-1deg); box-shadow: 0 18px 40px -20px rgba(15, 44, 63, .45); }
.sample__k { font: 600 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--orange-dk); margin: 0 0 .8rem; }
.sample__sum { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: .8rem 0 0; padding-top: .6rem; border-top: 3px double var(--ink); }
.sample__sum b { font: 800 2rem/1 var(--display); }

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tbl th { text-align: left; font: 600 .72rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: .5rem .4rem; border-bottom: 2px solid var(--ink); }
.tbl td { padding: .55rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl td small { display: block; color: var(--muted); }
.tbl th.num { text-align: right; }

/* pricing */
.tally { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: 72px; align-items: center; }
.receipt { position: relative; background: #fffef9; color: var(--ink); font: 500 .95rem/1.4 var(--mono); padding: 30px 26px 26px; box-shadow: 0 22px 40px -24px rgba(15, 44, 63, .55);
  -webkit-mask: radial-gradient(circle 7px at 50% 0, transparent 98%, #000) 0 0 / 18px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 100% / 18px 51% repeat-x;
  mask: radial-gradient(circle 7px at 50% 0, transparent 98%, #000) 0 0 / 18px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 100% / 18px 51% repeat-x; }
.receipt__top { margin: 0 0 1rem; text-align: center; font: 800 1.9rem/1 var(--display); text-transform: uppercase; padding-bottom: .9rem; border-bottom: 2px dashed var(--ink); }
.receipt__top span { display: block; font: 500 .78rem/1.6 var(--mono); letter-spacing: .18em; color: var(--muted); }
.receipt__lines { margin: 0; }
.receipt__lines div { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .4rem 0; border-bottom: 2px dotted #cfc5ae; }
.receipt__lines div:last-child { border-bottom: 0; }
.receipt__lines dt { flex: 1; min-width: 0; }
.receipt__lines dd { margin: 0; font-weight: 700; white-space: nowrap; }
.receipt__sub { margin: 1rem 0 .2rem; padding-top: .9rem; border-top: 2px dashed var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.receipt__sub small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); font-size: .82rem; }
.receipt__due { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 0; padding: .7rem 0; border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.receipt__due b { font: 800 2rem/1 var(--display); color: var(--green); }
.receipt__note { margin: .9rem 0 0; font: 400 .9rem/1.5 var(--body); color: var(--ink-2); }
.receipt__note strong { color: var(--green); }
.tally__copy p { max-width: 34rem; }
.ticks { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.ticks li { position: relative; padding: .45rem 0 .45rem 2rem; border-bottom: 1px dashed var(--line); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .95rem; width: 14px; height: 8px; border-left: 3px solid var(--green); border-bottom: 3px solid var(--green); transform: rotate(-45deg); }
.pricebox { background: var(--ink); color: #eef3f5; border-radius: var(--r); padding: 24px 26px; }
.pricebox a { color: #fff; }
.pricebox__k { margin: 0; font: 600 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: #ffb08f; }
.pricebox__v { margin: .5rem 0; font-size: 1.05rem; }
.pricebox__v b { font: 800 3.4rem/1 var(--display); color: #fff; }
.pricebox__v span { display: block; color: #c5d4da; }
.pricebox__p { margin: .5rem 0; padding: .6rem .8rem; background: var(--deep-2); border-left: 4px solid #6fd3a3; font-size: .95rem; }
.pricebox__p strong { color: #9fe0bf; }
.pricebox__w { margin: .6rem 0 0; font-size: .92rem; color: #c5d4da; }
.pricebox--tight .pricebox__v b { font-size: 2.6rem; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 8px 0 48px; }
.plan { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 28px; }
.plan--pass { box-shadow: 10px 10px 0 var(--orange); }
.plan__price { margin: 0 0 1rem; }
.plan__price b { font: 800 3rem/1 var(--display); }
.plan__price span { display: block; color: var(--ink-2); }
.plan__price span b { font: 700 1rem var(--body); }
.plan__preview { background: #e3f1e9; border-left: 4px solid var(--green); padding: .7rem .9rem; font-size: .95rem; }
.faq dl { margin: 0; }
.faq div { padding: 1rem 0; border-top: 1px solid var(--line); }
.faq dt { font-weight: 700; }
.faq dd { margin: .3rem 0 0; color: var(--ink-2); }
.srcs { color: var(--ink-2); margin: 0; }
.h3 + .srcs { margin-top: -.2rem; }

/* page heads */
.pagehead { background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 48px 0 32px; margin-bottom: 36px; }
.pagehead .lede { margin-bottom: 0; }
.pagehead--ledger { background: var(--deep); color: #eef3f5; }
.pagehead--ledger .lede { color: #c5d4da; }
.pagehead--ledger .eyebrow { color: #ffb08f; }

/* planner */
.planner { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 40px; align-items: start; padding-bottom: 72px; }
.pform { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 22px 22px; }
.pform fieldset, .mini { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.pform legend, .mini legend { font: 800 1.35rem/1 var(--display); text-transform: uppercase; display: flex; align-items: center; gap: .5rem; padding: 0 0 .6rem; width: 100%; border-bottom: 2px solid var(--ink); margin-bottom: .8rem; }
.pform legend span { display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--ink); color: var(--paper); font: 700 .85rem var(--mono); border-radius: 50%; }
.pform legend small, .mini legend small { font: 500 .8rem var(--body); text-transform: none; color: var(--muted); margin-left: auto; }
.mini legend { font-size: 1.1rem; }
.mini legend small { margin-left: .5rem; }
.sub { display: flex; align-items: center; gap: .5rem; font: 700 1rem var(--body); margin: 1rem 0 .5rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld { margin: 0 0 .8rem; min-width: 0; }
.fld label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.fld label small { color: var(--muted); font-weight: 500; }
.fld__box { display: flex; align-items: stretch; border: 2px solid #8fa3ac; border-radius: var(--r); background: #fff; }
.fld__box:focus-within { border-color: var(--ink); outline: 3px solid var(--orange); outline-offset: 1px; }
.fld__box input, .fld__box select { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; padding: .45rem .6rem; font: 500 1rem var(--mono); color: var(--ink); }
.fld__box input:focus, .fld__box select:focus { outline: none; }
.fld__box select { font-family: var(--body); }
.fld__pre, .fld__post { display: grid; place-items: center; padding: 0 .55rem; background: var(--paper-2); color: var(--ink-2); font: 600 .85rem var(--mono); white-space: nowrap; }
.fld__hint { font-size: .82rem; color: var(--muted); margin: .3rem 0 0; }
.fld--bad .fld__box { border-color: var(--red); }
.fld__err { font-size: .85rem; color: var(--red); font-weight: 600; margin: .3rem 0 0; }
.chk { display: flex; gap: .6rem; align-items: center; font-weight: 600; font-size: .95rem; margin: .2rem 0 .6rem; min-height: 44px; }
.chk input { width: 22px; height: 22px; accent-color: var(--orange); }
.pform__go { display: flex; align-items: center; gap: 1.2rem; margin: 1.4rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--line); }
.note { background: var(--card); border-left: 5px solid var(--ink); padding: .8rem 1rem; margin: 1rem 0; border-radius: 0 var(--r) var(--r) 0; }
.note ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.note--ex { background: #fff4e5; border-color: var(--orange); }
.note--bad { background: #fbe9e9; border-color: var(--red); }
.note--warn { background: #fff4e5; border-color: #c98a00; }
.note--ok { background: #e3f1e9; border-color: var(--green); }
.results { min-width: 0; }
.res { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; margin-bottom: 24px; }
.res--hero { border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.res__k { margin: 0; font: 600 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--orange-dk); }
.res__big { margin: .4rem 0 1rem; font-size: 1.2rem; color: var(--ink-2); }
.res__big b { font: 800 clamp(3.6rem, 7vw, 5.4rem)/1 var(--display); color: var(--ink); margin-right: .3rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0 0 1.4rem; border-top: 1px solid var(--line); }
.kpis div { padding: .7rem .2rem; border-bottom: 1px solid var(--line); }
.kpis dt { font-size: .82rem; color: var(--muted); }
.kpis dd { margin: 0; font: 600 1.25rem var(--mono); }
.split__bar { display: block; width: 100%; height: 36px; border-radius: var(--r); }
.split__s--depreciation { fill: var(--ink); }
.split__s--interest { fill: var(--orange); }
.split__s--extras { fill: #c98a00; }
.split__s--fixed { fill: #4f8aa1; }
.split__s--running { fill: var(--green); }
.split__key { margin: .9rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.split__key div { display: flex; justify-content: space-between; gap: .6rem; padding: .35rem 0; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.split__key dt { display: flex; gap: .5rem; align-items: center; }
.split__key dd { margin: 0; font: 600 .95rem var(--mono); white-space: nowrap; }
.split__key small { color: var(--muted); }
.sw { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.sw--depreciation { background: var(--ink); }
.sw--interest { background: var(--orange); }
.sw--extras { background: #c98a00; }
.sw--fixed { background: #4f8aa1; }
.sw--running { background: var(--green); }
.rank { list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: r; }
.rank__i { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 12px; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 8px; background: #fff; }
.rank__i .buoy { width: 28px; height: 28px; }
.rank__i--win { border: 2px solid var(--green); background: #f1f8f4; }
.rank__i--win .rank__n b::after { content: "Cheapest"; margin-left: .6rem; font: 700 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #fff; background: var(--green); padding: .25rem .4rem; border-radius: 3px; vertical-align: middle; }
.rank__n b { display: block; font-size: 1.05rem; }
.rank__n small, .rank__v small, .rank__t small { display: block; color: var(--muted); }
.rank__v, .rank__t { text-align: right; }
.rank__v b { font: 800 1.9rem/1 var(--display); }
.rank__t b { font: 600 1rem var(--mono); }
.be { display: flex; gap: .6rem; align-items: flex-start; margin: .5rem 0; }
.be .buoy { margin-top: .2rem; }
.res--next { background: var(--paper-2); }

/* ledger */
.twocol { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; padding-bottom: 72px; }
.twocol--even { grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; margin-bottom: 24px; }
.card--form { border: 2px solid var(--ink); }
.keybox { background: #fff4e5; border: 2px solid var(--orange); border-radius: var(--r); padding: 18px 20px; margin-bottom: 20px; }
.keybox p { margin: 0 0 .6rem; }
.keybox__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.keybox__row input { flex: 1; min-width: 0; min-height: 44px; font: 500 .95rem var(--mono); border: 2px solid var(--ink); border-radius: var(--r); padding: .4rem .6rem; background: #fff; color: var(--ink); }
.linkline { font-size: .92rem; color: var(--muted); }
.score { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 24px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--card); }
.score div { padding: 16px 18px; border-right: 1px solid var(--line); }
.score div:last-child { border-right: 0; }
.score dt { font: 600 .72rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.score dd { margin: .3rem 0 0; font: 800 2.3rem/1 var(--display); }
.score__hl { background: var(--ink); color: var(--paper); }
.score__hl dt { color: #ffb08f; }
.vsplan { margin-bottom: 24px; }
.vsplan__row { display: grid; grid-template-columns: minmax(0, 18rem) 1fr 3.5rem; gap: 14px; align-items: center; margin-bottom: .5rem; }
.vsplan__row b { font: 600 1rem var(--mono); text-align: right; }
.meter { width: 100%; height: 14px; display: block; }
.meter__bg { fill: var(--paper-2); }
.meter__v { fill: var(--orange); }
.meter__v--over { fill: var(--red); }
.meter__v--days { fill: var(--green); }
.adders { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.adder { border-top: 5px solid var(--own); margin-bottom: 8px; }
.adder--cost { border-top-color: var(--rent); }
.cats { list-style: none; margin: 0; padding: 0; }
.cats li { display: grid; grid-template-columns: minmax(0, 12rem) 1fr auto; gap: 12px; align-items: center; padding: .4rem 0; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.cats b { font: 600 .95rem var(--mono); }
.cats__bar { width: 100%; height: 10px; display: block; }
.cats__bar rect { fill: var(--deep-2); }
.tbl--entries td:last-child { text-align: right; width: 1%; white-space: nowrap; }
.tbl--entries form { margin: 0; }
.tools { margin: 0 0 24px; display: flex; gap: .8rem; flex-wrap: wrap; }
.more summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.more[open] summary { margin-bottom: 1rem; }
.more--danger summary { color: var(--red); }

/* prose */
.prose { padding-bottom: 72px; }
.prose h2 { font: 800 1.9rem/1 var(--display); text-transform: uppercase; margin: 2rem 0 .8rem; padding-bottom: .4rem; border-bottom: 2px solid var(--ink); }
.prose li { margin-bottom: .55rem; }
.checks { list-style: none; padding: 0; }
.checks li { position: relative; padding: .7rem 0 .7rem 2.2rem; border-bottom: 1px dashed var(--line); margin: 0; }
.checks li::before { content: ""; position: absolute; left: 0; top: .95rem; width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 3px; }
.msg { padding: 24px 0 48px; }

/* footer: sand "waterline" footer, not a column grid */
.ftr { background: var(--paper-2); color: var(--ink-2); border-top: 6px solid var(--ink); padding: 0 0 28px; }
.ftr a { color: var(--ink); }
.ftr__call { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-top: 48px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.ftr__line { margin: 0; font: 800 clamp(2.2rem, 5vw, 3.6rem)/1 var(--display); text-transform: uppercase; color: var(--ink); }
.ftr__in { display: flex; align-items: baseline; gap: 2rem 3rem; flex-wrap: wrap; padding-top: 28px; }
.ftr__name { font: 800 1.6rem/1 var(--display); text-transform: uppercase; color: var(--ink); margin: 0; }
.ftr__name b { color: var(--orange); }
.ftr__links { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; flex: 1; font-weight: 600; }
.disc { font-size: .88rem; border-top: 1px solid var(--line); margin: 28px 0 0; padding-top: 18px; color: var(--ink-2); }
.ftr__base { text-align: center; padding-top: 22px; }
.ftr__pw { margin: 0; font: 700 1rem var(--body); color: var(--ink); }
.ftr__ver { margin: .3rem 0 0; font: 500 .8rem var(--mono); color: var(--muted); }

/* print report */
.report { padding: 28px 24px 56px; }
.score--print dd { font-size: 1.8rem; }
@media print {
  .hdr, .ftr, .noprint, .skip { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .score, .score__hl { background: #fff; color: #000; }
  .score__hl dt { color: #000; }
  a { text-decoration: none; }
}

/* responsive */
@media (max-width: 1080px) {
  .quick { grid-template-columns: repeat(3, 1fr); }
  .quick .btn { grid-column: 1 / -1; }
  .cross, .ledgerpromo, .tally, .ways__head { grid-template-columns: 1fr; gap: 32px; }
  .ways__head { gap: .8rem; }
  .cross .xchart { order: 2; }
  .menu { gap: 1.1rem; }
  .planner { grid-template-columns: 1fr; }
  .results { order: -1; }
  .score { grid-template-columns: repeat(3, 1fr); }
  .score div:nth-child(3) { border-right: 0; }
  .score div:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .hdr__in { flex-wrap: wrap; gap: .3rem 1rem; padding-top: 10px; padding-bottom: 0; min-height: 0; }
  .brand { flex: 1; }
  .menu { order: 3; flex: 0 0 100%; overflow-x: auto; gap: 1.2rem; padding-bottom: 2px; scrollbar-width: none; }
  .menu a { white-space: nowrap; }
  .hero__in { grid-template-columns: 1fr; gap: 36px; padding-top: 44px; padding-bottom: 56px; }
  .twocol, .twocol--even, .adders, .plans { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .shell { padding: 0 16px; }
  body { font-size: 1rem; }
  .band { padding: 52px 0; }
  .hdr__cta { min-height: 38px; padding: .4rem .8rem; font-size: .85rem; }
  .brand__name { font-size: 1.6rem; }
  .mark { width: 34px; height: 34px; }
  .lede { font-size: 1.08rem; }
  .quick { grid-template-columns: 1fr 1fr; }
  .waytbl, .waytbl tbody, .waytbl tr, .waytbl th, .waytbl td { display: block; }
  .waytbl thead { display: none; }
  .waytbl tbody th { padding: 1rem 1rem .4rem; white-space: normal; }
  .waytbl td { border-left: 0; padding: .2rem 1rem .5rem; }
  .waytbl td::before { content: attr(data-k); display: block; font: 600 .7rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
  .waytbl tbody tr + tr > * { border-top: 0; }
  .waytbl tbody tr + tr { border-top: 1px solid var(--line); }
  .receipt { padding: 26px 18px 22px; }
  .answer { padding: 20px; box-shadow: 6px 6px 0 var(--ink); }
  .answer__big b { font-size: 3.6rem; }
  .pair { grid-template-columns: 1fr; gap: 0; }
  .pform { padding: 4px 14px 14px; }
  .res { padding: 18px; }
  .res--hero { box-shadow: 6px 6px 0 var(--ink); }
  .split__key { grid-template-columns: 1fr; }
  .rank__i { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .rank__t { grid-column: 2 / -1; text-align: left; }
  .rank__t small { display: inline; margin-left: .3rem; }
  .score { grid-template-columns: 1fr 1fr; }
  .score div { border-right: 0; border-top: 1px solid var(--line); }
  .score div:nth-child(odd) { border-right: 1px solid var(--line); }
  .score div:first-child, .score div:nth-child(2) { border-top: 0; }
  .score dd { font-size: 1.9rem; }
  .vsplan__row { grid-template-columns: 1fr 3rem; }
  .vsplan__row span { grid-column: 1 / -1; }
  .cats li { grid-template-columns: 1fr auto; }
  .cats__bar { grid-column: 1 / -1; grid-row: 2; }
  .plan--pass { box-shadow: 6px 6px 0 var(--orange); }
  .sample { transform: none; }
}

/* ---------- v1.1.0: AdEngine banner (adengine.us) ----------
   One labelled slot between the main content and the footer, on home, guide, pricing, method and the planner's example and
   blank views only (the controllers opt in). The label and the reserved height are on the <ins>, so when tag.js (or
   ae-size.js) hides a slot it cannot fill, the label and the space go with it. 110px = 16px label + 4px gap + 90px banner;
   270px on phones (300x250). Those pages end with 40-72px of their own space, except pricing (it ends on the FAQ list), which
   gets 48px above the banner; the footer has no top margin, so the slot keeps 48px (40px on phones) below the banner, on the
   <ins>. display stays in this file and is never !important: tag.js hides a slot with style.display='none'. */
.ae-slot { padding: 0 24px; }
.ae-slot ins.adengine { display: block; max-width: 728px; min-height: 110px; margin: 0 auto 48px; text-align: center; text-decoration: none; }
.ae-slot ins.adengine::before { content: "Advertisement"; display: block; margin-bottom: 4px; font: 600 11px/16px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ae-slot ins.adengine a { display: inline-block; vertical-align: top; }
.ae-slot:has(> ins.adengine[style*="none"]) { display: none; }
main:has(> .shell:last-child > .faq:last-child) + .ae-slot ins.adengine { margin-top: 48px; }
@media (max-width: 767px) { .ae-slot ins.adengine { max-width: 300px; min-height: 270px; margin-bottom: 40px; } }
@media (max-width: 560px) { .ae-slot { padding: 0 16px; } }
@media print { .ae-slot { display: none; } }