/* ============================================================
   03 · COMPONENTS
   Everything that repeats inside a section.
   ------------------------------------------------------------
   Index:  shock lines · the concept gap · audit rows
           manifesto · about + portrait · work tiles
           stats · chips · quotes · close · footer
   ============================================================ */

/* ---------------- SHOCK LINES ---------------- */
.lines{margin-top:48px;border-top:1px solid rgba(10,10,12,.15);}
.line{padding:26px 0;border-bottom:1px solid rgba(10,10,12,.15);
  display:grid;grid-template-columns:58px 1fr;gap:20px;align-items:start;
  transition:padding-left .25s ease;}
.line:hover{padding-left:10px;}
.line .no{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--flame);padding-top:8px;}
.line .txt{font-size:clamp(20px,2.7vw,28px);line-height:1.24;font-weight:700;letter-spacing:-.02em;}
.line .txt small{display:block;font-size:clamp(17px,2.2vw,22px);font-weight:700;color:var(--flame);margin-top:8px;}
@media(max-width:600px){.line{grid-template-columns:38px 1fr;gap:12px;}}

/* ---------------- THE CONCEPT GAP ---------------- */
.test{background:var(--ink);color:var(--paper);padding:100px 0;}

/* Room to breathe between the intro paragraph and step 1. */
.test .lead{margin-bottom:46px;}
.gap-step{max-width:640px;margin:0 0 14px;}
.gap-step .gap-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--flame);color:#fff;font-size:12px;font-weight:800;margin-right:8px;}
.gap-step .gap-num.amber{background:var(--amber);color:#241a00;}
.gap-step h3{display:inline;font-size:15px;font-weight:800;letter-spacing:-.01em;}
.gap-step p{color:var(--mute);font-size:14px;margin:6px 0 0 30px;}

.gap-askbar{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 46px;}
.gap-askbar input{flex:1;min-width:240px;background:var(--ink-3);border:1.5px solid rgba(246,243,237,.18);
  color:var(--paper);font-family:var(--sans);font-size:16px;padding:15px 18px;border-radius:6px;}
.gap-askbar input:focus{outline:none;border-color:var(--flame);}
.gap-askbar input::placeholder{color:var(--mute);}
.gap-askbar input:disabled{opacity:.45;}
.gap-askbar .btn.amber{background:var(--amber);color:#241a00;}
.gap-askbar .btn.amber:hover{background:#e6a015;}
.gap-askbar .btn:disabled{background:var(--ink-3);color:var(--mute);cursor:default;transform:none;}

.gap-row{display:grid;grid-template-columns:1fr 130px 1fr;gap:0;align-items:stretch;}
@media(max-width:760px){.gap-row{grid-template-columns:1fr;gap:26px;}
  .gap-chasm{order:2;height:110px;} .gap-row .gap-card:nth-child(1){order:1;} .gap-row .gap-card:nth-child(3){order:3;}}

.gap-card{background:var(--ink-3);border:1.5px solid rgba(246,243,237,.16);padding:26px;
  border-radius:3px;transition:border-color .4s;min-height:190px;}
.gap-row2 .gap-card{border-color:rgba(255,176,32,.3);}
.gap-tag{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);margin-bottom:14px;}
.gap-tag.amber{color:var(--amber);}

.gap-placeholder{color:var(--mute);font-style:italic;font-size:14.5px;}
.gap-answer{opacity:0;transform:translateY(6px);transition:opacity .5s ease .2s,transform .5s ease .2s;
  font-size:15.5px;line-height:1.6;color:#dedad3;}
.gap-answer.on{opacity:1;transform:none;}
.gap-qecho{font-size:12.5px;color:var(--mute);margin-bottom:12px;}
.gap-qecho b{color:#cfccc5;font-weight:600;font-style:italic;}

.gap-chasm{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 6px;}
.gap-chasmlabel{font-size:11px;color:var(--mute);letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px;
  text-align:center;transition:color .4s;}
.gap-chasmlabel.closed{color:var(--amber);}
.gap-bridge{position:relative;width:100%;height:34px;}
.gap-plank{position:absolute;top:50%;width:16px;height:8px;border-radius:2px;
  background:linear-gradient(90deg,var(--flame),var(--amber));
  transform:translateY(-50%) scaleX(0);transform-origin:left center;opacity:0;
  transition:transform .35s ease,opacity .35s ease;}
.gap-plank.on{opacity:1;transform:translateY(-50%) scaleX(1);}
.gap-plank:nth-child(1){left:0%;}
.gap-plank:nth-child(2){left:22%;transition-delay:.08s;}
.gap-plank:nth-child(3){left:44%;transition-delay:.16s;}
.gap-plank:nth-child(4){left:66%;transition-delay:.24s;}
.gap-plank:nth-child(5){left:84%;width:16%;transition-delay:.32s;}
.gap-ember{position:absolute;bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--amber);
  opacity:0;pointer-events:none;}
.gap-ember.on{animation:gaprise 1.3s ease-in forwards;}
@keyframes gaprise{
  0%{opacity:0;transform:translateY(0) scale(1);}
  15%{opacity:1;}
  100%{opacity:0;transform:translateY(-40px) scale(.3);}
}

.gap-stage2{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s ease,opacity .5s ease .1s;}
.gap-stage2.open{max-height:900px;opacity:1;}
.gap-divider{display:flex;align-items:center;justify-content:center;}
.gap-divider span{width:6px;height:6px;border-radius:50%;background:var(--amber);opacity:.5;
  display:block;margin:5px auto;}

.gap-btnrow{display:flex;justify-content:center;margin-top:0;max-height:0;overflow:hidden;
  transition:max-height .3s ease,margin-top .3s ease;}
.gap-btnrow:has(.show){margin-top:30px;max-height:80px;}
.gap-btnrow .btn{background:none;opacity:0;pointer-events:none;transition:opacity .3s;}
.gap-btnrow .btn.show{opacity:1;pointer-events:auto;}

.verdict{margin-top:0;border-left:3px solid var(--flame);padding:4px 0 4px 22px;
  max-width:60ch;max-height:0;overflow:hidden;opacity:0;transform:translateY(12px);
  transition:max-height .5s ease,margin-top .5s ease,opacity .5s ease,transform .5s ease;}
.verdict.show{margin-top:30px;max-height:260px;opacity:1;transform:none;}
.verdict.stage2{border-color:var(--amber);}
.verdict strong{display:block;font-size:clamp(22px,3.4vw,32px);font-weight:800;letter-spacing:-.025em;
  line-height:1.15;margin-bottom:10px;}
.verdict p{color:#bcbab4;}

/* ---------------- AUDIT-STYLE ROWS ---------------- */
.rows{margin-top:46px;display:grid;gap:2px;background:rgba(10,10,12,.13);border:1px solid rgba(10,10,12,.13);}
section.dark .rows{background:rgba(246,243,237,.14);border-color:rgba(246,243,237,.14);}
.row{background:var(--paper-2);padding:28px;display:grid;grid-template-columns:1fr 300px;gap:28px;
  align-items:start;transition:background .22s ease;}
section.band .row{background:var(--paper);}
section.band.alt .row{background:var(--paper-2);}
section.dark .row{background:var(--ink-2);}
section.band .row:hover{background:#fffdf9;}
section.dark .row:hover{background:var(--ink-3);}
.row h3{font-size:clamp(20px,2.4vw,25px);font-weight:800;letter-spacing:-.022em;margin-bottom:8px;}
.row p{font-size:16.5px;color:var(--mute-dark);line-height:1.45;max-width:52ch;}
section.dark .row p{color:#b6b4ae;}
.payoff{border-left:3px solid var(--flame);padding-left:16px;font-size:16px;line-height:1.4;align-self:center;}
.payoff b{display:block;color:var(--ink);font-weight:800;font-size:17px;margin-top:3px;}
section.dark .payoff b{color:var(--paper);}
.payoff em{font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--flame);font-weight:800;}
@media(max-width:820px){.row{grid-template-columns:1fr;gap:16px;}}

/* ---------------- MANIFESTO ---------------- */
.manifesto{background:var(--flame);color:#fff;padding:88px 0;}
.manifesto p{font-size:clamp(28px,5.6vw,64px);line-height:1.03;font-weight:800;letter-spacing:-.04em;max-width:17ch;}
.manifesto p + p{margin-top:14px;color:rgba(255,255,255,.78);}

/* ---------------- ABOUT ---------------- */
.about{display:grid;grid-template-columns:400px 1fr;gap:56px;align-items:center;}
@media(max-width:880px){.about{grid-template-columns:1fr;gap:34px;}}
.portrait{position:relative;}
.portrait img{
  width:100%;
  height:auto;                  /* the HTML height attribute would otherwise
                                   pin it to 1335px and stretch the frame */
  aspect-ratio: 4 / 5;          /* fixed frame, so it can never stretch */
  object-fit: cover;
  object-position: 50% 22%;     /* keeps her face in the frame */
  border-radius:3px;
  transition: transform .5s ease;
}
.portrait:hover img{ transform: scale(1.015); }
.portrait::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:2px solid var(--flame);
  z-index:-1;border-radius:3px;}
.abtag{position:absolute;left:0;bottom:-18px;background:var(--flame);color:#fff;font-weight:800;
  font-size:14px;padding:10px 16px;letter-spacing:-.01em;}
.about h2{max-width:16ch;}
.about p{margin-bottom:16px;color:var(--mute-dark);font-size:17.5px;}
.about p.big{font-size:clamp(19px,2.2vw,23px);color:var(--ink);font-weight:600;}

/* ---------------- WORK STRIP ---------------- */
.work{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:44px;}
.tile{position:relative;overflow:hidden;border-radius:3px;background:var(--ink-3);display:block;
  text-decoration:none;border:1px solid rgba(246,243,237,.14);}
.tile img{width:100%;aspect-ratio:16/11;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.tile:hover img{transform:scale(1.06);}
.tile .cap{padding:16px 18px;}
.tile .cap b{display:block;font-size:17px;font-weight:800;letter-spacing:-.015em;}
.tile .cap span{font-size:14px;color:var(--mute);}
.tile .poster{aspect-ratio:16/11;display:flex;flex-direction:column;justify-content:space-between;padding:18px;
  background:radial-gradient(120% 90% at 100% 0%,rgba(255,59,31,.28),transparent 60%),var(--ink-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.tile:hover .poster{transform:scale(1.03);}
.tile .poster i{font-style:normal;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);}
.tile .poster strong{font-family:var(--sans);font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1.05;color:var(--paper);}
.tile .poster em{font-style:normal;font-size:12px;color:var(--mute);}
.tile-wip{border-style:dashed;}
.tile .wip{display:inline-block;margin-left:6px;padding:2px 7px;border:1px solid var(--amber);border-radius:99px;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--amber);vertical-align:2px;}

/* ---------------- PRODUCT ---------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:44px 0 32px;
  background:rgba(246,243,237,.14);border:1px solid rgba(246,243,237,.14);}
.stat{background:var(--ink-3);padding:26px 20px;}
.stat .v{font-size:clamp(36px,5.6vw,58px);font-weight:800;letter-spacing:-.04em;color:var(--amber);
  line-height:1;font-variant-numeric:tabular-nums;}
.stat .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  font-weight:700;margin-top:9px;}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr);}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.chip{border:1px solid rgba(246,243,237,.25);padding:9px 15px;font-size:14px;font-weight:600;
  border-radius:2px;color:#d2d0ca;}
section.band .chip{border-color:rgba(10,10,12,.22);color:var(--mute-dark);}

/* ---------------- QUOTES ---------------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;margin-top:44px;}
.q{border-left:3px solid var(--flame);padding-left:20px;}
.q p{font-size:19px;line-height:1.38;font-weight:600;letter-spacing:-.012em;margin-bottom:12px;}
.q cite{font-style:normal;font-size:14px;color:var(--mute-dark);font-weight:800;}
.q cite span{display:block;font-weight:500;color:#78756f;}

.close{background:var(--ink);padding:108px 0;}
footer{background:var(--ink);border-top:1px solid rgba(246,243,237,.12);padding:32px 0;
  color:var(--mute);font-size:14px;}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;}
footer a{color:var(--mute);}

/* --- footer service line: useful to readers, useful to search --- */
.footnote{
  flex-basis: 100%;
  color: #9a9aa4;   /* 7.0:1 on --ink — passes AA comfortably */
  font-size: 13px;
  line-height: 1.5;
  max-width: 70ch;
}

/* the caption under the portrait carries a full sentence now,
   so it wraps instead of running off the side */
.abtag{
  max-width: 92%;
  line-height: 1.35;
  bottom: -30px;
}

/* --- "Who it's for": the shock lines sit left, the point sits right ---
   Before this the right-hand half was empty, which made the section
   feel like it had stopped early. */
.who-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 60px;
  align-items: start;
}
.who-panel{
  border: 1px solid rgba(10, 10, 12, .16);
  border-left: 4px solid var(--flame);
  padding: 30px 28px;
  background: #fffdf9;
  position: sticky;
  top: 110px;
}
.who-kicker{
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--flame);
  margin-bottom: 10px;
}
.who-big{
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.04em;
  margin-bottom: 18px;
}
.who-note{
  font-size: 16px;
  line-height: 1.5;
  color: var(--mute-dark);
  margin-bottom: 14px;
}

@media (max-width: 940px){
  .who-grid{ grid-template-columns: 1fr; gap: 34px; }
  .who-panel{ position: static; }
}

/* --- The SJH Process: two audiences, clearly separated -----------------
   The client half explains what they will see. The studio half sells the
   process itself. Templates and the full phase count are deliberately
   only mentioned in the studio block — a client does not care. */
.split-label{
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--mute-dark);
  margin: 38px 0 -8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(10,10,12,.16);
}
.cta-note{
  font-size: 15px;
  color: var(--mute-dark);
  max-width: 34ch;
  line-height: 1.4;
}

/* the studio offer sits in a dark panel, so the two audiences never blur */
.studio{
  margin-top: 54px;
  background: var(--ink-2);
  color: var(--paper);
  padding: 42px 40px 46px;
  border-radius: 3px;
}
.studio .split-label{
  color: var(--amber);
  border-bottom-color: rgba(246,243,237,.18);
}
.studio-h{
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 26px 0 16px;
  max-width: 20ch;
}
.studio-h b{ color: var(--flame); }
.studio-p{
  font-size: 17.5px;
  line-height: 1.6;
  color: #bcbab4;
  max-width: 60ch;
  margin: 0;
}
/* Split into short paragraphs rather than one block — this is the gap between them. */
.studio-p + .studio-p{ margin-top: 18px; }
.studio-p b{ color: var(--paper); font-weight: 700; }
.studio .stats{ margin: 34px 0 0; }
.studio .cta-note{ color: #bcbab4; }

@media (max-width: 620px){
  .studio{ padding: 30px 22px 34px; }
}

/* the studio panel is dark inside a light section, so the light-section
   button rules would render the ghost button dark-on-dark */
section.band .studio .btn-ghost{      /* beats "section.band .btn-ghost" */
  border-color: rgba(246,243,237,.32);
  color: var(--paper);
}
section.band .studio .btn-ghost:hover{ border-color: var(--paper); }

/* numbered story steps, used on the audit page */
.steps{margin-top:44px; border-top:1px solid rgba(10,10,12,.15);}
.step{
  padding:26px 0; border-bottom:1px solid rgba(10,10,12,.15);
  display:grid; grid-template-columns:58px 1fr; gap:20px; align-items:start;
}
.step .no{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--flame);padding-top:6px;}
.step h3{font-size:clamp(19px,2.4vw,25px);font-weight:800;letter-spacing:-.02em;margin-bottom:6px;}
.step p{color:var(--mute-dark);font-size:16.5px;line-height:1.5;max-width:60ch;}
@media(max-width:600px){.step{grid-template-columns:38px 1fr;gap:12px;}}

/* source note under a stat row */
.source{font-size:13px;color:var(--mute);margin-top:14px;max-width:70ch;line-height:1.5;}
section.band .source{color:#78756f;}

/* ---------------- STORE (themes.html, themes-thanks.html) ---------------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;margin-top:46px;
  background:rgba(10,10,12,.13);border:1px solid rgba(10,10,12,.13);}
.plan{background:var(--paper);padding:30px 26px 32px;display:flex;flex-direction:column;gap:14px;}
.plan.best{background:var(--ink-2);color:var(--paper);}
.plan h3{font-size:22px;font-weight:800;letter-spacing:-.02em;}
.plan .price{font-size:clamp(40px,5vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--flame);}
.plan.best .price{color:var(--amber);}
.plan .price small{font-size:15px;font-weight:600;letter-spacing:0;color:var(--mute-dark);margin-left:6px;}
.plan.best .price small{color:#bcbab4;}
.plan ul{list-style:none;display:grid;gap:8px;font-size:16px;flex:1;}
.plan li::before{content:"\2713";color:var(--flame);font-weight:800;margin-right:10px;}
.plan.best li::before{color:var(--amber);}
.plan .btn{width:100%;justify-content:center;}
.plan .tag{align-self:flex-start;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  background:var(--amber);color:var(--ink);padding:5px 10px;border-radius:2px;}
.buy-msg{min-height:1.4em;font-size:15px;margin-top:6px;}
.order{background:var(--paper);color:var(--ink);padding:34px 30px;border-radius:3px;margin-top:40px;max-width:720px;}
.order h2{font-size:clamp(26px,3.6vw,36px);letter-spacing:-.025em;margin-bottom:10px;}
.order .dl{display:grid;gap:12px;margin:24px 0;}
.order .dl .btn{justify-content:space-between;}
.licence-key{font:700 18px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--paper-2);
  padding:14px 16px;border-radius:2px;display:flex;justify-content:space-between;gap:12px;align-items:center;word-break:break-all;}
.licence-key button{font:inherit;font-size:14px;background:none;border:1px solid rgba(10,10,12,.3);padding:6px 10px;cursor:pointer;color:inherit;}
.order .fine{font-size:15px;color:var(--mute-dark);margin-top:14px;}
.order ol{margin:12px 0 0 20px;display:grid;gap:6px;}

/* ---------------- EMBER SHOWCASE (themes.html) ---------------- */
.showcase{position:relative;padding:10px 0 70px;}
.mock{position:relative;max-width:1040px;margin:0 auto;}
.browser{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(246,243,237,.08);}
.browser-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#ece8e1;}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:#d4cec4;}
.browser-bar i:nth-child(1){background:#ff5f57}.browser-bar i:nth-child(2){background:#febc2e}.browser-bar i:nth-child(3){background:#28c840}
.browser-bar span{flex:1;margin-left:10px;background:#fff;border-radius:6px;font-size:12px;color:#77736b;padding:4px 10px;max-width:340px;}
.browser img{display:block;width:100%;height:auto;}
.browser .scroller-view{height:min(62vw,620px);overflow-y:auto;overscroll-behavior:contain;}
.phone{width:min(36vw,230px);border-radius:34px;background:#111;padding:9px;box-shadow:0 30px 70px rgba(0,0,0,.5);}
.phone img{display:block;width:100%;height:auto;border-radius:26px;}
.mock .phone{position:absolute;right:-24px;bottom:-50px;}
@media(max-width:700px){.mock .phone{right:-6px;bottom:-40px;width:34vw;padding:5px;border-radius:20px}.mock .phone img{border-radius:16px}}
.tablet{width:min(80vw,440px);border-radius:28px;background:#111;padding:12px;box-shadow:0 30px 70px rgba(0,0,0,.45);margin:0 auto;}
.tablet img{display:block;width:100%;height:auto;border-radius:16px;}
.platform-tag{display:inline-flex;gap:8px;flex-wrap:wrap;margin-top:22px;}
.platform-tag b{font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:2px;background:var(--ink-3);color:var(--paper);}

.devices{margin-top:40px;}
.device-tabs{display:inline-flex;gap:2px;background:rgba(10,10,12,.13);border:1px solid rgba(10,10,12,.13);border-radius:3px;margin-bottom:34px;}
.device-tabs button{font:inherit;font-size:15px;font-weight:700;background:var(--paper);color:var(--ink);border:0;padding:11px 20px;cursor:pointer;}
.device-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);}
.device-panel[hidden]{display:none;}
.device-panel .phones{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;}
.device-panel .phones figure{margin:0;text-align:center;}
.device-panel figcaption{font-size:14px;color:var(--mute-dark);margin-top:12px;font-weight:600;}
.page-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.page-thumbs button{font:inherit;font-size:14px;font-weight:700;border:1px solid rgba(10,10,12,.22);background:transparent;color:var(--ink);padding:8px 14px;border-radius:2px;cursor:pointer;}
.page-thumbs button[aria-pressed="true"]{background:var(--flame);border-color:var(--flame);color:#fff;}
.scroll-hint{font-size:14px;color:var(--mute-dark);margin-top:10px;}

.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px;margin-top:46px;background:rgba(246,243,237,.14);border:1px solid rgba(246,243,237,.14);}
.feat{background:var(--ink-2);padding:24px 24px 28px;display:flex;flex-direction:column;gap:14px;}
.feat .shot{background:#FFFCF8;border-radius:8px;padding:14px;display:flex;align-items:center;justify-content:center;min-height:170px;overflow:hidden;}
.feat .shot img{max-width:100%;max-height:220px;width:auto;height:auto;border-radius:4px;}
.feat .shot--wide{padding:0;}
.feat .shot--wide img{width:100%;max-height:none;border-radius:8px;}
.feat h3{font-size:19px;font-weight:800;letter-spacing:-.015em;}
.feat p{font-size:16px;color:#bcbab4;margin:0;}
.feat .where{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--amber);}

.platforms{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px;margin-top:46px;background:rgba(10,10,12,.13);border:1px solid rgba(10,10,12,.13);}
.platform{background:var(--paper);padding:30px 28px 32px;}
.platform h3{font-size:26px;font-weight:800;letter-spacing:-.025em;margin-bottom:6px;}
.platform .for{color:var(--flame);font-weight:700;margin-bottom:18px;}
.platform dl{display:grid;grid-template-columns:110px 1fr;gap:10px 16px;font-size:16px;}
.platform dt{font-weight:800;}
.platform dd{margin:0;color:var(--mute-dark);}
.platform .btn{margin-top:22px;}