/* Lanecard (smalltown.info) v1.0. Own design system: index-card paper, barn red, slate; Source Serif 4 + IBM Plex Sans + IBM Plex Mono. */
/* Fonts: Source Serif 4 (c) Adobe, IBM Plex Sans and IBM Plex Mono (c) IBM Corp., all under the SIL Open Font License 1.1: see /assets/fonts/OFL-SourceSerif4.txt and /assets/fonts/OFL-IBMPlex.txt */
@font-face { font-family: "Source Serif 4"; src: url("/assets/fonts/sourceserif4-var-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/plexsans-var-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plexmono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --paper: #f6f1e7; --card: #fffdf8; --ink: #1e1b18; --ink2: #4a443d; --red: #a3352b; --red-d: #862a22; --slate: #2f4c66;
  --wheat: #e8d7ae; --rule: #d9cdb8; --line: #c9d6e2; --ok: #2f6b45;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --shell: 1180px;
}
*, *::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(--sans); }
img, svg { max-width: 100%; }
a { color: var(--slate); text-underline-offset: .18em; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; }
.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }

/* header */
.top { border-bottom: 1px solid var(--rule); background: var(--paper); }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; }
.logo__mark { width: 2.1rem; height: 2.1rem; color: var(--ink); }
.logo__word { font: 700 1.55rem/1 var(--serif); letter-spacing: -.01em; }
.menu { display: flex; align-items: center; gap: .3rem 1.4rem; flex-wrap: wrap; }
.menu a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .98rem; padding: .3rem 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--red); color: var(--ink); }
.menu a.menu__go { background: var(--ink); color: var(--paper); padding: .55rem 1rem; border: 0; border-radius: 2px; }
.menu a.menu__go:hover, .menu a.menu__go[aria-current="page"] { background: var(--red); color: #fff; }

/* type */
.eyebrow { font: 600 .8rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin: 0 0 .9rem; }
.page__h, .hero__h, .sect__h { font-family: var(--serif); font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.hero__h { font-size: clamp(2.4rem, 5.2vw, 4.35rem); line-height: 1.03; margin: 0 0 1.3rem; font-optical-sizing: auto; }
.page__h { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; margin: 0 0 1rem; }
.sect__h { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.12; margin: 0 0 .8rem; }
.sub__h { font: 700 1.35rem/1.25 var(--serif); margin: 2.2rem 0 .7rem; }
.page__lede, .sect__lede, .hero__lede { font-size: 1.15rem; color: var(--ink2); max-width: 44rem; }
.stamp { display: inline-block; font: 700 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--red); border: 2px solid var(--red); padding: .32rem .5rem .28rem; transform: rotate(-2deg); border-radius: 3px; white-space: nowrap; background: rgba(255,253,248,.6); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: 600 1rem/1 var(--sans); padding: .95rem 1.35rem; border-radius: 2px; text-decoration: none; cursor: pointer; border: 2px solid transparent; }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-d); color: #fff; }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btnrow { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.8rem 0 0; }

/* hero */
/* v1.0.3 (ST-D1): the hero is a country-road guide sign: green panel, white inset rule, sign-face sans headline,
   with the card tacked on at LEFT. No cream paper, no serif headline, no red primary button here. */
.hero { --sign: #1d4b35; --sign-d: #143826; background: var(--sign); color: #fff; padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); border-bottom: 6px solid #fff; box-shadow: inset 0 -12px 0 var(--sign-d); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero__copy { order: 2; border: 3px solid #fff; border-radius: 14px; padding: clamp(1.4rem, 3vw, 2.6rem); }
.hero__card { order: 1; position: relative; padding-top: .6rem; }
.hero .eyebrow { display: inline-block; background: #fff; color: var(--sign); border-radius: 4px; padding: .38rem .6rem .32rem; letter-spacing: .1em; }
.hero__h { font-family: var(--sans); font-weight: 600; color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 1.2rem; }
.hero__lede { color: #dfeadf; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0 1.1rem; }
.hero .btn--red { background: #fff; color: var(--sign); }
.hero .btn--red:hover { background: var(--wheat); color: var(--sign-d); }
.hero .btn--line { color: #fff; border-color: #fff; }
.hero .btn--line:hover { background: #fff; color: var(--sign); }
.hero__price { font-size: .98rem; color: #cfe0d2; max-width: 36rem; margin-bottom: 0; }
.hero__price b { color: #fff; }
.hero .stamp { color: #fff; border-color: #fff; background: transparent; }
.hero__card .ic { color: var(--ink); transform: rotate(-2deg); box-shadow: 0 26px 44px -20px rgba(0,0,0,.6); }
.hero__card::before { content: ""; position: absolute; z-index: 2; top: 0; left: 50%; width: 1.1rem; height: 1.1rem; margin-left: -.55rem; border-radius: 50%; background: var(--red); box-shadow: 0 3px 4px rgba(0,0,0,.45), inset -2px -3px 0 rgba(0,0,0,.25); }
.hero__note { font-size: .85rem; color: #cfe0d2; margin: 1.1rem 0 0; }

/* the index card */
.ic { background: var(--card) repeating-linear-gradient(180deg, transparent 0, transparent 2.05rem, var(--line) 2.05rem, var(--line) calc(2.05rem + 1px)); border: 1px solid var(--rule); border-radius: 3px; padding: 1.3rem 1.4rem 1rem; position: relative; }
.ic__head { border-bottom: 2px solid #d46a62; margin: -1.3rem -1.4rem .6rem; padding: 1.2rem 1.4rem .7rem; background: var(--card); border-radius: 3px 3px 0 0; }
.ic__title { font: 700 1.45rem/1.15 var(--serif); margin: 0 0 .35rem; }
.ic__from { margin: 0; font-size: .95rem; color: var(--ink2); }
.ic__lbl { font-weight: 600; color: var(--ink); }
.ic__reset { display: block; font-size: .85rem; }
.ic__steps { list-style: none; margin: 0; padding: 0; }
.ic__step { display: grid; grid-template-columns: 4.1rem 1.6rem minmax(0, 1fr); gap: .65rem; align-items: start; padding: .5rem 0; border-bottom: 1px dashed var(--rule); }
.ic__step:last-child { border-bottom: 0; }
.ic__odo { font: 500 1.05rem/1.35 var(--mono); background: var(--ink); color: #f8f3e6; text-align: right; padding: .12rem .4rem; border-radius: 2px; letter-spacing: .03em; }
.ic__odo small { font-size: .62rem; margin-left: .15rem; opacity: .75; }
.ic__icon .act { width: 1.45rem; height: 1.6rem; color: var(--slate); }
.ic__step--arrive .ic__icon .act { color: var(--red); }
.ic__what { font-size: .98rem; line-height: 1.45; }
.ic__look { color: var(--ink2); }
.ic__far { display: block; color: var(--red); font-size: .9rem; font-weight: 500; }
.ic__foot { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; justify-content: space-between; margin-top: .7rem; padding-top: .6rem; border-top: 2px solid var(--ink); font: 500 .85rem/1.4 var(--mono); }
.ic__there { font-family: var(--sans); font-weight: 500; }
.ic--compact .ic__title { font-size: 1.3rem; }

/* trip meter band */
.meter { background: var(--ink); color: #efe6d2; padding: clamp(3rem, 6vw, 5rem) 0; }
.meter .sect__h { color: #fffaf0; }
.meter .sect__lede { color: #cfc4ad; }
.meter__road { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); position: relative; }
.meter__road::before { content: ""; position: absolute; left: 0; right: 0; top: 1.15rem; border-top: 4px dashed #c9a85a; }
.meter__mark { position: relative; padding: 0 1rem 0 0; }
.meter__odo { position: relative; display: inline-block; font: 500 1.3rem/1 var(--mono); background: #fffaf0; color: var(--ink); padding: .5rem .6rem; border-radius: 2px; box-shadow: 0 0 0 4px var(--ink); }
.meter__act { display: flex; align-items: center; gap: .35rem; margin-top: .9rem; font-weight: 600; color: #fffaf0; }
.meter__act .act { width: 1.2rem; height: 1.3rem; color: #e0b866; }
.meter__look { display: block; color: #cfc4ad; font-size: .92rem; margin-top: .2rem; }

/* hand-over */
.hand { padding: clamp(3rem, 6vw, 5rem) 0; }
.hand__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 2rem; }
.hand__item h3 { font: 700 1.3rem/1.2 var(--serif); margin: 1.2rem 0 .4rem; }
.hand__item p { margin: 0; color: var(--ink2); }
.mock { height: 11rem; border-radius: 4px; position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1rem; overflow: hidden; }
.mock__line { display: block; height: .55rem; background: var(--rule); border-radius: 2px; }
.mock__line--s { width: 60%; }
.mock--phone { width: 8.5rem; margin-inline: auto; background: var(--card); border: 3px solid var(--ink); border-radius: 1.2rem; padding-top: 1.4rem; }
.mock__bar { position: absolute; top: .5rem; left: 50%; width: 2.2rem; height: .3rem; margin-left: -1.1rem; background: var(--ink); border-radius: 1rem; }
.mock__odo { align-self: flex-start; font: 500 .9rem/1 var(--mono); background: var(--ink); color: #fff; padding: .2rem .35rem; border-radius: 2px; }
.mock--print { background: var(--card); border: 1px solid var(--rule); box-shadow: 0 12px 24px -16px rgba(0,0,0,.4); }
.mock__rule { display: block; height: 2px; background: #d46a62; margin-bottom: .3rem; }
.mock__tabs { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: auto; height: 3.3rem; }
.mock__tabs i { border-left: 1px dashed var(--ink2); }
.mock--text { background: var(--slate); justify-content: flex-end; }
.mock__bubble { align-self: flex-end; background: #fffaf0; color: var(--ink); font: 500 .8rem/1.35 var(--mono); padding: .7rem .8rem; border-radius: .9rem .9rem .2rem .9rem; max-width: 90%; }

/* card check */
.check { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--card); border-block: 1px solid var(--rule); }
.check__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.check__list { list-style: none; margin: 0; padding: 0; }
.check__list li { position: relative; padding: 1rem 0 1rem 3rem; border-bottom: 1px solid var(--rule); }
.check__list li::before { content: "!"; position: absolute; left: 0; top: .95rem; width: 2rem; height: 2rem; display: grid; place-items: center; font: 700 1.1rem/1 var(--serif); color: #fff; background: var(--red); border-radius: 50%; }

/* prices */
.prices { padding: clamp(3rem, 6vw, 5rem) 0; }
.prices__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 1.8rem; align-items: stretch; }
.tier { background: var(--card); border: 1px solid var(--rule); border-top: 6px solid var(--ink); padding: 1.6rem 1.5rem; }
.tier--pass { border-top-color: var(--red); background: #fbf3df; }
.tier__name { font: 700 1.3rem/1.2 var(--serif); margin: 0; }
.tier__amt { font: 700 2.6rem/1 var(--serif); margin: .8rem 0 .2rem; }
.tier__amt small { font: 500 1rem/1 var(--sans); color: var(--ink2); }
.tier__alt { margin: 0; color: var(--ink2); font-size: .95rem; }
.tier ul { margin: 1rem 0 0; padding-left: 1.1rem; }
.tier li { margin: .25rem 0; }
.prices__pv { margin-top: 1.6rem; color: var(--ink2); max-width: 52rem; }
.safe { background: var(--wheat); padding: 1.6rem 0; }
.safe p { margin: 0; max-width: 60rem; }

/* inner pages */
.page { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.page__narrow { max-width: 54rem; }
.prose p, .prose li { max-width: 46rem; }
.plain { padding-left: 1.2rem; }
.plain li { margin: .45rem 0; }
.notice { background: var(--card); border-left: 5px solid var(--red); padding: 1rem 1.2rem; margin: 1.2rem 0; }
.notice--ok { border-left-color: var(--ok); }
.steps3 { list-style: none; counter-reset: s; padding: 0; margin: 2rem 0; display: grid; gap: 1.2rem; }
.steps3 li { counter-increment: s; position: relative; padding: 1.2rem 1.2rem 1.2rem 4.2rem; background: var(--card); border: 1px solid var(--rule); }
.steps3 li::before { content: counter(s); position: absolute; left: 1.1rem; top: 1.1rem; font: 700 2rem/1 var(--serif); color: var(--red); }
.steps3 h2 { font: 700 1.2rem/1.25 var(--serif); margin: 0 0 .3rem; }
.steps3 p { margin: 0; color: var(--ink2); }
.how__card { max-width: 40rem; }
.msg .page__lede { margin-bottom: 0; }

/* maker form */
.pou { background: #fbf3df; border: 1px solid var(--wheat); padding: .9rem 1.1rem; margin: 1.4rem 0; max-width: 60rem; }
.errs { background: #fdecea; border: 2px solid var(--red); padding: 1rem 1.3rem; margin: 1.2rem 0; }
.errs h2, .cc h2 { font: 700 1.15rem/1.2 var(--serif); margin: 0 0 .4rem; }
.errs ul, .cc ul { margin: 0; padding-left: 1.2rem; }
.cc { background: var(--card); border: 1px solid var(--rule); border-left: 5px solid #c9a85a; padding: 1rem 1.3rem; margin: 1.2rem 0; }
.cc--ok { border-left-color: var(--ok); }
.cc p { margin: .2rem 0 0; }
.maker { margin-top: 1.5rem; }
.maker__block { display: grid; gap: 1rem; max-width: 52rem; margin: 1.4rem 0; }
.fld { display: grid; gap: .35rem; }
.fld > span, .step label > span { font-weight: 600; font-size: .92rem; }
.fld i, .step i { font-style: normal; font-weight: 400; color: var(--ink2); }
input, select { font: 400 1rem/1.3 var(--sans); color: var(--ink); background: #fff; border: 1.5px solid #b9ad97; border-radius: 2px; padding: .65rem .7rem; width: 100%; min-width: 0; }
input::placeholder { color: #9a907f; }
input:focus, select:focus { border-color: var(--slate); outline: 2px solid var(--slate); outline-offset: 0; }
.maker__steps { display: grid; gap: .6rem; }
.step { border: 1px solid var(--rule); background: var(--card); margin: 0; padding: .8rem .9rem .9rem; display: grid; grid-template-columns: 7.2rem 10.5rem minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: .6rem; align-items: end; }
.step__no { font: 500 .8rem/1 var(--mono); color: #fff; background: var(--ink); padding: .25rem .45rem; border-radius: 2px; }
.step label { display: grid; gap: .3rem; }
.step label > span { font-size: .8rem; }
.more { border: 1px dashed #b9ad97; padding: .8rem 1rem; margin: .4rem 0; }
.more > summary { cursor: pointer; font-weight: 600; }
.more[open] > summary { margin-bottom: .8rem; }
.more--route { margin: 1.4rem 0; }
.tag { display: inline-block; font: 600 .7rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; background: var(--red); color: #fff; padding: .25rem .4rem; border-radius: 2px; margin-left: .4rem; vertical-align: middle; }
.pin { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; max-width: 26rem; }
.warn { background: var(--wheat); padding: .8rem 1rem; margin: .6rem 0; max-width: 52rem; }
.del { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.links { background: var(--card); border: 1px solid var(--rule); padding: 1rem 1.2rem; margin: 1rem 0; }
.links p { margin: .3rem 0; overflow-wrap: anywhere; }
.links__lbl { display: block; font-weight: 600; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); }
.links__url { font: 500 1rem/1.4 var(--mono); }
.links--big p { margin: .8rem 0; }

/* card page (phone first) */
.cardpage { padding: 1.6rem 0 3rem; }
.cardpage__in { max-width: 44rem; display: grid; gap: 1.2rem; }
.cardpage__h2 { font: 700 1.3rem/1.2 var(--serif); margin: .6rem 0 -.4rem; }
.is-card .ic__what { font-size: 1.08rem; }
.arrive { background: var(--card); border: 1px solid var(--rule); border-top: 4px solid var(--red); padding: 1.1rem 1.3rem; }
.arrive__h { font: 700 1.25rem/1.2 var(--serif); margin: 0 0 .5rem; }
.arrive dl { margin: 0; display: grid; gap: .5rem; }
.arrive dt { font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); }
.arrive dd { margin: 0; font-size: 1.05rem; }
.arrive__pin { margin: .8rem 0 0; }
.cardpage__tools { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.cardpage__safe, .cardpage__own { margin: 0; font-size: .92rem; color: var(--ink2); }

/* print page */
.printer { padding: 1.5rem 0 3rem; }
.printer__bar { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; margin-bottom: 1.4rem; }
.printer__layouts { display: flex; gap: .3rem; flex-wrap: wrap; }
.printer__layouts a { text-decoration: none; color: var(--ink); border: 1.5px solid var(--ink); padding: .45rem .7rem; border-radius: 2px; font-weight: 500; }
.printer__layouts a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.printer__price { flex-basis: 100%; margin: 0; font-size: .92rem; color: var(--ink2); }
.sheet { width: min(100% - 2.5rem, 8.5in); margin-inline: auto; background: #fff; border: 1px solid var(--rule); padding: .5in; display: grid; gap: 1rem; }
.sheet__notes, .sheet__url { margin: 0; }
.sheet__url { font: 500 .9rem/1.3 var(--mono); }
.sheet--card .sheet__index { width: 6in; max-width: 100%; min-height: 4in; }
.strips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px dashed var(--ink); height: 3.4in; break-inside: avoid; }
/* v1.0.3 (ST-B1): nothing on a strip is clipped. Long titles and starts wrap onto another line; the link never breaks. */
.strip { height: 3.4in; box-sizing: border-box; writing-mode: vertical-rl; transform: rotate(180deg); border-left: 1px dashed var(--ink); padding: .45rem .35rem; display: flex; flex-direction: column; gap: .3rem; font-size: .72rem; line-height: 1.25; overflow-wrap: anywhere; }
.strip b { font: 700 .82rem/1.2 var(--serif); }
.strip .strip__url { font-family: var(--mono); white-space: nowrap; overflow-wrap: normal; }

/* footer */
.foot { background: var(--ink); color: #d9cfbb; margin-top: 0; }
.foot a { color: #fffaf0; }
.foot__grid { display: grid; grid-template-columns: 1.1fr 1.6fr 1fr; gap: 2rem; padding: 2.8rem 0 1.6rem; }
.foot__word { display: flex; align-items: center; gap: .5rem; font: 700 1.35rem/1 var(--serif); color: #fffaf0; margin: 0 0 .6rem; }
.foot__word .logo__mark { color: #fffaf0; width: 1.8rem; height: 1.8rem; }
.foot__brand p:last-child, .foot__price p { margin: 0; }
.foot .stamp { color: #f2a097; border-color: #f2a097; background: transparent; }
.foot__links { display: grid; gap: .35rem; align-content: start; }
.foot__links a { text-decoration: none; }
.foot__links a:hover { text-decoration: underline; color: #fff; }
.foot__base { border-top: 1px solid #3b352f; padding: 1.1rem 0 1.6rem; display: flex; flex-wrap: wrap; gap: .4rem 2rem; justify-content: space-between; font-size: .88rem; }
.foot__base p { margin: 0; }

/* responsive */
@media (max-width: 980px) {
  .step { grid-template-columns: 7rem minmax(0, 1fr); }
  .step__onto, .step__look, .step__far { grid-column: 1 / -1; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__links { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; gap: 1.2rem; }
}
@media (max-width: 860px) {
  .hero__grid, .check__grid { grid-template-columns: 1fr; }
  .hero__card .ic { transform: none; }
  .hero__copy { order: 1; }
  .hero__card { order: 2; }
  .hand__grid, .prices__row { grid-template-columns: 1fr; }
  .meter__road { grid-template-columns: 1fr; gap: 1.4rem; }
  .meter__road::before { left: 1.4rem; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 4px dashed #c9a85a; }
  .meter__mark { padding: 0; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); column-gap: 1rem; align-items: start; }
  .meter__odo { grid-row: 1 / span 2; justify-self: start; }
  .meter__act { margin-top: .35rem; grid-column: 2; }
  .meter__look { grid-column: 2; }
}
@media (max-width: 560px) {
  .shell { width: min(100% - 1.6rem, var(--shell)); }
  .top__in { padding: .6rem 0; }
  .menu { gap: .2rem 1rem; }
  .menu a { font-size: .92rem; }
  .menu a.menu__go { padding: .5rem .75rem; }
  .ic { padding: 1.1rem 1rem .9rem; }
  .ic__head { margin: -1.1rem -1rem .6rem; padding: 1rem 1rem .7rem; }
  .ic__step { grid-template-columns: 3.7rem 1.3rem minmax(0, 1fr); gap: .5rem; }
  .ic__odo { font-size: .95rem; padding: .12rem .3rem; }
  .step { grid-template-columns: 1fr 1fr; padding: .7rem; }
  .step__no { grid-column: 1 / -1; }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__links { grid-auto-flow: row; }
  .sheet { padding: .25in; width: 100%; }
  .btn { padding: .85rem 1.1rem; }
}

/* printing */
@media print {
  body { background: #fff; }
  .top, .foot, .noprint, .skip { display: none !important; }
  .printer { padding: 0; }
  .sheet { border: 0; padding: 0; width: 100%; }
  .ic { box-shadow: none; break-inside: avoid; }
  .sheet--card .sheet__index { width: 6in; height: 4in; overflow: hidden; border: 1px dashed #999; padding: .15in; }
  .ic__odo { background: #fff; color: #000; border: 1px solid #000; }
  @page { margin: .5in; }
}

/* v1.1.0: AdEngine banner (adengine.us). One labelled slot between the main content and the footer, on the public reading
   pages 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). Pricing and How end with .page bottom padding and the dark footer has no top margin, so the spacing is
   below the <ins> (plus a top margin after the home page's closing wheat band), and it disappears with a hidden slot.
   display stays in this file and is never !important: tag.js hides a slot with style.display='none'. */
.ae-slot { padding: 0 1.25rem; }
.ae-slot ins.adengine { display: block; max-width: 728px; min-height: 110px; margin: 0 auto 3rem; text-align: center; text-decoration: none; }
.ae-slot ins.adengine::before { content: "Advertisement"; display: block; margin-bottom: 4px; font: 600 11px/16px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.ae-slot ins.adengine a { display: inline-block; vertical-align: top; }
main:has(> .safe:last-child) + .ae-slot ins.adengine { margin-top: 2.5rem; }
.ae-slot:has(> ins.adengine[style*="none"]) { display: none; }
@media (max-width: 767px) { .ae-slot ins.adengine { max-width: 300px; min-height: 270px; margin-bottom: 2.5rem; } }
@media print { .ae-slot { display: none; } }