/* ==============================================================
   Canada Vapes — Compatibility · shared shell
   Rebuilt 2026-09-20 from the final Figma design
   (59BfySWlGUGYqRFIQ5Vlii, page "Compatibility center"):
     Archive  8661:18043 · states 8754:17483 / 8754:16988
     Single   8660:17771

   Every token below is the value read from that file, not an
   approximation: colours and spacing from its variables, type
   from its text styles (Display lg/md/sm/xs, Text xl/lg/md/sm).
   Letter-spacing is stored there in percent: -6% on displays,
   -4% on display xs, -2% on text, +5% on the uppercase label.
   ============================================================== */

:root{
  --white:#fff;
  --gray-50:#fafaf9; --gray-100:#f5f5f4; --gray-200:#e7e5e4; --gray-300:#d7d3d0;
  --gray-400:#a9a29d; --gray-500:#79716b; --gray-600:#57534e; --gray-700:#44403c;
  --gray-800:#292524; --gray-950:#171412;
  --brand:#e0302c; --brand-dark:#c4281f;

  --font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --xxs:2px; --xs:4px; --sm:6px; --md:8px; --lg:12px; --xl:16px;
  --2xl:20px; --3xl:24px; --4xl:32px; --5xl:40px; --6xl:48px;
  --7xl:64px; --8xl:80px; --9xl:96px; --11xl:160px;

  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-3xl:24px; --r-full:9999px;

  --line:1px solid var(--gray-200);
  --line-strong:1px solid var(--gray-300);
  --shadow-pop:0 8px 12px rgba(23,20,18,.08);
  --ease:cubic-bezier(.4,0,.2,1); --dur:200ms;

  /* the canvas: 1440 with 160 of side padding, so 1120 of content.
     The guide splits that into 224 · 48 · 608 · 48 · 192. */
  --canvas:1440px; --pad:160px;
  --nav:224px; --measure:608px; --toc:192px; --rail-gap:48px;
  /* the sections under the finder: 357 heading · 643 content */
  --sect-h:357px; --sect-c:643px;
  --header-h:72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:120px}
body{margin:0; background:var(--white); color:var(--gray-600);
  font-family:var(--font); font-size:16px; line-height:1.5; letter-spacing:-.02em;
  -webkit-font-smoothing:antialiased}

h1,h2,h3{color:var(--gray-950); font-weight:500; margin:0; text-wrap:balance}
h1{font-size:48px; line-height:1.1; letter-spacing:-.06em}
h2{font-size:30px; line-height:1.2; letter-spacing:-.06em}
h3{font-size:20px; line-height:1.4; letter-spacing:-.02em}
p{margin:0}
img{max-width:100%; display:block}
strong{font-weight:600; color:var(--gray-800)}
a{color:var(--brand); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px; font-weight:500}
a:hover{color:var(--brand-dark)}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:var(--r-lg)}
::selection{background:#fde8e7}

/* the uppercase label: In short, Compatible parts, Guides, On this page,
   and the table headers. One style, 12/1.6 with +5% tracking. */
.label{font-size:12px; font-weight:500; line-height:1.6; letter-spacing:.05em;
  text-transform:uppercase; color:var(--gray-500); margin:0}

/* ── header ─────────────────────────────────────────────────── */
.header{background:var(--white); border-bottom:var(--line); position:sticky; top:0; z-index:70}
.header-in{max-width:var(--canvas); margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:center; gap:var(--5xl); height:var(--header-h)}
.logo{width:32px; height:32px; flex:0 0 32px; border-radius:var(--r-lg); background:var(--brand);
  display:grid; place-items:center; font-size:16px}
.mainnav{display:flex; gap:var(--3xl); font-size:15px}
.mainnav a{color:var(--gray-600); text-decoration:none; font-weight:400; transition:color var(--dur) var(--ease)}
.mainnav a:hover{color:var(--gray-950)}
.mainnav a.here{color:var(--gray-950); font-weight:500}
.hsearch{flex:1; position:relative; max-width:360px}
.hsearch input{width:100%; font:inherit; font-size:14px; padding:9px var(--xl) 9px 38px;
  border:var(--line-strong); border-radius:var(--r-full); background:var(--white); color:var(--gray-950)}
.hsearch input::placeholder{color:var(--gray-500)}
.hsearch svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--gray-500)}
.hactions{margin-left:auto; display:flex; gap:var(--3xl); font-size:14px; white-space:nowrap}
.hactions a{color:var(--gray-600); text-decoration:none; font-weight:400}
.hactions a:hover{color:var(--gray-950)}
@media (max-width:1100px){ .mainnav{display:none} }

/* ── page frames ────────────────────────────────────────────── */
.wrap{max-width:var(--canvas); margin:0 auto; padding:0 var(--pad)}
.crumbs{font-size:14px; color:var(--gray-500)}
.crumbs a{color:var(--gray-500); text-decoration:none; font-weight:400}
.crumbs a:hover{color:var(--gray-950)}
.crumbs i{font-style:normal; margin:0 var(--md); color:var(--gray-300)}

/* every section under the finder: heading left, content right */
.sect{max-width:var(--canvas); margin:0 auto; padding:var(--7xl) var(--pad);
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--6xl)}
.sect-h{width:var(--sect-h); flex:0 0 var(--sect-h); display:flex; flex-direction:column; gap:var(--xl);
  position:sticky; top:104px}
.sect-h h2{margin:0}
.sect-h p{font-size:16px; line-height:1.5; color:var(--gray-600)}
.sect-c{width:var(--sect-c); flex:0 0 var(--sect-c)}

/* ── controls ───────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--lg);
  background:var(--brand); color:var(--white); font-family:var(--font); font-size:14px; font-weight:500;
  line-height:1.4; letter-spacing:-.02em; padding:var(--md) var(--xl); border-radius:var(--r-full);
  text-decoration:none; border:0; cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease)}
.btn:hover{background:var(--brand-dark); color:var(--white)}

/* ── FAQ: one component for both templates ──────────────────
   A card with a hairline between rows; the question is the row,
   the answer opens under it. Native <details>, so every answer
   is in the HTML (indexable, and the source of FAQPage schema). */
.faq{border:var(--line); border-radius:var(--r-xl); overflow:hidden}
.faq details + details{border-top:var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--xl);
  padding:var(--xl); font-size:16px; font-weight:500; line-height:1.5; color:var(--gray-950);
  transition:background var(--dur) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--gray-50)}
.faq summary span{flex:1}
.faq summary svg{flex:0 0 20px; color:var(--gray-500); transition:transform var(--dur) var(--ease)}
.faq details[open] summary{background:var(--gray-50)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .a{padding:0 var(--xl) var(--xl); background:var(--gray-50)}
.faq .a p{font-size:16px; line-height:1.5; color:var(--gray-600)}

/* ── benefits + footer ──────────────────────────────────────── */
.benefits{background:var(--gray-50); padding:var(--4xl) 0}
.benefits-in{max-width:var(--canvas); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--6xl)}
.ben .t{font-size:16px; font-weight:500; color:var(--gray-950); margin-bottom:var(--xs)}
.ben .s{font-size:14px; line-height:1.4; color:var(--gray-500)}
.footer{background:var(--gray-950); color:var(--gray-400); padding:var(--8xl) 0 var(--6xl); font-size:14px}
.footer-in{max-width:var(--canvas); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--7xl)}
.footer h4{font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-500);
  margin:0 0 var(--xl); font-weight:500}
.footer ul{list-style:none; padding:0; margin:0}
.footer li{margin-bottom:var(--lg)}
.footer a{color:var(--gray-400); text-decoration:none; font-weight:400}
.footer a:hover{color:var(--white)}

/* ── responsive ──────────────────────────────────────────────
   160 of side padding cannot survive below the canvas, so it comes
   down fluidly before any breakpoint fires. */
@media (max-width:1439px){ :root{ --pad:clamp(20px, 11vw, 160px) } }
@media (max-width:1240px){
  :root{ --sect-h:300px; --nav:200px; --toc:176px; --rail-gap:32px }
}
@media (max-width:1100px){
  .sect-c{flex:1 1 auto; width:auto}
  .sect-h{flex:0 0 280px; width:280px}
}
@media (max-width:899px){
  .sect{flex-direction:column; gap:var(--3xl); padding:var(--6xl) var(--pad)}
  .sect-h{position:static; width:auto; flex:none}
  .sect-c{width:100%}
  .benefits-in{grid-template-columns:1fr 1fr; gap:var(--3xl)}
  .footer-in{grid-template-columns:1fr 1fr; gap:var(--5xl)}
  .header-in{gap:var(--3xl)}
  h1{font-size:36px}
  h2{font-size:24px; letter-spacing:-.04em}
}
@media (max-width:639px){
  .benefits-in{grid-template-columns:1fr; gap:var(--2xl)}
  .footer-in{grid-template-columns:1fr; gap:var(--4xl)}
  h1{font-size:30px}
  .faq summary{padding:var(--lg) var(--xl); font-size:15px}
  .faq .a{padding:0 var(--xl) var(--lg)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{transition:none !important}
}