/* GROUPLESS - groupless.cloud. Ink ground, Paper type, Signal coral only for unread dots, the count badge and SALE.
   The first viewport is laid out on the approved comp's 1536 x 1024 frame: --k is one comp pixel. */
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('assets/fonts/schibsted-grotesk-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
:root {
  --ink: #15161A;
  --ink-2: #1B1C21;
  --ink-3: #23252B;
  --line: #2B2D33;
  --paper: #F4F1EA;
  --mist: #B4B5B9;
  --slate: #8A8C93;
  --signal: #FF4D3D;
  --k: min(calc(100vw / 1536), calc(100vh / 1024));
  --frame-w: calc(1536 * var(--k));
  --font: 'Schibsted Grotesk', system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; color: var(--paper); font-family: var(--font); background: var(--ink); -webkit-font-smoothing: antialiased; }
::selection { background: var(--signal); color: var(--ink); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: 16px; z-index: 10; background: var(--paper); color: var(--ink); padding: 8px 12px; }

/* nav: inside the centred comp frame, its hairline across the whole window */
.nav { position: absolute; z-index: 5; top: 0; left: 50%; width: var(--frame-w); height: calc(80 * var(--k)); transform: translateX(-50%); }
.nav::after { content: ''; position: absolute; left: calc(50% - 50vw); width: 100vw; top: calc(78 * var(--k)); height: 1px; background: var(--line); }
.nav-brand { position: absolute; left: calc(58 * var(--k)); top: calc(4 * var(--k)); height: calc(72 * var(--k)); display: flex; align-items: center; gap: calc(12 * var(--k)); }
.nav-mark { width: calc(70 * var(--k)); height: calc(70 * var(--k)); }
.nav-wordmark { font-size: calc(29 * var(--k)); font-weight: 500; letter-spacing: 0.19em; }
.nav-links { position: absolute; left: calc(958 * var(--k)); top: calc(26 * var(--k)); height: calc(30 * var(--k)); display: flex; align-items: center; gap: calc(37 * var(--k)); font-size: calc(19 * var(--k)); color: #C9CACD; }
.nav-links a:hover, .nav-market:hover { color: var(--paper); }
.nav-divider { position: absolute; left: calc(1307 * var(--k)); top: calc(28 * var(--k)); width: 2px; height: calc(24 * var(--k)); background: #66686D; }
.nav-market { position: absolute; left: calc(1352 * var(--k)); top: calc(26 * var(--k)); height: calc(30 * var(--k)); display: flex; align-items: center; font-size: calc(19 * var(--k)); font-weight: 500; }

/* hero: one comp frame, centred, the ground running to the window edges */
.hero { position: relative; height: calc(1024 * var(--k)); overflow: hidden;
  background: radial-gradient(60% 55% at 50% 72%, #1C1D22 0%, var(--ink) 70%); }
.frame { position: absolute; top: 0; left: 50%; width: var(--frame-w); height: calc(1024 * var(--k)); transform: translateX(-50%); }
.tiles { position: absolute; object-fit: cover; pointer-events: none; }
.tiles-left { left: 0; top: calc(176 * var(--k)); width: calc(296 * var(--k)); height: calc(740 * var(--k)); }
.tiles-right { left: calc(1196 * var(--k)); top: calc(180 * var(--k)); width: calc(340 * var(--k)); height: calc(736 * var(--k)); }

.headline { position: absolute; left: calc(318 * var(--k)); top: calc(110 * var(--k)); width: calc(910 * var(--k)); margin: 0;
  font-size: calc(83 * var(--k)); line-height: 0.96; font-weight: 900; letter-spacing: -0.02em; text-align: center; color: var(--paper); }
.subline { position: absolute; left: calc(318 * var(--k)); top: calc(287 * var(--k)); width: calc(910 * var(--k)); margin: 0;
  font-size: calc(26 * var(--k)); line-height: 1.4; text-align: center; color: var(--mist); letter-spacing: -0.005em; }
.cta { position: absolute; left: calc(540 * var(--k)); top: calc(341 * var(--k)); width: calc(455 * var(--k)); height: calc(53 * var(--k));
  display: flex; align-items: center; justify-content: center; border-radius: calc(5 * var(--k));
  background: var(--paper); color: var(--ink); font-size: calc(23 * var(--k)); font-weight: 600; letter-spacing: -0.005em;
  transition: background .25s ease-out, transform .25s ease-out; }
.cta:hover { background: #FFFFFF; transform: translateY(-1px); }

/* the HUD: built in the panel's own plane, tilted back on its bottom edge */
.hud { position: absolute; left: calc(262 * var(--k)); top: calc(378 * var(--k)); width: calc(1012 * var(--k)); height: calc(546 * var(--k));
  perspective: calc(1900 * var(--k)); perspective-origin: 50% 0%; }
.hud-panel { position: absolute; inset: 0; border-radius: calc(30 * var(--k)); background: linear-gradient(#1D1E24, #18191E);
  border: 1px solid #34363C; box-shadow: 0 calc(30 * var(--k)) calc(60 * var(--k)) rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform-origin: 50% 100%; transform: rotateX(9deg); }
.hud-head { position: relative; height: calc(108 * var(--k)); border-bottom: 1px solid var(--line); }
.hud-brand { position: absolute; left: calc(88 * var(--k)); top: calc(32 * var(--k)); display: flex; align-items: center; gap: calc(10 * var(--k)); }
.hud-brand img { width: calc(64 * var(--k)); height: calc(64 * var(--k)); }
.hud-brand span { font-size: calc(22 * var(--k)); font-weight: 600; letter-spacing: 0.2em; }
.hud-tabs { position: absolute; left: calc(436 * var(--k)); top: calc(36 * var(--k)); width: calc(446 * var(--k)); height: calc(72 * var(--k)); display: grid; grid-template-columns: 147fr 162fr 137fr;
  transform: rotate(-1.6deg); transform-origin: 0 100%; }
.tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--k)); border-right: 1px solid var(--line);
  font-size: calc(19.5 * var(--k)); font-weight: 500; letter-spacing: 0.1em; color: #9EA0A6; }
.tab:last-child { border-right: 0; }
.tab.is-on { color: var(--paper); font-weight: 600; box-shadow: inset 0 calc(-6 * var(--k)) 0 var(--signal); }
.badge { display: inline-grid; place-items: center; width: calc(28 * var(--k)); height: calc(28 * var(--k)); border-radius: 50%;
  background: var(--signal); color: var(--paper); font-size: calc(16 * var(--k)); font-weight: 700; letter-spacing: 0; }

.feed { list-style: none; margin: 0; padding: calc(4 * var(--k)) calc(51 * var(--k)) 0; display: grid; gap: calc(2 * var(--k)); }
.card { position: relative; height: calc(82 * var(--k)); display: grid; align-items: center;
  grid-template-columns: calc(44 * var(--k)) calc(68 * var(--k)) calc(234 * var(--k)) calc(100 * var(--k)) 1fr calc(150 * var(--k)) calc(42 * var(--k));
  column-gap: calc(12 * var(--k)); padding-left: calc(10 * var(--k));
  border: 1px solid var(--line); border-radius: calc(10 * var(--k)); background: #1B1C22; }
.dot { justify-self: center; width: calc(14 * var(--k)); height: calc(14 * var(--k)); border-radius: 50%; }
.unread .dot { background: var(--signal); }
.logo { width: calc(64 * var(--k)); height: calc(64 * var(--k)); display: grid; place-items: center; border-radius: calc(6 * var(--k));
  background: #121317; border: 1px solid #383A40; color: var(--paper); }
.logo svg { width: 76%; height: 76%; stroke-width: 1.25; }
.who { display: grid; gap: calc(6 * var(--k)); }
.who b { font-size: calc(19 * var(--k)); font-weight: 600; letter-spacing: 0.14em; }
.who small { font-size: calc(12.5 * var(--k)); letter-spacing: 0.14em; color: var(--slate); }
.tag { justify-self: start; padding: calc(7 * var(--k)) calc(13 * var(--k)); border-radius: calc(4 * var(--k)); background: #3A3C42;
  font-size: calc(15 * var(--k)); font-weight: 600; letter-spacing: 0.06em; color: #E9E9EA; }
.tag.sale { background: var(--signal); color: #FFF6F4; }
.line { font-size: calc(22 * var(--k)); font-weight: 700; letter-spacing: 0.07em; }
.when { justify-self: end; font-size: calc(15.5 * var(--k)); letter-spacing: 0.12em; color: #BBBDC2; }
.chev { justify-self: center; width: calc(20 * var(--k)); height: calc(20 * var(--k)); color: #A4A6AC; }

.footnote { position: absolute; left: calc(282 * var(--k)); top: calc(960 * var(--k)); width: calc(972 * var(--k)); height: calc(32 * var(--k)); margin: 0;
  display: flex; align-items: center; justify-content: center; gap: calc(28 * var(--k)); font-size: calc(15 * var(--k)); color: #B2B3B7; }
.footnote::before, .footnote::after { content: ''; flex: 1; height: 1px; background: #3A3B40; }
.footnote i { width: 1px; height: calc(26 * var(--k)); background: #4A4B50; }
.foot-domain { position: absolute; left: calc(1370 * var(--k)); top: calc(961 * var(--k)); height: calc(28 * var(--k)); display: flex; align-items: center;
  font-size: calc(15.5 * var(--k)); font-weight: 500; color: #BEBFC3; }

/* ---------- below the first viewport: normal flow on the same palette, corners and hairlines ---------- */
.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }
main > section:not(.hero) { padding-block: clamp(80px, 11vw, 150px) 0; }
h2 { margin: 0; font-size: clamp(36px, 4.4vw, 62px); line-height: 1.02; font-weight: 900; letter-spacing: -0.03em; text-wrap: balance; }
h3 { margin: 0 0 18px; font-size: 15px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
p { text-wrap: pretty; }
.lede, .slots-copy p, .abilities dd, .pact li, .qa p, .optout { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6; color: var(--mist); }

/* the 42 group slots */
.slots-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.slots-count { margin: 0; font-size: clamp(19px, 1.6vw, 24px); font-weight: 500; }
.slots-count b { font-variant-numeric: tabular-nums; font-weight: 800; }
.slots-free { margin: 0; font-size: 17px; color: var(--slate); font-variant-numeric: tabular-nums; }
.slot-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(42, 1fr); gap: 6px; }
.slot { aspect-ratio: 1; display: grid; place-items: center; border-radius: 4px; border: 1px solid #4A4C52;
  font-size: clamp(9px, .8vw, 13px); font-weight: 700; color: var(--ink);
  transition: background .35s cubic-bezier(.16, 1, .3, 1), border-color .35s, color .35s, transform .35s cubic-bezier(.16, 1, .3, 1); }
.slot.own { background: var(--paper); border-color: var(--paper); }
.slot.store { background: #3A3C42; border-color: #3A3C42; color: #C9CACD; }
.slot.leaving { transform: translateY(-6px) scale(.86); background: transparent; border-color: #4A4C52; color: transparent; }
.slots-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); margin-top: clamp(48px, 6vw, 80px); align-items: start; }
.slots-copy p { margin: 0 0 16px; max-width: 46ch; }
.replay { margin-top: 8px; font: 600 15px var(--font); color: var(--paper); background: none; border: 1px solid #4A4C52; border-radius: 6px; padding: 10px 16px; cursor: pointer; }
.replay:hover { border-color: var(--paper); }

/* how it works: one notice, three states */
.how .lede { max-width: 58ch; margin: 22px 0 56px; }
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.stage { position: relative; margin: 0; display: grid; grid-template-rows: 1fr auto; gap: 22px; }
.stage + .stage::before { content: ''; position: absolute; left: -38px; top: 104px; width: 18px; height: 18px;
  border-top: 2px solid #5A5C62; border-right: 2px solid #5A5C62; transform: rotate(45deg); }
.stage figcaption { font-size: 17px; line-height: 1.55; color: var(--mist); }
.stage figcaption b { color: var(--paper); font-weight: 600; }
.notice, .sorted, .result { border: 1px solid var(--line); border-radius: 12px; background: #1B1C22; padding: 22px; min-height: 230px; }
.notice-meta { margin: 0 0 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--slate); }
.notice-subject { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.notice-body { margin: 0; font-size: 15px; line-height: 1.55; color: var(--mist); overflow-wrap: anywhere; }
.sorted dl { margin: 0; display: grid; gap: 14px; }
.sorted dl div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sorted dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.sorted dt { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.sorted dd { margin: 0; font-size: 16px; font-weight: 600; text-align: right; }
.stage .tag, .mini-card .tag { padding: 5px 10px; font-size: 13px; }
.result { display: grid; align-content: center; gap: 22px; }
.mini-card { display: grid; grid-template-columns: 12px 40px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: center;
  padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #18191E; }
.mini-card .dot { grid-row: 1 / 3; width: 10px; height: 10px; }
.dot.on { background: var(--signal); }
.mini-logo { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 6px; background: #121317; border: 1px solid #383A40;
  font: 500 19px Georgia, 'Times New Roman', serif; color: var(--paper); }
.mini-card .mini-logo { grid-row: 1 / 3; }
.mini-who { font-size: 15px; font-weight: 600; letter-spacing: 0.12em; }
.mini-card .tag { justify-self: end; }
.mini-line { font-size: 16px; font-weight: 700; letter-spacing: 0.06em; }
.mini-when { justify-self: end; font-size: 13px; letter-spacing: 0.1em; color: #BBBDC2; }
.chat-line { margin: 0; font-size: 14px; line-height: 1.5; color: #8FD3A7; }

/* the HUD's other screen, described in words beside it */
.hud-more { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.abilities { margin: 36px 0 0; display: grid; gap: 22px; }
.abilities div { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.abilities div:last-child { border-bottom: 0; }
.abilities dt { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.abilities dd { margin: 0; max-width: 52ch; }
.hud-small { border: 1px solid #34363C; border-radius: 22px; background: linear-gradient(#1D1E24, #18191E); padding: 18px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); }
.hs-head { display: flex; align-items: center; gap: 4px; padding: 4px 6px 14px; border-bottom: 1px solid var(--line); }
.hs-head img { margin-right: 10px; }
.hs-tab { flex: 1; text-align: center; font-size: 13px; font-weight: 500; letter-spacing: 0.1em; color: #9EA0A6; padding: 8px 0; }
.hs-tab.is-on { color: var(--paper); box-shadow: inset 0 -3px 0 var(--signal); }
.hs-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 4px 10px; font-size: 12px; letter-spacing: 0.1em; color: var(--slate); }
.hs-filter span:not(.az) { padding: 5px 10px; border: 1px solid #3A3C42; border-radius: 4px; }
.hs-filter .is-on { color: var(--paper); border-color: #6A6C72; }
.hs-filter .az { flex-basis: 100%; font-size: 11px; letter-spacing: 0.32em; color: #6E717A; padding-top: 6px; }
.hs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hs-list li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; padding: 8px 12px 8px 8px;
  border: 1px solid var(--line); border-radius: 10px; background: #1B1C22; }
.hs-list b { font-size: 14px; font-weight: 600; letter-spacing: 0.12em; }
.state { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; padding: 5px 9px; border-radius: 4px; background: #2C2E34; color: #C9CACD; }
.state.muted { background: transparent; border: 1px solid #3A3C42; color: #7C7E85; }
.hs-add { margin-top: 12px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; padding: 13px; border-radius: 8px; background: var(--paper); color: var(--ink); }

/* for brands */
.brands h2 { max-width: 20ch; }
.pact { display: grid; grid-template-columns: 1fr 1fr; margin-top: 48px; border-top: 1px solid var(--line); }
.pact > div { padding: 32px 40px 8px 0; }
.pact > div + div { padding-left: 40px; border-left: 1px solid var(--line); }
.pact ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.pact li { padding-left: 22px; position: relative; color: var(--paper); }
.pact li::before { content: ''; position: absolute; left: 0; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: #6A6C72; }
.optout { margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.optout b { color: var(--paper); font-weight: 600; }

/* questions */
.qa { margin-top: 40px; border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; padding: 26px 48px 26px 0; position: relative; font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -9px;
  border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate); transform: rotate(45deg); transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.qa details[open] summary::after { transform: rotate(225deg); margin-top: -3px; }
.qa summary:hover { color: #FFFFFF; }
.qa p { margin: -6px 0 26px; max-width: 64ch; }

/* close and footer */
main > section.close { padding-bottom: clamp(90px, 10vw, 140px); }
.close { display: grid; justify-items: center; text-align: center; gap: 28px; }
.close h2 { font-size: clamp(44px, 6vw, 86px); }
.cta-inline { display: inline-flex; align-items: center; height: 56px; padding: 0 30px; border-radius: 6px; background: var(--paper); color: var(--ink);
  font-size: 19px; font-weight: 600; white-space: nowrap; transition: background .25s ease-out, transform .25s ease-out; }
.cta-inline:hover { background: #FFFFFF; transform: translateY(-1px); }
.foot { display: grid; grid-template-columns: auto 1fr; gap: 18px 40px; align-items: center; padding: 36px 0 48px; border-top: 1px solid var(--line); }
.nav-brand-s { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; letter-spacing: 0.18em; }
.foot nav { justify-self: end; display: flex; flex-wrap: wrap; gap: 26px; font-size: 15px; color: #C9CACD; }
.foot nav a:hover { color: var(--paper); }
.legal { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--slate); }

/* motion: the notice slips' canvas sits over the HUD; the first card pings when one lands; tiles ease with the pointer */
.notices3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.headline, .subline, .cta { z-index: 5; }
.tiles { transition: transform .9s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.card.ping .dot { animation: ping .9s cubic-bezier(.16, 1, .3, 1); }
.card.ping { animation: lift .9s cubic-bezier(.16, 1, .3, 1); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 61, .7); } 100% { box-shadow: 0 0 0 calc(18 * var(--k)) rgba(255, 77, 61, 0); } }
@keyframes lift { 0% { background: #24252C; } 100% { background: #1B1C22; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .slot-row { grid-template-columns: repeat(21, 1fr); }
  .slot { font-size: 11px; }
  .flow { grid-template-columns: 1fr; gap: 56px; }
  .stage + .stage::before { left: 50%; top: -38px; transform: translateX(-50%) rotate(135deg); }
  .hud-more { grid-template-columns: 1fr; }
  .hud-small { max-width: 520px; }
}

/* phones and portrait tablets: the comp frame gives way to a stacked first viewport */
@media (max-width: 820px) {
  .nav { position: relative; left: 0; transform: none; width: 100%; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
  .nav::after { left: 0; width: 100%; top: auto; bottom: 0; }
  .nav-brand, .nav-market { position: static; height: auto; }
  .nav-brand { gap: 8px; }
  .nav-mark { width: 40px; height: 40px; }
  .nav-wordmark { font-size: 17px; }
  .nav-links, .nav-divider { display: none; }
  .nav-market { font-size: 16px; }

  .hero { height: auto; background: radial-gradient(90% 60% at 50% 78%, #1C1D22 0%, var(--ink) 75%); }
  .frame { position: relative; left: 0; width: 100%; height: auto; transform: none; padding: 40px 16px 32px; display: flex; flex-direction: column; align-items: center; }
  .tiles { display: none; }
  .headline, .subline, .cta, .footnote, .foot-domain { position: static; width: auto; height: auto; }
  .headline { font-size: clamp(40px, 11.5vw, 68px); line-height: 0.98; }
  .subline { margin-top: 18px; font-size: 18px; max-width: 30ch; }
  .cta { margin-top: 26px; width: 100%; max-width: 420px; height: 54px; font-size: 18px; border-radius: 6px; }

  .hud { position: relative; left: 0; top: 0; width: 100%; height: auto; margin-top: 36px; perspective: none; }
  .hud-panel { position: relative; transform: none; border-radius: 20px; }
  .hud-head { height: auto; display: flex; flex-direction: column; gap: 14px; padding: 16px 14px 0; }
  .hud-brand, .hud-tabs { position: static; transform: none; width: auto; height: auto; }
  .hud-brand img { width: 34px; height: 34px; }
  .hud-brand span { font-size: 14px; }
  .hud-tabs { height: 46px; }
  .tab { font-size: 12px; gap: 6px; }
  .badge { width: 20px; height: 20px; font-size: 11px; }
  .tab.is-on { box-shadow: inset 0 -3px 0 var(--signal); }
  .feed { padding: 10px; gap: 6px; }
  .card { height: auto; padding: 10px 12px 10px 4px; column-gap: 10px; row-gap: 4px;
    grid-template-columns: 18px 40px 1fr auto; grid-template-areas: "dot logo who tag" "dot logo line when"; border-radius: 10px; }
  .card .dot { grid-area: dot; width: 8px; height: 8px; }
  .card .logo { grid-area: logo; width: 40px; height: 40px; }
  .card .who { grid-area: who; }
  .card .tag { grid-area: tag; justify-self: end; padding: 4px 8px; font-size: 11px; }
  .card .line { grid-area: line; font-size: 15px; }
  .card .when { grid-area: when; font-size: 11px; }
  .who b { font-size: 13px; }
  .who small, .chev { display: none; }

  .footnote { margin-top: 26px; flex-direction: column; gap: 6px; font-size: 13px; text-align: center; }
  .footnote::before, .footnote::after, .footnote i { display: none; }
  .foot-domain { display: none; }

  .slot-row { grid-template-columns: repeat(14, 1fr); gap: 5px; }
  .slots-head { flex-direction: column; gap: 4px; }
  .slots-body { grid-template-columns: 1fr; gap: 24px; }
  .pact { grid-template-columns: 1fr; }
  .pact > div { padding: 28px 0 8px; }
  .pact > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .foot { grid-template-columns: 1fr; }
  .foot nav { justify-self: start; gap: 18px; }
  .cta-inline { width: 100%; max-width: 420px; justify-content: center; padding: 0 16px; font-size: 17px; }
}