/* ============================================================
   FUNDILUSA — Design System
   Dark cinematic base · Fundilusa navy + bronze-gold
   Hand-built HTML+CSS (Tailwind CDN handles layout utilities)
   ============================================================ */

:root{
  /* Palette */
  --bg:            #04060b;
  --bg-soft:       #0a0f1a;
  --navy:          #14284a;
  --navy-deep:     #0b1526;
  --gold:          #b6935f;
  --gold-light:    #d8b784;
  --gold-deep:     #8a7449;
  --ink:           #e9ecf2;
  --muted:         rgba(233,236,242,.56);
  --faint:         rgba(233,236,242,.34);
  --line:          rgba(255,255,255,.08);
  --line-strong:   rgba(180,200,235,.14);

  /* Back-compat aliases (kept so older markup still styles) */
  --brand:         var(--gold-deep);
  --brand-light:   var(--gold);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--gold); color:#04060b; padding:.7rem 1.1rem; font-weight:600; border-radius:0 0 4px 0; }
.skip-link:focus{ left:0; }
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{ max-width:100%; display:block; height:auto; }
a{ text-decoration:none; color:inherit; }

/* Mini-preflight — replaces the Tailwind CDN base layer */
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; color:inherit; }

/* ── Typography helpers ─────────────────────────────── */
.label{ font-weight:500; font-variant-numeric:tabular-nums; }
.eyebrow{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.eyebrow::before{
  content:"";
  width:26px;height:1px;
  background:linear-gradient(to right,var(--gold),transparent);
}
.label.text-xs{ font-size:.8rem !important; line-height:1.4; }

.h-display{
  font-weight:300;
  letter-spacing:-.025em;
  line-height:1.08;
  color:#fff;
}
.h-display strong{ font-weight:650; }
.section-title{
  font-size:clamp(1.7rem,3vw,2.5rem);
  font-weight:650;
  letter-spacing:-.02em;
  color:#fff;
  line-height:1.12;
}
.lead{ color:var(--muted); line-height:1.8; font-weight:300; }
.text-gold{ color:var(--gold); }
.text-gold-light{ color:var(--gold-light); }

/* ── Layout helpers ─────────────────────────────────── */
.wrap{ max-width:80rem; margin:0 auto; padding:0 1.5rem; }
.section{ position:relative; }
.orb-section{ position:relative; overflow:hidden; }
.divider{ border:none; border-top:1px solid var(--line); margin:0; }
.hairline{ height:1px; background:linear-gradient(to right,transparent,var(--line-strong),transparent); }

/* ── Navbar ─────────────────────────────────────────── */
#navbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .5s ease,border-color .5s ease,backdrop-filter .5s ease;
  border-bottom:1px solid transparent;
}
#navbar.scrolled{
  background:rgba(4,6,11,.82);
  border-color:var(--line);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
#nav-logo{ height:30px; width:auto; }
.nav-links{ display:none; gap:2rem; font-size:.9rem; }
@media(min-width:1024px){ .nav-links{ display:flex; } }
.nav-links > li{ position:relative; list-style:none; }
.nav-links a{
  color:rgba(255,255,255,.62);
  transition:color .2s ease;
  padding:1.5rem 0;
  display:inline-block;
  letter-spacing:.01em;
}
.nav-links a:hover{ color:#fff; }
.nav-links a.active{ color:#fff; }
.nav-links a.active::after{
  content:""; position:absolute; left:0; bottom:1.1rem;
  width:100%; height:1px; background:var(--gold);
}
/* Dropdown */
.nav-drop > .nav-menu{
  position:absolute; top:100%; left:-1rem; min-width:230px;
  background:rgba(8,12,20,.96);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line-strong);
  border-radius:4px; padding:.5rem;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
  z-index:120;
}
.nav-drop:hover > .nav-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-menu li{ list-style:none; }
.nav-menu a{
  display:block; padding:.6rem .8rem; font-size:.85rem;
  color:rgba(255,255,255,.6); border-radius:3px;
}
.nav-menu a:hover{ color:#fff; background:rgba(182,147,95,.12); }
.nav-caret{ font-size:.6rem; opacity:.6; margin-left:.3rem; }

/* Mobile menu */
#nav-toggle{ display:inline-flex; background:none; border:none; cursor:pointer; padding:.4rem; }
@media(min-width:1024px){ #nav-toggle{ display:none; } }
#mobile-menu{
  position:fixed; inset:0; z-index:99;
  background:rgba(4,6,11,.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  padding:6rem 2rem 2rem;
  transform:translateX(100%); transition:transform .4s cubic-bezier(.22,1,.36,1);
  overflow-y:auto;
}
#mobile-menu.open{ transform:translateX(0); }
#mobile-menu a{ display:block; padding:.9rem 0; font-size:1.15rem; color:rgba(255,255,255,.75); border-bottom:1px solid var(--line); }
#mobile-menu a:hover{ color:#fff; }
#mobile-menu .sub{ font-size:.95rem; padding-left:1rem; color:rgba(255,255,255,.5); }
/* Mobile nav: declutter — hamburger opens the menu (which already contains Contact) */
@media(max-width:1023px){ #navbar .btn-primary{ display:none; } }
@media(max-width:560px){ #nav-logo{ height:24px; } #navbar .wrap{ height:64px; } }

/* ── Buttons ────────────────────────────────────────── */
.btn-primary,.btn-ghost{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.8rem 1.8rem; font-size:.86rem; font-weight:600;
  letter-spacing:.03em; border-radius:2px; cursor:pointer;
  transition:all .25s ease;
}
.btn-primary{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);
  color:#0b0b0b; border:1px solid transparent;
}
.btn-primary:hover{ filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 10px 30px -12px rgba(182,147,95,.6); }
.btn-ghost{ border:1px solid rgba(255,255,255,.22); color:#fff; background:transparent; }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-light); }
.btn-primary.sm,.btn-ghost.sm{ padding:.6rem 1.1rem; font-size:.8rem; }
.link-arrow{ font-size:.78rem; color:var(--gold-light); transition:gap .2s; display:inline-flex; gap:.4rem; align-items:center; }
.link-arrow:hover{ gap:.7rem; }

/* ── Glass cards ────────────────────────────────────── */
.glass-card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:5px;
  backdrop-filter:blur(6px);
  transition:border-color .3s ease,background .3s ease,transform .3s ease;
}
.glass-card:hover{ background:rgba(255,255,255,.05); border-color:rgba(182,147,95,.42); }

/* ── Product cards (navy w/ gold — echoing the real site) ── */
.prod-card{
  position:relative; display:block; overflow:hidden;
  border:1px solid var(--line-strong); border-radius:6px;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);
  min-height:340px;
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s;
}
.prod-card:hover{ transform:translateY(-6px); border-color:rgba(182,147,95,.5); }
.prod-card .pc-photo{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:.28; transition:opacity .5s ease,transform 6s ease;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.15) 70%,transparent);
          mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.15) 70%,transparent);
}
.prod-card:hover .pc-photo{ opacity:.6; transform:scale(1.05); }
.prod-card .pc-body{ position:relative; z-index:2; padding:2rem; display:flex; flex-direction:column; height:100%; min-height:340px; }
.prod-card .pc-icon{ color:var(--gold); margin-bottom:auto; }
.prod-card .pc-num{ font-variant-numeric:tabular-nums;  font-size:.72rem; color:var(--gold-light); letter-spacing:.15em; }
.prod-card h3{ font-size:1.35rem; font-weight:600; color:#fff; margin:.9rem 0 .5rem; }
.prod-card p{ color:rgba(255,255,255,.6); font-size:.9rem; line-height:1.7; }
.prod-card .pc-spec{ margin-top:1rem; font-size:.74rem; color:var(--gold-light); }

/* ── Metrics ────────────────────────────────────────── */
.metric{ position:relative; padding:2rem 1.6rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.metric .m-num{ font-variant-numeric:tabular-nums;  font-size:clamp(2rem,4vw,2.8rem); font-weight:500; color:#fff; letter-spacing:-.02em; line-height:1; }
.metric .m-num .u{ color:var(--gold); font-size:.55em; }
.metric .m-label{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-top:.85rem; }
.metric .m-idx{ font-variant-numeric:tabular-nums;  font-size:.72rem; color:rgba(255,255,255,.28); margin-bottom:1rem; }

/* ── Stat strip (compact figures inside a card) ──────
   Figures and captions are siblings in one grid, so the captions share a row
   and stay on the same line even if a figure wraps to two lines. */
.stat-strip{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end;
  column-gap:1rem; row-gap:.9rem; text-align:center; }
.stat-strip .s-figure{ font-size:clamp(1.4rem,2.4vw,2rem); font-weight:500; color:#fff;
  letter-spacing:-.02em; line-height:1.15; font-variant-numeric:tabular-nums; }
.stat-strip .s-figure .u{ color:var(--gold); font-size:.55em; }
.stat-strip .s-cap{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }

/* ── Stage list (Development & Production) ──────────── */
.stage-rail{ border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.stage-row{ display:grid; grid-template-columns:56px 1fr; gap:1.25rem; padding:1.6rem 1.5rem; border-bottom:1px solid var(--line); transition:background .3s; }
.stage-row:last-child{ border-bottom:none; }
.stage-row:hover{ background:rgba(182,147,95,.05); }
.stage-row .s-num{ font-variant-numeric:tabular-nums; font-weight:500;  color:var(--gold); font-size:.95rem; padding-top:.15rem; }
.stage-row h3{ font-size:1.1rem; font-weight:600; color:#fff; margin:0 0 .4rem; }
.stage-row p{ color:var(--muted); font-size:.9rem; line-height:1.7; margin:0; }

/* ── Glow orbs / cinematic FX ───────────────────────── */
.glow-orb{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; will-change:transform; }
@keyframes drift-a{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-25px,20px) scale(.96)}}
@keyframes drift-b{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-50px,30px) scale(1.1)}70%{transform:translate(30px,-20px) scale(.94)}}
@keyframes drift-c{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,40px)}}
@keyframes pulse-glow{0%,100%{opacity:.45}50%{opacity:.9}}
.orb-a{ animation:drift-a 16s ease-in-out infinite; }
.orb-b{ animation:drift-b 20s ease-in-out infinite; }
.orb-c{ animation:drift-c 18s ease-in-out infinite; }

/* ── Reveal on scroll ───────────────────────────────── */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }

/* ── Hero (shared) ──────────────────────────────────── */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img,.hero-media video{ width:100%; height:100%; object-fit:cover; }
.hero-scrim{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to right, rgba(4,6,11,.92) 0%, rgba(4,6,11,.7) 35%, rgba(4,6,11,.35) 70%, rgba(4,6,11,.6) 100%),
    linear-gradient(to bottom, rgba(4,6,11,.6) 0%, transparent 30%, transparent 55%, var(--bg) 100%);
}
.hero .wrap{ position:relative; z-index:2; width:100%; }
@keyframes kenburns{ from{ transform:scale(1.04); } to{ transform:scale(1.14); } }
.kenburns{ animation:kenburns 24s ease-out forwards; }

/* Blueprint corner marks */
.corner-frame{ position:relative; display:inline-block; }
.corner-frame::before,.corner-frame::after{ content:""; position:absolute; width:16px; height:16px; border:1px solid var(--gold); opacity:.5; }
.corner-frame::before{ top:-10px; left:-12px; border-width:1px 0 0 1px; }
.corner-frame::after{ bottom:-10px; right:-12px; border-width:0 1px 1px 0; }

/* ── Page hero (interior pages, shorter) ────────────── */
.page-hero{ position:relative; padding:9rem 0 4rem; overflow:hidden; border-bottom:1px solid var(--line); }
.page-hero .ph-media{ position:absolute; inset:0; z-index:0; opacity:.32; }
.page-hero .ph-media img{ width:100%; height:100%; object-fit:cover; }
.page-hero::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom,rgba(4,6,11,.75),var(--bg)); }
.page-hero .wrap{ position:relative; z-index:2; }

/* ── Certifications ─────────────────────────────────── */
.cert-row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2.5rem 3.5rem; }
.cert-row img{ height:44px; width:auto; opacity:.72; filter:grayscale(1) brightness(1.6); transition:opacity .3s,filter .3s; }
.cert-row img:hover{ opacity:1; filter:none; }

/* ── Infinite auto-scrolling gallery (marquee → right) ── */
.marquee{ position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.marquee-track{ display:flex; width:max-content; will-change:transform;
  animation:marquee-right 60s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.marquee-item{ flex:0 0 auto; width:300px; height:200px; margin:0 6px; padding:0; border:0;
  background:none; cursor:pointer; overflow:hidden; border-radius:5px; position:relative; }
.marquee-item::after{ content:""; position:absolute; inset:0; background:rgba(4,6,11,.15); transition:opacity .3s; }
.marquee-item:hover::after{ opacity:0; }
.marquee-item img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05);
  transition:transform .6s cubic-bezier(.22,1,.36,1); }
.marquee-item:hover img{ transform:scale(1.07); }
.marquee-item:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
@media(max-width:640px){ .marquee-item{ width:220px; height:150px; } }

/* ── Lightbox ── */
.lightbox{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
  background:rgba(3,5,9,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:2rem; }
.lightbox.open{ display:flex; animation:lb-fade .25s ease; }
@keyframes lb-fade{ from{ opacity:0; } to{ opacity:1; } }
.lb-img{ max-width:92vw; max-height:86vh; width:auto; height:auto; border-radius:6px; object-fit:contain;
  border:1px solid var(--line-strong); box-shadow:0 50px 140px -40px rgba(0,0,0,.9); }
.lb-btn{ position:absolute; width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid var(--line-strong); color:#fff;
  font-size:1.7rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease; }
.lb-btn:hover{ background:rgba(182,147,95,.28); border-color:var(--gold); }
.lb-close{ top:1.4rem; right:1.4rem; }
.lb-prev{ left:1.4rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:1.4rem; top:50%; transform:translateY(-50%); }
.lb-count{ font-variant-numeric:tabular-nums;  position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%);
  font-size:.78rem; letter-spacing:.14em; color:var(--faint); }
@media(max-width:640px){ .lb-prev{ left:.6rem; } .lb-next{ right:.6rem; } .lb-btn{ width:44px; height:44px; font-size:1.4rem; } }

/* ── Footer ─────────────────────────────────────────── */
.site-footer{ background:var(--bg); border-top:1px solid var(--line); }
.site-footer h4{ font-size:.72rem; letter-spacing:.14em; color:var(--faint); margin-bottom:1.2rem; text-transform:uppercase; }
.site-footer a{ color:rgba(233,236,242,.55); transition:color .2s; }
.site-footer a:hover{ color:#fff; }
.footer-fund{ display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; opacity:.7; }
.footer-fund img{ height:34px; width:auto; }

/* ── Factories / world map ──────────────────────────── */
.map-wrap{ position:relative; border:1px solid var(--line-strong); border-radius:8px; overflow:hidden; background:linear-gradient(160deg,#081120,#04060b); }
.map-svg{ width:100%; height:auto; display:block; }
.map-land{ fill:rgba(150,180,225,.09); stroke:rgba(150,180,225,.16); stroke-width:.4; }
.map-pin{ cursor:pointer; }
.map-pin .pin-core{ fill:var(--gold); }
.map-pin .pin-ring{ fill:none; stroke:var(--gold); transform-origin:center; transform-box:fill-box; animation:ping 2.6s ease-out infinite; }
.map-pin.b .pin-ring{ animation-delay:1.3s; }
@keyframes ping{ 0%{ opacity:.9; transform:scale(.4);} 80%,100%{ opacity:0; transform:scale(2.6);} }
.factory-card{ border:1px solid var(--line); border-radius:6px; padding:1.8rem; background:rgba(255,255,255,.02); transition:border-color .3s,transform .3s; }
.factory-card:hover{ border-color:rgba(182,147,95,.4); transform:translateY(-4px); }
.factory-card .fc-flag{ font-size:.72rem; letter-spacing:.14em; color:var(--gold-light); }

/* ── Prose (legal pages) ────────────────────────────── */
.prose{ color:var(--muted); line-height:1.85; font-size:.95rem; }
.prose h2{ color:#fff; font-size:1.3rem; font-weight:600; margin:2.5rem 0 .9rem; letter-spacing:-.01em; }
.prose h3{ color:#fff; font-size:1.05rem; font-weight:600; margin:1.8rem 0 .6rem; }
.prose p{ margin:0 0 1.1rem; }
.prose ul{ margin:0 0 1.1rem; padding-left:1.2rem; }
.prose li{ margin-bottom:.5rem; }
.prose a{ color:var(--gold-light); }
.prose strong{ color:var(--ink); }

/* ── Utilities ──────────────────────────────────────── */
.text-muted{ color:var(--muted); }
.text-faint{ color:var(--faint); }
.bg-panel{ background:var(--bg-soft); }
.b-top{ border-top:1px solid var(--line); }
.b-bottom{ border-bottom:1px solid var(--line); }

/* ── FAQ accordion ── */
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{ cursor:pointer; list-style:none; padding:1.4rem 0; display:flex; justify-content:space-between; gap:1.5rem; align-items:center; color:#fff; font-weight:500; font-size:1.05rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--gold); font-size:1.5rem; font-weight:300; transition:transform .3s ease; line-height:1; flex:none; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .faq-a{ color:var(--muted); line-height:1.8; font-size:.95rem; padding:0 0 1.4rem; max-width:72ch; }

/* ── Propeller cinema (intro → perfect loop, scroll-triggered) ── */
.propeller-cinema{ position:relative; height:72vh; min-height:460px; max-height:820px; background:#000; overflow:hidden; }
.pl-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .7s ease; }
.pl-scrim{ position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse at center, transparent 35%, rgba(4,6,11,.5) 100%),
             linear-gradient(to bottom, rgba(4,6,11,.55), transparent 22%, transparent 72%, var(--bg)); }
.pl-overlay{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 1.5rem; }

/* ══ Layout utilities — self-hosted, replaces Tailwind CDN ══ */
.grid{ display:grid; }
.flex{ display:flex; }
.flex-col{ flex-direction:column; }
.flex-wrap{ flex-wrap:wrap; }
.block{ display:block; }
.hidden{ display:none; }
.relative{ position:relative; }
.absolute{ position:absolute; }
.items-center{ align-items:center; }
.items-start{ align-items:flex-start; }
.items-end{ align-items:flex-end; }
.items-baseline{ align-items:baseline; }
.justify-between{ justify-content:space-between; }
.justify-center{ justify-content:center; }
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.w-full{ width:100%; }
.max-w-3xl{ max-width:48rem; }
.z-10{ z-index:10; }
.bottom-8{ bottom:2rem; }
.left-1\/2{ left:50%; }
.-translate-x-1\/2{ transform:translateX(-50%); }

.grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

.gap-1{ gap:.25rem; } .gap-2{ gap:.5rem; } .gap-3{ gap:.75rem; } .gap-4{ gap:1rem; }
.gap-5{ gap:1.25rem; } .gap-6{ gap:1.5rem; } .gap-8{ gap:2rem; } .gap-10{ gap:2.5rem; }
.gap-12{ gap:3rem; } .gap-14{ gap:3.5rem; }
.gap-x-5{ column-gap:1.25rem; } .gap-x-8{ column-gap:2rem; }
.gap-y-1{ row-gap:.25rem; } .gap-y-3{ row-gap:.75rem; } .gap-y-8{ row-gap:2rem; } .gap-y-10{ row-gap:2.5rem; }

.py-16{ padding-top:4rem; padding-bottom:4rem; }
.py-20{ padding-top:5rem; padding-bottom:5rem; }
.py-24{ padding-top:6rem; padding-bottom:6rem; }
.py-28{ padding-top:7rem; padding-bottom:7rem; }
.pt-6{ padding-top:1.5rem; }
.mb-3{ margin-bottom:.75rem; } .mb-8{ margin-bottom:2rem; } .mb-10{ margin-bottom:2.5rem; }
.mb-12{ margin-bottom:3rem; } .mb-14{ margin-bottom:3.5rem; }
.mt-6{ margin-top:1.5rem; } .mt-8{ margin-top:2rem; } .mt-16{ margin-top:4rem; }
.my-4{ margin-top:1rem; margin-bottom:1rem; } .my-8{ margin-top:2rem; margin-bottom:2rem; }
.mx-2{ margin-left:.5rem; margin-right:.5rem; }

.space-y-3>*+*{ margin-top:.75rem; }
.space-y-4>*+*{ margin-top:1rem; }
.space-y-5>*+*{ margin-top:1.25rem; }

.prose ul{ list-style:disc; }

@media(min-width:640px){
  .sm\:inline{ display:inline; }
  .sm\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:768px){
  .md\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .md\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .md\:grid-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .md\:grid-cols-12{ grid-template-columns:repeat(12,minmax(0,1fr)); }
  .md\:col-span-2{ grid-column:span 2 / span 2; }
  .md\:col-span-4{ grid-column:span 4 / span 4; }
}
@media(min-width:1024px){
  .lg\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lg\:grid-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .lg\:grid-cols-7{ grid-template-columns:repeat(7,minmax(0,1fr)); }
  .lg\:grid-cols-12{ grid-template-columns:repeat(12,minmax(0,1fr)); }
  .lg\:col-span-4{ grid-column:span 4 / span 4; }
  .lg\:col-span-5{ grid-column:span 5 / span 5; }
  .lg\:col-span-7{ grid-column:span 7 / span 7; }
  .lg\:col-span-8{ grid-column:span 8 / span 8; }
}