/* Yearsticker v1.0: own identity. Big Shoulders Display (signage) + Be Vietnam Pro (text). Paper, ink, showroom green, sticker yellow. */
@font-face { font-family: "Big Shoulders"; src: url(fonts/bigshoulders-800.woff2?v=1.0.0) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Big Shoulders"; src: url(fonts/bigshoulders-700.woff2?v=1.0.0) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url(fonts/bevietnam-400.woff2?v=1.0.0) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url(fonts/bevietnam-500.woff2?v=1.0.0) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url(fonts/bevietnam-600.woff2?v=1.0.0) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --paper: #f5f1e6; --paper-2: #ebe5d3; --card: #fffdf8; --ink: #14201b; --ink-2: #44514a; --line: #d3cbb6; --field: #7a7566;
  --green: #0e4d3a; --green-2: #0a3a2c; --mint: #dceae3; --yellow: #f4c542; --brick: #b8402a;
  --display: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --text: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 14px; --wrap: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--text); font-variant-numeric: tabular-nums; }
img, svg { max-width: 100%; }
a { color: var(--green); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.1; }
h2 { font: 800 clamp(30px, 3.6vw, 46px)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
h3 { font-size: 18px; font-weight: 600; }
p { margin: 0 0 1em; }
small { font-size: .82em; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--card); padding: 8px 14px; z-index: 10; }
.skip:focus { left: 8px; }
.eyebrow { font: 600 12px/1.3 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; }
.eyebrow a { color: inherit; }
.fine { font-size: 13.5px; color: var(--ink-2); }
.lede { font-size: 19px; color: var(--ink-2); max-width: 60ch; }

/* ---------- header ---------- */
.top { background: var(--card); border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.top-in { max-width: var(--wrap); margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.mark-icon { width: 34px; height: 40px; border: 3px solid var(--ink); border-radius: 4px; background: linear-gradient(var(--ink) 0 9px, var(--card) 9px 25px, var(--yellow) 25px); flex: none; }
.mark-word { font: 800 27px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.mark-word b { font-weight: 800; }
.mark-word b + b { color: var(--green); }
.mark-word i { font-style: normal; font-weight: 700; color: var(--ink-2); text-transform: lowercase; }
.nav ul { list-style: none; margin: 0; padding: 4px; display: flex; gap: 2px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; }
.nav a { display: block; padding: 8px 16px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; white-space: nowrap; }
.nav a:hover { background: var(--paper-2); }
.nav a[aria-current="page"] { background: var(--green); color: var(--card); }
.nav-price small { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 4px; background: var(--yellow); color: var(--ink); font-weight: 600; font-size: 12px; }
.nav-folder { box-shadow: inset 0 0 0 1.5px var(--green); color: var(--green) !important; }
.nav-folder[aria-current="page"] { color: var(--card) !important; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 11px 24px; border-radius: 999px; border: 0; font: 600 16px/1.2 var(--text); text-decoration: none; cursor: pointer; background: var(--ink); color: var(--card); }
.btn small { font-weight: 500; opacity: .85; }
.btn-go { background: var(--green); color: var(--card); }
.btn-go:hover { background: var(--green-2); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-line:hover { background: var(--card); }
.btn-dark { background: var(--ink); color: var(--card); }
.btn-danger { background: var(--brick); color: var(--card); }
.linkbtn { background: none; border: 0; padding: 4px; color: var(--brick); font: 500 14px var(--text); text-decoration: underline; cursor: pointer; }

/* ---------- forms ---------- */
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld > span:first-child { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
input, select { font: 500 16px/1.2 var(--text); color: var(--ink); }
.fld input, .fld select { width: 100%; min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--field); border-radius: 10px; background: var(--card); }
.fld .pre, .fld .post { display: flex; align-items: center; border: 1.5px solid var(--field); border-radius: 10px; background: var(--card); padding: 0 12px; font-weight: 600; color: var(--ink-2); }
.fld .pre input, .fld .post input { border: 0; padding: 10px 6px; min-height: 43px; background: transparent; }
.fld .post i { font-style: normal; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.fld .pre:focus-within, .fld .post:focus-within { outline: 3px solid var(--green); outline-offset: 1px; }
.fld .pre input:focus-visible, .fld .post input:focus-visible { outline: none; }
[aria-invalid="true"] { background: #fbe9e4 !important; }
.fld .pre:has([aria-invalid="true"]), .fld .post:has([aria-invalid="true"]) { border-color: var(--brick); background: #fbe9e4; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; }
.alert { border-left: 5px solid var(--brick); background: #fbe9e4; padding: 14px 18px; border-radius: 0 10px 10px 0; margin: 24px 0; }
.alert p:last-child, .alert ul { margin-bottom: 0; }
.alert-ok { border-color: var(--green); background: var(--mint); }
.alert-pass { border-color: var(--yellow); background: #fdf3d3; }

/* ---------- home hero ---------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; max-width: 1440px; margin: 0 auto; padding: 56px max(28px, calc((min(100vw, 1440px) - var(--wrap)) / 2 + 28px)) 72px 0; }
.hero-panel { background: var(--mint); border-radius: 0 360px 360px 0; padding: 64px 64px 72px max(28px, calc((100vw - var(--wrap)) / 2 + 28px)); }
.hero h1 { font: 800 clamp(54px, 7vw, 104px)/.9 var(--display); text-transform: uppercase; margin-bottom: 26px; letter-spacing: .005em; }
.hero h1 span { display: block; color: var(--green); }
.hero .lede { font-size: 18.5px; }
.hero-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; font-weight: 500; }
.hero-points li { padding-left: 30px; position: relative; }
.hero-points li::before { content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 12px; border-left: 3px solid var(--green); border-bottom: 3px solid var(--green); transform: rotate(-45deg) scale(.8); }
.starter { position: relative; background: var(--card); border-radius: 20px; box-shadow: 0 1px 2px rgba(20,32,27,.08), 0 18px 48px rgba(20,32,27,.14); padding: 8px 28px 26px; }
.starter > input { position: absolute; opacity: 0; pointer-events: none; }
.starter-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.starter-tabs label { padding: 18px 0 12px; font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; color: var(--ink-2); }
#tab-sheet:checked ~ .starter-tabs label[for="tab-sheet"], #tab-offer:checked ~ .starter-tabs label[for="tab-offer"] { color: var(--ink); border-bottom-color: var(--green); }
#tab-sheet:focus-visible ~ .starter-tabs label[for="tab-sheet"], #tab-offer:focus-visible ~ .starter-tabs label[for="tab-offer"] { outline: 3px solid var(--green); outline-offset: 2px; }
#tab-sheet:checked ~ .pane-offer, #tab-offer:checked ~ .pane-sheet { display: none; }
.starter-pane .btn { width: 100%; justify-content: center; margin-top: 20px; }
.starter-pane .fine { margin: 10px 0 0; text-align: center; }

/* ---------- bands ---------- */
.band { padding: 88px 0; }
.sec-head { max-width: 760px; margin-bottom: 40px; }
.sec-head p:last-child { color: var(--ink-2); font-size: 17.5px; }
.sec-cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.sec-cta .fine { max-width: 52ch; margin: 0; }
.band-offer { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.explain { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.lede-s { color: var(--ink-2); font-size: 17.5px; }
.callouts { list-style: none; counter-reset: c; padding: 0; margin: 116px 0 0; display: grid; gap: 22px; }
.callouts li { counter-increment: c; position: relative; padding: 0 0 22px 50px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.callouts li b { color: var(--ink); display: block; }
.callouts li::before { content: counter(c); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--yellow); color: var(--ink); font: 800 19px/32px var(--display); text-align: center; }
.band-price { background: var(--yellow); }
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px 56px; align-items: center; }
.band-price .eyebrow { color: var(--ink); }
.band-price h2 { font-size: clamp(36px, 4.6vw, 60px); }
.price-free { font-size: 18px; margin: 0; }
.price-table { margin: 0; border-top: 2px solid var(--ink); }
.price-table div { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(20,32,27,.25); }
.price-table dt { font-weight: 600; }
.price-table dd { margin: 0; }
.price-table .pp { font-weight: 600; }
.price-table div:first-child::before { content: none; }
.price-more { grid-column: 1 / -1; margin: 8px 0 0; }
.band-straight { background: var(--green-2); color: var(--paper); }
.band-straight a { color: var(--yellow); }
.band-straight :focus-visible { outline-color: var(--yellow); }
.straight { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 40px; }
.straight h2 { color: var(--yellow); }
.straight ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.straight li { border-top: 1px solid rgba(245,241,230,.3); padding-top: 14px; color: #d5ded9; }
.straight li b { display: block; color: var(--paper); font-size: 17px; margin-bottom: 4px; }

/* ---------- the Sticker ---------- */
.stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; align-items: start; }
.sticker { background: var(--card); border: 2px solid var(--ink); border-radius: 6px; display: flex; flex-direction: column; overflow: hidden; }
.st-head { background: var(--ink); color: var(--paper); padding: 14px 20px 12px; }
.st-kind { margin: 0 0 4px; font: 700 13px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); }
.st-head h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.st-big { padding: 18px 20px 14px; border-bottom: 2px solid var(--ink); }
.st-label { margin: 0; font: 700 14px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.st-num { margin: 4px 0 2px; font: 800 76px/.95 var(--display); letter-spacing: -.005em; }
.st-sub { margin: 0; font-size: 14px; color: var(--ink-2); }
.st-lines { margin: 0; padding: 8px 20px 12px; font-size: 14.5px; }
.st-lines div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.st-lines dt small { display: block; color: var(--ink-2); font-size: 12.5px; }
.st-lines dd { margin: 0; font-weight: 600; white-space: nowrap; }
.st-lines .st-total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 10px; font-weight: 600; }
.st-flag { margin: 0 20px 12px; padding: 8px 12px; background: #fbe9e4; border-left: 4px solid var(--brick); font-size: 13.5px; }
.st-band { margin: auto 0 0; padding: 11px 20px; background: var(--paper-2); font: 700 16px/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.sticker.is-best { border-color: var(--green); box-shadow: 0 0 0 3px var(--green); }
.sticker.is-best .st-head { background: var(--green); }
.sticker.is-best .st-band { background: var(--yellow); }

/* ---------- bars ---------- */
.bars { list-style: none; margin: 0 0 32px; padding: 20px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); display: grid; gap: 12px; }
.bars li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.4fr) auto; gap: 16px; align-items: center; }
.bar-name { font-weight: 500; font-size: 15px; overflow-wrap: anywhere; }
.bar-track { height: 18px; background: var(--paper-2); border-radius: 3px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--green); }
.is-best .bar-fill { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }
.bar-val { font: 800 26px/1 var(--display); min-width: 90px; text-align: right; }
.bar-val small { font: 600 13px var(--text); color: var(--ink-2); }
.w0 { width: 0; } .w5 { width: 5%; } .w10 { width: 10%; } .w15 { width: 15%; } .w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; } .w50 { width: 50%; } .w55 { width: 55%; } .w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; } .w95 { width: 95%; } .w100 { width: 100%; }

/* ---------- disclosure document ---------- */
.doc { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 26px; box-shadow: 0 1px 0 var(--line), 0 14px 30px rgba(20,32,27,.08); }
.doc-kicker { font: 700 14px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 16px; }
.tila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 2px solid var(--ink); }
.box { position: relative; padding: 18px 14px 14px; border-left: 1px solid var(--ink); display: flex; flex-direction: column; }
.box:first-child { border-left: 0; }
.box-apr { border: 3px solid var(--ink); margin: -2px 0 -2px -2px; }
.box h3 { font: 800 19px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 6px; }
.box-def { font-size: 12.5px; color: var(--ink-2); margin-bottom: 14px; }
.box-num { margin: auto 0 0; font: 800 clamp(26px, 2.4vw, 34px)/1 var(--display); white-space: nowrap; }
.pin { position: absolute; top: -13px; left: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink); font: 800 15px/22px var(--display); text-align: center; }
.doc-note { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.doc-sum { margin-top: 20px; border-top: 1px solid var(--line); }
.doc-sum p { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.doc-sum p span small { display: block; color: var(--ink-2); font-size: 12.5px; }
.doc-sum b { white-space: nowrap; font-size: 17px; }
.doc-extra { color: var(--brick); }
.doc-extra b small { font-weight: 500; }
.doc-save { margin: 16px 0 0; font-size: 14.5px; }
.note-lease { margin: 24px 0; padding: 18px 20px; background: #fdf3d3; border-radius: var(--r); border: 1px solid #e9d38d; }
.note-lease h3 { margin-bottom: 6px; }
.note-lease p { margin: 0; font-size: 15px; }

/* ---------- page heads + tool pages ---------- */
.pagehead { padding: 56px 0 36px; border-bottom: 1px solid var(--line); background: linear-gradient(var(--card), var(--paper)); }
.pagehead h1 { font: 800 clamp(42px, 5.6vw, 76px)/.95 var(--display); text-transform: uppercase; max-width: 18ch; }
.pagehead .lede { margin-bottom: 0; }
.pagehead.nf p:last-child { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.results { padding: 40px 0 8px; }
.res-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.res-head h2, .res-title { margin: 0; font-size: clamp(26px, 3vw, 36px); }
.res-title { margin-bottom: 18px; }
.savebox { margin: 32px 0 8px; display: flex; gap: 20px 32px; align-items: center; justify-content: space-between; padding: 22px 26px; background: var(--mint); border-radius: var(--r); }
.savebox h2 { font-size: 26px; margin-bottom: 6px; }
.savebox p { margin: 0; color: var(--ink-2); max-width: 70ch; }
.savebox .btn { flex: none; }
.sheetform { margin: 40px 0 72px; }
.sheet-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 220px); gap: 16px 20px; align-items: end; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 2px solid var(--ink); }
.sheet-top h2 { grid-column: 1 / -1; margin: 0; }
.sheet-top .fine { grid-column: 1 / -1; margin: 0; }
.comps { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; align-items: start; }
.comp { margin: 0; padding: 18px 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.comp legend { font: 800 22px/1 var(--display); text-transform: uppercase; padding: 0 8px; display: flex; gap: 10px; align-items: center; max-width: 100%; overflow-wrap: anywhere; }
.comp-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 17px; line-height: 30px; text-align: center; }
.comp-id { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 8px; }
.grp { margin-top: 14px; }
.grp-h { font: 700 13px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.addcomp { border: 2px dashed var(--field); border-radius: var(--r); background: transparent; }
.addcomp summary { cursor: pointer; padding: 18px 20px; font-weight: 600; list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.addcomp summary::-webkit-details-marker { display: none; }
.addcomp summary small { grid-column: 2; font-weight: 400; color: var(--ink-2); font-size: 13.5px; }
.addcomp .plus { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--yellow); font: 800 26px/32px var(--display); text-align: center; }
.addcomp[open] { border-style: solid; border-color: var(--line); }
.addcomp .comp { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); }
.addcomp-full { padding: 18px 20px; }
.addcomp-full p { margin: 0; }
.sheet-go { margin-top: 28px; display: flex; gap: 14px 22px; align-items: center; flex-wrap: wrap; }
.sheet-go .fine { margin: 0; max-width: 64ch; }
.offer-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 48px; padding-top: 40px; padding-bottom: 72px; align-items: start; }
.offerform { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; position: sticky; top: 20px; }
.offerform h2 { font-size: 30px; }
.offerform .fld { margin-bottom: 14px; }
.offerform .f2 .fld { margin-bottom: 0; }
.offerform .f2 { margin-bottom: 14px; }
/* selects take the whole row: in a half-width cell "After one period" and "Every two weeks" were cut off at 1440 and 390 */
.offerform .f2 .fld-wide { grid-column: 1 / -1; }
.offerform .btn { width: 100%; justify-content: center; }
.seg { border: 0; padding: 0; margin: 0 0 16px; }
.seg legend { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.seg label { display: block; margin-bottom: 6px; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: 10px 14px; border: 1.5px solid var(--field); border-radius: 10px; font-weight: 500; cursor: pointer; }
.seg input:checked + span { background: var(--green); border-color: var(--green); color: var(--card); }
.seg input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }
.offer-solo { max-width: 860px; margin-bottom: 64px; }

/* ---------- prose, pricing, folder ---------- */
.prose { max-width: 820px; padding-top: 40px; padding-bottom: 72px; }
.prose h2 { font-size: 34px; margin-top: 44px; }
.prose h3 { margin-top: 26px; }
.toc { display: flex; gap: 10px; flex-wrap: wrap; }
.toc a { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; background: var(--card); }
.formula { padding-left: 22px; }
.formula li { margin-bottom: 12px; }
.sources li { margin-bottom: 10px; }
.preview-note { margin: 32px 0 0; padding: 16px 20px; border-radius: var(--r); background: #fdf3d3; border: 1px solid #e9d38d; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0 8px; max-width: 900px; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; }
.plan h2 { font-size: 30px; }
.plan-price { font: 800 64px/1 var(--display); margin: 6px 0 6px; }
.plan-price small { font: 600 16px var(--text); color: var(--ink-2); }
.plan-alt { font-weight: 600; }
.plan-alt small { font-weight: 400; color: var(--ink-2); }
.plan ul { padding-left: 20px; margin: 14px 0 0; }
.plan-pass { border: 2px solid var(--ink); border-top: 12px solid var(--yellow); }
.plan-state { margin: 16px 0 0; font-weight: 600; color: var(--green); }
.faq { padding-top: 16px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0 72px; }
.card-form { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; }
.card-form h2 { font-size: 28px; }
.card-form .fld { margin-bottom: 16px; }
.card-form.narrow { max-width: 620px; margin: 32px 0 72px; }
.keylink { margin: 24px 0; padding: 18px 22px; background: #fdf3d3; border: 1px solid #e9d38d; border-radius: var(--r); }
.keylink-row { display: flex; gap: 10px; margin: 0; }
.keylink-row input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--field); border-radius: 10px; background: var(--card); font-size: 14px; }
.shelf { margin: 32px 0; }
.shelf-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.shelf-head h2 { margin: 0; font-size: 30px; }
.items { list-style: none; margin: 0; padding: 0; }
.items li { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.items a { flex: 1; min-width: 0; padding: 14px 0; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; }
.items a span { color: var(--ink-2); font-size: 14px; overflow-wrap: anywhere; }
.items a:hover b { text-decoration: underline; }
.empty { color: var(--ink-2); padding: 12px 0; }
.shelf-admin { padding-top: 16px; border-top: 1px solid var(--line); }
.inline-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.inline-form .fld { flex: 1; min-width: 220px; max-width: 420px; }
.admin-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.item-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: #cfd8d3; margin-top: 0; }
.foot a { color: var(--paper); }
.foot :focus-visible { outline-color: var(--yellow); }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 56px 28px 36px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; }
.foot-mark { font: 800 30px/1 var(--display); text-transform: uppercase; color: var(--paper); }
.foot-mark b { color: var(--yellow); }
.foot-honest { max-width: 60ch; font-size: 14.5px; }
.foot-honest b { color: var(--paper); font-weight: 600; }
.foot-preview { font-size: 14px; color: var(--yellow); }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.foot-cols h2 { font: 700 13px/1 var(--display); letter-spacing: .2em; color: #9fb0a8; margin-bottom: 14px; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-base { max-width: var(--wrap); margin: 0 auto; padding: 18px 28px 28px; border-top: 1px solid rgba(245,241,230,.15); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13.5px; }
.foot-base p { margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .top-in { flex-direction: column; align-items: flex-start; gap: 12px; }
  .nav { width: 100%; }
  .nav ul { overflow-x: auto; scrollbar-width: none; }
  .hero { grid-template-columns: 1fr; padding: 0 0 48px; gap: 0; }
  .hero-panel { border-radius: 0 0 160px 0; padding: 48px 28px 64px; }
  .starter { margin: -28px 20px 0; }
  .explain, .offer-grid, .price-grid, .straight { grid-template-columns: 1fr; }
  .callouts { margin-top: 8px; }
  .offerform { position: static; }
}
@media (max-width: 720px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 18px; }
  .top-in { padding: 12px 18px; }
  .mark-word { font-size: 23px; }
  .mark-icon { width: 28px; height: 34px; background: linear-gradient(var(--ink) 0 7px, var(--card) 7px 21px, var(--yellow) 21px); }
  .nav ul { margin: 0 -18px; border-radius: 0; border-left: 0; border-right: 0; padding: 4px 18px; width: calc(100% + 36px); flex-wrap: wrap; justify-content: center; overflow-x: visible; row-gap: 4px; }
  .nav a { padding: 8px 12px; font-size: 14.5px; }
  .hero-panel { border-radius: 0 0 96px 0; padding: 36px 18px 56px; }
  .hero h1 { font-size: 54px; }
  .starter { margin: -24px 12px 0; padding: 4px 18px 20px; }
  .f2 { grid-template-columns: 1fr; gap: 12px; }
  .starter .f2, .offerform .f2 { grid-template-columns: 1fr 1fr; }
  .band { padding: 60px 0; }
  .stickers { grid-template-columns: 1fr; }
  .st-num { font-size: 64px; }
  .tila { grid-template-columns: 1fr 1fr; }
  .box:nth-child(3) { border-left: 0; }
  .box:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .box-apr { margin: -2px 0 0 -2px; }
  .box-num { font-size: 28px; }
  .doc { padding: 18px 14px; }
  .bars { padding: 16px; }
  .bars li { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .price-table div { grid-template-columns: 1fr 1fr; }
  .price-table dt { grid-column: 1 / -1; }
  .straight ul { grid-template-columns: 1fr; }
  .savebox { flex-direction: column; align-items: stretch; padding: 20px; }
  .sheet-top { grid-template-columns: 1fr; }
  .comps { grid-template-columns: 1fr; }
  .comp-id { grid-template-columns: 1fr; }
  .comp .f2 { grid-template-columns: 1fr 1fr; }
  .plans, .two { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr; padding-top: 44px; }
  .pagehead { padding: 40px 0 28px; }
}
@media (max-width: 380px) {
  .starter .f2, .offerform .f2, .comp .f2 { grid-template-columns: 1fr; }
}

/* ---------- print: stickers and offers only ---------- */
@media print {
  @page { margin: 12mm; }
  body { background: #fff; }
  .top, .foot, .sheetform, .offerform, .savebox, .item-actions, .skip, .alert-pass, .keylink, .pagehead .lede { display: none !important; }
  .pagehead { padding: 0 0 8px; background: none; border: 0; }
  .pagehead h1 { font-size: 30px; }
  .offer-grid { display: block; padding: 0; }
  .stickers { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .sticker, .doc { break-inside: avoid; box-shadow: none; }
  .bars { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ---------- v1.1.0: AdEngine banner (adengine.us) ----------
   One labelled slot between the main content and the footer, on the public pages only (the controllers opt in). The label, the
   reserved height and the spacing are all 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 and the page closes up. 110px = 16px label + 4px gap + 90px banner; 270px on phones (300x250). Inner pages
   already end with 72px of padding and the footer has no top margin, so the slot keeps 56px below itself; the home page ends on the
   dark band, so there it also keeps 48px above. Label: the display face in --ink-2 on paper (7.5:1). display stays in this file and
   is never !important: tag.js hides a slot with style.display='none'. */
.ae-slot { padding: 0 28px; }
.ae-slot ins.adengine { display: block; max-width: 728px; min-height: 110px; margin: 0 auto 56px; text-align: center; text-decoration: none; }
.home .ae-slot ins.adengine { margin-top: 48px; }
.ae-slot ins.adengine::before { content: "Advertisement"; display: block; margin-bottom: 4px; font: 700 13px/16px var(--display); letter-spacing: .18em; 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; }
@media (max-width: 767px) { .ae-slot ins.adengine { max-width: 300px; min-height: 270px; } }
@media (max-width: 720px) { .ae-slot { padding: 0 18px; } .ae-slot ins.adengine { margin-bottom: 44px; } .home .ae-slot ins.adengine { margin-top: 40px; } }
@media print { .ae-slot { display: none; } }