/* The Tarmac SL8 frame page, on the site's own tokens (--bg, --fg, --dim,
   --faint, --line, --card, --btn, --ghost, --accent) and its glass (.lpg). */
:root { --fp-head: #fafafa; --fp-colglass: rgba(255,255,255,.92); --fp-blue: #2563eb; --fp-bsel: rgba(37,99,235,.08); --fp-sel: rgba(229,76,36,.10); --fp-sunk: rgba(0,0,0,.025); --fp-ok: #15803d; --fp-glass: rgba(255,255,255,.72); --fp-row: rgba(0,0,0,.045); --fp-band: rgba(255,255,255,.95); --fp-glass-hi: rgba(255,255,255,.92); --fp-menu: rgba(255,255,255,.94); }
html.dark { --fp-head: #10151c; --fp-colglass: rgba(255,255,255,.075); --fp-blue: #7fb0f7; --fp-bsel: rgba(96,150,240,.14); --fp-sel: rgba(229,76,36,.16); --fp-sunk: rgba(255,255,255,.025); --fp-ok: #6ee7a0; --fp-glass: rgba(16,22,29,.66); --fp-row: rgba(255,255,255,.065); --fp-band: rgba(255,255,255,.1); --fp-glass-hi: rgba(30,38,48,.85); --fp-menu: rgba(18,24,32,.96); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 50; background: var(--bg); }
.lpg-nav { top: env(safe-area-inset-top, 0px) !important; }
main { padding: 28px 0 40px; }
.fp-crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--faint); margin-bottom: 18px; }
.fp-crumbs a { text-decoration: none; }
.fp-crumbs a:hover { color: var(--fg); }
.fp-hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
@media (max-width: 960px) { .fp-hero { grid-template-columns: minmax(0, 1fr); } }
.fp-eyebrow { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.fp-eyebrow span + span::before { content: "·"; margin-right: 10px; }
.fp-intro h1 { text-wrap: balance; }
.fp-intro .lede { margin-bottom: 26px; }
.fp-intro .lede strong { color: var(--fg); }
.fp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fp-facts > div { display: grid; gap: 2px; padding: 14px 14px 14px 0; }
.fp-facts > div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.fp-facts .k { font-size: 12px; color: var(--faint); }
.fp-facts .v { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.fp-facts .v small { font-size: 12.5px; font-weight: 500; color: var(--dim); margin-left: 2px; }
@media (max-width: 560px) {
  .fp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .fp-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
/* the size finder: a site card */
.fp-finder { --lp-r: 12px; border-radius: 12px; padding: 22px 20px 20px; display: grid; gap: 16px; }
.fp-finder h2 { font-size: 16px; margin: 0; }
.fp-hrow { display: grid; gap: 8px; }
.fp-hrow label { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--dim); }
.fp-hrow output { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.fp-finder input[type=range] { width: 100%; accent-color: var(--accent); }
.fp-answer { display: grid; gap: 6px; }
.fp-answer .big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fp-answer .big b { font-size: 46px; line-height: 1; font-weight: 600; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.fp-answer .big span { color: var(--dim); font-size: 15px; font-weight: 500; }
.fp-answer p { margin: 0; color: var(--dim); font-size: 14px; line-height: 1.55; }
.fp-ladder { position: relative; height: 46px; margin-top: 4px; }
.fp-ladder .track { position: absolute; left: 0; right: 0; top: 14px; height: 2px; border-radius: 2px; background: var(--line); }
.fp-ladder .tick { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.fp-ladder .tick i { width: 2px; height: 10px; margin-top: 10px; background: var(--ghost); }
.fp-ladder .tick.on { color: var(--fg); }
.fp-ladder .tick.on i { background: var(--fg); }
.fp-ladder .dot { position: absolute; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); transform: translateX(-50%); box-shadow: 0 0 0 4px var(--fp-sel); transition: left .25s ease; }
.fp-finder .btn { justify-content: center; }
.fp-finder .fine { margin: 0; }
/* sections */
.fp-sec { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
.fp-sec h2 { margin: 0 0 6px; text-wrap: balance; }
.fp-sub { color: var(--dim); font-size: 15px; max-width: 64ch; margin-bottom: 18px; }
.fp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
@media (max-width: 900px) { .fp-two { grid-template-columns: minmax(0, 1fr); } }
.fp-two > div { min-width: 0; }
.fp-two .fine { margin-top: 10px; }
.fp-controls { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-bottom: 16px; }
.fp-controls > div { display: grid; gap: 8px; }
.fp-lab { font-size: 11.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); }
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-chip { font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 7px 13px; border-radius: 10px; border: 1px solid var(--ghost); background: transparent; color: var(--dim); cursor: pointer; transition: background 120ms ease, color 120ms ease; }
.fp-chip:hover { color: var(--fg); background: rgba(0,0,0,.04); }
html.dark .fp-chip:hover { background: rgba(255,255,255,.05); }
.fp-chip[aria-pressed="true"] { background: var(--btn); color: var(--btn-fg); border-color: var(--btn); }
.fp-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the 3D box */
.fp-drawbox { --lp-r: 14px; border-radius: 14px; padding: 8px; }
.fp-stage { position: relative; aspect-ratio: 2 / 1; max-width: 100%; border-radius: 9px; overflow: hidden; }
@media (max-width: 640px) { .fp-stage { aspect-ratio: 4 / 3; } }
/* A mouse or trackpad can turn and zoom the model (the wheel still scrolls
   the page: the script lets only a pinch or Ctrl/Cmd + wheel through). On a
   touch screen a swipe scrolls the page, so there the buttons do the zooming. */
#bv3d { position: absolute; inset: 0; }
@media (pointer: coarse) { #bv3d { pointer-events: none; } }
.fp-stage:not(.is3d) #bv3d { cursor: default; }
.fp-stage.is3d #bv3d { cursor: grab; }
.fp-stage.is3d #bv3d:active { cursor: grabbing; }
/* the viewport's controls */
.fp-vbar { position: absolute; z-index: 3; display: flex; gap: 6px; opacity: 0; transition: opacity .3s ease; }
.fp-stage.ready .fp-vbar, .fp-stage.ready .fp-cta { opacity: 1; }
.fp-vtl { top: 12px; left: 12px; }
.fp-vtr { top: 12px; right: 12px; }
.fp-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--fp-glass); border: 1px solid var(--ghost); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.fp-seg button { font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 13px; border: 0; border-radius: 999px; background: transparent; color: var(--dim); cursor: pointer; }
.fp-seg button[aria-pressed="true"] { background: var(--btn); color: var(--btn-fg); }
.fp-seg button:not([aria-pressed="true"]):hover { color: var(--fg); }
.fp-ib { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--ghost); background: var(--fp-glass); color: var(--fg); cursor: pointer; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.fp-ib:hover { background: var(--fp-glass-hi); }
.fp-seg button:focus-visible, .fp-ib:focus-visible, .fp-cta:focus-visible, .fp-card:focus-visible, .fp-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fp-cta { position: absolute; z-index: 3; right: 12px; bottom: 12px; opacity: 0; transition: opacity .3s ease; font-size: 13px; padding: 9px 15px; box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.fp-cta .short { display: none; }
@media (max-width: 640px) { .fp-cta .long { display: none; } .fp-cta .short { display: inline; } .fp-cta { right: 10px; bottom: 10px; padding: 8px 12px; } .fp-vtl { top: 10px; left: 10px; } .fp-vtr { top: 10px; right: 10px; } .fp-ib { width: 30px; height: 30px; } }
.fp-hint { position: absolute; z-index: 2; left: 14px; bottom: 16px; font-size: 12px; color: var(--faint); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.fp-stage.ready .fp-hint { opacity: 1; }
@media (pointer: coarse) { .fp-hint { display: none; } }
@media (max-width: 760px) { .fp-hint { display: none; } }
/* compare cards, as in the app's Compare panel */
.fp-cards { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (max-width: 760px) { .fp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fp-card { position: relative; min-width: 0; min-height: 98px; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; border-radius: 12px; border: 1px solid var(--ghost); background: var(--fp-sunk); font: inherit; color: inherit; text-align: left; }
.fp-card.on { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.fp-card[data-slot="B"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--fp-sel); }
.fp-ch { display: flex; align-items: center; gap: 6px; height: 18px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--dim); }
.fp-ch .d { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.fp-ch .d.a { background: var(--fg); }
.fp-ch .d.b { background: var(--accent); }
.fp-x { margin-left: auto; margin-right: -4px; width: 22px; height: 22px; border: 0; background: none; color: var(--faint); font-size: 17px; line-height: 1; padding-bottom: 2px; cursor: pointer; border-radius: 999px; }
.fp-x:hover { color: var(--fg); }
.fp-fr { font-size: 13px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fp-fr b { color: var(--fg); font-weight: 600; }
.fp-frbtn { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.fp-frbtn svg { flex: none; color: var(--faint); }
.fp-frbtn:hover b { text-decoration: underline; text-underline-offset: 3px; }
.fp-sel { position: relative; display: block; margin-top: auto; }
.fp-sel select { width: 100%; height: 32px; padding: 0 30px 0 12px; border-radius: 999px; border: 1px solid var(--ghost); background: transparent; color: var(--fg); font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 17px) 14px, calc(100% - 12px) 14px; background-size: 5px 5px; background-repeat: no-repeat; }
.fp-sel select option { color: #141414; background: #fff; }
.fp-sel select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fp-add { align-items: center; justify-content: center; gap: 3px; border-style: dashed; background: transparent; color: var(--dim); cursor: pointer; text-align: center; }
.fp-add .pl { font-size: 20px; line-height: 1; font-weight: 400; }
.fp-add span:last-child { font-size: 12px; font-weight: 600; }
.fp-add:hover { color: var(--fg); border-color: var(--dim); }
html .fp-cards .fp-menu.lpg { position: absolute; z-index: 20; }
.fp-menu { --lp-r: 14px; top: calc(100% + 6px); left: 0; width: min(360px, 100%); max-height: 340px; overflow: auto; border-radius: 14px; padding: 6px; display: grid; gap: 1px; box-shadow: 0 16px 40px rgba(0,0,0,.28); }
.fp-menu::before { background: var(--fp-menu) !important; }
.fp-menu .k { padding: 6px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); }
.fp-opt { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--dim); font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 9px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-opt b { color: var(--fg); font-weight: 600; }
.fp-opt .yr { color: var(--faint); font-size: 12.5px; }
.fp-opt:hover, .fp-opt.on { background: var(--fp-sel); }
.fp-more { left: auto; right: 0; padding: 16px 16px 14px; gap: 8px; }
.fp-more b { font-size: 14.5px; }
.fp-more p { margin: 0; font-size: 13.5px; color: var(--dim); line-height: 1.55; }
.fp-more .btn { justify-self: start; margin-top: 4px; }
.fp-h3 { margin: 34px 0 6px; font-size: 18px; }

#bv3d > * { width: 100%; height: 100%; }
.fp-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; font-size: 13.5px; color: var(--dim); background: var(--fp-sunk); transition: opacity .5s ease; }
.fp-loading.done { opacity: 0; pointer-events: none; }
.fp-loading .ring { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: fpSpin .9s linear infinite; }
@keyframes fpSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fp-loading .ring { animation-duration: 2.4s; } .fp-ladder .dot { transition: none; } }
.fp-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 8px 4px; font-size: 13px; color: var(--dim); }
.fp-legend i { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--fg); vertical-align: middle; margin-right: 8px; }
.fp-legend i.xr, .fp-legend i.a { border-top-color: var(--fg); }
.fp-legend i.b { border-top-color: var(--accent); }
.fp-legend .note { color: var(--faint); }
/* tables, in the pricing page's matrix style */
.fp-tablewrap { overflow-x: auto; }
.fp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.fp-table th, .fp-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.fp-table th:first-child, .fp-table td:first-child { text-align: left; padding-left: 2px; }
.fp-table thead th { font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.fp-table td:first-child { color: var(--dim); }
.fp-table td:first-child small { color: var(--faint); }
.fp-table td { font-weight: 500; }


.fp-this td { color: var(--fg) !important; font-weight: 600; }
.fp-this td:first-child::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 8px; vertical-align: 2px; }
.fp-dn { color: var(--fp-ok); }
.fp-list { display: grid; }
.fp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 2px; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 14.5px; }
.fp-row:first-child { border-top: 1px solid var(--line); }
.fp-row b { font-weight: 600; }
.fp-row .yr { color: var(--faint); font-size: 13px; margin-left: 8px; }
.fp-row .m { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.fp-row:hover b { text-decoration: underline; text-underline-offset: 3px; }
.fp-method p { color: var(--dim); max-width: 64ch; }
.fp-method p strong { color: var(--fg); }
.fp-method h2 { margin-bottom: 12px; }
.fp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--ghost); font-size: 12px; font-weight: 600; color: var(--fg); }
.fp-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fp-ok); }
.fp-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fp-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; background: var(--btn); color: var(--btn-fg); font-size: 13.5px; font-weight: 600; box-shadow: 0 8px 28px rgba(0,0,0,.25); }
html { overflow-x: clip; } /* the cards' glass rim (.lpg::after) reaches 64px past them; the body's clip alone left the page scrolling sideways on a phone */
/* The site's scroll veil fades whatever reaches the foot of the screen. The 3D
   box (and the cards' menus above it) stand clear of it, so the viewport's own
   button never greys out: veil 37, box 38, cards 39, nav 40. */
html #veil { z-index: 37; }
html .fp-drawbox.lpg { z-index: 38; }
html .fp-cmppanel.lpg { z-index: 39; }

/* ---- v1031: the geometry table is a glass panel, as the app's panels */
.fp-geopanel { --lp-r: 18px; border-radius: 18px; padding: 8px 10px 10px; }
.fp-rim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.9), inset -.7px -1px 0 0 rgba(255,255,255,.5), inset 0 0 0 .5px rgba(0,0,0,.08), inset 0 0 14px 0 rgba(255,255,255,.3); }
html.dark .fp-rim { box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.26), inset -.7px -1px 0 0 rgba(255,255,255,.1), inset 0 0 14px 0 rgba(255,255,255,.035); }
.fp-geokey { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--dim); padding: 6px 4px 0; }
.fp-geokey:empty { display: none; }
.fp-geokey i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.fp-geokey i.a { background: var(--fg); }
.fp-geokey i.b { background: var(--accent); }
/* numbers to the left; the name column narrow, so a compared pair fits beside it */
.fp-geo.fp-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 560px; }
.fp-geo.is-cmp { min-width: 820px; }
.fp-geo col.c-lab { width: 152px; }
.fp-geo.fp-table th, .fp-geo.fp-table td { text-align: left; padding: 9px 8px; }
.fp-geo.fp-table th:first-child, .fp-geo.fp-table td:first-child { padding: 4px 6px 4px 0; }
.fp-geo thead th:first-child { padding-left: 10px; }
.fp-geo.is-cmp th.b, .fp-geo.is-cmp td.b { color: var(--accent); padding-left: 2px; }
.fp-geo.is-cmp th.a, .fp-geo.is-cmp td.a { padding-right: 2px; }
.fp-geo.is-cmp thead th.b { font-weight: 600; }
/* the name column: a capsule the column's width under the pointer, grey (not the
   accent), with the pin at its right, beside the numbers */
.fp-geo td.lab { white-space: normal; }
.fp-cap { display: flex; align-items: center; gap: 4px; min-height: 34px; padding: 2px 2px 2px 10px; border-radius: 999px; transition: background-color 140ms ease; }
.fp-cap .nm { flex: 1; min-width: 0; line-height: 1.25; }
.fp-geo tbody tr { cursor: default; }
.fp-geo tbody tr:hover .fp-cap, .fp-geo tbody tr.on .fp-cap { background: var(--fp-row); }
.fp-geo tbody tr:hover td.lab, .fp-geo tbody tr.on td.lab, .fp-geo tbody tr.pinned td.lab { color: var(--fg); }
.fp-pin { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--faint); cursor: pointer; opacity: .5; transition: opacity 120ms ease, color 120ms ease, background-color 120ms ease; }
.fp-geo tbody tr:hover .fp-pin, .fp-pin:focus-visible { opacity: 1; }
.fp-pin:hover { color: var(--fg); background: var(--fp-row); }
.fp-pin[aria-pressed="true"] { opacity: 1; color: var(--fg); }
.fp-pin svg { transition: transform 160ms ease; }
.fp-pin[aria-pressed="true"] svg { transform: rotate(-45deg); }
.fp-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: none) { .fp-pin { opacity: 1; } }
/* the active size: a white band down its column (both halves when compared) */
.fp-geo th.sel, .fp-geo td.sel { position: relative; z-index: 0; font-weight: 600; }
.fp-geo th.a.sel, .fp-geo td.a.sel { color: var(--fg); }
.fp-geo th.sel::before, .fp-geo td.sel::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background: var(--fp-band); }
.fp-geo th.a.sel::before, .fp-geo td.a.sel::before { left: 3px; }
.fp-geo:not(.is-cmp) th.a.sel::before, .fp-geo:not(.is-cmp) td.a.sel::before, .fp-geo th.b.sel::before, .fp-geo td.b.sel::before { right: 3px; }
.fp-geo th.sel::before { top: 3px; }
.fp-geo td.sel.last::before { bottom: 3px; }
.fp-geo th.a.sel::before { border-top-left-radius: 10px; }
.fp-geo td.a.sel.last::before { border-bottom-left-radius: 10px; }
.fp-geo:not(.is-cmp) th.a.sel::before, .fp-geo th.b.sel::before { border-top-right-radius: 10px; }
.fp-geo:not(.is-cmp) td.a.sel.last::before, .fp-geo td.b.sel.last::before { border-bottom-right-radius: 10px; }
.fp-geo thead th.sel { color: var(--fg); }
.fp-geo.is-cmp thead th.b.sel { color: var(--accent); }
/* ---- the compare card's frame button and its menu, as the app's frame picker */
.fp-frbtn { display: flex; flex-direction: column; align-items: stretch; gap: 1px; width: 100%; min-width: 0; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.fp-frbtn.is-fixed { cursor: default; }
.fp-frbtn .br { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-frbtn .br svg { margin-left: auto; flex: none; opacity: .65; }
.fp-frbtn .md { font-size: 13px; font-weight: 700; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-frbtn:not(.is-fixed):hover .br svg { opacity: 1; }
.fp-menu.fp-pick { padding: 0; display: flex; flex-direction: column; max-height: 380px; overflow: hidden; gap: 0; }
.fp-search { padding: 8px; border-bottom: 1px solid var(--line); flex: none; }
.fp-search input { width: 100%; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ghost); background: transparent; color: var(--fg); font: inherit; font-size: 13px; outline: none; -webkit-appearance: none; appearance: none; }
.fp-search input:focus { border-color: var(--fg); }
.fp-search input::placeholder { color: var(--faint); }
.fp-listwrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.fp-list2 { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
.fp-list2.has-rail { padding-right: 26px; }
.fp-list2 .fp-opt { font-size: 13px; padding: 8px 10px; border-radius: 9px; border-top: 0; }
.fp-list2 .fp-opt + .fp-opt { box-shadow: 0 -1px 0 var(--line); }
.fp-list2 .fp-opt:hover, .fp-list2 .fp-opt.on { background: var(--fp-row); box-shadow: none; }
.fp-list2 .fp-opt.on b { color: var(--fg); }
.fp-none { padding: 10px 12px; font-size: 13px; color: var(--dim); }
.fp-rail { position: absolute; top: 6px; bottom: 6px; right: 2px; width: 20px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; user-select: none; -webkit-user-select: none; }
.fp-rail span { font-size: 10px; line-height: 1; font-weight: 600; color: var(--fg); opacity: .7; cursor: pointer; padding: 0 4px; }
.fp-rail span.off { opacity: .22; }
.fp-rail span:hover { color: var(--accent); opacity: 1; }
/* the view's hint: scroll zooms in both views; turning is 3D only */
.fp-hint .h3d { display: none; }
.fp-stage.is3d .fp-hint .h3d { display: inline; }
/* phone: the names stay put while the numbers scroll under them */
@media (max-width: 640px) {
  .fp-geo col.c-lab { width: 116px; }
  .fp-geo.fp-table { min-width: 500px; }
  .fp-geo.is-cmp { min-width: 880px; }
  .fp-geo th:first-child, .fp-geo td.lab { position: sticky; left: 0; z-index: 2; background: var(--fp-menu); }
  .fp-geo td.lab { font-size: 12.5px; }
  .fp-cap { padding-left: 6px; }
  .fp-pin { width: 24px; height: 24px; }
}

/* ---- v1032 */
/* the hero is the introduction alone: the size finder lives in the viewport */
.fp-hero.fp-hero1 { grid-template-columns: minmax(0, 1fr); }
.fp-hero1 .fp-intro { max-width: 860px; }
/* the viewport, and the size finder docked in its bottom left */
.fp-stagewrap { position: relative; }
html .fp-fit.lpg { position: absolute; z-index: 4; left: 12px; top: 56px; }
.fp-fit { --lp-r: 14px; width: 268px; border-radius: 14px; padding: 4px 12px 12px; opacity: 0; transition: opacity .3s ease; }
.fp-stage.ready + .fp-fit, .fp-fit.min { opacity: 1; }
.fp-fit::before { background: var(--fp-glass) !important; }
.fp-fit-h { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg); cursor: pointer; text-align: left; }
.fp-fit-h > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-fit-h svg { flex: none; color: var(--dim); transition: transform .2s ease; }
.fp-fit-mini { display: none; font-variant-numeric: tabular-nums; color: var(--dim); font-weight: 600; }
.fp-fit.min { width: auto; padding-bottom: 4px; }
.fp-fit.min .fp-fit-b { display: none; }
.fp-fit.min .fp-fit-mini { display: inline; }
.fp-fit.min .fp-fit-h svg { transform: rotate(180deg); }
.fp-fit-b { display: grid; gap: 6px; }
.fp-fit-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--dim); }
.fp-fit-row output { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.fp-fit input[type=range] { width: 100%; margin: 2px 0; accent-color: var(--accent); }
.fp-fit-ans { display: flex; align-items: baseline; gap: 8px; }
.fp-fit-ans b { font-size: 24px; line-height: 1.1; font-weight: 600; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.fp-fit-ans span { font-size: 13.5px; font-weight: 500; color: var(--dim); }
.fp-fit-why { margin: 0; font-size: 12px; line-height: 1.45; color: var(--dim); }
.fp-fit-h:focus-visible, .fp-pseg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the hint sits between the finder and the button */
.fp-hint { left: 50%; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 1060px) { .fp-hint { display: none; } }
@media (max-width: 640px) {
  html .fp-fit.lpg { position: relative; left: auto; top: auto; }
  .fp-fit { width: auto; margin-top: 8px; opacity: 1; }
  .fp-fit.min { width: auto; }
}
/* the compare cards in their own glass panel, with the app's settings under them */
.fp-cmppanel { --lp-r: 18px; border-radius: 18px; padding: 8px; margin-top: 12px; display: grid; gap: 10px; }
.fp-cmppanel .fp-cards { margin-top: 0; }
.fp-cmppanel .fp-card { background: var(--fp-sunk); }
.fp-card[data-slot="B"] { border-color: var(--fp-blue); box-shadow: inset 0 0 0 1px var(--fp-blue); background: var(--fp-bsel); }
.fp-ch .d.b { background: var(--fp-blue); }
.fp-cmppanel.is-cmp .fp-ch .d.a { background: var(--accent); }
.fp-cmpfoot { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 2px 4px 2px; }
.fp-grp { display: inline-flex; align-items: center; gap: 8px; min-width: 0; transition: opacity .2s ease; }
.fp-grp.off { opacity: .4; }
.fp-grp.off button, .fp-grp.off input { cursor: default; }
.fp-lb { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.fp-rule { width: 1px; height: 18px; background: var(--line); flex: none; }
.fp-pseg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--fp-row); }
.fp-pseg button { height: 24px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 12px; font-weight: 500; color: var(--dim); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
.fp-pseg button:hover { color: var(--fg); }
.fp-pseg button[aria-checked="true"] { color: var(--fg); font-weight: 600; background: rgba(255,255,255,.95); box-shadow: 0 1px 2px rgba(0,0,0,.10), inset 0 0 0 1px rgba(0,0,0,.04); }
html.dark .fp-pseg button[aria-checked="true"] { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
#ghosts { width: 110px; accent-color: var(--fp-blue); }
#ghostOut { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; min-width: 34px; }
@media (max-width: 640px) { .fp-rule { display: none; } .fp-cmpfoot { gap: 10px 16px; } #ghosts { width: 90px; } }
.fp-legend i.b { border-top-color: var(--fp-blue); }
.fp-legend.is-cmp i.a { border-top-color: var(--accent); }
/* the picker's list scrolls as the app's: a thin floating thumb, no arrows */
.fp-list2 { scrollbar-width: thin; scrollbar-color: rgba(var(--fp-rule, 70,78,86), .35) transparent; }
@supports selector(::-webkit-scrollbar) { .fp-list2 { scrollbar-width: auto; scrollbar-color: auto; } }
.fp-list2::-webkit-scrollbar { width: 7px; }
.fp-list2::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.fp-list2::-webkit-scrollbar-track, .fp-list2::-webkit-scrollbar-corner { background: transparent; }
.fp-list2::-webkit-scrollbar-thumb { background: rgba(70,78,86,.32); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.fp-list2::-webkit-scrollbar-thumb:hover { background: rgba(70,78,86,.55); border: 2px solid transparent; background-clip: padding-box; }
html.dark .fp-list2::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border: 2px solid transparent; background-clip: padding-box; }
html.dark .fp-list2::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.42); border: 2px solid transparent; background-clip: padding-box; }
.fp-list2.has-rail { padding-right: 4px; margin-right: 22px; }
.fp-rail { right: 0; width: 22px; touch-action: none; cursor: pointer; }
.fp-rail span { padding: 0; cursor: inherit; transition: transform 90ms ease; }
.fp-rail span:hover { color: var(--fg); opacity: 1; }
.fp-rail span.hot { color: var(--accent); opacity: 1; transform: scale(1.35); }
/* the geometry panel's head: its title, the key and Difference | Values */
.fp-geohead { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding: 6px 4px 6px 10px; }
.fp-geohead h3 { margin: 0; font-size: 16px; font-weight: 600; }
.fp-geohead .fp-geokey { padding: 0; flex: 1 1 auto; min-width: 0; }
.fp-geohead .fp-diffseg { margin-left: auto; }
.fp-geokey i.b { background: var(--fp-blue); }
.fp-geo.is-cmp th.b, .fp-geo.is-cmp td.b, .fp-geo.is-cmp thead th.b.sel { color: var(--fp-blue); }
.fp-geo td.b.d.zero { color: var(--faint); }
.fp-geo col.c-lab { width: 178px; }
@media (max-width: 640px) { .fp-geo col.c-lab { width: 132px; } .fp-geohead .fp-diffseg { margin-left: 0; } }
.fp-geopanel { margin-top: 28px; }

/* ---- v1033 */
/* the top of the page: name, verdict chart, then the numbers for your size */
.fp-top { display: grid; gap: 22px; }
.fp-top .fp-crumbs { margin-bottom: 0; }
.fp-topgrid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; align-items: end; }
@media (max-width: 980px) { .fp-topgrid { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
.fp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.fp-pills span { font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--dim); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ghost); }
.fp-top h1 { margin: 0 0 14px; text-wrap: balance; line-height: 1.02; }
.fp-top h1 .br { display: block; font-size: .36em; font-weight: 600; letter-spacing: .02em; color: var(--dim); margin-bottom: .45em; }
.fp-top h1 .gm { color: var(--faint); font-weight: 500; }
.fp-top .lede { margin: 0; max-width: 58ch; }
.fp-top .lede strong { color: var(--fg); }
.fp-verdict { --lp-r: 18px; border-radius: 18px; margin: 0; padding: 14px 16px 12px; display: grid; gap: 6px; }
.fp-vd-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fp-vd-h .k { font-size: 12.5px; color: var(--dim); }
.fp-vd-h b { font-size: 28px; font-weight: 600; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.fp-vd-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.fp-vd-chart rect { fill: var(--ghost); }
.fp-vd-chart rect.on { fill: var(--fg); }
.fp-vd-chart .ax { stroke: var(--line); }
.fp-vd-chart text { font-size: 10.5px; fill: var(--faint); font-variant-numeric: tabular-nums; }
.fp-vd-chart .mk { stroke: var(--fg); stroke-width: 1.25; stroke-dasharray: 3 3; }
.fp-vd-chart .mkt { fill: var(--fg); font-weight: 600; font-size: 11px; }
.fp-vd-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.fp-verdict figcaption { font-size: 12px; line-height: 1.45; color: var(--faint); }
.fp-top .fp-facts { --lp-r: 18px; border-radius: 18px; border: 0; display: grid; grid-template-columns: 156px minmax(0, 1fr); align-items: stretch; padding: 0; }
.fp-facts-sz { display: grid; align-content: center; gap: 2px; padding: 14px 18px; border-right: 1px solid var(--line); }
.fp-facts-sz .k { font-size: 12px; color: var(--faint); }
.fp-facts-sz b { font-size: 30px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fp-facts-sz .n { font-size: 11.5px; color: var(--faint); }
.fp-facts-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.fp-top .fp-facts-row > div { display: grid; gap: 2px; padding: 14px 14px; border: 0; }
.fp-top .fp-facts-row > div + div { border-left: 1px solid var(--line); padding-left: 14px; }
.fp-top .fp-facts .v { font-size: 20px; }
@media (max-width: 1100px) { .fp-facts-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fp-top .fp-facts-row > div:nth-child(5) { border-left: 0; } .fp-top .fp-facts-row > div:nth-child(n+5) { border-top: 1px solid var(--line); } }
@media (max-width: 640px) {
  .fp-top .fp-facts { grid-template-columns: minmax(0, 1fr); }
  .fp-facts-sz { border-right: 0; border-bottom: 1px solid var(--line); grid-template-columns: auto auto 1fr; align-items: baseline; gap: 10px; padding: 12px 16px; }
  .fp-facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-top .fp-facts-row > div:nth-child(odd) { border-left: 0; }
  .fp-top .fp-facts-row > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .fp-top .fp-facts-row > div:nth-child(5) { border-left: 0; }
  .fp-top .fp-facts-row > div:nth-child(6) { border-left: 1px solid var(--line); }
}
/* the viewport and the compare cards are one panel */
.fp-viewsec { margin-top: 26px; padding-top: 0; border-top: 0; }
.fp-stage { aspect-ratio: 16 / 9; max-height: 82vh; }
@media (max-width: 640px) { .fp-stage { aspect-ratio: 4 / 3; } }
#bv3d { transition: opacity .32s ease; }
.fp-stage.fading #bv3d { opacity: 0; transition-duration: .18s; }
@media (prefers-reduced-motion: reduce) { #bv3d { transition: none; } }
.fp-hint { top: 22px; bottom: auto; }
.fp-dock { position: absolute; z-index: 6; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 8px; padding: 8px; border-radius: 16px; background: var(--fp-glass); border: 1px solid var(--ghost); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); opacity: 0; transition: opacity .3s ease; }
.fp-stage.ready ~ .fp-dock { opacity: 1; }
.fp-dock .fp-cards { margin-top: 0; }
.fp-dock .fp-card { min-height: 86px; padding: 7px 10px 9px; gap: 4px; background: var(--fp-sunk); }
.fp-dock .fp-card[data-slot="B"] { background: var(--fp-bsel); }
.fp-dock .fp-sel select { height: 30px; }
.fp-dock .fp-cmpfoot { padding: 0 4px; }
.fp-cmpfoot .fp-cta { position: static; opacity: 1; margin-left: auto; box-shadow: none; padding: 7px 13px; font-size: 12.5px; }
.fp-legend.is-cmp i.a { border-top-color: var(--fg); }
html .fp-cards .fp-menu.lpg.up { top: auto; bottom: calc(100% + 6px); }
@media (max-width: 640px) {
  .fp-dock { position: relative; left: auto; right: auto; bottom: auto; margin-top: 8px; opacity: 1; }
  .fp-cmpfoot .fp-cta { margin-left: 0; width: 100%; justify-content: center; }
}
/* the geometry table: every row of the maker's table, scrolling inside its panel */
.fp-geopanel .fp-tablewrap { max-height: 560px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
@supports selector(::-webkit-scrollbar) { .fp-geopanel .fp-tablewrap { scrollbar-width: auto; } }
.fp-geopanel .fp-tablewrap::-webkit-scrollbar { width: 7px; height: 7px; }
.fp-geopanel .fp-tablewrap::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.fp-geopanel .fp-tablewrap::-webkit-scrollbar-track, .fp-geopanel .fp-tablewrap::-webkit-scrollbar-corner { background: transparent; }
.fp-geopanel .fp-tablewrap::-webkit-scrollbar-thumb { background: rgba(70,78,86,.32); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
html.dark .fp-geopanel .fp-tablewrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border: 2px solid transparent; background-clip: padding-box; }
.fp-geo thead th { position: sticky; top: 0; z-index: 3; background: var(--fp-menu); }
.fp-geo.fp-table thead th:first-child { padding-left: 10px; }
.fp-geo tr.grp td { padding: 18px 10px 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--faint); }
@media (max-width: 640px) { .fp-geo thead th:first-child { z-index: 4; left: 0; } .fp-geo tr.grp td { position: static; background: none; } }
.fp-top .fp-facts > .fp-facts-sz { padding: 14px 18px; }
.fp-top .fp-facts > div + div { border-left: 0; padding: 0; }

/* ---- v1033b: the table reads by its highlighted column */
/* the selected size is a glass panel behind the numbers (one piece, both halves) */
.fp-geopanel .fp-tablewrap { position: relative; }
.fp-geo.fp-table { position: relative; z-index: 1; }
.fp-colglass { position: absolute; z-index: 0; border-radius: 12px; pointer-events: none; background: var(--fp-colglass);
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.06), inset 0 0 0 1px rgba(0,0,0,.04), inset 1px 1.4px 0 0 rgba(255,255,255,.9); transition: left .25s ease, width .25s ease; }
html.dark .fp-colglass { box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 1px 1.4px 0 0 rgba(255,255,255,.22), inset -.7px -1px 0 0 rgba(255,255,255,.08), inset 0 0 14px 0 rgba(255,255,255,.03); }
@media (prefers-reduced-motion: reduce) { .fp-colglass { transition: none; } }
.fp-geo th.sel::before, .fp-geo td.sel::before { content: none; }
/* the sticky header keeps the glass's tint over the selected column */
.fp-geo thead th.sel { background: linear-gradient(var(--fp-colglass), var(--fp-colglass)), var(--fp-menu); }
.fp-geo thead th.a.sel { border-top-left-radius: 10px; }
.fp-geo:not(.is-cmp) thead th.a.sel, .fp-geo thead th.b.sel { border-top-right-radius: 10px; }
/* every other column fades back; the row under the pointer comes up a step */
.fp-geo tbody td.a, .fp-geo tbody td.b { color: var(--faint); transition: color 120ms ease; }
.fp-geo.is-cmp tbody td.b { color: color-mix(in srgb, var(--fp-blue) 45%, transparent); }
.fp-geo tbody tr:hover td.a, .fp-geo tbody tr.on td.a { color: var(--dim); }
.fp-geo.is-cmp tbody tr:hover td.b, .fp-geo.is-cmp tbody tr.on td.b { color: color-mix(in srgb, var(--fp-blue) 75%, transparent); }
.fp-geo tbody td.a.sel { color: var(--fg); }
.fp-geo.is-cmp tbody td.b.sel { color: var(--fp-blue); }
.fp-geo.is-cmp tbody td.b.d.zero { color: var(--faint); }
.fp-geo.is-cmp tbody td.b.d.zero.sel { color: var(--dim); }
/* the sizes along the top: larger; the names a little further in */
.fp-geo thead th.a, .fp-geo thead th.b { font-size: 14px; letter-spacing: 0; text-transform: none; }
.fp-geo thead th.sel { font-size: 15px; }
.fp-geo.fp-table thead th:first-child { padding-left: 18px; }
.fp-cap { padding-left: 18px; }
.fp-geohead { padding-left: 18px; }
@media (max-width: 640px) { .fp-geo.fp-table thead th:first-child { padding-left: 12px; } .fp-cap { padding-left: 12px; } .fp-geohead { padding-left: 12px; } }
/* the frame in front is the card with the ring; the other one invites a click */
.fp-dock .fp-card[data-front] { cursor: pointer; }
.fp-card[data-slot="A"]:not(.on) { border-color: var(--ghost); box-shadow: none; }
.fp-card[data-slot="B"]:not(.on) { box-shadow: none; border-color: color-mix(in srgb, var(--fp-blue) 55%, transparent); background: transparent; }
.fp-card[data-slot="B"].on { box-shadow: inset 0 0 0 1px var(--fp-blue); }
.fp-card[data-front]:not(.on):hover { border-color: var(--dim); }
html .fp-geo.fp-table thead th { position: sticky; top: 0; z-index: 3; background: var(--fp-menu); }
html .fp-geo.fp-table thead th.sel { background: linear-gradient(var(--fp-colglass), var(--fp-colglass)), var(--fp-menu); }
.fp-geo tbody td.a, .fp-geo tbody td.b.d.zero { color: color-mix(in srgb, var(--faint) 72%, transparent); }
.fp-geo.is-cmp tbody td.b { color: color-mix(in srgb, var(--fp-blue) 38%, transparent); }
html .fp-geo.fp-table thead th { background: var(--fp-head); }
html .fp-geo.fp-table thead th.sel { background: linear-gradient(var(--fp-colglass), var(--fp-colglass)), var(--fp-head); }
@media (max-width: 640px) { .fp-geo td.lab { background: var(--fp-head); } }
/* ---- v1034 */
/* the size menu: the app's compare-card dropdown (BvMenu, block) */
.fp-dd { position: relative; margin-top: auto; }
.fp-ddbtn { width: 100%; height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,.14); background: #fff; color: var(--fg); font: inherit; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; transition: background-color 120ms ease; }
.fp-ddbtn svg { flex: none; opacity: .6; }
.fp-ddbtn:hover { background: #f5f5f5; }
html.dark .fp-ddbtn { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.16); }
html.dark .fp-ddbtn:hover { background: rgba(255,255,255,.08); }
.fp-dd.open .fp-ddbtn { position: relative; z-index: 31; }
.fp-ddbtn:focus-visible, .fp-ddopt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fp-ddmenu { position: absolute; left: 0; right: 0; z-index: 30; top: calc(100% - 1px); max-height: 252px; overflow-y: auto; padding: 4px; border-radius: 8px; background: rgba(244,244,246,.96); border: 1px solid rgba(0,0,0,.14); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 10px 15px -3px rgba(0,0,0,.12), 0 4px 6px -4px rgba(0,0,0,.12); animation: fpDdIn 140ms ease both; scrollbar-width: thin; }
.fp-ddmenu.up { top: auto; bottom: calc(100% - 1px); animation-name: fpDdUp; }
html.dark .fp-ddmenu { background: rgba(21,26,33,.95); border-color: rgba(255,255,255,.16); box-shadow: 0 12px 28px rgba(0,0,0,.4); }
@keyframes fpDdIn { from { opacity: 0; margin-top: -6px; } }
@keyframes fpDdUp { from { opacity: 0; margin-bottom: -6px; } }
@media (prefers-reduced-motion: reduce) { .fp-ddmenu { animation: none; } }
.fp-ddopt { position: relative; z-index: 0; display: flex; align-items: center; width: 100%; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: left; padding: 6px 8px 6px 14px; cursor: pointer; white-space: nowrap; }
.fp-ddopt::before { content: ""; position: absolute; inset: 1px 4px; border-radius: 6px; z-index: -1; transition: background 90ms ease; }
.fp-ddopt:hover::before, .fp-ddopt:focus-visible::before { background: rgba(70,78,86,.14); }
html.dark .fp-ddopt:hover::before, html.dark .fp-ddopt:focus-visible::before { background: rgba(255,255,255,.09); }
.fp-ddopt i { position: absolute; left: 5px; top: 50%; margin-top: -2px; width: 4px; height: 4px; border-radius: 50%; background: transparent; }
.fp-ddopt.on { font-weight: 600; }
.fp-ddopt.on i { background: var(--accent); }
/* the glass column: a fill behind the numbers and a rim over them, on the column's own edges */
.fp-colglass { border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.06); }
html.dark .fp-colglass { box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.fp-colrim { position: absolute; z-index: 5; border-radius: 12px; pointer-events: none; transition: left .25s ease, width .25s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), inset 1px 1.4px 0 0 rgba(255,255,255,.95), inset -.7px -1px 0 0 rgba(255,255,255,.6); }
html.dark .fp-colrim { box-shadow: inset 0 0 0 .5px rgba(255,255,255,.06), inset 1px 1.4px 0 0 rgba(255,255,255,.26), inset -.7px -1px 0 0 rgba(255,255,255,.1), inset 0 0 14px 0 rgba(255,255,255,.035); }
@media (prefers-reduced-motion: reduce) { .fp-colrim { transition: none; } }
html .fp-geo.fp-table thead th.a.sel, html .fp-geo.fp-table thead th.b.sel { border-radius: 0; }
html .fp-geo.fp-table thead th.a.sel { border-top-left-radius: 12px; }
html .fp-geo.fp-table:not(.is-cmp) thead th.a.sel, html .fp-geo.fp-table thead th.b.sel { border-top-right-radius: 12px; }
/* hover: the name's capsule and the selected size's numbers; the faded columns stay put */
.fp-geo tbody tr:hover td.a:not(.sel), .fp-geo tbody tr.on td.a:not(.sel) { color: color-mix(in srgb, var(--faint) 72%, transparent); }
.fp-geo.is-cmp tbody tr:hover td.b:not(.sel), .fp-geo.is-cmp tbody tr.on td.b:not(.sel) { color: color-mix(in srgb, var(--fp-blue) 38%, transparent); }
.fp-geo.is-cmp tbody tr:hover td.b.d.zero:not(.sel) { color: color-mix(in srgb, var(--faint) 72%, transparent); }
.fp-geo tbody tr:hover td.sel::after, .fp-geo tbody tr.on td.sel::after { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; right: 4px; z-index: -1; border-radius: 9px; background: var(--fp-row); }
.fp-geo.is-cmp tbody tr:hover td.a.sel::after, .fp-geo.is-cmp tbody tr.on td.a.sel::after { right: 0; border-radius: 9px 0 0 9px; }
.fp-geo.is-cmp tbody tr:hover td.b.sel::after, .fp-geo.is-cmp tbody tr.on td.b.sel::after { left: 0; border-radius: 0 9px 9px 0; }
/* the size summary sits under the table now */
.fp-under { margin-top: 16px; }
/* ---- v1036 */
/* the top: the name alone, closer to the crumbs */
main { padding-top: 18px; }
.fp-top { gap: 14px; }
.fp-top h1 { margin: 0; }
.fp-topgrid { display: block; }
/* the viewport takes the glass panels' radius */
.fp-drawbox { --lp-r: 18px; border-radius: 18px; }
.fp-stage { border-radius: 11px; }
/* the camera row at the app's height (30px), and the app link where the zoom buttons were */
.fp-seg { padding: 2px; }
.fp-seg button { font-size: 12px; line-height: 16px; padding: 4px 12px; }
.fp-vtr .fp-cta { position: static; opacity: 1; height: 30px; padding: 0 12px; font-size: 12.5px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.fp-stage:not(.ready) .fp-vtr { opacity: 0; }
@media (max-width: 640px) { .fp-vtr .fp-cta { height: 30px; padding: 0 11px; } }
/* the app's sliders: a flat channel, the run filled grey (white on dark), a small upright bar for the thumb */
.fp-range { --sl-track: 7px; --sl-thumb: 7px; --sl-thumb-h: 17px; --sl-bg: rgba(0,0,0,.1); --sl-fill: #8c8c8c; --sl-knob: #262626;
  -webkit-appearance: none; appearance: none; width: 100%; height: 18px; margin: 2px 0; background: transparent; cursor: pointer; accent-color: auto; }
html.dark .fp-range { --sl-bg: rgba(255,255,255,.11); --sl-fill: rgba(255,255,255,.42); --sl-knob: #e8e8ea; }
.fp-range::-webkit-slider-runnable-track { height: var(--sl-track); border-radius: 2px; border: 0;
  background: linear-gradient(to right, var(--sl-fill) 0, var(--sl-fill) calc(var(--sl-thumb) / 2 + (100% - var(--sl-thumb)) * var(--bv-p, 0)), var(--sl-bg) calc(var(--sl-thumb) / 2 + (100% - var(--sl-thumb)) * var(--bv-p, 0))); }
.fp-range::-webkit-slider-thumb { -webkit-appearance: none; width: var(--sl-thumb); height: var(--sl-thumb-h); border-radius: 2px; background: var(--sl-knob); border: 0; box-shadow: none; margin-top: calc((var(--sl-track) - var(--sl-thumb-h)) / 2); }
.fp-range::-moz-range-track { height: var(--sl-track); border-radius: 2px; border: 0; background: var(--sl-bg); }
.fp-range::-moz-range-progress { height: var(--sl-track); border-radius: 2px; background: var(--sl-fill); }
.fp-range::-moz-range-thumb { width: var(--sl-thumb); height: var(--sl-thumb-h); border-radius: 2px; background: var(--sl-knob); border: 0; box-shadow: none; }
.fp-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.fp-fit input[type=range].fp-range { margin: 2px 0 4px; }
#ghosts.fp-range { width: 110px; }
@media (max-width: 640px) { .fp-range { --sl-track: 10px; --sl-thumb: 11px; --sl-thumb-h: 26px; height: 30px; } #ghosts.fp-range { width: 100px; } }
.fp-auto { margin-left: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--faint); }
.fp-fit-so { margin: 0; font-size: 12px; line-height: 1.45; color: var(--dim); }
.fp-fit-so:empty { display: none; }
.fp-fit-so.warn { color: var(--accent); }
/* the verdict, under the table: the number and its line beside the chart */
.fp-verdict.fp-verdict-w { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: center; padding: 18px 22px; }
.fp-vd-txt { display: grid; gap: 4px; }
.fp-vd-txt .k { font-size: 12.5px; color: var(--dim); }
.fp-vd-txt b { font-size: 34px; font-weight: 600; letter-spacing: -.4px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fp-vd-txt figcaption { font-size: 13px; line-height: 1.5; color: var(--dim); }
.fp-verdict-w .fp-vd-chart { max-width: 620px; justify-self: end; width: 100%; }
@media (max-width: 760px) { .fp-verdict.fp-verdict-w { grid-template-columns: minmax(0, 1fr); gap: 12px; } .fp-verdict-w .fp-vd-chart { justify-self: stretch; } }
/* the glass column: the header cells carry the rounded top and its rim, so it
   stays when the rows scroll under; the body part runs from the header down */
.fp-colglass, .fp-colrim { border-radius: 0 0 12px 12px; }
.fp-colrim { box-shadow: inset 1px 0 0 0 rgba(255,255,255,.95), inset -.7px -1px 0 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(0,0,0,.05); }
html.dark .fp-colrim { box-shadow: inset 1px 0 0 0 rgba(255,255,255,.22), inset -.7px -1px 0 0 rgba(255,255,255,.1), inset 0 0 0 .5px rgba(255,255,255,.05); }
html .fp-geo.fp-table:not(.is-cmp) thead th.a.sel { box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.95), inset -.7px 0 0 0 rgba(255,255,255,.6), inset 0 1px 0 0 rgba(0,0,0,.05); }
html .fp-geo.fp-table.is-cmp thead th.a.sel { box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.95), inset 0 1px 0 0 rgba(0,0,0,.05); }
html .fp-geo.fp-table.is-cmp thead th.b.sel { box-shadow: inset 0 1.4px 0 0 rgba(255,255,255,.95), inset -.7px 0 0 0 rgba(255,255,255,.6); }
html.dark .fp-geo.fp-table:not(.is-cmp) thead th.a.sel { box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.26), inset -.7px 0 0 0 rgba(255,255,255,.1); }
html.dark .fp-geo.fp-table.is-cmp thead th.a.sel { box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.26); }
html.dark .fp-geo.fp-table.is-cmp thead th.b.sel { box-shadow: inset 0 1.4px 0 0 rgba(255,255,255,.26), inset -.7px 0 0 0 rgba(255,255,255,.1); }
/* the foot of the table fades while there is more to scroll */
.fp-geopanel .fp-tablewrap.more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); }
@media (max-width: 767px) { html .fp-navopen.mcta { margin-left: auto; } }
/* ---- v1037 */
/* the glass column's body rim sits under the sticky header (the table is z 1),
   so scrolled rows never draw its sides over the header's rounded top */
.fp-colrim { z-index: 0; }
/* the viewport pops out past the column rails by 80px a side, as the landing
   page's kiosks do (rails: min(1264px, 100vw - 48px)) */
@media (min-width: 768px) {
  .fp-viewsec .fp-drawbox { width: min(1424px, calc(100vw - 32px)); margin-left: calc(50% - min(712px, 50vw - 16px)); }
}
/* ---- v1038 */
/* the viewport pops out 40px a side past the rails, and is shorter */
@media (min-width: 768px) {
  .fp-viewsec .fp-drawbox { width: min(1344px, calc(100vw - 32px)); margin-left: calc(50% - min(672px, 50vw - 16px)); }
}
.fp-stage { aspect-ratio: 2.25 / 1; max-height: 66vh; }
@media (max-width: 640px) { .fp-stage { aspect-ratio: 4 / 3; max-height: none; } }
/* the geometry panel hangs from the viewport: no gap, square top corners */
.fp-geopanel { margin-top: 0; border-radius: 0 0 18px 18px; }
html:not(.dark) .fp-geopanel.lpg::after, html.dark .fp-geopanel.lpg::after { border-radius: 64px 64px 82px 82px; }
.fp-geopanel .fp-rim { border-radius: 0 0 18px 18px; }
/* ---- v1039 */
/* the geometry panel tucks under the viewport (lower in the stack), so the two edges don't double up */
html .fp-geopanel.lpg { z-index: 1; margin-top: -10px; padding-top: 18px; }
/* the 3D view's edges feather into the glass margin instead of meeting it at a seam */
#bv3d { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%), linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%), linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-composite: intersect; }
.fp-stage { background: transparent; }
/* a little taller again */
.fp-stage { aspect-ratio: 2 / 1; max-height: 74vh; }
@media (max-width: 640px) { .fp-stage { aspect-ratio: 4 / 3; max-height: none; } }
/* the header cell is square (the header's own ground fills its corners); the
   rounded tinted top and its rim are a ::before that can glide with the glass */
html .fp-geo.fp-table thead th.a.sel, html .fp-geo.fp-table thead th.b.sel { background: var(--fp-head); border-radius: 0 !important; box-shadow: none !important; z-index: 4; }
html .fp-geo.fp-table thead th.sel::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--gl-l, 0px); right: var(--gl-r, 0px); z-index: -1; transition: var(--gl-t, none);
  background: var(--fp-colglass); border-radius: 12px 12px 0 0; box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.95), inset -.7px 0 0 0 rgba(255,255,255,.6), inset 0 1px 0 0 rgba(0,0,0,.05); }
html.dark .fp-geo.fp-table thead th.sel::before { box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.26), inset -.7px 0 0 0 rgba(255,255,255,.1); }
html .fp-geo.fp-table.is-cmp thead th.a.sel::before { border-radius: 12px 0 0 0; box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.95), inset 0 1px 0 0 rgba(0,0,0,.05); }
html .fp-geo.fp-table.is-cmp thead th.b.sel::before { border-radius: 0 12px 0 0; box-shadow: inset 0 1.4px 0 0 rgba(255,255,255,.95), inset -.7px 0 0 0 rgba(255,255,255,.6); }
html.dark .fp-geo.fp-table.is-cmp thead th.a.sel::before { box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.26); }
html.dark .fp-geo.fp-table.is-cmp thead th.b.sel::before { box-shadow: inset 0 1.4px 0 0 rgba(255,255,255,.26), inset -.7px 0 0 0 rgba(255,255,255,.1); }
@media (prefers-reduced-motion: reduce) { html .fp-geo.fp-table thead th.sel::before { transition: none !important; } .fp-colglass, .fp-colrim { transition: none !important; } }
/* the choice in Render, Align and Difference | Values: solid, like the camera row */
.fp-pseg button[aria-checked="true"], html.dark .fp-pseg button[aria-checked="true"] { background: var(--btn); color: var(--btn-fg); box-shadow: none; font-weight: 600; }
.fp-grp.off .fp-pseg button[aria-checked="true"] { background: var(--fp-row); color: var(--dim); }
html .fp-geo.fp-table thead th.sel::before { top: 0 !important; bottom: 0 !important; left: var(--gl-l, 0px) !important; right: var(--gl-r, 0px) !important; }
/* ---- v1040 */
/* segmented rows: one fill slides to the choice (gel), the buttons sit over it */
.fp-seg, .fp-pseg { position: relative; isolation: isolate; }
.fp-gel { position: absolute; z-index: 0; border-radius: 999px; background: var(--btn); pointer-events: none; font-style: normal; }
.fp-seg button, .fp-pseg button { position: relative; z-index: 1; transition: color 180ms ease 60ms; }
.fp-seg button[aria-pressed="true"], .fp-pseg button[aria-checked="true"], html.dark .fp-pseg button[aria-checked="true"] { background: transparent !important; color: var(--btn-fg); box-shadow: none; }
.fp-grp.off .fp-gel { background: var(--fp-row); }
.fp-grp.off .fp-pseg button[aria-checked="true"] { background: transparent !important; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .fp-gel { transition: none !important; } }
/* the whole-bike switch, as the app's X-ray switch */
.fp-switch { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: inherit; color: var(--fg); cursor: pointer; }
.fp-switch .trk { position: relative; width: 28px; height: 16px; border-radius: 8px; background: rgba(120,128,136,.32); transition: background-color 160ms ease; flex: none; }
.fp-switch .knob { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left 160ms ease; }
.fp-switch[aria-checked="true"] .trk { background: var(--btn); }
.fp-switch[aria-checked="true"] .knob { left: 14px; background: var(--btn-fg); }
.fp-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
/* the compare cards and their size menus: liquid glass, larger corners */
.fp-dock { border-radius: 24px; }
.fp-dock .fp-card { border-radius: 16px; background: rgba(255,255,255,.42); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.9), inset -.7px -1px 0 0 rgba(255,255,255,.5), inset 0 0 14px 0 rgba(255,255,255,.25); }
html.dark .fp-dock .fp-card { background: rgba(255,255,255,.035); box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.2), inset -.7px -1px 0 0 rgba(255,255,255,.08), inset 0 0 14px 0 rgba(255,255,255,.03); }
.fp-dock .fp-card.on { box-shadow: inset 0 0 0 1px var(--fg), inset 1px 1.4px 0 0 rgba(255,255,255,.9), inset 0 0 14px 0 rgba(255,255,255,.25); }
html.dark .fp-dock .fp-card.on { box-shadow: inset 0 0 0 1px var(--fg), inset 1px 1.4px 0 0 rgba(255,255,255,.2), inset 0 0 14px 0 rgba(255,255,255,.03); }
.fp-dock .fp-card[data-slot="B"] { background: color-mix(in srgb, var(--fp-blue) 7%, transparent); }
.fp-dock .fp-card[data-slot="B"].on { box-shadow: inset 0 0 0 1px var(--fp-blue), inset 1px 1.4px 0 0 rgba(255,255,255,.22), inset 0 0 14px 0 rgba(255,255,255,.03); }
.fp-dock .fp-add { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.fp-ddbtn { height: 32px; border-radius: 12px; background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.1); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.95), inset -.7px -1px 0 0 rgba(255,255,255,.5); }
.fp-ddbtn:hover { background: rgba(255,255,255,.8); }
html.dark .fp-ddbtn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.22), inset -.7px -1px 0 0 rgba(255,255,255,.08); }
html.dark .fp-ddbtn:hover { background: rgba(255,255,255,.09); }
.fp-ddmenu { border-radius: 14px; padding: 5px; background: rgba(248,248,250,.94); border-color: rgba(0,0,0,.1); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.95), inset -.7px -1px 0 0 rgba(255,255,255,.5), 0 14px 32px rgba(0,0,0,.16); }
html.dark .fp-ddmenu { background: rgba(22,28,36,.94); border-color: rgba(255,255,255,.12); box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.22), inset -.7px -1px 0 0 rgba(255,255,255,.08), 0 16px 36px rgba(0,0,0,.45); }
.fp-ddopt::before { border-radius: 9px; }
.fp-ddmenu { max-height: 300px; }
/* v1041: taller still */
.fp-stage { aspect-ratio: 1.75 / 1; max-height: 82vh; }
@media (max-width: 640px) { .fp-stage { aspect-ratio: 1 / 1; max-height: none; } }
/* v1042: taller again */
.fp-stage { aspect-ratio: 1.5 / 1; max-height: 86vh; }
@media (max-width: 640px) { .fp-stage { aspect-ratio: 1 / 1; max-height: none; } }
/* the stage fills the panel's width; its height is the shorter of 1.5:1 and 86vh
   (aspect-ratio with a max-height narrowed the stage instead) */
@media (min-width: 641px) { .fp-stage { aspect-ratio: auto; width: 100%; height: min(86vh, calc((min(1344px, 100vw - 32px) - 16px) / 1.5)); max-height: none; } }

/* ---- v1043 (page version 20): the phone */
/* the view takes a finger: a sideways drag turns (3D) or pans (Side) the frame and
   two fingers pinch to zoom, while an up-and-down swipe still scrolls the page */
@media (pointer: coarse) { #bv3d { pointer-events: auto; } #bv3d canvas { touch-action: pan-y !important; } }
/* the viewport panel reaches past the column by its corner radius on each side */
@media (max-width: 767px) { .fp-viewsec .fp-drawbox { width: calc(100% + 36px); margin-left: -18px; margin-right: -18px; max-width: none; } }
/* the table's sticky corner (SIZE) stays over the size headings as they scroll under it */
html .fp-geo.fp-table thead tr th:first-child { z-index: 7 !important; }

/* ---- v1044 (page version 21): the copy under the tables, cut to labels */
.fp-listhead, .fp-listhead:first-child { border-top: 0; padding-top: 0; padding-bottom: 6px; }
.fp-listhead .m { font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--faint); }
.fp-meta { padding-top: 0; }
.fp-meta .fine { margin: 0; color: var(--faint); font-size: 12.5px; line-height: 1.6; }
.fp-meta .fine a, .fp-meta .fp-linkbtn { color: var(--dim); }
.fp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--fp-ok); margin-right: 7px; vertical-align: 1px; }
.fp-table th .u { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* ---- v1045 (page version 22) */
/* another size's column: a faint highlight under the pointer, and a click loads it */
.fp-colhov { position: absolute; z-index: 0; border-radius: 12px; pointer-events: none; opacity: 0; background: rgba(0,0,0,.035);
  transition: opacity .16s ease, left .22s cubic-bezier(.3,1.1,.5,1), width .22s cubic-bezier(.3,1.1,.5,1); }
html.dark .fp-colhov { background: rgba(255,255,255,.045); }
.fp-colhov.on { opacity: 1; }
@media (hover: hover) { .fp-geo [data-sz]:not(.sel) { cursor: pointer; } }
.fp-geo thead th[data-sz]:not(.sel) { cursor: pointer; }
/* the selected column eases into its weight: Bai Jamjuree has no variable axis, so the
   bold is drawn (a hairline text shadow on the 500) and that can be animated */
html .fp-geo.fp-table tbody td.sel { font-weight: 500; text-shadow: .35px 0 0 currentColor; }
@keyframes fpInA { from { color: color-mix(in srgb, var(--faint) 72%, transparent); text-shadow: 0 0 0 transparent; } }
@keyframes fpInB { from { color: color-mix(in srgb, var(--fp-blue) 38%, transparent); text-shadow: 0 0 0 transparent; } }
@keyframes fpOutA { from { color: var(--fg); text-shadow: .35px 0 0 currentColor; } }
@keyframes fpOutB { from { color: var(--fp-blue); text-shadow: .35px 0 0 currentColor; } }
@keyframes fpInH { from { color: var(--faint); font-size: 14px; } }
@keyframes fpOutH { from { color: var(--fg); font-size: 15px; } }
.fp-geo tbody td.a.in { animation: fpInA .22s ease; }
.fp-geo tbody td.b.in { animation: fpInB .22s ease; }
.fp-geo tbody td.a.was { animation: fpOutA .22s ease; }
.fp-geo tbody td.b.was { animation: fpOutB .22s ease; }
.fp-geo thead th.in { animation: fpInH .22s ease; }
.fp-geo thead th.was { animation: fpOutH .22s ease; }
/* the cards: borders fade rather than snap (the add card's dashes on hover, the ring when a card comes forward) */
.fp-card { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; }
@keyframes fpRingIn { from { box-shadow: none; border-color: var(--ghost); } }
@keyframes fpRingOut { from { box-shadow: inset 0 0 0 1px var(--fg); border-color: var(--fg); } }
@keyframes fpRingOutB { from { box-shadow: inset 0 0 0 1px var(--fp-blue); border-color: var(--fp-blue); } }
.fp-dock .fp-card.on-in { animation: fpRingIn .2s ease; }
.fp-dock .fp-card.on-out { animation: fpRingOut .2s ease; }
.fp-dock .fp-card[data-slot="B"].on-out { animation: fpRingOutB .2s ease; }
@media (prefers-reduced-motion: reduce) { .fp-geo .in, .fp-geo .was, .fp-dock .fp-card.on-in, .fp-dock .fp-card.on-out { animation: none; } .fp-colhov { transition: none; } }
@media (hover: hover) { .fp-geo thead th[data-sz]:not(.sel):hover { color: var(--fg); } }
.fp-geo thead th[data-sz] { transition: color .16s ease; }
.fp-diffseg[hidden] { display: none !important; }

/* ---- v1046 (page version 23): the landing page's header and buttons */
/* buttons are pills, and the primary ones carry the accent (#d4431d: the app's
   #e54c24 a step deeper, so white text passes AA), as on the landing page */
html .btn { border-radius: 999px; }
html .btn-nav, html .lmenu-open, html .fp-cta.btn, html .fp-menu .btn { background: #d4431d; color: #fff; border-color: transparent; }
html .btn:hover { opacity: .88; }
html .btn:active { transform: translateY(1px); }
html .theme-toggle, html .lmenu-theme { border-radius: 999px; }
html .fp-cta.btn { box-shadow: 0 6px 18px rgba(212,67,29,.28); }
/* v1047: the header with the Bikes tab keeps each link on one line */
html .nav-links a, html .btn-nav { white-space: nowrap; }
@media (max-width: 1000px) { html .nav-links { gap: 14px; } }
/* ---- v1053: the measuring tools, a glass rail at the view's right edge */
.fp-tools { position: absolute; z-index: 3; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px; border-radius: 14px;
  background: var(--fp-glass); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.9), inset -.7px -1px 0 0 rgba(255,255,255,.5), inset 0 0 0 .5px rgba(0,0,0,.08), 0 2px 10px rgba(0,0,0,.06);
  opacity: 0; transition: opacity .3s ease; pointer-events: none; }
html.dark .fp-tools { box-shadow: inset 1px 1.4px 0 0 rgba(255,255,255,.22), inset -.7px -1px 0 0 rgba(255,255,255,.08), 0 2px 12px rgba(0,0,0,.3); }
.fp-stage.ready .fp-tools { opacity: 1; pointer-events: auto; }
.fp-tools button { width: 34px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--dim); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background-color .16s ease, color .16s ease; }
.fp-tools button:hover { color: var(--fg); background: rgba(0,0,0,.05); }
html.dark .fp-tools button:hover { background: rgba(255,255,255,.07); }
.fp-tools button[aria-pressed="true"] { background: #161b22; color: #fff; }
html.dark .fp-tools button[aria-pressed="true"] { background: #eef0f3; color: #10151c; }
.fp-tools button:focus-visible { outline: 2px solid #d4431d; outline-offset: 1px; }
.fp-tools .sep { width: 18px; height: 1px; background: var(--line); margin: 1px 0; }
.fp-tools .sep[hidden], .fp-tools button[hidden] { display: none; }
.fp-mhint { position: absolute; z-index: 3; left: 50%; top: 14px; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: #161b22; color: #fff; pointer-events: none; animation: fpHintIn .2s ease; }
.fp-mhint[hidden] { display: none; }
@keyframes fpHintIn { from { opacity: 0; transform: translate(-50%, 4px); } }
html.dark .fp-mhint { background: #eef0f3; color: #10151c; }
.fp-stage.measuring .fp-hint { opacity: 0; }
@media (max-width: 640px) {
  .fp-tools { top: auto; bottom: 10px; right: auto; left: 50%; transform: translateX(-50%); flex-direction: row; padding: 4px; border-radius: 13px; }
  .fp-tools button { width: 36px; height: 34px; }
  .fp-tools .sep { width: 1px; height: 18px; margin: 0 1px; }
  .fp-mhint { top: 52px; font-size: 12px; max-width: calc(100% - 24px); white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .fp-mhint { animation: none; } }
/* v1053: an open size menu sits over the cards after its own (the phone's 2 by 2 grid put it under Bike D) */
.fp-card:has(.fp-ddmenu) { z-index: 8; }
/* v1054: the tools at the left edge, the size finder at the top right under the app button */
@media (min-width: 641px) {
  html .fp-fit.lpg { left: auto; right: 12px; }
  .fp-tools { right: auto; left: 12px; }
}
/* v1054: the inseam's reset to auto, in place of the auto tag once moved by hand */
.fp-inslb { display: inline-flex; align-items: center; gap: 6px; }
.fp-inslb .fp-auto { margin-left: 0; }
.fp-insreset { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border: 0; border-radius: 999px; background: rgba(0,0,0,.06); color: var(--fg); font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; cursor: pointer; transition: background-color .16s ease; }
html.dark .fp-insreset { background: rgba(255,255,255,.09); }
.fp-insreset:hover { background: rgba(0,0,0,.11); }
html.dark .fp-insreset:hover { background: rgba(255,255,255,.15); }
.fp-insreset:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fp-insreset[hidden] { display: none; }
/* v1055: with Bikes and Compare in the header the links need about 960px; below that the phone menu takes over */
@media (min-width: 768px) and (max-width: 959px) {
  html .nav-links, html .nav-right { display: none; }
  html .menu-btn { display: inline-flex; }
  html .mcta { display: inline-block; }
  html .nav-in .mcta { margin-left: auto; }
  html .lmenu:not([hidden]) { display: flex !important; }
}
/* site/seo: model names in the history table link to their pages */
.fp-tlink { color: inherit; text-decoration: none; }
.fp-tlink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* v1061: the key specs band shows what the chart gives (up to eight), one column each at full width */
@media (min-width: 1101px) { .fp-facts-row { grid-template-columns: repeat(var(--fp-n, 8), minmax(0, 1fr)); } }
/* v1067: the measured seat tube rows are ours, not the maker's: set in the bike's own colour (Bike A
   the accent, Bike B its blue), with an asterisk and an info circle that says so */
.fp-geo tr.fp-measrow td.a, .fp-geo tr.fp-measrow .nm { color: var(--accent) !important; }
.fp-geo tr.fp-measrow td.b { color: var(--fp-blue) !important; }
.fp-ast { margin-left: 1px; font-size: 0.8em; font-weight: 700; }
.fp-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px currentColor; font: italic 600 9.5px/1 Georgia, "Times New Roman", serif; vertical-align: 1px; cursor: help; opacity: 0.85; }
.fp-info::after { content: attr(data-tip); position: absolute; left: -8px; bottom: calc(100% + 8px); width: 230px; padding: 8px 10px; border-radius: 10px; background: var(--fp-menu, var(--bg)); color: var(--fg, #111); box-shadow: 0 6px 20px -6px rgba(0,0,0,0.35), inset 0 0 0 1px var(--line); font-family: 'Bai Jamjuree', system-ui, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.4; font-style: normal; letter-spacing: 0.01em; white-space: normal; text-align: left; opacity: 0; pointer-events: none; transition: opacity 140ms ease; z-index: 50; }
.fp-info:is(:hover, :focus-visible)::after { opacity: 1; }
/* v1067: the compare cards as the app's. The top strip picks the bike in front: a hover band and
   "Bring to front" on the one behind, a faint "In front" on the other. The frame is a field with an
   outline (the search glass when it can be changed), and the Change frame list is opaque with no blur,
   radius 16, as the app's */
.fp-dock .fp-card { border-radius: 14px; }
.fp-dock .fp-ch { margin: -3px -6px 0; padding: 0 6px; height: 22px; border-radius: 8px; transition: background-color 140ms ease; }
.fp-dock .fp-card[data-front]:not(.on) .fp-ch:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.fp-chint { margin-left: auto; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--faint); white-space: nowrap; opacity: 0; transition: opacity 140ms ease; }
.fp-card.on .fp-chint { opacity: .75; }
.fp-card[data-front]:not(.on):hover .fp-chint { opacity: 1; }
.fp-chint + .fp-x { margin-left: 4px; }
.fp-dock .fp-frbtn { padding: 5px 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 22%, transparent); transition: background-color 140ms ease, box-shadow 140ms ease; }
.fp-dock .fp-frbtn:not(.is-fixed):hover { background: color-mix(in srgb, var(--fg) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 36%, transparent); }
.fp-dock .fp-frbtn.is-fixed { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent); }
html .fp-cards .fp-menu.fp-pick.lpg { --lp-r: 16px; border-radius: 16px; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html .fp-cards .fp-menu.lpg::before, html .fp-cards .fp-menu.lpg::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html .fp-cards .fp-menu.fp-pick .fp-search input { border-radius: 11px; }