/* Just A Ride Automotive — "le prix livré chez vous".
   Base: the Celeste Motors dark stylesheet (celeste.css, its blacks tinted bleu nuit and its champagne turned to the logo gold
   by 8_theme_celeste.py C8A86A … 0B111C). The brand is the logo: a navy panther with gold facets, a gold wheel, white and gold type.
   So: bleu nuit, white type, the logo gold for actions and for every delivered price. One signature: the ticket, from the price
   in Germany down to the price delivered on the visitor's island. Real photos only (their deliveries, their stock, Evan). */
:root{
  --bg:#0B111C; --night:#070C16; --night-2:#0F1726; --night-3:#172134; --night-line:rgba(255,255,255,.08); --night-muted:#8A93A3;
  --paper:#0B111C; --card:#101827; --sunk:#141D2E; --raise:#1B2639;
  --ink:#F2F2F4; --ink-2:#C3C8D1; --muted:#8A93A3; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --gold:#C8A86A; --gold-2:#D6B97E; --gold-ink:#DABE88; --gold-soft:rgba(200,168,106,.12);
  --hot:#E07B6A; --hanko:#C8A86A; --focus:#DABE88;
  color-scheme:dark;
}
::selection{background:var(--gold);color:#0B111C}
.btn-gold:hover{background:var(--gold-2)}
.brand img{height:34px}
.footer .lg img{height:40px}
.wm::before{background-image:url(emblem.png);width:24%;aspect-ratio:2.24;opacity:.8;right:4%;bottom:5%}
.num{font-variant-numeric:tabular-nums}

/* ---------- header: the island chosen, always in sight ---------- */
.masthead .wrap{gap:28px}
.ile-b{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 11px;margin-right:6px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink);font:500 13.5px var(--f);cursor:pointer;white-space:nowrap;transition:border-color .15s}
.ile-b:hover{border-color:var(--gold)}
.ile-b .ico{width:16px;height:16px;color:var(--gold)}
.ile-b b{font-weight:600;font-size:12px;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.ile-b .ico:last-child{width:14px;height:14px;color:var(--muted)}
.jar-mh-cta{margin-left:8px}
.ile-dlg{border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 32px));width:100%;color:var(--ink)}
.ile-dlg::backdrop{background:rgba(4,8,15,.72);backdrop-filter:blur(4px)}
.ile-in{background:var(--card);border:1px solid var(--line-2);border-radius:12px;padding:22px;box-shadow:var(--sh-2)}
.ile-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ile-top h2{font-size:24px}
.ile-in>p{margin:6px 0 16px;color:var(--ink-2);font-size:14.5px}
.ile-list{display:grid;gap:6px}
.ile-list button{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--sunk);color:var(--ink);cursor:pointer;font:inherit;transition:border-color .15s}
.ile-list button:hover{border-color:var(--line-2)}
.ile-list button[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-soft)}
.ile-list b{font-weight:600;font-size:15px}
.ile-list em{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);margin-left:6px}
.ile-list span{grid-column:1;font-size:13px;color:var(--muted)}
.ile-list i{grid-row:1/3;grid-column:2;font-style:normal;font-weight:600;font-size:13px;color:var(--gold-ink)}
.ft-ile{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-align:left}
.ft-ile:hover{color:var(--ink)}

/* ---------- home hero: the promise on the left, the ticket of a real car on the right ---------- */
.jar-hero{position:relative;overflow:hidden;background:var(--night);border-bottom:1px solid var(--line)}
.jar-hero>.wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,440px);gap:64px;align-items:center;padding-block:76px 80px}
.jar-hero h1{font-size:clamp(38px,4.8vw,66px);font-weight:600;letter-spacing:-.035em;line-height:1.02}
.jar-hero h1 em{font-style:normal;color:var(--gold-ink)}
.jar-hero .lead{margin-top:22px;max-width:540px;font-size:18px;color:var(--ink-2)}
.jar-hero .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.ile-chips{margin-top:28px}
.ile-chips>small{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ile-chips>div{display:flex;flex-wrap:wrap;gap:6px}
.ile-chips button{height:36px;padding:0 13px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink-2);font:500 13.5px var(--f);cursor:pointer;white-space:nowrap}
.ile-chips button:hover{color:var(--ink);border-color:var(--ink-2)}
.ile-chips button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#0B111C}
.facts-l{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:30px;font-size:13.5px;color:var(--muted)}
.facts-l b{color:var(--ink);font-weight:600}

/* the ticket (hero, car page, estimate) */
.tk{position:relative;background:var(--card);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.tk-ph{position:relative;aspect-ratio:16/9;background:#E9EAEC;overflow:hidden}
.tk-ph img{width:100%;height:100%;object-fit:cover}
.tk-ph .tag{position:absolute;left:12px;top:12px;z-index:2;height:26px;padding:0 10px;border-radius:999px;background:rgba(7,12,22,.82);color:var(--gold-ink);letter-spacing:.1em}
.tk-b{padding:18px 20px 20px}
.tk-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tk-h h3{font-size:19px}
.tk-h span{font-size:13px;color:var(--muted);white-space:nowrap}
.tk-l{margin:14px 0 0;display:grid}
.tk-l div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px dashed var(--line-2);font-size:14px}
.tk-l div:first-child{border-top:0}
.tk-l dt{color:var(--ink-2)}
.tk-l dt small{color:var(--muted);font-size:12.5px;margin-left:4px}
.tk-l dd{margin:0;color:var(--ink);font-weight:500;text-align:right;white-space:nowrap}
.tk-l div:first-child dd{font-weight:600}
.tk-tot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:10px;padding-top:14px;border-top:1px solid var(--gold)}
.tk-tot span{font-weight:600;font-size:14.5px;color:var(--ink)}
.tk-tot small{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:2px}
.tk-tot b{font-family:var(--f-d);font-size:30px;font-weight:600;letter-spacing:-.025em;line-height:1;color:var(--gold-ink);white-space:nowrap}
.tk .link{margin-top:16px}

/* ---------- sections ---------- */
.sec.alt{background:var(--night-2)}
.sh .link{white-space:nowrap}
.sh p.lead{color:var(--ink-2)}

/* where are you at: three doors (GoodCar's "où en êtes-vous", their AUDIT and BRIEF words) */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.door{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 24px 24px;border:1px solid var(--line);border-radius:12px;background:var(--card);transition:border-color .18s,transform .18s}
.door:hover{border-color:var(--gold);transform:translateY(-2px)}
.door .ci{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold-ink);margin-bottom:6px}
.door .ci .ico{width:21px;height:21px;stroke-width:1.7}
.door small{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.door h3{font-size:22px}
.door p{color:var(--ink-2);font-size:14.5px;line-height:1.55}
.door .meta{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);font-size:13.5px}
.door .meta b{color:var(--gold-ink);font-weight:600}
.door .meta .ico{width:18px;height:18px;color:var(--gold-ink);transition:transform .18s}
.door:hover .meta .ico{transform:translateX(3px)}

/* car cards: the delivered price first, the German price under it */
.jc .ph{aspect-ratio:16/10;background:#E9EAEC}
.jc .ph img{object-position:50% 55%}
.jc .fav{z-index:3}
.jc .vu{position:absolute;left:10px;top:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:rgba(7,12,22,.78);color:#fff;font-size:12px;font-weight:500}
.jc .vu .ico{width:14px;height:14px}
.jc .kind{color:var(--gold-ink)}
.jc .kind span+span{color:var(--muted)}
.jc .price small{color:var(--gold-ink)}
.jc .price b{color:var(--ink)}
.jc .de{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.jc .de small{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.jc .de span{font-size:14px;color:var(--ink-2)}
.rail-track .jc{height:100%}

/* deliveries: their photos and their clients' words */
.livs{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px)/3);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.livs::-webkit-scrollbar{display:none}
.livs.grid{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
.liv{scroll-snap-align:start;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.liv .im{position:relative;aspect-ratio:4/3;background:var(--sunk);overflow:hidden}
.liv .im img{width:100%;height:100%;object-fit:cover}
.liv .where{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:rgba(7,12,22,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:12.5px;font-weight:600}
.liv .where .ico{width:14px;height:14px;color:var(--gold-ink)}
.liv .tx{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.liv .meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.liv .meta span+span::before{content:"·";margin-right:8px}
.liv .meta .st{margin-left:auto;display:inline-flex;gap:1px;color:var(--gold)}
.liv .meta .st::before{display:none}
.liv .meta .st .ico{width:13px;height:13px}
.liv h3{font-size:17px}
.liv h3 span{font-family:var(--f);font-weight:400;font-size:14px;color:var(--muted)}
.liv p{color:var(--ink-2);font-size:14.5px;line-height:1.55}
.liv>.tx>small{margin-top:auto;color:var(--muted);font-size:13px}
.rail-head{display:flex;gap:8px}

/* the three guarantees, written in the contract */
.gar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;background:var(--card)}
.gar div{padding:28px 26px;display:flex;flex-direction:column;gap:10px}
.gar div+div{border-left:1px solid var(--line)}
.gar .ci{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(200,168,106,.35);color:var(--gold-ink)}
.gar .ci .ico{width:19px;height:19px}
.gar b{font-family:var(--f-d);font-size:19px;font-weight:600;line-height:1.25;color:var(--ink)}
.gar p{color:var(--ink-2);font-size:14.5px;line-height:1.55}
.gar-note{margin-top:14px;color:var(--muted);font-size:13.5px}

/* Evan */
.evan{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:64px;align-items:center}
.evan .im{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--sunk)}
.evan .im img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.evan blockquote{margin:0;font-family:var(--f-d);font-size:clamp(22px,2.3vw,30px);font-weight:500;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.evan blockquote::before{content:"“";display:block;font-size:64px;line-height:.6;color:var(--gold);margin-bottom:16px}
.evan .sig{margin-top:22px;color:var(--muted);font-size:14px}
.evan .sig b{color:var(--ink);font-weight:600}
.evan .figures{margin-top:32px}
.evan .figures b{color:var(--gold-ink)}
.evan p.more{margin-top:18px;color:var(--ink-2);font-size:15.5px;line-height:1.65;max-width:620px}

/* ---------- inner pages ---------- */
.phead .bg{opacity:.34;filter:saturate(.85);object-position:50% 60%}
.phead::after{background:linear-gradient(90deg,rgba(7,12,22,.92) 0%,rgba(7,12,22,.45) 75%),linear-gradient(0deg,rgba(7,12,22,.92),rgba(7,12,22,0) 60%)}
.phead .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.sec-h{font-size:clamp(24px,2.4vw,32px);margin-bottom:22px}
.sec-p{color:var(--ink-2);font-size:16px;max-width:680px;margin:-10px 0 24px}

/* the price, as an equation */
.eq{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.2fr);border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.eq div{position:relative;padding:22px 20px;display:flex;flex-direction:column;gap:6px}
.eq div+div{border-left:1px solid var(--line)}
.eq div+div::before{content:"+";position:absolute;left:-11px;top:22px;width:20px;height:20px;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);display:grid;place-items:center;font-size:13px;line-height:18px;text-align:center;color:var(--gold-ink)}
.eq div:last-child{background:var(--gold-soft)}
.eq div:last-child::before{content:"="}
.eq small{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eq b{font-family:var(--f-d);font-size:19px;font-weight:600;color:var(--ink)}
.eq div:last-child b{color:var(--gold-ink)}
.eq span{font-size:13px;color:var(--ink-2);line-height:1.45}

/* the estimate */
.calc2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px;align-items:start}
.calc2 .q+.q{margin-top:28px}
.calc2 .q>label,.calc2 .q>span{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.calc2 output{display:block;font-family:var(--f-d);font-size:40px;font-weight:600;letter-spacing:-.03em;color:var(--ink);margin-bottom:12px}
.calc2 .note{margin-top:22px;color:var(--muted);font-size:13.5px;line-height:1.55;max-width:560px}
.calc2 .tk .acts{display:grid;gap:8px;margin-top:18px}
input[type=range]{width:100%;accent-color:var(--gold)}

/* their commission grid */
.grid-t{width:100%;border-collapse:collapse;font-size:15px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.grid-t th,.grid-t td{text-align:left;padding:15px 20px;border-top:1px solid var(--line)}
.grid-t thead th{border-top:0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--sunk)}
.grid-t td:last-child{color:var(--gold-ink);font-weight:600;text-align:right}
.grid-t th:last-child{text-align:right}
.grid-t tr[aria-current="true"] td{background:var(--gold-soft)}
.grid-note{margin-top:12px;color:var(--muted);font-size:13.5px}

/* the three formulas (their "lots") */
.lots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lot{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:26px 24px 24px}
.lot.main{border-color:rgba(200,168,106,.45)}
.lot small{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.lot h3{font-size:22px;margin-top:8px}
.lot .pr{margin-top:14px;font-family:var(--f-d);font-size:28px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.lot .pr span{font-family:var(--f);font-size:13.5px;font-weight:400;color:var(--muted);letter-spacing:0;margin-left:4px}
.lot>p{margin-top:12px;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.lot ul{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:9px;font-size:14px;color:var(--ink-2)}
.lot li{display:flex;gap:10px;align-items:flex-start}
.lot li .ico{width:16px;height:16px;flex:none;margin-top:3px;color:var(--gold-ink);stroke-width:2.2}
.lot ul{flex:1;align-content:start}
.lot .btn{margin-top:22px}

/* the five steps, each with its duration */
.tl{display:grid;gap:0}
.tl article{display:grid;grid-template-columns:72px minmax(0,1fr) 170px;gap:24px;align-items:baseline;padding:28px 0;border-top:1px solid var(--line)}
.tl article:first-child{border-top:0;padding-top:0}
.tl .no{font-family:var(--f-d);font-size:44px;font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--gold-ink)}
.tl h3{font-size:22px}
.tl p{margin-top:8px;color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:640px}
.tl .d{justify-self:end;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.tl .d .ico{width:16px;height:16px;color:var(--gold-ink)}

/* the islands, side by side */
.iles-t{width:100%;border-collapse:collapse;font-size:14.5px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.iles-t th,.iles-t td{text-align:left;padding:14px 18px;border-top:1px solid var(--line);white-space:nowrap}
.iles-t thead th{border-top:0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--sunk)}
.iles-t td:first-child{font-weight:600;color:var(--ink)}
.iles-t td:first-child i{font-style:normal;color:var(--gold-ink);font-weight:600;margin-left:8px;font-size:12.5px}
.iles-t tr[aria-current="true"] td{background:var(--gold-soft)}
.iles-t em{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.t-scroll{overflow-x:auto;border-radius:12px}

/* ---------- car page ---------- */
.car-p{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:48px;align-items:start}
.car-p .main{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#E9EAEC}
.car-p .main img{width:100%;height:100%;object-fit:cover}
.car-p .main .fav{right:14px;top:14px}
.car-p .vtitle{margin:26px 0 0}
.car-p .vtitle h1{font-size:clamp(28px,3vw,38px)}
.car-p .desc{margin-top:22px;color:var(--ink-2);font-size:16px;line-height:1.7;max-width:720px}
.car-p .keyfacts{grid-template-columns:repeat(5,1fr)}
.car-side{position:sticky;top:96px;display:grid;gap:14px}
.car-side .tk-b{padding:20px 22px 22px}
.car-side .acts{display:grid;gap:8px;margin-top:18px}
.ile-seg{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ile-seg button{height:32px;padding:0 11px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink-2);font:500 12.5px var(--f);cursor:pointer}
.ile-seg button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#0B111C}
.side-g{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:16px 18px;display:grid;gap:12px}
.side-g div{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.side-g .ico{width:18px;height:18px;flex:none;color:var(--gold-ink);margin-top:1px}
.side-g b{color:var(--ink);font-weight:600}

/* favourites and empty states */
.empty-b{border:1px dashed var(--line-2);border-radius:12px;padding:40px 24px;text-align:center}
.empty-b h2{font-size:24px}
.empty-b p{margin:10px auto 0;color:var(--ink-2);max-width:460px}
.empty-b .btn{margin-top:20px}

/* filters: the island strip above the results */
.ile-note{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:14px;color:var(--ink-2)}
.ile-note .ico{width:18px;height:18px;color:var(--gold-ink)}
.ile-note b{color:var(--ink)}
.ile-note button.link{background:none;border:0;padding:0;cursor:pointer;margin-left:auto}

/* ---------- tablets ---------- */
@media (max-width:1180px){
  .jar-mh-cta{display:none}
  .masthead .wrap{gap:18px}
}
@media (max-width:980px){
  .jar-hero>.wrap{grid-template-columns:1fr;gap:40px;padding-block:52px 56px}
  .jar-hero .tk{max-width:520px}
  .doors,.lots{grid-template-columns:1fr}
  .gar{grid-template-columns:1fr}
  .gar div+div{border-left:0;border-top:1px solid var(--line)}
  .livs{grid-auto-columns:calc((100% - 20px)/2)}
  .livs.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .evan{grid-template-columns:1fr;gap:32px}
  .evan .im{max-width:420px}
  .eq{grid-template-columns:1fr 1fr}
  .eq div+div{border-left:0}
  .eq div{border-top:1px solid var(--line)}
  .eq div:nth-child(-n+2){border-top:0}
  .eq div:nth-child(even){border-left:1px solid var(--line)}
  .eq div+div::before{display:none}
  .calc2{grid-template-columns:1fr;gap:32px}
  .car-p{grid-template-columns:1fr;gap:28px}
  .car-side{position:static}
  .car-p .keyfacts{grid-template-columns:repeat(3,1fr)}
  .tl article{grid-template-columns:56px minmax(0,1fr)}
  .tl .d{grid-column:2;justify-self:start}
}

/* ---------- phones: short pages, rows instead of stacked cards ---------- */
@media (max-width:640px){
  .masthead .wrap{gap:10px}
  .brand img{height:28px}
  .ile-b{height:36px;padding:0 10px;margin-right:0;font-size:13px}
  .ile-b [data-ile-name],.ile-b .ico:last-child{display:none}
  .jar-wa{display:none}
  .sec{padding-block:40px}
  .sec.tight{padding-block:28px}
  .sh{margin-bottom:22px}
  .sh h2{font-size:26px}
  .jar-hero>.wrap{padding-block:30px 40px;gap:26px}
  .jar-hero h1{font-size:36px}
  .jar-hero .lead{font-size:16px;margin-top:14px}
  .ile-chips{margin-top:20px}
  .ile-chips>div{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .ile-chips>div::-webkit-scrollbar{display:none}
  .jar-hero .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}
  .jar-hero .acts .btn{padding:0 10px}
  .facts-l{display:none}
  .tk-ph{aspect-ratio:2/1}
  .tk-b{padding:14px 16px 16px}
  .tk-l div{padding:6px 0;font-size:13.5px}
  .tk-tot b{font-size:26px}
  /* doors become rows */
  .doors{gap:8px}
  .door{display:grid;grid-template-columns:40px minmax(0,1fr) 18px;gap:2px 14px;align-items:center;padding:16px}
  .door .ci{grid-row:1/3;width:40px;height:40px;margin:0}
  .door small{display:none}
  .door h3{font-size:17px}
  .door p{grid-column:2;font-size:13.5px;line-height:1.45}
  .door .meta{grid-row:1/3;grid-column:3;margin:0;padding:0;border:0}
  .door .meta b{display:none}
  .rail-track{grid-auto-columns:82%;gap:12px}
  .rail-nav{display:none}
  .livs{grid-auto-columns:82%;gap:12px}
  .livs.grid{grid-template-columns:1fr}
  .liv .tx{padding:14px 16px 16px}
  .liv p{font-size:14px}
  .gar div{padding:18px;display:grid;grid-template-columns:38px minmax(0,1fr);gap:4px 14px}
  .gar .ci{grid-row:1/3;width:38px;height:38px}
  .gar b{font-size:16px}
  .gar p{font-size:13.5px}
  .evan{gap:22px}
  .evan .im{aspect-ratio:1/1;max-width:none}
  .evan blockquote{font-size:20px}
  .evan blockquote::before{font-size:48px;margin-bottom:8px}
  .evan .figures{margin-top:22px;gap:14px}
  .evan .figures b{font-size:22px}
  .cta .in{padding:28px 20px}
  .cta .b{margin-left:0;width:100%}
  .cta .b .btn{flex:1}
  .eq{grid-template-columns:1fr}
  .eq div,.eq div:nth-child(even){border-left:0;border-top:1px solid var(--line);padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
  .eq div:first-child{border-top:0}
  .eq small{grid-column:1}
  .eq b{grid-row:1/3;grid-column:2;align-self:center;font-size:17px}
  .eq span{grid-column:1;font-size:12.5px}
  .calc2 output{font-size:32px}
  .grid-t th,.grid-t td{padding:12px 14px;font-size:13.5px}
  .lot{padding:20px 18px}
  .lot .pr{font-size:24px}
  .tl article{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:20px 0}
  .tl .no{font-size:30px}
  .tl h3{font-size:18px}
  .tl p{font-size:14.5px}
  .car-p .keyfacts{grid-template-columns:repeat(2,1fr)}
  .car-p .keyfacts div:nth-child(odd){border-left:0}
  .car-p .keyfacts div:nth-child(n+3){border-top:1px solid var(--line)}
  .ile-note button.link{margin-left:0}
  .qa summary{padding:18px 0;font-size:16.5px}
  .qa .a{padding:0 8px 20px 42px}
}

/* questions: the themes on the left are links to each group */
.faq-cats a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:var(--r);font-weight:500;color:var(--ink-2)}
.faq-cats a:hover{background:var(--raise);color:var(--ink)}
.faq-cats a span{color:var(--muted)}
.faq-g{scroll-margin-top:96px}
.faq-g+.faq-g{margin-top:44px}
@media (max-width:980px){.faq-cats{position:static;display:flex;flex-wrap:wrap;gap:6px}.faq-cats a{border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;gap:8px}}

/* ---------- phones, second pass: nothing wider than the screen, the home page near 4 screens ---------- */
@media (max-width:980px){
  .jar-hero>.wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .sh .lead{display:none}
  .jar-hero .lead{font-size:15.5px;line-height:1.55}
  .tk-ph{aspect-ratio:21/9}
  .tk-h h3{font-size:17px}
  .tk-l{margin-top:8px}
  .tk-l div{padding:5px 0;font-size:13px}
  .tk-tot{padding-top:10px}
  .tk .link{margin-top:10px}
  /* doors: one line each, the promise as the second line */
  .door{grid-template-columns:40px minmax(0,1fr) 18px;padding:14px 16px}
  .door p{display:none}
  .door small{display:block;grid-column:2;grid-row:2;letter-spacing:.08em;color:var(--gold-ink);font-size:11px}
  .door h3{grid-column:2;grid-row:1}
  /* cards: labels that fit a phone */
  .jc .bd{padding:14px 16px 16px;gap:8px}
  .jc .t{font-size:17px}
  .jc .ft{padding-top:10px}
  .jc .price small,.jc .de small{font-size:10px;letter-spacing:.04em}
  .jc .price b{font-size:20px}
  .liv .im{aspect-ratio:16/10}
  .liv p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* guarantees: title only, the detail on the page Comment ça marche */
  .gar div{padding:14px 16px;grid-template-columns:34px minmax(0,1fr);align-items:center}
  .gar .ci{grid-row:auto;width:34px;height:34px}
  .gar p{display:none}
  .gar b{font-size:15px}
  /* Evan: a portrait beside his name, the quote, the figures in one row */
  .evan{grid-template-columns:88px minmax(0,1fr);gap:16px;align-items:start}
  .evan .im{aspect-ratio:1;border-radius:50%}
  .evan blockquote{font-size:17px;line-height:1.4}
  .evan blockquote::before{display:none}
  .evan .sig{margin-top:10px;font-size:13px}
  .evan .figures{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:4px;padding-top:16px;gap:10px}
  .evan .figures b{font-size:20px}
  .evan .figures span{font-size:11.5px}
  .evan>div:last-child{display:contents}
  .evan blockquote,.evan .sig,.evan .more{grid-column:2}
  .evan .more{grid-column:1/-1;font-size:14.5px;margin-top:4px}
}
/* car page on tablets and phones: photo, title, then the delivered price, then the facts */
@media (max-width:980px){
  .car-p{gap:0}
  .car-p>div:first-child{display:contents}
  .car-p .main{order:1}
  .car-p .vtitle{order:2;margin:20px 0 18px}
  .car-p .car-side{order:3}
  .car-p .keyfacts{order:4;margin-top:24px}
  .car-p .desc{order:5}
}
@media (max-width:640px){
  .car-p .keyfacts div{padding:12px 14px;gap:4px}
  .car-p .keyfacts div:last-child{grid-column:1/-1;border-left:0}
  .car-p .keyfacts .ico{display:none}
  .car-p .desc{font-size:15px}
}
/* Celeste names its car-page title area "t" on tablets; this page has its own order */
.car-p .vtitle,.car-p .keyfacts,.car-p .main,.car-p .desc,.car-p .car-side{grid-area:auto}
@media (max-width:980px){.calc2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.cfg-bar .btn .lg{display:none}}