/* ==========================================================================
   JJ Splice Artists — jjsplice.academy-congruent reskin overlay
   Added on top of style.css (never edited directly) so the 6 staff/CRM
   pages that do NOT link this file keep their exact current look.
   Approach: swap fonts + redefine the existing --custom-properties from
   style.css to a dark, academy-style palette, then patch the handful of
   hardcoded (non-variable) colors in style.css and in the four per-page
   "sq-" quiz widgets that a variable swap can't reach. Structure, layout
   and copy are untouched per the approved scope; corners/radius are now
   also matched to academy's zero-radius design system (see the "Sharp
   corners" section below) per Dean's explicit request to align further.
   ========================================================================== */

:root{
  --black:#0a0a0a;
  --pink:#ff2db8;
  --pink-bright:#ff2db8;
  --pink-hot:#e0219e;
  --purple:#7c4fd8;
  --purple-deep:#170f28;
  --teal-dark:#0d2b33;
  --teal-light:#00b8ff;
  --purple-dark:#140d20;
  --cream:#f5f5f2;
  --charcoal-1:#1a1a1a;
  --charcoal-2:#131313;
  --text-dark:#f5f5f2;   /* body copy flips from dark-on-white to light-on-black */
  --text-light:#f5f5f2;
  --radius:0px;          /* academy uses zero radius everywhere except true circles */
  --text-faint:#6f6f6b;  /* academy's --text-faint, for muted/secondary copy (e.g. footer) */
  --accent-soft:rgba(255,45,184,.14); /* academy's --accent-soft */
  /* --max intentionally left alone: layout width, not palette/font/shape */
}

body{
  background:var(--black);
  font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;
}
.announce{ font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif; }

/* ---------- Video cards: a visible border so they read as a distinct
   clickable panel against a dark band background, plus a reliable play
   button (`.fv-play`, already styled below) added to any card whose source
   screenshot doesn't have its own clearly-visible play icon baked in. ---------- */
.video-card{ border:1px solid rgba(255,255,255,.18); }
/* In the testimonial masonry column, .testi-photo and .testi-block both
   carry their own margin-bottom:30px (style.css) so there's a visible gap
   between stacked items — .video-card never had one, so it sat flush
   against whatever followed it in the same column. */
.testi-col .video-card{ margin-bottom:30px; }

/* ---------- Type scale: match jjsplice.academy's exact clamp() values for
   h1/h2 (their own site has no generic h3 rule — every h3 there is sized
   per-component, so ours is left at style.css's fixed 22px). Was already
   very close (independently arrived at similar numbers across earlier
   rounds); this makes it exact rather than approximate. ---------- */
h1{ font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1.08; letter-spacing:-0.02em; }
h2{ font-size:clamp(1.6rem,2.8vw,2.3rem); line-height:1.18; letter-spacing:-0.015em; }

/* ---------- Sharp corners: match jjsplice.academy's design system exactly.
   Checked the academy site's full source — the ONLY border-radius values
   anywhere in it are the two circular play-button/icon treatments (both
   border-radius:50%, i.e. true circles, not "rounded corners"). Every
   button, card, thumbnail, form field and panel there is a hard square.
   These overrides zero out every non-circular border-radius style.css sets
   on the 17 in-scope pages, while leaving the handful of genuine circles
   (play-button overlays, the accordion +/- icon) circular — same split
   academy itself makes. `--radius:0px` above already zeroes `.testi-card`,
   which is the one place style.css reads the variable instead of a literal
   px value. */
.announce .btn-small,
.nav-badge-new,
.dropdown,
nav.main-nav .dropdown a,
.hero-dark .video-frame,
.free-video-card,
.hero-dark .btn.purple,
.video-card,
.trust-box,
.testi-photo,
.rw-thumb,
.two-col img,
.video-grid .video-frame,
.btn,
.btn.small,
.pkg-banner,
.pkg-banner .thumb,
.price-card,
.price-card .price-photo,
.course-thumb,
.team-member img,
.faq-item img,
.field,
.map-embed,
.link-btn,
.notice-box,
.iq-search,
.iq-jump a,
.tf-embed-wrap,
.poster-item img,
.partner-logos img,
.faq-group-photo{
  border-radius:0;
}
/* .cta-btn (header nav CTA) is fully redefined further down next to the
   nav port — its border-radius is set to 0 there, not here. */

/* ---------- Hero ---------- */
.hero-dark{
  background:linear-gradient(180deg,#0a0a0a 0%,#0d2b33 28%,#123846 52%,#0f1f2b 78%,#0a0a0a 100%);
}
.hero-dark .lede{ color:rgba(245,245,242,.85); }
.free-video-card{ background:#141414; }
.free-video-card .fv-title{ color:var(--cream); }
/* style.css's .hero-dark .btn.purple bumps padding/font-size up from the
   base .btn (16px 34px / 15px) to 22px 50px / 18px. That's sized for a
   short label; "BOOK A FREE STRATEGY CALL" is much longer and was wrapping
   to two lines with a lot of empty space around it on the index page hero.
   Scaled back down closer to the base button size. */
.hero-dark .btn.purple{ padding:15px 30px; font-size:15px; }

/* ---------- Section bands: recolored dark, same gradient shape/direction ---------- */
.band-teal{ background:linear-gradient(180deg,#0a1a1e 0%,#123640 50%,#0a1a1e 100%); }
.band-teal-fade-text{ color:rgba(245,245,242,.75); }
.band-blue-fade{
  background:linear-gradient(180deg,#1a1a1a 0%,#101820 50%,#0a0a0a 100%);
  color:#fff;
}
.band-blue-fade .lede{ color:rgba(245,245,242,.75); }
.band-blue-fade h1{ color:#fff; }
.band-charcoal{ background:linear-gradient(135deg,#1a1a1a,#0a0a0a); }
.band-aqua-orange{
  background:linear-gradient(180deg,#0a1a1e 0%,#141018 45%,#1f120a 70%,#2b1508 100%);
  color:#fff;
}
.band-cream{
  background:linear-gradient(180deg,#0a0a0a 0%,#330f26 60%,#4a1235 100%);
  color:#fff;
}
.band-legal{
  background:linear-gradient(180deg,#0a0a0a 0%,#3d0f2e 50%,#7a1a5c 100%);
  color:#fff;
}
.band-lavender{
  background:linear-gradient(180deg,#150f22 0%,#241a33 50%,#33172a 100%);
  color:#fff;
}
.band-rainbow{ background:linear-gradient(135deg,#7a1a6b 0%,#5b2ad1 35%,#2e3fc7 65%,#0d6e8a 100%); }
.band-white{ background:var(--black); }
.band-orange-purple{
  background:linear-gradient(180deg,#5a2f1a 0%,#7a3f47 12%,#8a3f5a 35%,#6b3f7a 55%,#4a2f8a 75%,#2f1f6b 92%,#1f1550 100%);
}
.band-skyblue{
  background:linear-gradient(180deg,#0a0a0a 0%,#0d2530 60%,#123a4a 100%);
  color:#fff;
}
/* .band-sky, .band-purple, .band-black, .trust-box already sit close to the
   academy palette (near-black / bold cyan-purple accent) and are left as-is. */

/* ---------- Homepage only: flat black/dark-grey bands instead of colour
   gradients ---------- */
/* Dean asked specifically for the index page's section backgrounds to drop
   the colour gradients above (teal/orange/pink/purple hues bleeding into
   each other) in favour of flat black and dark-grey bands that alternate
   to separate sections, matching academy's flatter look. Scoped to
   `.page-home` (index.html's <body> only) so every other page that reuses
   these same band-* classes (get-more-work, faq, contact, packages, etc.)
   keeps its current gradient background untouched — this was requested for
   the homepage only. Class names like `.band-white`/`.band-black` no longer
   describe their literal colour (that decoupling already happened earlier
   in this file); they're just section hooks at this point. */
.page-home .hero-dark,
.page-home .band-orange-purple,
.page-home .band-charcoal,
.page-home .band-skyblue{
  background:#0a0a0a;
}
.page-home .band-white,
.page-home .band-cream,
.page-home .band-black{
  background:#17171b;
}

/* ---------- Pricing cards ---------- */
/* Single Scene / Epic used the same near-black (#0a0a0c) as the page
   background and disappeared against it — lighten to a visible grey card.
   (.price-card.popular overrides background with its own gradient and wins
   on specificity, so this only affects the two plain cards, as requested.) */
.price-card{ background:#242429; }
/* The grid's `align-items:start` let each card be only as tall as its own
   checklist, so cards with fewer bullet points (Epic) had their price sit
   higher up than cards with more (Single Scene). Stretching all 3 cards to
   equal height lets each card's `ul{flex:1}` (already in style.css) absorb
   the slack, pushing every price row down to the same line. */
.pricing-grid{ align-items:stretch; }

/* Lead with the weekly payment instead of the total, since the audience is
   often a young/first-time buyer (or a parent) budgeting week-to-week. The
   connecting words ("for 10 weeks or" / "upfront") are small fine print
   per Dean's request, but the upfront DOLLAR AMOUNT itself
   (`.price-upfront-amt`) is set at the same size/weight/color as the weekly
   figure — showing "$139/wk" prominently while burying the actual total
   price in small gray text everywhere, including the number, would be a
   deceptive-pricing problem, not just a design choice. Only the two
   packages that actually offer a payment plan (Single Scene, Full Showreel)
   use this; Epic keeps its plain "Starting at $X" price, since it has no
   weekly plan to lead with. */
.price-card .price-main{ display:flex; flex-direction:column; gap:2px; }
.price-card .price-weekly{ font-size:28px; font-weight:900; color:#fff; line-height:1.25; }
.price-card .price-weekly small{ font-size:14px; font-weight:600; opacity:.75; margin-left:2px; }
.price-card .price-terms{ font-size:14px; font-weight:600; color:rgba(255,255,255,.8); line-height:1.4; }
.price-card .price-upfront-amt{ font-size:28px; font-weight:900; color:#fff; }

/* ---------- Mobile pricing order: lead with the "Most Popular" package ---------- */
@media(max-width:900px){
  .price-card.popular{ order:-1; }
}

/* ---------- Testimonial cards: dark elevated panel instead of white ---------- */
.testi-card{ background:#141414; box-shadow:0 6px 22px rgba(0,0,0,.5); }
.testi-card, .testi-card p{ color:var(--cream); }
.testi-card .who{ color:var(--cream); }

/* ---------- Partner logos: multiply assumed a white backdrop; give them one ---------- */
.partner-logos img{
  mix-blend-mode:normal;
  background:#fff;
  border-radius:0;
  padding:6px 10px;
}

/* ---------- Buttons: pick up new --pink/--purple vars automatically;
   patch the two hardcoded hover/outline colors style.css doesn't route
   through a variable ---------- */
.btn:hover{ background:#b81880; }
/* .btn.purple gradient/hover is defined further down, next to .cta-btn,
   so every "Book a Free Strategy Call" button matches the header CTA. */
.btn.dark-outline{ border-color:var(--cream); color:var(--cream); }
.btn.dark-outline:hover{ background:var(--cream); color:#111; }

/* ---------- Borders/dividers authored for a light page ---------- */
.faq-item{ border-bottom-color:rgba(255,255,255,.12); }

/* ---------- FAQ accordion (matches jjsplice.academy/faq's pattern: grouped
   questions with one photo per group, answers collapsed until clicked) ---------- */
.faq-group{ margin-bottom:56px; }
.faq-group h2{ margin-bottom:26px; }
.faq-group-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.faq-group-photo{ width:100%; border-radius:0; position:sticky; top:110px; max-height:560px; object-fit:cover; }
@media(max-width:800px){
  .faq-group-grid{ grid-template-columns:1fr; }
  .faq-group-photo{ position:static; max-height:320px; order:-1; }
}
.faq-acc-item{ border-bottom:1px solid rgba(255,255,255,.15); }
.faq-acc-item:first-child{ border-top:1px solid rgba(255,255,255,.15); }
.faq-acc-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  background:none; border:none; cursor:pointer; padding:22px 0; font-size:18px;
  font-weight:800; text-align:left; color:inherit; font-family:inherit;
}
.faq-acc-icon{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; border:2px solid currentColor;
  display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1;
  transition:transform .25s;
}
.faq-acc-item.open .faq-acc-icon{ transform:rotate(135deg); }
.faq-acc-panel{ display:none; }
.faq-acc-item.open .faq-acc-panel{ display:block; }
.faq-acc-panel-inner{ padding:0 0 24px; color:rgba(245,245,242,.8); line-height:1.6; }
.faq-acc-panel-inner a{ color:inherit; }

/* ==========================================================================
   Per-page "sq-" self-hosted quiz widget (book-a-strategy-call,
   clips-reel-instructions, induction-journey, scene-selection-journey).
   Each page defines these in its own inline <style>; this file is linked
   after that block so these rules win the cascade at equal specificity.
   ========================================================================== */
.sq-card{
  background:linear-gradient(160deg,#0a0a0a 0%,#0d2b33 30%,#1a0f2e 65%,#3d0f2e 100%);
}
.sq-card input,
.sq-card textarea,
.sq-step-inner input{
  font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;
}
.sq-ok-btn,
.sq-submit-btn,
.sq-nav-arrows button{
  background:var(--purple);
}
.sq-ok-btn:hover,
.sq-submit-btn:hover{
  background:#5c34b0;
}
.sq-terms-row input[type=checkbox]{
  accent-color:var(--purple);
}

/* ==========================================================================
   Header nav — ported directly from jjsplice.academy's own source (Dean
   supplied the academy site's zip so this could be matched exactly instead
   of guessed from screenshots): same rainbow-stripe gradient/angle/speed,
   same two-part logo lockup (shared "JJ SPLICE" mark image + a small
   tagline underneath), same plain (no-circle) social icons, same muted-
   until-hover per-item accent colour on every nav link, same gradient CTA
   button. Layout (logo left, links, CTA right, mobile burger) is unchanged.
   ========================================================================== */

header.site-header{
  position:sticky;
  top:0;
  background:rgba(10,10,10,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(245,245,242,.14);
  padding:18px 0;
}
header.site-header::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(100deg,#ffe600,#2bd672 20%,#00b8ff 40%,#a855f7 60%,#ff2db8 80%,#ff7a45);
  background-size:200% 100%;
  animation:jj-stripe-flow 8s linear infinite;
}
@keyframes jj-stripe-flow{
  0%{ background-position:0% 0%; }
  100%{ background-position:200% 0%; }
}

.brand-group{ display:flex; align-items:center; gap:14px; }
.logo{
  display:inline-flex; flex-direction:column; align-items:flex-start;
  text-decoration:none; color:inherit; line-height:1;
}
/* ".logo .logo-mark" (2 classes) is needed, not just ".logo-mark" (1 class),
   to beat style.css's leftover `.logo img{height:56px;width:auto;}` rule
   (1 class + 1 element = higher specificity than a single class alone) —
   without this the logo was rendering at the old 56px height instead of
   22px, ~2.5x too big, which is what made its fine glitch-texture fill
   look like visible distortion at that size. */
.logo .logo-mark{ height:22px; width:auto; display:block; }
.logo small{
  display:block; font-weight:600; font-size:.56rem; letter-spacing:.24em;
  color:#ff2db8; margin-top:7px; text-transform:uppercase;
}
.header-socials{ display:flex; align-items:center; gap:14px; }
.header-socials a{
  display:flex; align-items:center; justify-content:center;
  color:#a6a6a1; transition:color .15s;
}
.header-socials a:hover{ color:#ff2db8; }
.header-socials a svg{ width:18px; height:18px; display:block; }

/* Academy's real nav (`nav.primary`) uses a tight `gap:2px` between items —
   spacing between links comes almost entirely from each link's own padding,
   not from a flex gap. style.css's old `nav.main-nav{gap:30px}` and
   `nav.main-nav ul{gap:28px}` (left over from the pre-port header) were
   never overridden when the nav was ported, so our items were sitting
   ~28-30px further apart than academy's on top of their own padding —
   this, not any single missized element, is what still read as "not
   matching" after the logo-size fix. Their CTA is also structurally a
   `<li class="nav-cta">` inside the same `<ul>` with `margin-left:10px`,
   not a separate flex sibling like ours, so `nav.main-nav`'s own gap
   (between the `<ul>` and our separate `.cta-btn`) is set to roughly that
   same 10px-plus-item-gap total instead of copying their 2px verbatim. */
nav.main-nav{ gap:14px; }
nav.main-nav ul{ gap:2px; }

/* Every nav item gets its own accent colour, muted until hover — exactly
   jjsplice.academy's own rule (`color-mix` blends 28%/22% of the item's
   colour into a neutral grey by default; hover/focus snaps to the full
   colour). Higher specificity than style.css's `nav.main-nav a` /
   `li.active > a` so these win without needing !important. No separate
   "current page" treatment — the academy site doesn't have one either. */
nav.main-nav ul li > a{
  display:block;
  padding:10px 13px 8px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:-0.01em;
  border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
}
nav.main-nav ul li:nth-child(1) > a{ --nc:#ffe600; color:color-mix(in srgb, var(--nc) 28%, #a6a6a1); border-bottom-color:color-mix(in srgb, var(--nc) 22%, transparent); }
nav.main-nav ul li:nth-child(2) > a{ --nc:#2bd672; color:color-mix(in srgb, var(--nc) 28%, #a6a6a1); border-bottom-color:color-mix(in srgb, var(--nc) 22%, transparent); }
nav.main-nav ul li:nth-child(3) > a{ --nc:#00b8ff; color:color-mix(in srgb, var(--nc) 28%, #a6a6a1); border-bottom-color:color-mix(in srgb, var(--nc) 22%, transparent); }
nav.main-nav ul li:nth-child(4) > a{ --nc:#a855f7; color:color-mix(in srgb, var(--nc) 28%, #a6a6a1); border-bottom-color:color-mix(in srgb, var(--nc) 22%, transparent); }
nav.main-nav ul li:nth-child(5) > a{ --nc:#ff2db8; color:color-mix(in srgb, var(--nc) 28%, #a6a6a1); border-bottom-color:color-mix(in srgb, var(--nc) 22%, transparent); }
nav.main-nav ul li > a:hover,
nav.main-nav ul li > a:focus-visible{ color:var(--nc); border-bottom-color:var(--nc); opacity:1; }
/* Dropdown submenu links (if any) stay plain white/cream regardless of
   their parent item's accent color, for readability on the dark popover. */
nav.main-nav .dropdown a{ color:var(--cream) !important; }

/* CTA button — ported from jjsplice.academy's `.btn-magic` (same gradient
   colours/angle, same background-position hover sweep instead of a
   box-shadow-only glow).

   Selector is "nav.main-nav .cta-btn" (2 classes), NOT plain ".cta-btn"
   (1 class) — style.css still has a leftover `nav.main-nav a{padding:8px
   0;font-size:14px;letter-spacing:.03em;...}` rule from the pre-port
   header (2 elements + 1 class = higher specificity than a single class),
   which was silently winning over every padding/font-size/letter-spacing
   value set here. The button LOOKED like it had padding in screenshots
   because of the box-shadow glow bleeding outward, but its actual box was
   only 8px 0 — text nearly edge-to-edge — which is also why the header as
   a whole measured noticeably shorter than academy's real one (the button
   is the tallest flex child, so an undersized button undersizes the whole
   header). Same bug shape as the .logo-mark/.logo img fix a few rounds
   back: a class selector losing to an old descendant selector it was
   never checked against. */
nav.main-nav .cta-btn{
  position:relative;
  overflow:hidden;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  background:linear-gradient(100deg,#ff7a45,#ff2db8 130%);
  background-size:220% 100%;
  background-position:0% 0%;
  border:none;
  color:#fff;
  border-radius:0;
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:15px 28px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 24px rgba(255,122,69,.35);
  transition:background-position .5s ease,box-shadow .3s ease;
}
nav.main-nav .cta-btn:hover{
  background:linear-gradient(100deg,#ff7a45,#ff2db8 130%);
  background-size:220% 100%;
  background-position:100% 0%;
  color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 10px 34px rgba(255,45,184,.55);
}

/* ---------- All "Book a Free Strategy Call" buttons sitewide (.btn.purple) —
   match the header CTA's gradient/glow/shimmer instead of the flat purple
   fill from style.css. Reuses style.css's existing cta-shine keyframe. ---------- */
.btn.purple{
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg,#ff6a3d,#ff2d8f);
  border:none;
  box-shadow:0 0 18px rgba(255,45,143,.35),0 0 10px rgba(255,106,61,.25);
}
.btn.purple::before{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:skewX(-20deg);opacity:0;pointer-events:none;
}
.btn.purple:hover{
  background:linear-gradient(90deg,#ff2d8f,#ff6a3d);
  box-shadow:0 0 26px rgba(255,45,143,.5),0 0 14px rgba(255,106,61,.4);
}
.btn.purple:hover::before{opacity:1;animation:cta-shine 1.1s ease;}

/* ==========================================================================
   Footer — rebuilt as a 4-column layout matching jjsplice.academy's own
   footer-grid/footer-col/footer-bottom structure exactly (same grid ratio,
   spacing, breakpoints at 980px/760px, type sizes and muted colours),
   ported directly from their source. Content is ours: a brand column
   (logo-mark + tagline + one-line blurb) instead of their centered social
   icon row up top, we keep social links here too, tucked under the blurb,
   since academy's footer has none at all (theirs only live in the header)
   and removing ours wasn't asked for. The old centered .socials/.legal-
   links/.copyright rules in style.css are now unused on these 17 pages but
   left alone since the 4 internal/staff pages still use that markup. */
footer.site-footer{
  background:var(--black);
  color:var(--cream);
  padding:64px 0 28px;
  text-align:left;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(245,245,242,.14);
}
.footer-brand .logo{
  display:inline-flex; flex-direction:column; align-items:flex-start;
  text-decoration:none; color:inherit; line-height:1;
}
.footer-brand .logo-mark{ height:26px; width:auto; display:block; }
.footer-brand .logo small{
  display:block; font-weight:600; font-size:.56rem; letter-spacing:.24em;
  color:#ff2db8; margin-top:7px; text-transform:uppercase;
}
.footer-brand p{ color:var(--text-faint); font-size:.86rem; max-width:32ch; margin:16px 0 0; line-height:1.4; }
.footer-socials{ display:flex; align-items:center; gap:14px; margin-top:18px; }
.footer-socials a{ display:flex; align-items:center; justify-content:center; color:#a6a6a1; transition:color .15s; }
.footer-socials a:hover{ color:#ff2db8; }
.footer-socials a svg{ width:18px; height:18px; display:block; }
.footer-col h4{
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); margin:0 0 16px; font-weight:700;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-col a{ color:#a6a6a1; text-decoration:none; font-size:.88rem; }
.footer-col a:hover{ color:#ff2db8; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:12px; }
.footer-bottom p{ color:var(--text-faint); font-size:.78rem; margin:0; }
.footer-legal{ display:flex; gap:20px; list-style:none; margin:0; padding:0; }
.footer-legal a{ color:var(--text-faint); font-size:.78rem; text-decoration:none; }
.footer-legal a:hover{ color:#ff2db8; }

@media(max-width:980px){
  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:32px; }
}
@media(max-width:760px){
  .footer-grid{ grid-template-columns:1fr; row-gap:28px; }
}