/* ==========================================================================
   BikeDokan design system
   Route 3, "The Rickshaw": colour from Bangladeshi rickshaw art, with the
   table discipline of route 1 underneath it. Bold identity, quiet data.

   ⛔ SINGLE LIGHT THEME ON PURPOSE. The owner ruled out dark mode on 2026-09-10.
   There is no prefers-color-scheme block and no [data-theme] block anywhere, so
   every colour is painted explicitly and the page never borrows a host's ground.
   Do not add a dark palette back without being asked.

   Hand written on purpose. There is no node or npm on this server, so there
   is no build step. Cache busting is filemtime() in the layout, never a hand
   bumped constant: a stale constant serves old CSS against fresh markup and
   looks exactly like broken CSS while the file on disk is correct.
   ========================================================================== */

/* ------------------------------------------------------------ tokens */
:root{
  /* Tells the browser this page is light, so form controls, scrollbars and
     autofill are not restyled dark on a device set to prefer dark. */
  color-scheme:light;

  --ground:#fdfbf6;
  --panel:#ffffff;
  --panel-2:#f6f2e9;
  --ink:#152a4a;
  --ink-2:#54617a;
  --ink-3:#7a869c;
  --rule:#e5ddcd;
  --rule-2:#d3c9b4;

  --accent:#c2185b;          /* magenta, price and primary action */
  --accent-strong:#a5124c;
  --accent-soft:#fce4ec;
  --gold:#f2a03d;            /* marigold, rules and highlights */
  --gold-soft:#fdf0dc;
  --link:#0a6f71;            /* peacock, darkened to pass contrast on paper */
  --link-soft:#e3f2f1;

  --good:#12695a;
  --warn:#9a5b00;

  --radius:6px;
  --radius-sm:4px;
  --shadow:0 1px 2px rgba(21,42,74,.05),0 10px 28px -16px rgba(21,42,74,.22);

  --display:"Bungee",Impact,"Arial Black",sans-serif;
  --body:"Hind Siliguri",system-ui,-apple-system,"Segoe UI",sans-serif;

  --measure:68ch;
  --gutter:20px;
}

/* ------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration-color:color-mix(in srgb,var(--link) 35%,transparent);text-underline-offset:2px}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
table{border-collapse:collapse;width:100%}
h1,h2,h3,h4{text-wrap:balance;margin:0}
p{margin:0}
button{font:inherit}

/* ------------------------------------------------------------ layout */
.wrap{max-width:1140px;margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:760px}
.stack>*+*{margin-top:var(--flow,18px)}
.cluster{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ------------------------------------------------------------ header */
.masthead{
  background:var(--panel);
  border-bottom:2px solid var(--gold);
  position:sticky;top:0;z-index:40;
}
.masthead__bar{display:flex;align-items:center;gap:18px;height:62px}
.brandmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}
.brandmark__type{font-family:var(--display);font-size:19px;line-height:1;letter-spacing:-.005em}
.brandmark__type span{color:var(--accent)}
.mainnav{display:flex;gap:2px;margin-left:auto;align-items:center}
.mainnav a{
  color:var(--ink-2);text-decoration:none;font-weight:600;font-size:14.5px;
  padding:8px 11px;border-radius:var(--radius-sm);white-space:nowrap;
}
.mainnav a:hover{background:var(--panel-2);color:var(--ink)}
.mainnav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
.navtoggle{
  display:none;margin-left:auto;background:transparent;border:1px solid var(--rule-2);
  color:var(--ink);border-radius:var(--radius-sm);padding:7px 12px;font-weight:600;font-size:14px;cursor:pointer;
}
@media (max-width:860px){
  .navtoggle{display:block}
  .mainnav{
    display:none;position:absolute;left:0;right:0;top:62px;background:var(--panel);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;
    padding:8px var(--gutter) 14px;gap:1px;
  }
  .mainnav[data-open="true"]{display:flex}
  .mainnav a{padding:11px 8px;font-size:16px}
}

/* ------------------------------------------------------- breadcrumbs */
.crumbs{font-size:13px;color:var(--ink-3);padding:16px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li::after{content:"›";margin-left:6px;color:var(--rule-2)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--link);text-decoration:underline}

/* ------------------------------------------------------- model hero */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:30px;align-items:start;padding:22px 0 0}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:22px}}
.hero__figure{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
}
.hero__figure img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--panel-2)}
.hero__figure figcaption{padding:9px 14px;font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--rule)}
.hero__noimg{
  aspect-ratio:4/3;display:grid;place-items:center;background:var(--panel-2);
  color:var(--ink-3);font-size:14px;text-align:center;padding:20px;
}
h1.model__name{font-family:var(--display);font-size:clamp(23px,3.4vw,33px);line-height:1.18;letter-spacing:-.004em}
.model__standfirst{color:var(--ink-2);font-size:15.5px;margin-top:8px}

.pricebox{
  background:var(--accent);color:#fff;border-radius:var(--radius);
  padding:15px 18px;margin-top:18px;
}
.pricebox__label{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.pricebox__amount{display:block;font-family:var(--display);font-size:clamp(23px,3.6vw,30px);line-height:1.16;margin-top:4px}
.pricebox__note{display:block;font-size:12.5px;line-height:1.5;opacity:.9;margin-top:7px}
.pricebox--none{background:var(--panel-2);color:var(--ink-2);border:1px dashed var(--rule-2)}
.pricebox--none .pricebox__amount{font-size:19px;color:var(--ink)}

/* --------------------------------------------------------- stat strip */
.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;margin-top:18px;
}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--panel);padding:12px 14px}
.stat__k{display:block;font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.stat__v{display:block;font-size:20px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.stat__v i{font-style:normal;font-size:.6em;font-weight:600;color:var(--link);margin-left:2px}

/* ------------------------------------------------------------ badges */
.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  padding:3px 10px;border-radius:999px;line-height:1.6;
}
.badge--abs{background:var(--link-soft);color:var(--link)}
.badge--upcoming{background:var(--gold-soft);color:var(--warn)}
.badge--electric{background:var(--link-soft);color:var(--link)}
.badge--discontinued{background:var(--panel-2);color:var(--ink-3)}

/* ------------------------------------------------------------ colours */
.colourchip{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);
  background:var(--panel);border:1px solid var(--rule);border-radius:999px;padding:4px 13px 4px 5px;
}
.colourchip i{width:16px;height:16px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.14)}

/* ------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;
  text-decoration:none;border:0;border-radius:999px;padding:10px 20px;cursor:pointer;line-height:1.5;
}
.btn--primary{background:var(--link);color:#fff}
.btn--primary:hover{background:var(--good)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--gold)}
.btn--ghost:hover{background:var(--gold-soft)}

/* ------------------------------------------------- section + subnav */
.section{margin-top:44px}
.section__head{display:flex;align-items:baseline;gap:14px;border-bottom:2px solid var(--gold);padding-bottom:9px;margin-bottom:18px}
.section__head h2{font-family:var(--display);font-size:clamp(17px,2.4vw,22px);line-height:1.25}
.section__head .more{margin-left:auto;font-size:13.5px;font-weight:600;white-space:nowrap}

.subnav{display:flex;gap:4px;overflow-x:auto;margin-top:20px;padding-bottom:3px;-webkit-overflow-scrolling:touch}
.subnav a{
  white-space:nowrap;font-size:14px;font-weight:600;text-decoration:none;color:var(--ink-2);
  padding:7px 14px;border-radius:999px;border:1px solid var(--rule);background:var(--panel);
}
.subnav a:hover{border-color:var(--rule-2);color:var(--ink)}
.subnav a[aria-current="page"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}

/* ------------------------------------------------------- spec tables */
.specgroup{margin-top:26px}
.specgroup h3{
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:7px;border-bottom:2px solid var(--ink);
}
.spectable{font-size:14.5px}
.spectable th,.spectable td{text-align:left;padding:9px 4px;border-bottom:1px solid var(--rule);vertical-align:top}
.spectable th{font-weight:500;color:var(--ink-2);width:46%}
.spectable td{font-weight:600;font-variant-numeric:tabular-nums}
.tablescroll{overflow-x:auto}

/* ------------------------------------------------------------- cards */
.grid{display:grid;gap:16px}
.grid--bikes{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.grid--brands{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.bikecard{
  display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;
}
.bikecard:hover{border-color:var(--gold);box-shadow:var(--shadow)}
.bikecard img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--panel-2)}
.bikecard__noimg{aspect-ratio:4/3;background:var(--panel-2)}
.bikecard__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.bikecard__brand{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.bikecard__name{font-size:15.5px;font-weight:700;line-height:1.3}
.bikecard__meta{font-size:12.5px;color:var(--ink-2);margin-top:auto;padding-top:6px}
.bikecard__price{font-weight:700;color:var(--accent);font-size:15px;font-variant-numeric:tabular-nums}
.bikecard__price--none{color:var(--ink-3);font-weight:600;font-size:13.5px}

.brandcard{
  display:flex;flex-direction:column;justify-content:center;gap:2px;text-align:center;
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);
  padding:16px 10px;text-decoration:none;color:inherit;
}
.brandcard:hover{border-color:var(--gold)}
.brandcard b{font-size:15px}
.brandcard span{font-size:12px;color:var(--ink-3)}

/* -------------------------------------------------------------- prose */
.prose{max-width:var(--measure);font-size:16.5px;line-height:1.72}
.prose>*+*{margin-top:16px}
.prose h2{font-family:var(--display);font-size:21px;line-height:1.3;margin-top:30px}
.prose h3{font-size:18px;font-weight:700;margin-top:24px}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:6px}
.prose img{border-radius:var(--radius);margin:22px 0}
.prose table{font-size:14.5px;margin:20px 0}
.prose th,.prose td{border:1px solid var(--rule);padding:8px 10px;text-align:left}
.prose blockquote{border-left:3px solid var(--gold);padding-left:16px;color:var(--ink-2);font-style:italic}

/* ------------------------------------------------------------- pagelead */
.pagelead{padding:26px 0 0}
.pagelead h1{font-family:var(--display);font-size:clamp(24px,4vw,36px);line-height:1.16}
.pagelead p{color:var(--ink-2);font-size:16.5px;margin-top:10px;max-width:var(--measure)}

/* --------------------------------------------------------- comparison */
.comparetable{font-size:14.5px;min-width:520px}
.comparetable th,.comparetable td{padding:10px 12px;border-bottom:1px solid var(--rule);text-align:left}
.comparetable thead th{font-family:var(--display);font-size:14px;border-bottom:2px solid var(--gold);vertical-align:bottom}
.comparetable tbody th{font-weight:500;color:var(--ink-2)}
.comparetable td{font-weight:600;font-variant-numeric:tabular-nums}
.comparetable .better{color:var(--good)}

/* ------------------------------------------------------------- footer */
.sitefoot{margin-top:64px;background:var(--panel);border-top:2px solid var(--gold);padding:32px 0 40px}
.sitefoot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px}
.sitefoot h4{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.sitefoot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sitefoot a{font-size:14px;color:var(--ink-2);text-decoration:none}
.sitefoot a:hover{color:var(--link);text-decoration:underline}
.sitefoot__legal{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);font-size:13px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}

/* -------------------------------------------------------- staging flag */
.stagingflag{
  background:var(--warn);color:#fff;font-size:12.5px;font-weight:600;
  text-align:center;padding:5px 12px;
}

/* -------------------------------------------------------------- misc */
.empty{
  background:var(--panel);border:1px dashed var(--rule-2);border-radius:var(--radius);
  padding:26px;text-align:center;color:var(--ink-2);font-size:15px;
}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.pagination a,.pagination span{
  padding:7px 13px;border-radius:var(--radius-sm);border:1px solid var(--rule);
  text-decoration:none;font-size:14px;font-weight:600;color:var(--ink-2);background:var(--panel);
}
.pagination [aria-current="page"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* ------------------------------------------------- written hub copy */
.prose--hub{margin:26px 0 0;font-size:17px}
.prose--hub h2{font-family:var(--display);font-size:20px;margin-top:28px}
.prose--hub h3{font-size:17.5px;font-weight:700;margin-top:22px}
.prose--hub p+p{margin-top:14px}
.prose--hub .keynum{
  display:inline-block;font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------- written copy */
.written{
  background:var(--panel);border:1px solid var(--rule);
  border-left:3px solid var(--gold);border-radius:var(--radius);
  padding:20px 22px;max-width:var(--measure);
}
.written__body{font-size:17px;line-height:1.72}
.written__who{margin-top:14px;font-size:16px;line-height:1.65;color:var(--ink-2)}
.written__who strong{color:var(--ink)}
.written__note{margin-top:10px;font-size:13px;line-height:1.6;color:var(--ink-3);max-width:var(--measure)}

/* ------------------------------------------ how old is this price */
.pricebox__stale{
  display:block;margin-top:9px;padding-top:9px;font-size:12.5px;line-height:1.5;
  border-top:1px solid rgba(255,255,255,.35);opacity:.95;
}
.bikecard__stale{
  display:block;font-style:normal;font-size:11px;font-weight:600;
  letter-spacing:.02em;color:var(--warn);margin-top:2px;
}

/* =====================================================================
   Model page, second pass.
   Built after studying zigwheels, bikewale and bikedekho. The density and
   the furniture are theirs; the palette, the type and the honesty are ours.
   ===================================================================== */

/* ------------------------------------------------------ header search */
.masthead__bar{gap:14px}
.searchbox{position:relative;flex:1;max-width:360px;margin-left:auto}
.searchbox input{
  width:100%;font:inherit;font-size:14.5px;padding:9px 14px 9px 36px;
  border:1px solid var(--rule-2);border-radius:999px;background:var(--ground);
  color:var(--ink);
}
.searchbox input::placeholder{color:var(--ink-3)}
.searchbox input:focus{outline:2px solid var(--accent);outline-offset:1px;background:var(--panel)}
.searchbox svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
@media (max-width:860px){
  .searchbox{order:3;flex-basis:100%;max-width:none;margin:0 0 10px}
  .masthead__bar{flex-wrap:wrap;height:auto;padding:10px 0}
}

/* --------------------------------------------------- sticky section nav */
.anchors{
  position:sticky;top:62px;z-index:30;background:var(--panel);
  border-bottom:1px solid var(--rule);margin-top:22px;
}
.anchors__inner{display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.anchors a{
  white-space:nowrap;font-size:14px;font-weight:600;text-decoration:none;
  color:var(--ink-2);padding:12px 14px;border-bottom:3px solid transparent;
}
.anchors a:hover{color:var(--ink)}
.anchors a[aria-current="true"]{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:860px){.anchors{top:auto;position:static}}

/* -------------------------------------------------------------- gallery */
.gallery{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.gallery__main{position:relative;background:var(--panel-2)}
.gallery__main img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.gallery__badges{
  position:absolute;left:10px;bottom:10px;display:flex;gap:6px;flex-wrap:wrap;
}
.gallery__badge{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  background:rgba(21,42,74,.82);color:#fff;padding:4px 10px;border-radius:999px;
  text-decoration:none;backdrop-filter:blur(2px);
}
.gallery__badge:hover{background:var(--accent)}
.gallery__strip{display:flex;gap:6px;padding:8px;overflow-x:auto;border-top:1px solid var(--rule)}
.gallery__thumb{
  flex:0 0 68px;height:52px;border-radius:4px;overflow:hidden;border:2px solid transparent;
  background:var(--panel-2);padding:0;cursor:pointer;
}
.gallery__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gallery__thumb[aria-current="true"]{border-color:var(--accent)}
.gallery__caption{padding:9px 14px;font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--rule)}

/* ------------------------------------------------- key figures with a verdict */
.keyfigs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;margin-top:18px;
}
.keyfig{background:var(--panel);padding:13px 15px}
.keyfig__k{display:block;font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.keyfig__v{display:block;font-size:21px;font-weight:700;line-height:1.2;margin-top:3px;font-variant-numeric:tabular-nums}
.keyfig__v i{font-style:normal;font-size:.58em;font-weight:600;color:var(--ink-3);margin-left:3px}
.keyfig__verdict{
  display:inline-block;margin-top:5px;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:999px;letter-spacing:.02em;
}
.keyfig__verdict--good{background:var(--link-soft);color:var(--good)}
.keyfig__verdict--mid{background:var(--panel-2);color:var(--ink-3)}
.keyfig__verdict--low{background:var(--gold-soft);color:var(--warn)}

/* -------------------------------------------------------- variant chooser */
.chooser{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:16px}
.chooser__item{
  display:block;background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);
  padding:11px 14px;text-decoration:none;color:inherit;
}
.chooser__item:hover{border-color:var(--gold)}
.chooser__item[aria-current="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.chooser__k{display:block;font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.chooser__v{display:block;font-size:15px;font-weight:700;margin-top:2px}
.chooser__p{display:block;font-size:13.5px;color:var(--accent);font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}

/* --------------------------------------------------------- pros and cons */
.verdictgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.verdictcard{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);padding:18px 20px}
.verdictcard--good{border-top:3px solid var(--good)}
.verdictcard--bad{border-top:3px solid var(--warn)}
.verdictcard h3{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.verdictcard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.verdictcard li{display:flex;gap:9px;font-size:15px;line-height:1.55}
.verdictcard li::before{content:"";flex:0 0 7px;height:7px;border-radius:50%;margin-top:8px}
.verdictcard--good li::before{background:var(--good)}
.verdictcard--bad li::before{background:var(--warn)}

/* ------------------------------------------------------- spec preview */
.specpeek{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.specpeek__row{background:var(--panel);padding:11px 15px;display:flex;justify-content:space-between;gap:14px;font-size:14.5px}
.specpeek__row dt{color:var(--ink-2)}
.specpeek__row dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}

/* -------------------------------------------- compare index, pair rows */
/* ⛔ Text rows, never cards. /compare/ lists every comparable pair on the site
   and the bike card markup made it 309 KB, the heaviest page here, for two
   names and two prices per row. Whatever is added to this page, the row stays
   a link, a price and nothing else. */
.pairtally{font-size:13px;color:var(--ink-3);white-space:nowrap}

.pairlist{list-style:none;margin:0;padding:0}
.pairlist li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;
  padding:9px 2px;border-bottom:1px solid var(--rule);
}
.pairlist a{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}
.pairlist a:hover{color:var(--link);text-decoration:underline}
.pairlist span{
  margin-left:auto;font-size:13px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

.pairmore{margin-top:4px}
.pairmore summary{
  cursor:pointer;font-size:14px;font-weight:600;color:var(--link);
  padding:11px 2px;
}
.pairmore summary:hover{text-decoration:underline}
.pairmore summary::marker{color:var(--ink-3)}
.pairmore .pairlist{border-top:1px solid var(--rule)}

/* Narrow screens have no room for the price on the same line as two model
   names, so it drops under them and stops being right aligned to nothing. */
@media (max-width:560px){.pairlist span{margin-left:0;width:100%}}

/* The masthead and the jump nav are both sticky, so a heading jumped to lands
   under them without this. Scoped to this page's groups on purpose: the model
   page has the same gap and fixing it there was not asked for. */
.comparegroup{scroll-margin-top:124px}
@media (max-width:860px){.comparegroup{scroll-margin-top:72px}}