/* Dua trade site — dark premium theme.
   One stylesheet for eleven generated pages. Written by hand; build.py owns the
   markup. Colour, type and spacing are tokens on :root so a rebrand is one edit.
   The palette is taken from the packaging: near-black, warm gold, and the tan
   the product photography is shot on — product shots sit on tan tiles so the
   background of the photograph and the tile are the same material. */

:root{
  --ink:#08080A; --ink-2:#0F0F12; --ink-3:#16161A; --line:#24242A;
  --cream:#F4EDE4; --cream-dim:#C9C2B8; --muted:#8C8880;
  --gold:#C9A227; --gold-lite:#E3C46B; --tan:#D9B08C; --tan-deep:#B0824F;
  --paan:#D6336C; --mint:#2BB3A3; --fruit:#E8663D; --premium:#8B6CC1;
  --wrap:1340px; --r:14px; --r-lg:22px;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --shadow:0 18px 50px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--sans);font-weight:300;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.2rem);letter-spacing:-.01em}
h2{font-size:clamp(1.8rem,3.6vw,3rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--gold);color:#000;padding:10px 16px;border-radius:8px}
:focus-visible{outline:2px solid var(--gold-lite);outline-offset:3px}

/* statutory strip — required on every page, top and bottom */
.warnbar{
  background:#1A1206;color:#E8D3A2;border-bottom:1px solid #2E2310;
  font-size:.72rem;letter-spacing:.04em;text-align:center;padding:7px 16px;
}

/* masthead */
.mast{position:sticky;top:0;z-index:40;background:rgba(8,8,10,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* grows with the logo so the taller mark is not cramped against the edges */
.mast__in{display:flex;align-items:center;gap:20px;min-height:clamp(88px,6vw,114px)}
.brand__mark{height:clamp(60px,4.2vw,86px);width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{text-decoration:none;font-size:.86rem;font-weight:400;color:var(--cream-dim);transition:color .18s}
.nav a:hover,.nav a.is-on{color:var(--cream)}
.nav a.is-on{position:relative}
.nav a.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--gold)}
.nav__cta{margin-left:6px}
/* `.nav a` is more specific than `.btn--gold`, so without this the masthead CTA
   inherited the muted nav colour and the gold button read as gold-on-gold. */
.nav a.nav__cta{color:#141000}
.nav a.nav__cta:hover{color:#141000}
.navtoggle{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.navtoggle span{display:block;width:22px;height:2px;background:var(--cream);margin:4px 0}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:10px;text-decoration:none;cursor:pointer;
  font-size:.85rem;font-weight:500;letter-spacing:.02em;border:1px solid transparent;
  transition:transform .15s,background .2s,border-color .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn--gold{background:linear-gradient(135deg,#E8CE85,#C9A227);color:#141000;font-weight:600;text-shadow:none}
.btn--ghost{border-color:#3A3A42;color:var(--cream);background:rgba(255,255,255,.03)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-lite)}
.btn--wide{width:100%}

/* hero */
.hero{position:relative;overflow:hidden;background:#0B0B0D}
.hero--home{min-height:clamp(560px,82vh,880px);display:flex;align-items:center}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 22%,rgba(201,162,39,.22),transparent 60%),
    radial-gradient(90% 70% at 12% 85%,rgba(176,130,79,.18),transparent 65%),
    linear-gradient(180deg,#0B0B0D,#121014 60%,#0B0B0D);
}
.hero__scrim{position:absolute;inset:0;z-index:1;background:
  repeating-linear-gradient(115deg,rgba(255,255,255,.016) 0 2px,transparent 2px 9px)}
/* Product art standing in for the photography this brand does not have yet.
   It sits behind the copy, cropped and feathered into the gradient so the tan
   backdrop of the packshot never reads as a pasted rectangle. */
.hero__art{z-index:0;position:absolute;inset:0 0 0 auto;width:min(52%,680px);overflow:hidden}
.hero__art img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  opacity:.5;filter:saturate(.85) contrast(1.05);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%,#000 100%);
          mask-image:linear-gradient(90deg,transparent,#000 42%,#000 100%);}
.hero--art::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,#0B0B0D 8%,rgba(11,11,13,.78) 38%,rgba(11,11,13,.25) 68%,transparent);}
.hero--art .hero__copy{max-width:640px}
.hero--inner .hero__art{width:min(46%,560px);inset:0 clamp(0px,3vw,64px) 0 auto}
/* A packshot is a portrait object on a wide, short canvas: object-fit:cover
   sliced the tin off at the viewport edge. contain keeps the whole pack in
   frame and the mask still feathers it into the background. */
.hero--inner .hero__art img{opacity:.5;object-fit:contain;object-position:center;
  filter:none;
  /* contain leaves the photo's beige studio backdrop as a hard-edged panel, so
     the mask feathers all four sides rather than only the left. */
  -webkit-mask-image:radial-gradient(ellipse 62% 66% at 52% 50%,#000 34%,transparent 76%);
          mask-image:radial-gradient(ellipse 62% 66% at 52% 50%,#000 34%,transparent 76%);}
.hero--inner{min-height:clamp(340px,40vh,480px);display:flex;align-items:center}

/* A supplied lounge photograph, rather than a packshot standing in for one.
   The artwork arrives with a gold DUA lockup and headline baked into its left
   third — a different logo from the one this brand actually uses — so the image
   is anchored right and the frame crops that third away. Nothing is painted
   over it: the baked-in text is simply outside the box. */
/* Full-bleed photograph on the right, copy held to the left half so the two
   never overlap. The picture keeps its own space; the words keep theirs. */
.hero__art--photo{width:clamp(420px,52%,1120px)}
.hero__art--photo img{
  opacity:1;filter:none;object-position:50% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 100%);
          mask-image:linear-gradient(90deg,transparent,#000 22%,#000 100%);
}
.hero--art:has(.hero__art--photo)::after{
  background:linear-gradient(90deg,#0B0B0D 30%,rgba(11,11,13,.86) 44%,rgba(11,11,13,.2) 66%,transparent);
}
/* The copy stops before the photograph starts. On a 1920 display the old 680px
   cap crammed the headline into five lines, wrapped the eyebrow and stacked the
   two buttons, all beside an enormous picture — so the column grows with the
   viewport and the type grows with it. */
/* This used to set max-width:min(52%,860px) and push the column across with a
   growing padding-left. Both apply to the same border-box, so the padding ate
   the 860px cap: at 2048px the copy column was 466px, at 2560px 210px, and at
   3008px exactly 0 — the headline broke into six lines on a wide monitor. The
   wrapper is now a plain .wrap like every other page, and the column width
   lives on .hero__copy, where padding cannot consume it. */
.hero--art:has(.hero__art--photo) .hero__in{
  padding-block:clamp(48px,6vw,88px);
}
.hero--art:has(.hero__art--photo) .hero__copy{max-width:min(54%,700px)}
.hero--art:has(.hero__art--photo) h1{font-size:clamp(2.1rem,3.4vw,4rem);text-wrap:balance}
.hero--art:has(.hero__art--photo) .hero__sub{max-width:40ch;font-size:clamp(1rem,1.15vw,1.2rem)}
.hero--art:has(.hero__art--photo) .eyebrow{white-space:nowrap}
.hero--art:has(.hero__art--photo) .hero__ctas{flex-wrap:nowrap}

/* .hero__in is a .wrap and must stay one: it keeps the grid width so the hero
   copy starts on the same left edge as the masthead, every section and the
   footer. The narrow reading measure belongs on .hero__copy. width:100% is
   what stops it shrink-wrapping as a flex item of .hero--inner. */
.hero__in{position:relative;z-index:2;width:100%;
  padding:clamp(72px,12vw,150px) 20px clamp(56px,9vw,110px)}
.hero__copy{max-width:860px}
.hero--inner .hero__in{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(40px,6vw,72px)}
.eyebrow{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lite);margin:0 0 18px}
.hero__sub{font-size:clamp(1rem,1.5vw,1.12rem);color:var(--cream-dim);max-width:52ch;margin-bottom:30px}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap}

/* feature strip under the hero */
.featrow{background:var(--ink-2);border-block:1px solid var(--line)}
.featrow__in{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:26px 20px}
.feat{display:flex;gap:12px;align-items:center}
/* The glyph was 19px in a 38px tile, and only 17/24 of that svg is ink -- a
   13.5px mark in a 38px box, 35%, which read as a tiny symbol adrift in an
   empty tile. Ink is now 48% of the tile, the usual proportion for an icon in
   a container. */
.feat__ico{
  width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:11px;
  background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.3);color:var(--gold-lite);
}
.feat__ico svg{width:24px;height:24px}
/* Scoped to the text block, not `.feat span`. The tile is a <span> too, so
   `.feat span` (0,1,1) beat `.feat__ico` (0,1,0) and forced display:block over
   display:grid -- place-items:center never applied and every glyph sat in the
   tile's top-left corner, 5.5px off centre on both axes. It was also
   overriding the icon's gold with --muted. */
.feat > div strong{display:block;font-size:.85rem;font-weight:500}
.feat > div span{display:block;font-size:.74rem;color:var(--muted)}

/* sections */
/* Below the fold nearly everything is sized in rem and hits its clamp ceiling
   long before 1920, so a wide display showed small type adrift in a lot of
   space. Lifting the root lifts the whole scale together; the hero is sized in
   vw and is deliberately unaffected. */
@media (min-width:1600px){:root{font-size:17.5px}}
@media (min-width:1900px){:root{font-size:18.5px}}

.sec{padding:clamp(52px,7vw,104px) 0}
.sec--tint{background:var(--ink-2);border-block:1px solid var(--line)}
.lead{color:var(--cream-dim);max-width:62ch;margin:-.2rem 0 2rem}
.more{margin-top:32px}
/* .note follows a grid of tiles as often as it follows a paragraph, and with
   no top margin it sat flush against the cards above it. */
.note{color:var(--muted);font-size:.85rem;max-width:70ch;margin-top:26px}
.note:first-child{margin-top:0}

/* product cards — tan tile matches the photography's own backdrop */
/* Track floor is a quarter of the row, so at most four columns ever form.
   auto-fill (not auto-fit) keeps the empty tracks, which is what stops a
   one-line series such as Mint from stretching one card across the page. */
.pgrid{display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(max(240px,(100% - 60px)/4),1fr))}
.pcard{
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .2s,transform .2s;
}
.pcard:hover{border-color:rgba(201,162,39,.5);transform:translateY(-3px)}
.pcard__shot{display:block;background:var(--tan);aspect-ratio:3/4;overflow:hidden}
.pcard__shot img{width:100%;height:100%;object-fit:cover}
.pcard__noimg{
  display:grid;place-items:center;width:100%;height:100%;
  font-family:var(--serif);font-size:2.4rem;color:rgba(0,0,0,.35);
}
.pcard__body{padding:16px 16px 20px;display:block}
.pcard__name{display:block;font-family:var(--serif);font-size:1.22rem;font-weight:600}
.pcard__meta{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-lite);margin:4px 0 8px}
.pcard__blurb{display:block;font-size:.84rem;color:var(--muted)}

.pgroup{margin-bottom:56px}
.pgroup__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.pgroup__head h3{margin:0}
.pgroup__head span{font-size:.78rem;color:var(--muted)}

/* series cards */
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.scard{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
  min-height:clamp(230px,17vw,310px);padding:22px;border-radius:var(--r-lg);text-decoration:none;
  border:1px solid var(--line);overflow:hidden;background:var(--ink-3);
}
.scard::before{content:"";position:absolute;inset:0;opacity:.9;transition:opacity .25s}
.scard:hover::before{opacity:1}
.scard--paan::before{background:linear-gradient(160deg,rgba(214,51,108,.34),transparent 62%)}
.scard--mint::before{background:linear-gradient(160deg,rgba(43,179,163,.34),transparent 62%)}
.scard--fruit::before{background:linear-gradient(160deg,rgba(232,102,61,.34),transparent 62%)}
.scard--premium::before{background:linear-gradient(160deg,rgba(139,108,193,.34),transparent 62%)}
.scard__name,.scard__sub,.scard__go{position:relative}
.scard__name{font-family:var(--serif);font-size:1.5rem;font-weight:600}
.scard__sub{font-size:.85rem;color:var(--cream-dim)}
.scard__go{margin-top:10px;font-size:.8rem;color:var(--gold-lite)}

/* tiles / grids */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.tile{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.tile strong{display:block;font-family:var(--serif);font-size:1.15rem;margin-bottom:6px}
.tile span{font-size:.85rem;color:var(--muted)}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start}
/* The packshots are close to square and ran to well over the height of the
   text beside them; crop to a portrait card instead. */
.split__art img{width:100%;border-radius:var(--r-lg);border:1px solid var(--line);
  aspect-ratio:4/3;object-fit:cover;max-height:460px}

.ticks{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:10px}
.ticks li{position:relative;padding-left:28px;color:var(--cream-dim)}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:600}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 14px}
.chips li{font-size:.76rem;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--cream-dim)}
.chips--lg li{font-size:.85rem;padding:8px 16px}

/* flavour blocks */
.fblocks{display:grid;gap:26px}
.fblock{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:center;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.fblock__art{background:var(--tan);aspect-ratio:3/4;max-height:380px;overflow:hidden}
.fblock__art img{width:100%;height:100%;object-fit:cover}
.fblock__body{padding:26px 28px 26px 0}
.fblock__meta{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-lite)}
.charband{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}

/* distribution */
.towns{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.towns li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:var(--ink-3);border:1px solid var(--line)}
.towns strong{font-weight:500;font-size:.95rem}
.towns span:last-child{margin-left:auto;font-size:.76rem;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}

/* spec table */
.spec{width:100%;border-collapse:collapse;font-size:.86rem}
/* Zero the outer padding so the first column sits on the page grid and the
   last ends on it, instead of 12px inside the heading above. */
.spec th,.spec td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
.spec th:first-child,.spec td:first-child{padding-left:0}
.spec th:last-child,.spec td:last-child{padding-right:0}
.spec th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-lite);font-weight:500}
.spec td{color:var(--cream-dim)}

/* contact + form */
.contact{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:14px}
.contact li{display:grid;gap:2px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.contact strong{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-lite);font-weight:500}
.contact em{color:var(--muted);font-style:normal;font-size:.8rem}
.form{display:grid;gap:14px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:grid;gap:6px;font-size:.78rem;color:var(--cream-dim)}
.form input,.form select,.form textarea{
  font:inherit;font-size:.9rem;color:var(--cream);background:var(--ink-3);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold);outline:none}
.form [aria-invalid="true"]{border-color:#E06B6B}
.errs{display:grid;gap:4px;color:#E68B8B;font-size:.78rem}
.errs span:empty{display:none}

.prose h3{margin-top:2em}
.prose p{color:var(--cream-dim);max-width:72ch}

/* placeholders the business must replace */
.ph{border-bottom:2px dashed #E06B6B;color:#F0B4B4}

/* footer */
.foot{background:var(--ink-2);border-top:1px solid var(--line);padding-top:52px}
.foot__in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px;padding-bottom:34px}
.foot__mark{height:clamp(60px,3.8vw,78px);margin-bottom:18px}
.foot__brand p{color:var(--muted);font-size:.86rem;max-width:44ch}
.foot__legal{font-size:.78rem!important}
.foot__nav{display:grid;gap:9px;align-content:start}
.foot__nav a{text-decoration:none;font-size:.85rem;color:var(--cream-dim)}
.foot__nav a:hover{color:var(--gold-lite)}
.foot__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-block:18px;font-size:.74rem;color:var(--muted)}
.foot__warn{max-width:60ch;text-align:right}

/* age gate */
.gate{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;
  background:rgba(4,4,6,.92);backdrop-filter:blur(8px)}
.gate__card{max-width:430px;text-align:center;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 28px;box-shadow:var(--shadow)}
.gate__mark{height:88px;margin:0 auto 18px}
.gate__card h2{font-size:1.6rem}
.gate__card p{color:var(--cream-dim);font-size:.9rem}
.gate__card .btn{margin-top:10px}
.gate__warn{margin-top:18px;font-size:.72rem;color:var(--muted)}
body.is-gated{overflow:hidden}

@media (max-width:900px){
  /* On a narrow screen there is no room for two columns, so the photograph goes
     back to being a backdrop underneath the copy and the words take the full
     width — clamped to 53% they wrapped five times on a phone. */
  .hero--art:has(.hero__art--photo) .hero__in{max-width:none;padding-left:20px;padding-right:20px}
  /* the desktop column width and the side-by-side buttons both have to go:
     54% of a phone is a 250px column, and nowrap broke each button label
     onto three lines. */
  .hero--art:has(.hero__art--photo) .hero__copy{max-width:none}
  .hero--art:has(.hero__art--photo) .hero__ctas{flex-wrap:wrap}
  .hero--art:has(.hero__art--photo) .eyebrow{white-space:normal}
  .hero--art:has(.hero__art--photo) h1{font-size:clamp(2rem,7vw,2.6rem)}
  .hero--art:has(.hero__art--photo) .hero__sub{max-width:none}
  .hero__art--photo{width:100%}
  .hero__art{width:100%;opacity:.5}
  .hero__art img{-webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);mask-image:linear-gradient(180deg,transparent,#000 60%)}
  .hero__art--photo img{opacity:.42;-webkit-mask-image:none;mask-image:none}
  .hero--art:has(.hero__art--photo)::after{background:linear-gradient(180deg,rgba(11,11,13,.82),rgba(11,11,13,.94))}
  .hero--art::after{background:linear-gradient(180deg,rgba(11,11,13,.72),rgba(11,11,13,.94))}
  .hero--art .hero__copy{max-width:none}
  .split,.fblock{grid-template-columns:1fr}
  .fblock__body{padding:0 22px 24px}
  .fblock__art{max-height:300px}
  .featrow__in{grid-template-columns:repeat(2,1fr)}
  .foot__in{grid-template-columns:1fr 1fr}
  .foot__warn{text-align:left}
}
@media (max-width:720px){
  .navtoggle{display:block}
  .nav{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    gap:0;background:var(--ink-2);border-bottom:1px solid var(--line);padding:8px 20px 18px;display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav a.is-on::after{display:none}
  .nav__cta{margin-top:12px;border-bottom:0!important}
  .form .row{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr}
  .featrow__in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------------------------------------------------------- app screens --- */
/* Screenshots are 9:20 portrait. The frame is drawn in CSS rather than baked
   into the images so the same PNGs stay usable elsewhere. */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;align-items:start}
.shots--pair{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px;margin-inline:auto}
.shots--four{grid-template-columns:repeat(auto-fit,minmax(max(160px,(100% - 66px)/4),1fr))}
.shots--three{grid-template-columns:repeat(auto-fit,minmax(max(180px,(100% - 44px)/3),1fr));max-width:820px}
.shot{margin:0;text-align:center}
.shot__frame{
  display:block;border-radius:22px;overflow:hidden;background:var(--ink-3);
  border:1px solid var(--line);box-shadow:0 18px 44px rgba(0,0,0,.5);
  transition:transform .25s ease,border-color .25s ease;
}
.shot:hover .shot__frame{transform:translateY(-4px);border-color:rgba(201,162,39,.45)}
/* The captures are not all the same aspect (448x1000 next to 540x1170), which
   left the frames at different heights and the captions off a common line. */
.shot__frame img{display:block;width:100%;height:auto;aspect-ratio:9/20;object-fit:cover;object-position:top}
.shot figcaption{margin-top:12px;font-size:.8rem;color:var(--muted)}

/* The copy column is much shorter than a pair of phone frames; centring it
   left the checklist stranded halfway down the section. */
.split--app{align-items:start}
.split--app .ticks{margin-top:4px}

/* ------------------------------------------------------------- steps ------ */
.steps{list-style:none;counter-reset:none;padding:0;margin:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.steps li{position:relative;background:var(--ink-3);border:1px solid var(--line);
  border-radius:var(--r);padding:22px}
.step__n{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:999px;margin-bottom:12px;
  font-size:.8rem;font-weight:600;color:#141000;background:var(--gold)}
.steps li strong{display:block;font-family:var(--serif);font-size:1.1rem;margin-bottom:6px}
.step__d{display:block;font-size:.85rem;color:var(--muted)}

@media (max-width:900px){
  .split--app .shots--pair{margin-inline:auto}
}