/* ============================================================
   Ships — shipsfriends.com
   Concept: "beacon & map" — lighthouse ping-rings as the
   signature motif, warm lavender paper, brand blue→purple.
   ============================================================ */

/* ---------- Fonts (self-hosted Poppins) ---------- */
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/assets/fonts/Poppins-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/assets/fonts/Poppins-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/assets/fonts/Poppins-Bold.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --blue:    #508CFF;
  --purple:  #9B64FF;
  --deep:    #482362;   /* logo / brand anchor */
  --lav:     #B097C7;   /* light beacon accent */

  --ink:     #2B1D40;   /* headings */
  --body:    #574E6B;   /* body copy (AA on paper) */
  --muted:   #8B83A0;   /* captions */

  --paper:   #FBFAFF;   /* warm lavender white base */
  --paper-2: #F2EEFF;   /* alternating wash */
  --paper-3: #ECE7FF;   /* deeper wash */
  --line:    rgba(72, 35, 98, .10);
  --line-2:  rgba(72, 35, 98, .16);

  --grad:      linear-gradient(135deg, #508CFF 0%, #9B64FF 100%);
  --grad-rev:  linear-gradient(135deg, #9B64FF 0%, #508CFF 100%);
  --grad-deep: linear-gradient(150deg, #5E3FB8 0%, #7A4FD6 45%, #9B64FF 100%);

  --sh-card: 0 40px 80px -32px rgba(72, 35, 98, .45), 0 8px 24px -12px rgba(72, 35, 98, .22);
  --sh-soft: 0 18px 40px -20px rgba(72, 35, 98, .30);
  --sh-tiny: 0 2px 10px -3px rgba(72, 35, 98, .25);

  --r-xl: 32px; --r-lg: 26px; --r: 20px; --r-sm: 14px; --pill: 999px;
  --wrap: 1180px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  color: var(--body);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 6px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
section { position: relative; }
.section { padding-block: clamp(72px, 12vw, 140px); }

/* ---------- Type ---------- */
h1, h2, h3 { color: var(--ink); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; }
.display {
  font-size: clamp(2.7rem, 6.4vw, 4.7rem);
  letter-spacing: -.035em; line-height: 1.02;
}
h2.title { font-size: clamp(2rem, 4.3vw, 3.2rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 600; letter-spacing: -.01em; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.3rem); color: var(--body); }
p.muted { color: var(--muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px rgba(155,100,255,.16); }
.gradient-text {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-weight: 600; font-size: 1rem; cursor: pointer;
  border: 0; border-radius: var(--pill); padding: 15px 28px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s;
  will-change: transform;
}
.btn-primary { color: #fff; background: var(--grad); box-shadow: 0 14px 30px -10px rgba(123,79,214,.6); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -12px rgba(123,79,214,.7); }
.btn-ghost { color: var(--deep); background: rgba(255,255,255,.6); border: 1.5px solid var(--line-2); }
.btn-ghost:hover { transform: translateY(-3px); background: #fff; box-shadow: var(--sh-soft); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* App Store badge (official-style black pill) */
.badge-store {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  background: #000; color: #fff; border-radius: 14px;
  padding: 10px 18px 10px 16px; line-height: 1;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.5);
}
.badge-store:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(0,0,0,.55); }
.badge-store svg { width: 26px; height: 26px; fill: #fff; flex: none; }
.badge-store .bt { display: flex; flex-direction: column; gap: 2px; }
.badge-store .bt small { font-size: .66rem; font-weight: 500; letter-spacing: .02em; opacity: .92; }
.badge-store .bt strong { font-size: 1.16rem; font-weight: 600; letter-spacing: -.01em; }

/* ---------- Decorative ping rings (the motif) ---------- */
.rings { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }
.ring {
  position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(123,79,214,.22);
  left: 50%; top: 50%; translate: -50% -50%;
}
@media (prefers-reduced-motion: no-preference) {
  .ring { animation: ping 6s var(--ease) infinite; }
  .ring:nth-child(2) { animation-delay: 1.2s; }
  .ring:nth-child(3) { animation-delay: 2.4s; }
  .ring:nth-child(4) { animation-delay: 3.6s; }
}
@keyframes ping {
  0%   { width: 60px; height: 60px; opacity: 0; }
  18%  { opacity: .9; }
  100% { width: 920px; height: 920px; opacity: 0; }
}

/* faint cartographic dot texture */
.dotgrid::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(123,79,214,.16) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 78%);
  opacity: .7;
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  transition: background-color .3s, box-shadow .3s, padding .3s;
  padding-block: 18px;
}
.site-header.scrolled {
  background: rgba(251,250,255,.78);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 40px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a.nav-link { font-weight: 600; font-size: .96rem; color: var(--deep); opacity: .82; transition: opacity .2s; }
.nav-links a.nav-link:hover { opacity: 1; }
.nav-cta { display: inline-flex; align-items: center; gap: 18px; }
@media (max-width: 860px) {
  .nav-links a.nav-link { display: none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero { padding-top: clamp(40px, 7vw, 84px); padding-bottom: clamp(60px, 9vw, 120px); overflow: clip; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.hero-copy { position: relative; z-index: 2; }
.hero h1 { margin: 20px 0 0; }
.hero .lead { margin-top: 22px; max-width: 30ch; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 34px; }
.hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 26px; color: var(--muted); font-size: .9rem; font-weight: 500; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust .tick { color: var(--purple); font-weight: 700; }

/* Hero phones (the screenshot gradient cards) */
.hero-art { position: relative; min-height: 520px; display: grid; place-items: center; }
/* framed-phone screenshots are transparent PNGs/WebP with the bezel baked in,
   so the soft shadow must follow the phone silhouette (drop-shadow, not box-shadow). */
.shot {
  filter: drop-shadow(0 28px 38px rgba(72,35,98,.34)) drop-shadow(0 6px 14px rgba(72,35,98,.18));
}
/* the lifestyle "meet" photo is an opaque rectangle — keep it a rounded card */
.shot--photo {
  border-radius: 26px; overflow: hidden; box-shadow: var(--sh-card);
  filter: none; rotate: 0deg !important;
}
.hero-art .shot { width: clamp(210px, 56%, 290px); }
.hero-art .shot.front { position: relative; z-index: 3; rotate: 0deg; }
.hero-art .shot.back,
.hero-art .shot.left {
  position: absolute; bottom: 9%; width: clamp(150px, 42%, 220px);
  filter: drop-shadow(0 22px 30px rgba(72,35,98,.30));
}
.hero-art .shot.back { z-index: 2; right: -7%; rotate: 9deg; }
.hero-art .shot.left { z-index: 1; left: -7%; rotate: -9deg; }
@media (prefers-reduced-motion: no-preference) {
  .hero-art .shot.front { animation: floaty 7s ease-in-out infinite; }
  .hero-art .shot.back  { animation: floaty 7s ease-in-out infinite reverse; }
  .hero-art .shot.left  { animation: floaty 8s ease-in-out infinite; }
}
@keyframes floaty { 0%,100% { translate: 0 0; } 50% { translate: 0 -16px; } }

/* ============================================================
   The loop (Discover → Invite → Meet)
   ============================================================ */
.loop { background: var(--paper-2); border-block: 1px solid var(--line); }
.loop .head { text-align: center; max-width: 640px; margin: 0 auto clamp(46px, 6vw, 72px); }
.loop .head h2 { margin-top: 16px; }
.loop .head p { margin-top: 16px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; position: relative; }
.step {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 38px 30px; text-align: center;
  box-shadow: var(--sh-soft);
}
.step .ic {
  width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 22px;
  display: grid; place-items: center; background: var(--grad);
  box-shadow: 0 16px 30px -12px rgba(123,79,214,.6);
}
.step .ic svg { width: 36px; height: 36px; stroke: #fff; fill: none; stroke-width: 2; }
.step .num {
  position: absolute; top: 20px; right: 24px; font-weight: 700; font-size: .95rem;
  color: var(--lav); letter-spacing: .04em;
}
.step h3 { margin-bottom: 10px; }
.step p { font-size: .98rem; }

/* ============================================================
   Feature rows
   ============================================================ */
.feature { overflow: clip; }
.feature .row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.feature .row.flip .f-art { order: 2; }
.feature .row.flip .f-copy { order: 1; }
.f-copy { max-width: 30rem; }
.f-copy h2 { margin: 18px 0 18px; }
.f-copy .lead { margin-bottom: 22px; }
.f-list { list-style: none; display: grid; gap: 14px; }
.f-list li { display: flex; gap: 13px; align-items: flex-start; font-weight: 500; color: var(--body); }
.f-list .chk {
  flex: none; width: 26px; height: 26px; border-radius: 9px; margin-top: 1px;
  display: grid; place-items: center; background: rgba(155,100,255,.13);
}
.f-list .chk svg { width: 15px; height: 15px; stroke: var(--purple); fill: none; stroke-width: 2.6; }

.f-art { position: relative; display: grid; place-items: center; }
.f-art .shot { width: clamp(240px, 80%, 360px); position: relative; z-index: 2; rotate: -2.5deg; }
.feature .row.flip .f-art .shot { rotate: 2.5deg; }
.f-art .shot--photo { width: clamp(280px, 100%, 480px); }
/* "Every plan" row: phone + floating cutout cards. The phone + cards live in a
   phone-sized .phone-stage so the overlays are positioned relative to the PHONE
   (not the column) — consistent across desktop, portrait, and landscape. */
.f-art.cutouts .phone-stage { position: relative; width: clamp(240px, 80%, 360px); }
.f-art.cutouts .shot { width: 100%; }
.cutout {
  position: absolute; z-index: 4; background: #fff;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 26px 48px -16px rgba(72,35,98,.45), 0 6px 16px -8px rgba(72,35,98,.25);
}
.cutout--details { width: 81%; left: -54%; top: 4%; rotate: -5deg; }
.cutout-stack {
  position: absolute; z-index: 4; right: -57%; top: 50%; translate: 0 -50%;
  width: 78%; display: flex; flex-direction: column; gap: 8px; rotate: 5deg;
}
.cutout-stack .cutout { position: static; width: 100%; }
/* portrait phones: pull the cards in over the phone so nothing clips off-screen */
@media (max-width: 600px) {
  .cutout--details { width: 60%; left: -22%; }
  .cutout-stack    { width: 54%; right: -22%; }
}
/* "Meet" row: lifestyle photo with framed chat screenshots layered on top —
   mirrors the three overlays composited into the 03_meet App Store shot
   (primary thread low-left +5°, chats list upper-left +11°, thread upper-right -14°). */
.meet-stage .photo-stage { position: relative; width: clamp(280px, 100%, 480px); }
.meet-stage .photo-stage .shot--photo { width: 100%; }
.chat-ov {
  position: absolute; z-index: 3;
  filter: drop-shadow(0 22px 30px rgba(72,35,98,.34)) drop-shadow(0 5px 12px rgba(72,35,98,.20));
}
.chat-ov--main { z-index: 4; width: 52%; left: 30%; top: 55%; rotate: 5deg; }
.chat-ov--list { width: 38%; left: -12%; top: -9%; rotate: 11deg; }
.chat-ov--side { width: 31%; right: -12%; top: -7%; rotate: -14deg; }
/* When the feature row stacks (≤960px) the art sits ABOVE the copy, so the main
   phone — which bleeds off the bottom of the photo — would overlap the heading.
   Reserve exactly the bleed height below the stage (scales with the photo width,
   capped at the bleed when the photo hits its 480px max). The phone fills this
   space, so it reads as a floating card above the text, like the other sections. */
@media (max-width: 960px) {
  .meet-stage { margin-bottom: min(60%, 288px); }
}
/* portrait: pull the overlays inward so nothing clips off the screen edges */
@media (max-width: 600px) {
  .chat-ov--main { width: 52%; left: 24%; top: 52%; }
  .chat-ov--list { width: 37%; left: -4%; top: -6%; }
  .chat-ov--side { width: 31%; right: -4%; top: -5%; }
}
.f-art .glow {
  position: absolute; z-index: 0; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: var(--grad); filter: blur(70px); opacity: .28;
}

/* ============================================================
   Privacy band
   ============================================================ */
.privacy { background:
    radial-gradient(120% 120% at 80% 10%, rgba(80,140,255,.10), transparent 50%),
    radial-gradient(120% 120% at 10% 90%, rgba(155,100,255,.12), transparent 55%),
    var(--paper-3);
  border-block: 1px solid var(--line);
}
.privacy .row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,90px); align-items: center; }
.privacy .p-art { display: grid; place-items: center; position: relative; }
.privacy .p-art .shot { width: clamp(240px, 78%, 340px); rotate: 2deg; }
.privacy .pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  background: rgba(255,255,255,.7); border: 1px solid var(--line-2); border-radius: var(--pill);
  font-weight: 600; font-size: .9rem; color: var(--deep);
}
.pill svg { width: 15px; height: 15px; stroke: var(--purple); fill: none; stroke-width: 2.4; }

/* ============================================================
   FAQ
   ============================================================ */
.faq .head { text-align: center; margin-bottom: clamp(40px,5vw,60px); }
.faq-list { max-width: 760px; margin-inline: auto; display: grid; gap: 14px; }
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-tiny); overflow: hidden;
}
.faq-item summary {
  list-style: none; cursor: pointer; padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-weight: 600; color: var(--ink); font-size: 1.06rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .pm { flex: none; width: 24px; height: 24px; position: relative; transition: transform .3s var(--ease); }
.faq-item .pm::before, .faq-item .pm::after {
  content: ""; position: absolute; inset: 50% 0 auto 50%; width: 14px; height: 2.4px;
  background: var(--purple); border-radius: 2px; translate: -50% -50%;
}
.faq-item .pm::after { rotate: 90deg; }
.faq-item[open] .pm { transform: rotate(135deg); }
.faq-item .ans { padding: 0 26px 24px; color: var(--body); font-weight: 500; }
.faq-item .ans p + p { margin-top: 12px; }
.faq-item .ans a { color: var(--purple); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   CTA band
   ============================================================ */
.cta { padding-block: clamp(64px, 9vw, 110px); }
.cta-card {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background: var(--grad-deep); color: #fff; text-align: center;
  padding: clamp(52px, 8vw, 96px) clamp(24px, 5vw, 80px);
  box-shadow: 0 50px 90px -40px rgba(94,63,184,.8);
}
.cta-card h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.3rem); letter-spacing: -.03em; }
.cta-card p { color: rgba(255,255,255,.86); max-width: 44ch; margin: 18px auto 32px; font-size: 1.12rem; }
.cta-card .badge-store { box-shadow: 0 16px 40px -14px rgba(0,0,0,.55); }
.cta-card .lighthouse-wm {
  position: absolute; right: -40px; bottom: -50px; width: 320px; opacity: .12;
  pointer-events: none; filter: brightness(0) invert(1);
}
.cta-card .rings .ring { border-color: rgba(255,255,255,.22); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--deep); color: rgba(255,255,255,.7); padding-block: 64px 40px; position: relative; overflow: hidden; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.footer-brand { max-width: 280px; }
.footer-brand img { height: 60px; width: auto; margin-bottom: 18px; }
.footer-brand p { font-size: .92rem; color: rgba(255,255,255,.55); }
.footer-cols { display: flex; gap: clamp(40px, 8vw, 90px); flex-wrap: wrap; }
.footer-col h4 { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: 16px; }
.footer-col a { display: block; padding: 6px 0; color: rgba(255,255,255,.66); font-size: .96rem; transition: color .2s; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  margin-top: 50px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  font-size: .86rem; color: rgba(255,255,255,.5);
}

/* ============================================================
   Legal pages
   ============================================================ */
.legal { padding-block: clamp(50px, 7vw, 90px); }
.legal-wrap { max-width: 760px; margin-inline: auto; }
.legal .back { display: inline-flex; align-items: center; gap: 8px; color: var(--deep); font-weight: 600; margin-bottom: 26px; opacity: .8; }
.legal .back:hover { opacity: 1; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 6px; }
.legal .updated { color: var(--muted); font-weight: 500; margin-bottom: 36px; display: block; }
.legal h2 { font-size: 1.4rem; margin: 38px 0 14px; color: var(--deep); }
.legal h3 { font-size: 1.12rem; margin: 24px 0 10px; }
.legal p, .legal li { color: var(--body); font-weight: 500; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 16px 0; padding-left: 22px; display: grid; gap: 8px; }
.legal li { padding-left: 4px; }
.legal a { color: var(--purple); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }

/* ============================================================
   Scroll reveal
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .hero-copy { text-align: center; }
  .hero .lead { margin-inline: auto; }
  .hero-cta, .hero-trust { justify-content: center; }
  .hero-art { min-height: 440px; margin-top: 24px; }
  .feature .row, .privacy .row { grid-template-columns: 1fr; gap: 36px; }
  .feature .row .f-art, .feature .row.flip .f-art { order: -1; }
  .feature .row.flip .f-copy { order: 0; }
  .f-copy, .privacy .p-copy { max-width: 38rem; margin-inline: auto; text-align: center; }
  .f-list { text-align: left; max-width: 24rem; margin-inline: auto; }
  .privacy .pills { justify-content: center; }
  .privacy .p-art { order: -1; }
}
@media (max-width: 680px) {
  .steps { grid-template-columns: 1fr; gap: 18px; }
  .footer-top { flex-direction: column; gap: 32px; }
  .hero-cta .btn, .hero-cta .badge-store { width: 100%; }
  .hero-cta { flex-direction: column; }
}


/* ============================================================
   Performance: defer off-screen section rendering so the heavy
   filters/shadows (drop-shadow phones, blurred glows) don't all
   rasterize on first paint — removes the load-in "sharp shadow"
   flash. Pixel-identical; sections render as they near the viewport.
   contain-intrinsic-size keeps the scrollbar/layout stable.
   ============================================================ */
.loop, .feature, .privacy, .faq, .cta, .site-footer { content-visibility: auto; }
.loop        { contain-intrinsic-size: auto 720px; }
.feature     { contain-intrinsic-size: auto 2200px; }
.privacy     { contain-intrinsic-size: auto 860px; }
.faq         { contain-intrinsic-size: auto 720px; }
.cta         { contain-intrinsic-size: auto 460px; }
.site-footer { contain-intrinsic-size: auto 360px; }