/* ============================================================
   ATLAS & GUIDE — shared design system
   The palette IS the book's (pipeline/templates/design/atlas.css):
   page navy #0D1626, gallery ground #070C15, bone ink, copper as
   the one accent. The site and the object a customer holds are
   the same room. docs/17: instrument not incense · dark is a room,
   not a mood · restraint is the luxury (accent under 10%).
   ============================================================ */
:root {
  --bg: #0D1626;          /* the book's page ground                  */
  --bg-2: #070C15;        /* the book's gallery/gutter — deeper      */
  --gold: #A8683A;        /* copper: the book's "you" colour         */
  --gold-bright: #C08A5F; /* copper-soft                             */
  --copper: #A8683A;
  --rule: #22303F;        /* the book's hairline rule                */
  --green: #8DBF97;       /* a photo that passed (intake), never an accent */
  --ink: #EDEFF3;         /* bone                                    */
  --ink-dim: rgba(237,239,243,.78);
  --ink-faint: rgba(237,239,243,.50);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;   /* the book's own family, not Inter (2026-10-09) */
  --mono: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif; /* founder 2026-10-02: no typewriter voice anywhere */
}
/* ═══ THE TYPE LAW ═══════════════════════════════════════════════════
   Matched to the frozen Claude Design canvas (atlas-design.dc.html):
   IBM Plex Mono ×79 · Cormorant Garamond ×32 · Inter ×2 · weight 300 ×78.
   The design is MONO-LED and LIGHT. So:
     Cormorant 300   display — titles, ledes (italic), maxims, numerals
     Plex Mono 300   the workhorse — kickers, labels, buttons, captions,
                     specs, prices, field labels, nav, short copy
     Inter 300       long reading paragraphs ONLY
   Nothing on the site sets heavier than 400. Bold display is banned
   (docs/17 §B). Letterspacing on mono small caps: .14em–.3em, per canvas.
   ══════════════════════════════════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  /* opaque base lives HERE (z: auto, behind negative-z layers) — never above the bg video.
     One navy, everywhere: the book's ground gate says every blue page is the same blue,
     so the site holds a single flat ground rather than drifting through three. */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;   /* founder 2026-10-02: one body weight everywhere */
  line-height: 1.7;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: var(--gold-bright); }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 3px;
}

/* ---------- ambient cosmic background (Style B video, subtle) ---------- */
.cosmic-bg {
  position: fixed; inset: 0; z-index: -3; width: 100%; height: 100%;
  object-fit: cover; background-size: cover; background-position: center;
  opacity: .40; pointer-events: none;
}
.cosmic-bg.feature { opacity: .72; }
.cosmic-bg-veil {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(10,10,15,.30), rgba(6,6,10,.74) 82%),
    linear-gradient(180deg, rgba(6,6,10,.55), rgba(10,10,15,.48));
}
body.bg-feature .cosmic-bg-veil {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(10,10,15,.18), rgba(6,6,10,.58) 88%),
    linear-gradient(180deg, rgba(6,6,10,.30) 0%, transparent 30%, transparent 70%, rgba(10,10,15,.6) 100%);
}

/* ---------- starfield specks (transparent overlay — must NEVER occlude the bg video) ---------- */
/* Stars are plain round points in bone, with one copper among them.
   The violet and green specks that used to sit here broke two explicit bans
   at once — docs/17 §C bans violet/purple as a mysticism cue, and the §H
   DON'T column reads "a void with floating symbols". They were painting on
   every page that loads this sheet, so the fix belongs here rather than in a
   per-page override. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(237,239,243,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, rgba(237,239,243,.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 64%, rgba(168,104,58,.42) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 82%, rgba(237,239,243,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 48%, rgba(237,239,243,.26) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 45% 38%, rgba(237,239,243,.28) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 58%, rgba(237,239,243,.24) 50%, transparent 51%);
}
/* a page that asks for no background gets none: no starfield either (2026-10-09) */
body[data-bg="none"]::after { content: none; }

/* ---------- header ---------- */
header.site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.4rem;
  padding: 1.1rem 2.4rem;
  background: linear-gradient(180deg, rgba(5,5,8,.92), rgba(5,5,8,.72) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wordmark {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
header.site nav { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-left: auto; }
header.site nav a {
  color: var(--ink-dim); text-decoration: none;
  font-family: var(--mono); font-weight: 500;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  transition: color .3s; text-shadow: 0 1px 5px rgba(0,0,0,.85); white-space: nowrap;
}
header.site nav a:hover, header.site nav a[aria-current="page"] { color: var(--ink); }
header.site nav a[aria-current="page"] { border-bottom: 1px solid var(--copper); padding-bottom: 2px; }
.header-cta {
  display: inline-block; white-space: nowrap;
  font-family: var(--mono); font-weight: 600;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-bright); background: none; border: 1px solid var(--copper);
  padding: .7rem 1.3rem .62rem; border-radius: 2px; text-decoration: none;
  transition: background .3s cubic-bezier(.16,1,.3,1), color .3s cubic-bezier(.16,1,.3,1);
}
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: auto;
  background: none; border: 0; color: var(--gold-bright); cursor: pointer;
}
@media (max-width: 880px) {
  header.site { flex-wrap: wrap; padding: 1rem 1.3rem; }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  header.site nav {
    display: none; order: 4; flex-basis: 100%; flex-direction: column; gap: .1rem;
    margin: .8rem 0 0; padding: .5rem .9rem;
    background: rgba(7,12,21,.97); border: 1px solid var(--rule); border-radius: 2px;
  }
  body.nav-open header.site nav { display: flex; }
  header.site nav a { padding: .8rem .3rem; font-size: .85rem; }
}

/* ---------- layout ---------- */
main.site { position: relative; z-index: 1; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 2rem; }
section.band { padding: 5rem 0; position: relative; }
section.band.tight { padding: 3.2rem 0; }

/* hero banner (image pages) */
.page-hero {
  position: relative; min-height: 62dvh; min-height: 62vh;
  display: flex; align-items: flex-end;
  padding: 8.5rem 0 3.5rem;
  isolation: isolate;
}
.page-hero .hero-img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,15,.55) 0%, rgba(10,10,15,.15) 40%, rgba(10,10,15,.88) 92%, var(--bg) 100%);
}
/* the book's instrument voice: mono small caps, letterspaced, copper */
.kicker {
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 1rem; font-weight: 500;
}
/* Display weight follows the book: Cormorant at 300, line-height 1.14 */
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.14; color: var(--ink); }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 1rem; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin-bottom: 1rem; }
h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.lede {
  font-family: var(--sans); font-weight: 400;
  font-size: 1.15rem; line-height: 1.65; color: var(--ink-dim); max-width: 640px;
}
.lede strong, p strong { color: var(--ink); font-weight: 400; }
p { color: var(--ink-dim); }

/* ---------- panel ----------
   A plain navy panel with the book's hairline (2026-10-09). It was frosted glass: a blurred,
   tinted gradient with a gold-violet-green border, the most template-looking thing on the
   site, and its ::before masked out the step numbers on how-it-works. */
.glass {
  position: relative;
  background: #101B2E;
  border: 1px solid var(--rule);
  border-radius: 3px; padding: 2.2rem;
}

/* ---------- buttons ---------- */
.cta {
  display: inline-block; cursor: pointer;
  font-family: var(--mono); font-weight: 600;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-bright); background: none;
  border: 1px solid var(--copper); border-radius: 2px;
  padding: .95rem 1.9rem .88rem; text-decoration: none;
  transition: background .3s cubic-bezier(.16,1,.3,1), color .3s cubic-bezier(.16,1,.3,1), border-color .3s cubic-bezier(.16,1,.3,1);
}
.cta:hover { background: var(--copper); color: var(--bg); }
.cta:active { background: var(--gold-bright); }
.cta.ghost {
  /* the secondary action is frame, not you: bone hairline, dim ink */
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--rule);
}
.cta.ghost:hover { background: transparent; color: var(--bone); border-color: rgba(237,239,243,.6); }
.cta.small { padding: .7rem 1.4rem; font-size: .7rem; }

/* ---------- cards & grids ---------- */
.grid { display: grid; gap: 1.4rem; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid.cols-5 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.card {
  position: relative; display: flex; flex-direction: column;
  background: rgba(14,14,22,.55);
  border: 1px solid rgba(200,162,75,.18);
  border-radius: 12px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s;
}
.card:hover { transform: translateY(-4px); border-color: rgba(229,200,119,.5); box-shadow: 0 14px 44px rgba(0,0,0,.5); }
.card .card-img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.card .card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.card .card-body h3 { color: var(--gold-bright); }
.card .card-body p { font-size: .92rem; color: var(--ink-faint); }
.card .card-more { margin-top: auto; padding-top: .8rem; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

/* features list */
ul.features { list-style: none; margin: 1rem 0 1.6rem; }
ul.features li { padding: .5rem 0 .5rem 1.6rem; position: relative; color: var(--ink-dim); }
ul.features li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--gold);
}

/* steps */
.steps { counter-reset: step; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step { counter-increment: step; position: relative; padding: 1.6rem 1.5rem 1.5rem; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif); font-size: 2.2rem; color: var(--gold);
  display: block; margin-bottom: .5rem; opacity: .9;
}

/* price tiers */
.tier { text-align: center; padding: 2.2rem 1.6rem; }
.tier .price { font-family: var(--serif); font-size: 2.3rem; color: #fff; margin: .4rem 0; }
.tier .per { font-size: .8rem; color: var(--ink-faint); }
.tier.hero-tier { border: 1px solid rgba(229,200,119,.65); box-shadow: 0 0 44px rgba(200,162,75,.12); }
.tier .tag { display: inline-block; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--bg); background: var(--gold-bright); border-radius: 2px; padding: .2rem .6rem; margin-bottom: .8rem; font-weight: 400; }

/* chips (selectors) */
.chip {
  display: inline-block; cursor: pointer; user-select: none;
  font-family: var(--mono); font-weight: 500;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 2px;
  background: rgba(7,12,21,.5); color: var(--ink-dim);
  padding: .6rem 1rem .54rem; margin: .25rem .35rem .25rem 0;
  transition: border-color .25s cubic-bezier(.16,1,.3,1), color .25s cubic-bezier(.16,1,.3,1), background .25s cubic-bezier(.16,1,.3,1);
}
.chip:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.chip.selected, .chip[aria-pressed="true"] {
  background: var(--gold-bright);
  color: var(--bg); border-color: transparent; font-weight: 400;
}

/* explainer video block */
.explainer {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(200,162,75,.25);
  background: #000; aspect-ratio: 16/9;
}
.explainer video { width: 100%; height: 100%; object-fit: cover; }
.explainer .play-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(5,5,8,.15), rgba(5,5,8,.4));
  cursor: pointer; border: 0; width: 100%;
}
.explainer .play-badge span {
  display: flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(10,10,15,.55); border: 1.5px solid var(--gold-bright);
  backdrop-filter: blur(6px); transition: transform .3s;
}
.explainer .play-badge:hover span { transform: scale(1.08); }
.explainer .play-badge svg { margin-left: 4px; }
.explainer.playing .play-badge { display: none; }
.vid-note { font-size: .74rem; color: var(--ink-faint); margin-top: .55rem; letter-spacing: .06em; }

/* forms */
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-family: var(--mono); font-weight: 500; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .45rem; }
.field input, .field select, .field textarea {
  width: 100%; background: rgba(255,255,255,.045);
  border: 1px solid rgba(200,162,75,.35); border-radius: 4px;
  color: var(--ink); font: inherit; font-size: .95rem; padding: .9rem 1.1rem;
}
.field .hint { font-size: .78rem; color: var(--ink-faint); margin-top: .35rem; }
/* AN OPEN DROPDOWN MUST BE READABLE (founder 2026-10-09, "the countries in this picker aren't
   visible"): a select inherits bone text and Windows paints the open list on white. */
.field select { color-scheme: dark; background-color: #16203A; }
.field select option { background: #0D1626; color: #EDEFF3; }

/* trust strip */
.trust-strip {
  border-top: 1px solid rgba(200,162,75,.16); border-bottom: 1px solid rgba(200,162,75,.16);
  padding: 1.1rem 0; font-size: .8rem; color: var(--ink-faint); text-align: center;
}

/* divider */
.gold-rule { width: 64px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); margin: 0 0 1.4rem; border: 0; }
.center .gold-rule, .gold-rule.center { margin: 0 auto 1.4rem; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* footer */
footer.site {
  position: relative; z-index: 1; margin-top: 4rem;
  border-top: 1px solid var(--rule);
  background: var(--bg); padding: 2.2rem 0;   /* the book navy, never black */
}
footer.site .foot-min { display: flex; align-items: center; gap: 1.1rem 2rem; flex-wrap: wrap; }
.foot-mark { font-family: var(--serif); letter-spacing: .3em; text-transform: uppercase; color: var(--ink); font-size: .95rem; }
.foot-tabs { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.foot-tabs a { color: var(--ink-faint); text-decoration: none; font-size: .85rem; }
.foot-tabs a:hover { color: var(--ink); }
.foot-copy { margin-left: auto; color: var(--ink-faint); font-size: .8rem; }
@media (max-width: 760px) { .foot-copy { margin-left: 0; } }
footer.site .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
footer.site h4 { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
footer.site a { display: block; color: var(--ink-faint); text-decoration: none; font-size: .88rem; padding: .22rem 0; }
footer.site a:hover { color: var(--gold-bright); }
footer.site .legal { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.06); font-size: .76rem; color: var(--ink-faint); text-align: center; line-height: 1.8; }

.center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }


/* ═══ 2026-10-02 final sweep: ONE button system for the whole site ═══
   Primary = solid copper, sentence case, Plex Sans 600 (the product pages' .pr-btn).
   Secondary = bone outline, same shape. No tiny tracked capitals on a button. */
.cta, .header-cta {
  font-family: var(--sans); font-weight: 600; font-size: 1rem; letter-spacing: 0; text-transform: none;
  background: #B8784D; color: #0D1626; border: 0; border-radius: 3px;
  padding: .9rem 1.6rem;
}
/* buttons carry #B8784D, a shade of the copper that reads at 5:1 under navy text (#A8683A was 4.06, 2026-10-09) */
.cta:hover, .header-cta:hover { background: var(--gold-bright); color: #0D1626; }
.cta.ghost {
  background: transparent; color: var(--ink); border: 1px solid rgba(237,239,243,.35);
}
.cta.ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.header-cta { font-size: .88rem; padding: .62rem 1.1rem; }
/* the header's button is bone, so each page's own buy button is the only copper on screen
   (audit 2026-10-10; index.html's header already did this) */
.header-cta { background: transparent; color: var(--ink); border: 1px solid rgba(237,239,243,.45); font-weight: 500; }
.header-cta:hover { background: transparent; color: var(--ink); border-color: var(--ink); }


/* ═══ 2026-10-02 mobile pass: 12px floor for text, 44px floor for taps ═══ */
.kicker, .field label, .lbl { font-size: max(.78rem, 12px); }
/* a line that greets the reader by name above a form's heading: said, not stamped (audit 2026-10-10) */
.kicker.lead-in, main.site .kicker.lead-in { font-family: var(--sans); text-transform: none; letter-spacing: 0;
  font-size: 1.02rem; font-weight: 400; color: var(--ink-dim); margin-bottom: .6rem; }
.hint, .note, small { font-size: max(.8rem, 12px); }
@media (max-width: 760px) {
  .header-cta { min-height: 44px; display: inline-flex; align-items: center; }
  .chip { min-height: 44px; }
}

/* ═══ the 12px floor, final word (2026-10-02 mobile pass). Written with a
   html body prefix so it outranks each page's own <style> block. ═══ */
html body .chip,
html body main.site .chip { font-size: max(.8rem, 12px); }
html body main.site .line-card h3,
html body .line-src,
html body #settledCount,
html body main.site .hint,
html body .flag-panel .why { font-size: 12px; }
html body .stepper span,
html body #stepper .wz-count,
html body #stepper .wz-time,
html body #stepper .wz-chip { font-size: 12px; }
html body .spec-row, html body .spec-row small { font-size: max(.82rem, 12px); }

/* checkout total label + order rows meet the floor */
html body .ord-foot, html body .ord-foot span { font-size: max(.8rem, 12px); }

/* 2026-10-02 mobile pass: one header row on a phone, logo · Start yours · menu */
@media (max-width: 880px) {
  header.site .wordmark { order: 1; font-size: .92rem; letter-spacing: .2em; }
  header.site .header-cta { order: 2; margin-left: auto; display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 .95rem; font-size: .88rem; white-space: nowrap; }
  header.site .nav-toggle { order: 3; margin-left: .2rem; }
  header.site nav { order: 4; }
}
@media (max-width: 340px) { header.site .header-cta { display: none; } }
@media (max-width: 880px) {
  header.site { gap: .45rem; padding-left: 1.1rem; padding-right: .8rem; }
  header.site .wordmark { font-size: .86rem; letter-spacing: .18em; }
  header.site .header-cta { padding: 0 .85rem; }
}

/* 2026-10-02: the order summary and option chips speak sentence case, like every
   other page (no tracked capitals for values or choices) */
html body .chip, html body main.site .chip { text-transform: none; letter-spacing: 0; font-weight: 600; font-family: var(--sans); }
html body .spec-row { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: max(.9rem, 12px); }
html body .ord-foot strong { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-weight: 600; font-size: .95rem; color: var(--ink); }
html body #ordPrice, html body #ordTotal { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }

/* 2026-10-02: no eyebrow labels. The few .kicker titles left (checkout's card
   titles, the legal pages' Contents) read as plain sentence-case headings. */
html body .kicker { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-weight: 600;
  font-size: 1rem; color: var(--ink); }


/* ═══ two ways to give (2026-10-03): the $5 printed card beside the free email ═══ */
.give-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin-top: 1.4rem; }
.give-ways .gw { background: #101B2E; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.give-ways .gw img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.give-ways .gw-body { padding: 1.1rem 1.3rem 1.4rem; }
.give-ways .gw-price { font-family: var(--sans); font-weight: 600; font-size: 1.35rem; color: var(--ink); margin: 0 0 .2rem; }
.give-ways h3 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--ink); margin: 0 0 .45rem; }
.give-ways p { color: rgba(237,239,243,.8); }
.gw-note { margin-top: .9rem; }
.gw-wide { width: 100%; border-radius: 4px; margin-top: 1.4rem; display: block; }
@media (max-width: 760px) { .give-ways { grid-template-columns: 1fr; } }