/* ===========================================================================
   MulliganOS — design system
   ---------------------------------------------------------------------------
   One type scale, one spacing scale, one surface treatment. Every rule below
   is either a token or a component built out of tokens; nothing sets a stray
   pixel value, because that is how a page ends up with eleven greys and four
   card paddings.
   =========================================================================== */

:root{
  /* Brand greens, sampled from img/mulliganos-wordmark.png. --brand is the
     dark of "Mulligan"; --brand-lite is the lighter green of the capital O-S. */
  --brand:#014626;
  --brand-lite:#5cb13b;
  /* A darkened O-S for small text on light panels: the wordmark green is
     ~2.5:1 on a pale surface, which is fine for a logotype and thin for 13px. */
  --brand-lite-ink:#277a33;
  --brand-deep:#01321b;

  /* Neutrals, nudged green so the brand sits inside the page temperature
     rather than on top of it. */
  --ink:#0b1f16;
  --ink-2:#2c4137;
  --body:#4a5f56;
  --muted:#6b7f74;
  --line:#e2eae5;
  --line-soft:#eef3f0;
  --bg:#ffffff;
  --bg-tint:#f6faf7;
  --bg-deep:#07160f;

  --warn:#b4531a;
  --warn-bg:#fdf3ec;

  /* ---- type scale. Fluid, ratio ~1.25, clamped so it stops growing on a
     2560px monitor and stops shrinking below a phone. ---- */
  --fs-display:clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --fs-h2:clamp(1.85rem, 1.3rem + 2.1vw, 2.75rem);
  --fs-h3:1.3125rem;
  --fs-lede:clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body:1.0625rem;
  --fs-sm:0.9375rem;
  --fs-xs:0.8125rem;
  --fs-eyebrow:0.75rem;

  --lh-tight:1.08;
  --lh-head:1.18;
  --lh-body:1.65;

  /* ---- spacing scale ---- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* ---- surface ---- */
  --r-sm:8px; --r:14px; --r-lg:20px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(7,22,15,.05), 0 1px 3px rgba(7,22,15,.04);
  --shadow-2:0 2px 4px rgba(7,22,15,.04), 0 12px 28px -12px rgba(7,22,15,.16);
  --shadow-3:0 4px 8px rgba(7,22,15,.05), 0 28px 60px -20px rgba(7,22,15,.28);

  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:Fraunces,Georgia,"Times New Roman",serif;
  color:var(--ink);
  margin:0;
  font-weight:600;
  letter-spacing:-.015em;
}
h1{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:-.025em}
h2{font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:-.02em}
h3{font-size:var(--fs-h3);line-height:1.3}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}
strong{color:var(--ink-2);font-weight:600}
em{font-style:italic}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

:focus-visible{outline:2px solid var(--brand-lite);outline-offset:3px;border-radius:4px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- layout ------------------------------------------------------------- */

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5)}

/* 🔑 ONE section rhythm. The old page set its own margins per block, which is
   how a 300px hole opened between a screenshot and the heading under it. */
.sec{padding:var(--s9) 0}
.sec.tint{background:var(--bg-tint);border-block:1px solid var(--line-soft)}
.sec.dark{background:var(--bg-deep);color:#c9dbd1}
.sec.dark h2,.sec.dark h3{color:#fff}

.head{max-width:60ch;margin-bottom:var(--s7)}
.head .sub,.sub{font-size:var(--fs-lede);color:var(--body);margin-top:var(--s4)}
.lead-in{max-width:62ch}

.eyebrow{
  display:flex;align-items:center;gap:var(--s3);
  font-family:Inter,sans-serif;
  font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-lite-ink);
  margin-bottom:var(--s4);
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--brand-lite);border-radius:2px;flex:none}
.sec.dark .eyebrow{color:var(--brand-lite)}

.row{display:grid;gap:var(--s5)}
.cols{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* ---- brand wordmark ----------------------------------------------------- */
/* "MulliganOS" is never uppercased: the capital O-S is the mark. Two CSS rules
   on this page uppercase whatever they contain, so the name is wrapped rather
   than the rules relaxed — the sibling headings are MEANT to be uppercase. */
.bn{text-transform:none;letter-spacing:normal;white-space:nowrap}
.bn .mu{color:var(--brand)}
.bn .os{color:var(--brand-lite-ink)}
.sec.dark .bn .mu,footer .bn .mu{color:#fff}
.sec.dark .bn .os,footer .bn .os{color:var(--brand-lite)}

/* ---- nav ---------------------------------------------------------------- */

.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.nav.stuck{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:var(--s5);height:68px}
.nav .mark{display:flex;align-items:center;gap:var(--s2);margin-right:auto}
.nav .mark img{height:26px;width:auto}
.nav .links{display:flex;align-items:center;gap:var(--s6)}
.nav .links a{
  color:var(--ink-2);font-size:var(--fs-sm);font-weight:500;
  text-decoration:none;padding:6px 0;position:relative;
}
.nav .links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--brand-lite);border-radius:2px;transition:right .22s var(--ease);
}
.nav .links a:hover{color:var(--ink);text-decoration:none}
.nav .links a:hover::after{right:0}

/* ---- buttons ------------------------------------------------------------ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:Inter,sans-serif;font-size:var(--fs-sm);font-weight:600;
  line-height:1;padding:13px 22px;border-radius:var(--r-pill);
  background:var(--brand);color:#fff;border:1px solid var(--brand);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
  box-shadow:var(--shadow-1);
}
.btn:hover{background:#015c31;transform:translateY(-1px);box-shadow:var(--shadow-2);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn .arw{transition:transform .18s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}

.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--bg-tint);border-color:#cfded6}

/* ⚠ A ghost button inherits the page's ink, which is near-black. Over the hero
   photograph that is invisible. The hero is dark by construction, so it counts
   as an on-dark surface whether or not the markup says so - do not rely on a
   class the template may not carry. */
.on-dark .btn.ghost,.sec.dark .btn.ghost,.hero .btn.ghost{
  color:#fff;border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.06);backdrop-filter:blur(2px);
}
.on-dark .btn.ghost:hover,.sec.dark .btn.ghost:hover,.hero .btn.ghost:hover{
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.7);
}

/* ⚠ `.nav .links a` sets a colour, and the CTA in the nav is an <a> too, so it
   was winning over `.btn`'s white and painting dark green text on the dark
   green pill. Name the button explicitly and keep it white in both nav states. */
.nav .btn,.nav .links a.btn,.nav a.btn:hover{color:#fff}
.nav a.btn::after{display:none}

.cta{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}

/* ---- hero --------------------------------------------------------------- */

.hero{
  position:relative;
  min-height:min(82vh,760px);
  display:flex;align-items:center;
  padding:var(--s10) 0 var(--s9);
  background:var(--bg-deep);
  overflow:hidden;
  isolation:isolate;
}
.hero::before{               /* the photograph */
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:image-set(url("/img/hero-golf-2400.webp") type("image/webp"),
                             url("/img/hero-golf-2400.jpg") type("image/jpeg"));
  background-image:-webkit-image-set(url("/img/hero-golf-2400.webp") type("image/webp"),
                                     url("/img/hero-golf-2400.jpg") type("image/jpeg"));
  background-size:cover;background-position:50% 62%;
}
/* 🔴 The scrim is a GRADIENT, not a flat wash. A flat overlay dark enough for
   white text kills the grass; a gradient keeps the picture alive on the right
   while the headline sits on the dark left. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, rgba(4,20,12,.94) 0%, rgba(4,20,12,.88) 38%, rgba(4,20,12,.66) 70%, rgba(4,20,12,.52) 100%),
    linear-gradient(to top, rgba(4,20,12,.72), rgba(4,20,12,.10) 55%);
}
.hero .wrap{position:relative}
/* ⚠ No max-width here. The markup carries its own <br>, and a ch-cap on top
   of it wrapped "for" onto a line of its own. Let the author's break decide. */
.hero h1{color:#fff;text-shadow:0 2px 34px rgba(0,0,0,.4)}
.hero .lede{
  color:#e2eee7;text-shadow:0 1px 16px rgba(0,0,0,.45);font-size:var(--fs-lede);max-width:56ch;
  margin:var(--s5) 0 var(--s7);
}
.hero .cta{margin-bottom:var(--s8)}

/* the three proof points under the hero CTA */
.trust{
  display:grid;gap:var(--s5) var(--s7);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  padding-top:var(--s6);
  border-top:1px solid rgba(255,255,255,.14);
  max-width:940px;
}
/* ⚠ Targets the markup as it actually is — svg + <b> + <span> — rather than
   the .k/.t/.txt shape used elsewhere. Styling classes the HTML does not
   carry is how a stylesheet silently stops applying. */
.trust > div{display:flex;gap:var(--s3);align-items:flex-start}
.trust > div > svg{width:22px;height:22px;flex:none;color:var(--brand-lite);margin-top:2px}
.trust b{
  display:block;color:#fff;font-weight:600;font-size:var(--fs-sm);
  font-family:Inter,sans-serif;letter-spacing:0;margin-bottom:3px;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.trust span{display:block;color:#cadbd1;font-size:var(--fs-sm);line-height:1.5;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.trust .k{display:flex;flex-direction:column;gap:6px}

/* ---- the device shot under the hero ------------------------------------- */

/* The device shot lives INSIDE the hero, so it needs top margin rather than
   the negative-pull an out-of-hero block would use. */
.hero-shot{margin-top:var(--s8);position:relative;z-index:2}
.frame{
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow-3);
  overflow:hidden;
  position:relative;
}
.frame img{display:block;width:100%}
/* the little chin that makes it read as a terminal rather than a floating png */
.stand{
  height:14px;margin:0 auto;width:38%;
  background:linear-gradient(to bottom,#e8efeb,#d6e2db);
  border-radius:0 0 var(--r-sm) var(--r-sm);
  box-shadow:var(--shadow-1);
}
.shot-note{
  margin:var(--s5) auto 0;max-width:62ch;text-align:center;
  color:var(--muted);font-size:var(--fs-sm);
}
/* the caption lives INSIDE the dark hero, where --muted (chosen for white
   backgrounds) rendered as grey on near-black and could not be read */
.hero .shot-note{color:#c9dbd1}
.hero .shot-note a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* The tee-sheet capture is a dark screen, and inside the dark hero it merged
   into the background - the frame's white fill never shows because the image
   covers it. Give the frame a pale bezel so the terminal reads as an object
   sitting ON the page rather than a hole cut into it. */
.hero .frame{
  padding:10px;
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.3);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
}
.hero .frame img{border-radius:calc(var(--r-lg) - 10px)}
.hero .stand{background:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(255,255,255,.12))}

/* ---- cards -------------------------------------------------------------- */

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:var(--s6);
  box-shadow:var(--shadow-1);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  display:flex;flex-direction:column;gap:var(--s3);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:#d3e2da}
.sec.tint .card{background:#fff}

.card .ico{
  width:42px;height:42px;border-radius:11px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#eaf5ee,#dcefe3);
  color:var(--brand);
  border:1px solid #d7eade;
  margin-bottom:var(--s2);
}
.card .ico svg{width:21px;height:21px}

.card .t{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.card .t h3{margin:0}
.card p{font-size:var(--fs-sm);color:var(--body);margin-bottom:var(--s3)}
.card p:last-child{margin-bottom:0}

/* status pills */
.st{
  display:inline-flex;align-items:center;gap:6px;
  font-family:Inter,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap;
}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.live{background:#e7f6ec;color:#1d7a3d}
.st.soon{background:#eef2f7;color:#5b6b7f}
.st.part{background:var(--warn-bg);color:var(--warn)}

/* the "we did not build this" aside inside a card */
.card .note{
  margin-top:auto;padding-top:var(--s4);border-top:1px dashed var(--line);
  font-size:var(--fs-xs);color:var(--muted);
}
.card .note strong{color:var(--ink-2)}

/* ---- feature strip ------------------------------------------------------ */

.feat{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.feat .k{display:flex;flex-direction:column;gap:var(--s2)}
.feat .k .t{display:flex;align-items:center;gap:var(--s2);color:var(--ink);font-weight:600;font-family:Inter,sans-serif;font-size:var(--fs-body)}
.feat .k .t svg{width:19px;height:19px;color:var(--brand-lite-ink);flex:none}
.feat .k .txt{font-size:var(--fs-sm);color:var(--body)}
.feat .k .num{font-family:Fraunces,serif;font-size:2rem;color:var(--brand);line-height:1}

/* ---- comparison table --------------------------------------------------- */

.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)}
.cmp th,.cmp td{text-align:left;padding:var(--s4) var(--s5);vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{
  font-family:Inter,sans-serif;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.1em;color:var(--muted);
  background:var(--bg-tint);border-bottom:1px solid var(--line);
}
.cmp thead th:first-child{border-radius:var(--r-sm) 0 0 0}
.cmp thead th:last-child{border-radius:0 var(--r-sm) 0 0}
.cmp tbody tr:hover{background:#fbfdfc}
.cmp .ours{background:#f4fbf6;border-left:2px solid var(--brand-lite)}
.cmp tbody tr:last-child td{border-bottom:none}
.cmp em{color:var(--muted);font-style:italic}

/* ---- pricing ------------------------------------------------------------ */

.price{
  font-family:Fraunces,serif;font-size:clamp(2.4rem,1.8rem+2.4vw,3.4rem);
  color:var(--ink);line-height:1;letter-spacing:-.02em;
}
.price .fine{
  display:block;font-family:Inter,sans-serif;font-size:var(--fs-sm);
  color:var(--muted);letter-spacing:0;margin-top:var(--s3);font-weight:400;
}
.tag{
  display:inline-block;font-size:var(--fs-xs);font-weight:600;
  color:var(--brand-lite-ink);background:#eaf6ee;
  padding:4px 10px;border-radius:var(--r-pill);margin-bottom:var(--s3);
}

/* ---- demo / dark block -------------------------------------------------- */

.demo-card{
  background:linear-gradient(160deg,#0c2418,#07160f);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);
  padding:clamp(var(--s6),4vw,var(--s8));
  box-shadow:var(--shadow-3);
}
.demo-card h2{color:#fff}
.demo-card p{color:#bdd2c6}
.mail{
  font-family:Inter,sans-serif;font-weight:600;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.3);
}
.mail:hover{border-bottom-color:var(--brand-lite);text-decoration:none}
.who{font-size:var(--fs-sm);color:#9fb8ab}

/* ---- footer ------------------------------------------------------------- */

footer{background:var(--bg-deep);color:#93aa9e;padding:var(--s8) 0 var(--s7);font-size:var(--fs-sm)}
footer h4{font-family:Inter,sans-serif;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 var(--s4)}
footer a{color:#c6d8ce}
footer a:hover{color:#fff}
footer .src{font-size:var(--fs-xs);color:#6f8779;margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.1)}

/* ---- entrance motion ---------------------------------------------------- */
/* Opt-in, tiny, and cancelled entirely under prefers-reduced-motion above. */
/* ⚠ .rise hides content, so every path that can leave it hidden is a bug that
   deletes the page. See the observer in the footer script: it also reveals
   anything already scrolled PAST, and a timer reveals the lot regardless. */
.rise{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease), transform .5s var(--ease)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none}}

/* 🔴 `.flip` used to be `transform:scaleX(-1)`, written for an icon. The
   product markup uses `class="row flip"` to mean "picture on the other side",
   so that rule mirrored the entire row - HEADINGS AND BODY COPY RENDERED
   BACKWARDS on rows 02 and 04. Never ship a bare utility name that the page's
   own markup already uses for something else. */
.row{align-items:center}
@media (min-width:860px){
  .row{grid-template-columns:1fr 1fr;gap:var(--s7)}
  .row.flip .txt{order:2}
}

/* ---- screenshot gallery (screenshots page) ------------------------------ */

.gal{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.gal figure{margin:0}
.gal button.shot{
  display:block;width:100%;padding:0;border:1px solid var(--line);background:#fff;
  border-radius:var(--r);overflow:hidden;cursor:zoom-in;
  box-shadow:var(--shadow-1);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.gal button.shot:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:#d3e2da}
.gal button.shot img{width:100%;display:block;background:#0b1f16}
.gal figcaption{padding:var(--s4) var(--s1) 0}
.gal figcaption .t{font-family:Inter,sans-serif;font-weight:600;color:var(--ink);font-size:var(--fs-sm)}
.gal figcaption .txt{font-size:var(--fs-sm);color:var(--body);margin-top:4px}

.lightbox{
  position:fixed;inset:0;z-index:100;display:none;
  background:rgba(4,20,12,.92);
  align-items:center;justify-content:center;padding:var(--s5);
}
.lightbox[open],.lightbox.on{display:flex}
.lightbox img{max-width:min(1600px,96vw);max-height:88vh;width:auto;border-radius:var(--r-sm);box-shadow:var(--shadow-3)}
.lightbox .cap{
  position:absolute;left:0;right:0;bottom:var(--s5);text-align:center;
  color:#cfe0d6;font-size:var(--fs-sm);padding:0 var(--s5);
}
.lightbox .x{
  position:absolute;top:var(--s5);right:var(--s5);
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:22px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
}
.lightbox .x:hover{background:rgba(255,255,255,.18)}

/* ---- feature cards: one height, the rest behind a toggle ----------------

   🔴 THESE RULES LIVE HERE, NOT SPLICED INTO A PAGE'S <style>. They were
   inline-only once; a later deploy regenerated that block from this file and
   deleted them. The script kept running, so every card got a max-height with
   no `overflow:hidden` — a shortened box that paints its copy straight out the
   bottom, over the section below. One source of truth is the fix.

   ⚠ `.clamped` is added by the script at the end of the page, never here.
   Unstyled by script, a card shows all of its copy. Copy is never hidden with
   no way to reach it. */
.feat .card{display:flex;flex-direction:column}
.card-body{position:relative;transition:max-height .32s var(--ease)}
.card.clamped .card-body{overflow:hidden}
.card.clamped .card-body::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:72px;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,#fff 80%);
  pointer-events:none;transition:opacity .22s var(--ease);
}
.card.clamped.open .card-body::after{opacity:0}
.card .more{
  align-self:flex-start;margin-top:var(--s3);
  background:none;border:0;padding:6px 0;cursor:pointer;
  font-family:Inter,sans-serif;font-size:var(--fs-sm);font-weight:600;
  color:var(--brand);display:inline-flex;align-items:center;gap:6px;
}
.card .more:hover{text-decoration:underline}
.card .more .chev{transition:transform .2s var(--ease);font-size:11px;line-height:1}
.card.open .more .chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.card-body{transition:none}}

/* ---- homepage showcase strip -------------------------------------------
   A contact sheet of every screen, whose only job is to get people onto the
   gallery. Deliberately NOT a lightbox: two ways to open the same picture on
   one page is a choice the reader has to make for no benefit. Every cell is a
   plain link to /screenshots/. */
.sc-grid{
  display:grid;gap:var(--s3);align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.sc-cell{
  display:block;text-decoration:none;border-radius:var(--r-sm);
  border:1px solid var(--line);background:#0b1f16;overflow:hidden;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
/* 🔴 The thumbnails are not all the same shape — a full screen is ~1.95:1, a
   dialog crop ~1.14:1. Left to itself the grid stretched every cell to the
   tallest in its row and the card's dark background hung below each label as
   an empty block. A fixed ratio with `cover` makes the sheet uniform; the crop
   is anchored top-left because that is where a screen puts its heading. */
.sc-cell img{
  display:block;width:100%;aspect-ratio:16/9;
  object-fit:cover;object-position:top left;
}
.sc-cell span{
  display:block;padding:8px 10px 10px;background:#fff;
  font-family:Inter,sans-serif;font-size:12px;font-weight:600;line-height:1.3;
  color:var(--ink);min-height:3.1em;
}
.sc-cell:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:#cfded6;text-decoration:none}
.sc-cell:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sc-more{margin-top:var(--s6);text-align:center}

/* ---- responsive --------------------------------------------------------- */

@media (max-width:900px){
  .nav .links{display:none}
  .hero{min-height:auto;padding:var(--s8) 0 var(--s7)}
  .hero h1{max-width:100%}
  .hero::after{
    background:linear-gradient(to bottom, rgba(4,20,12,.86), rgba(4,20,12,.74) 60%, rgba(4,20,12,.86));
  }
  .sec{padding:var(--s8) 0}
  .hero-shot{margin-top:var(--s7)}
  .card{padding:var(--s5)}
}
@media (max-width:640px){
  .wrap{padding:0 var(--s4)}
  .cmp{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .trust{gap:var(--s5)}
}

@media print{
  .nav,.lightbox{display:none}
  .hero{background:#fff;min-height:auto;padding:var(--s6) 0}
  .hero::before,.hero::after{display:none}
  .hero h1,.hero .lede{color:#000}
}