/* ============================================================
   MOCKUP 6 — HYBRID  ·  "LA BANDERA"
   Swiss structure · Hearth depth · real photography
   ============================================================

   THE BRANDING PROBLEM THIS SOLVES
   ---------------------------------
   The previous pass ran on a blue-black ground (#050a1a) with
   red used as punctuation. That made BLUE the dominant colour by
   surface area, which is why the page read as "dark tech site"
   and not as Paraguay. You cannot build flag identity on near-
   black.

   So the ground is now PAPER — white is a real field, not just a
   text colour — and the page is a sequence of horizontal bands
   laid out the way the flag itself is:

       red  ·  white (twice the height)  ·  blue

   The triband recurs at every seam: under the nav, across the
   ticker, above the footer, and inside the crest. Scrolling the
   page is scrolling a flag.

   COLOUR ROLES — strictly enforced
   --------------------------------
     RED   the lead. Accents, kickers, bands, marks. Pantone 485 C.
     WHITE the ground. Paper, not sterile #fff.
     BLUE  structure. Bands, deep fields, Pantone 286 C.
     GOLD  the emblem star. Sparingly, on dark only.
     GREEN WhatsApp. And ONLY WhatsApp.

   Green appears on exactly one thing: the join CTA. It is
   deliberately off-palette so it clashes and pulls the eye. Do
   not let it leak into cards, pulses, avatars or the live badge —
   the second it becomes a brand colour it stops working as a
   call to action.

   THE RULE (carried from the contrast audit):
   texture and glow live on SURFACES — never inside the glyphs.
   Every piece of type is a solid colour with a measured ratio.
   ============================================================ */

:root {
  /* ── La Bandera Paraguaya ──
     I sampled a rendered 1280px flag rather than trusting a chip:
     it comes back at exactly #d52b1e and #0038a8, which is what
     Pantone 485 C / 286 C mean. So these ARE the official values.

     But large fields of that red are what make the page read as a
     generic US/French tricolour — the bright tone is the problem at
     scale, not at small sizes. So the flag keeps TWO reds:
       --red       exact flag red, for anything flag-precise:
                   the crest, the triband, kickers, the word guampa
       --red-field a deeper tone of the same hue for full-bleed
                   bands, where the brightness is what reads cheap
     Same blue, same rule: --blue is the flag, --blue-deep is the
     structural anchor the page was missing. */
  --red: #d52b1e;        /* Pantone 485 C, exact — accents and logo */
  --red-field: #b0231a;  /* same hue, for large fills */
  --red-deep: #8f1c14;   /* red that survives as text on paper */
  --red-hot: #d52b1e;
  --white: #ffffff;
  --blue: #0038a8;       /* Pantone 286 C, exact */
  --blue-deep: #00256e;  /* structural anchor */
  --blue-night: #06123a;
  --gold: #fedf00;

  /* ── WhatsApp only. Nowhere else. ── */
  --green: #12853f;

  /* ── Paper ground ── */
  --paper: #f7f5f2;
  --card: #ffffff;
  --ink: #0d1b3d;
  --ink-2: #35406b;
  --ink-3: #5a6489;
  --hair: rgba(13, 27, 61, 0.12);
  --hair-2: rgba(13, 27, 61, 0.22);

  /* ── On dark ── */
  --on-dark: rgba(255, 255, 255, 0.78);
  --on-dark-2: rgba(255, 255, 255, 0.6);
  --on-dark-line: rgba(255, 255, 255, 0.18);

  --lift-t: 0.5s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

::selection { background: var(--red); color: #fff; }

/* ============================================================
   THE TRIBAND — the flag's own proportions, 1 : 2 : 1
   ============================================================ */
.tri {
  display: block;
  height: 5px;
  background: linear-gradient(180deg,
    var(--red) 0 25%,
    #fff 25% 75%,
    var(--blue) 75% 100%);
}

/* ============================================================
   PRIMITIVES
   ============================================================ */

/* specular sweep across a surface — hearth's hbar-sheen,
   promoted to a shared primitive. Surfaces only, never text. */
.sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.sheen::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 42%;
  background: linear-gradient(100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.16) 45%,
    transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lift:hover .sheen::after { transform: translateX(130%); }
/* on white cards a white sheen is invisible — tint it blue */
.do .sheen::after, .lib .sheen::after {
  background: linear-gradient(100deg,
    transparent 20%,
    rgba(0, 56, 168, 0.07) 45%,
    transparent 70%);
}

.lift {
  transition: transform var(--lift-t) cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow var(--lift-t) cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color var(--lift-t);
}

/* live pulse — RED now. Green is reserved for the join CTA,
   and spending it on a status dot would dilute the one moment
   it has to work. */
.pulse {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red-hot);
  flex: none;
  box-shadow: 0 0 0 0 rgba(255, 95, 77, 0.65);
  animation: ring 1.9s ease-out infinite;
}
.pulse.sm { width: 6px; height: 6px; }
@keyframes ring {
  0%   { box-shadow: 0 0 0 0 rgba(255, 95, 77, 0.65); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 95, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 95, 77, 0); }
}

/* ============================================================
   THE CREST — the guampa
   ------------------------------------------------------------
   A guampa painted in the flag's own colours, packed with yerba
   and drinking through a steel bombilla. Painting a guampa
   red/white/blue is an actual Paraguayan thing, not a design
   conceit, so the mark carries the flag without literally
   drawing a flag.

   The yerba is a muted olive, deliberately nothing like the
   WhatsApp green — the logo must never put a second green next
   to the one colour that means "join".

   Painted flat and outlined rather than rendered with volume:
   at 34px in the nav, a shaded gourd turns to mush.
   ============================================================ */
/* The brand is now the full "Open Asu" lockup, drawn with the guampa as the
   O. It is a wide 2.91:1 mark, so it is sized by height and the old 34px
   rounded chip is retired — a chip around a wordmark just reads as an app icon. */
.brand { display: flex; align-items: center; flex: none; }
.brand-logo {
  display: block;
  height: 40px;
  width: auto;
  object-fit: contain;
}
.foot-brand .brand-logo { height: 46px; }

@media (max-width: 720px) {
  .brand-logo { height: 32px; }
  .foot-brand .brand-logo { height: 36px; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247, 245, 242, 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.nav-in {
  max-width: 1400px; margin: 0 auto;
  padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 11px; }

.nav-links { display: flex; gap: 30px; font-size: 14px; color: var(--ink-2); }
.nav-links a { position: relative; padding: 4px 0; transition: color 0.2s; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--red);
  transition: width 0.3s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  font-size: 14px; font-weight: 600;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s, background 0.22s, border-color 0.22s;
  white-space: nowrap;
}
.btn.big { padding: 16px 30px; font-size: 15.5px; }
.btn.xl  { padding: 20px 40px; font-size: 17px; border-radius: 12px; }
.btn .wa { display: inline-flex; }

/* THE ONE PLACE GREEN IS ALLOWED.
   WhatsApp's brand green #25D366 is only 1.98:1 against white and
   fails WCAG AA outright. These stops are the same hue family,
   darkened until white text passes at 4.71 / 6.62 / 9.22:1.
   It still reads unmistakably as WhatsApp; legibility is not
   traded away for the exact brand chip. */
.btn-hot {
  color: #fff;
  background: linear-gradient(135deg, #12853f 0%, #0e6b35 55%, #0a5326 100%);
  box-shadow: 0 10px 28px -10px rgba(18, 133, 63, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn-hot:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #11783d 0%, #0d6031 55%, #094a22 100%);
  box-shadow: 0 18px 44px -12px rgba(18, 133, 63, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* the star from the flag, which is also the mark Pilsen put on its
   own label to signal "Paraguayan". Gold on colour, blue on white. */
.star {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.12em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.star-gold {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpolygon fill='%23FEDF00' points='24,15 26.3,20.8 32.6,21.2 27.7,25.2 29.3,31.3 24,27.9 18.7,31.3 20.3,25.2 15.4,21.2 21.7,20.8'/%3E%3C/svg%3E");
}
.star-blue {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpolygon fill='%230038A8' points='24,15 26.3,20.8 32.6,21.2 27.7,25.2 29.3,31.3 24,27.9 18.7,31.3 20.3,25.2 15.4,21.2 21.7,20.8'/%3E%3C/svg%3E");
}

/* ============================================================
   FLAG BAND
   ------------------------------------------------------------
   The red band that used to sit BELOW the hero, at the ticker,
   has been lifted ABOVE it. The problem with putting all the
   flag colour under a full-bleed photo hero is that on a
   900px-tall screen you never saw it: the page did not feel
   like Paraguay until you scrolled. Red now lands in the first
   viewport, so does the blue, so does the white of the type.
   ============================================================ */
.flagband {
  background: var(--red-field);
  color: #fff;
  padding: 15px 32px;
}
.flagband-in {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.flagband-t {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px; font-style: italic; font-weight: 400;
  letter-spacing: -0.01em;
}
.flagband-d {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff;
}

/* ============================================================
   HERO — the one dark moment, on flag-blue rather than black
   ============================================================ */
.hero {
  position: relative;
  /* nav + triband + flag band already eat ~132px, so the hero gets
     the rest of the viewport. At a flat 92vh the primary CTA was
     pushed just below the fold once the red band went in. */
  min-height: calc(100vh - 132px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 90px 32px 56px;
  overflow: hidden;
  background: var(--blue-night);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

/* The scrim is flag blue, not black. Tuned by measurement, not
   by eye: the auditor reports the worst backdrop pixel under
   every glyph, so the brightest possible sunlit patch behind the
   headline still has to clear the bar. The right side stays open
   so the photography still reads. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(6, 18, 58, 0.68) 0%,
      rgba(6, 18, 58, 0.48) 22%,
      rgba(6, 18, 58, 0.74) 48%,
      rgba(6, 18, 58, 0.93) 76%,
      rgba(6, 18, 58, 0.98) 100%),
    linear-gradient(100deg,
      rgba(6, 18, 58, 0.95) 0%,
      rgba(6, 18, 58, 0.90) 38%,
      rgba(6, 18, 58, 0.66) 62%,
      rgba(6, 18, 58, 0.22) 100%);
}
.hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 240px;
  background: linear-gradient(180deg, transparent, var(--blue) 92%);
  pointer-events: none;
}

.hero-in {
  position: relative; z-index: 2;
  max-width: 1400px; width: 100%; margin: 0 auto;
  padding-left: 34px;
}
/* a vertical triband, exactly like the flag's proportions
   rotated — the cheapest possible "this is Paraguay" signal.
   The 1px inner outline matters: flag blue on flag-blue-night
   at the bottom of the scrim would otherwise vanish. */
.hero-in::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 0;
  width: 9px;
  background: linear-gradient(180deg,
    var(--red) 0 25%,
    #fff 25% 75%,
    var(--blue) 75% 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 30px rgba(213, 43, 30, 0.4);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  margin-bottom: 26px;
  border-radius: 100px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff;
  background: rgba(6, 18, 58, 0.55);
  border: 1px solid var(--on-dark-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Swiss's giant display, solid white. No gradient, no texture. */
.hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(50px, 9.2vw, 148px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
}
.hero-sub {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(50px, 9.2vw, 148px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-weight: 400;
  font-style: italic;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
}
.hero-sub strong { color: var(--red-hot); font-weight: 400; }

.lede {
  max-width: 50ch;
  font-size: clamp(16px, 1.6vw, 19px);
  color: rgba(255, 255, 255, 0.9);
  margin: 28px 0 34px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- floating live card ---------- */
.live-card {
  position: absolute;
  z-index: 3;
  right: max(32px, calc((100% - 1400px) / 2 + 32px));
  top: 50%;
  transform: translateY(-50%);
  width: 310px;
  padding: 24px;
  border-radius: 18px;
  background: rgba(6, 18, 58, 0.74);
  border: 1px solid var(--on-dark-line);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 30px 70px -20px rgba(0, 0, 0, 0.8);
  color: #fff;
  overflow: hidden;
}
.live-card:hover {
  transform: translateY(calc(-50% - 6px));
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 40px 84px -20px rgba(0, 0, 0, 0.9);
}
.live-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.live-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff;
  background: var(--red);
  border: 1px solid rgba(255, 255, 255, 0.32);
}
.live-when { font-size: 12px; color: var(--on-dark-2); }
.live-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 7px;
}
.live-where { font-size: 13.5px; color: var(--on-dark); margin-bottom: 20px; }
.live-foot { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--on-dark-line); }
.faces { display: flex; }
.faces i {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid #0a1a4d;
  background: var(--f);
  margin-left: -8px;
}
.faces i:first-child { margin-left: 0; }
.live-count { font-size: 13px; color: var(--on-dark); }
.live-count strong { color: #fff; font-weight: 700; }

/* ============================================================
   TICKER — the flag's RED band
   ============================================================ */
.ticker {
  overflow: hidden;
  padding: 22px 0;
  background: var(--red-field);
}
.ticker-track {
  display: inline-flex; align-items: center; gap: 26px;
  white-space: nowrap;
  animation: slide 46s linear infinite;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 25px; font-style: italic; font-weight: 400;
  color: #fff;
}
.ticker-track b { color: var(--gold); font-style: normal; font-size: 18px; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   SECTIONS
   ============================================================ */
.sec { max-width: 1400px; margin: 0 auto; padding: clamp(76px, 10vw, 140px) 32px; }
.sec.band { max-width: none; padding-left: max(32px, calc((100% - 1336px) / 2)); padding-right: max(32px, calc((100% - 1336px) / 2)); }

.band-red { background: var(--red-field); }
.band-blue { background: linear-gradient(180deg, #00256e 0%, #001847 100%); }

.sec-head { margin-bottom: clamp(44px, 6vw, 76px); max-width: 780px; }
.kicker {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red-deep);
  margin-bottom: 20px;
}
.sec-head h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(36px, 5.4vw, 82px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 22px;
}
.sec-head h2 em { font-style: italic; font-weight: 400; color: var(--red); }
.sec-lede { font-size: 17px; color: var(--ink-2); max-width: 46ch; }

/* on dark bands the kicker flips to gold, which clears 8:1 on blue */
.band-blue .kicker, .outro .kicker { color: var(--gold); }

/* ============================================================
   WHAT WE DO — cards on paper, tinted by the flag
   ============================================================ */
.do-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.do {
  position: relative;
  padding: 34px 26px 66px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgba(13, 27, 61, 0.04), 0 16px 34px -24px rgba(13, 27, 61, 0.4);
}
/* the flag band, sitting on top of the card */
.do::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--c);
}
.do > *:not(.sheen) { position: relative; z-index: 1; }
.do:hover {
  transform: translateY(-6px);
  border-color: var(--hair-2);
  box-shadow: 0 1px 2px rgba(13, 27, 61, 0.05), 0 30px 56px -26px color-mix(in srgb, var(--c) 55%, transparent);
}
.do-n {
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--ct);
  margin-bottom: 20px;
}
.do h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 25px; font-weight: 700;
  line-height: 1.12; letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 12px;
}
.do > p:not(.do-n) { font-size: 14.5px; color: var(--ink-2); }
.do-go {
  position: absolute;
  left: 26px; bottom: 24px;
  font-size: 21px;
  color: var(--ct);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.do:hover .do-go { transform: translateX(8px); }

/* ============================================================
   FEATURED MEETUP — glass on the blue band
   ============================================================ */
.feature {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 40px 90px -40px rgba(0, 0, 0, 0.7);
}
.feature:hover { border-color: rgba(255, 255, 255, 0.4); }
.feature-media { position: relative; min-height: 480px; overflow: hidden; }
.feature-media img { transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.feature:hover .feature-media img { transform: scale(1.04); }
.feature-chip {
  position: absolute; top: 22px; left: 22px;
  padding: 8px 15px;
  border-radius: 100px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  box-shadow: 0 8px 24px -10px rgba(254, 223, 0, 0.8);
}
.feature-body { padding: clamp(38px, 5vw, 66px); display: flex; flex-direction: column; justify-content: center; }
.feature-body h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: 1.02; letter-spacing: -0.035em;
  font-weight: 900;
  color: #fff;
  margin-bottom: 22px;
}
.feature-body h2 em { font-style: italic; font-weight: 400; color: var(--gold); }
.feature-lede { font-size: 16.5px; color: var(--on-dark); margin-bottom: 14px; max-width: 44ch; }
.feature-note { font-size: 14px; font-style: italic; color: var(--on-dark-2); margin-bottom: 26px; }
.feature-meta { display: flex; flex-direction: column; gap: 11px; margin-bottom: 30px; }
.feature-meta > div { display: grid; grid-template-columns: 84px 1fr; gap: 14px; font-size: 14px; }
.feature-meta dt { color: var(--gold); font-weight: 700; letter-spacing: 0.04em; }
.feature-meta dd { color: rgba(255, 255, 255, 0.88); }
.feature-body .btn { align-self: flex-start; }

/* ============================================================
   PHOTO MOSAIC
   ============================================================ */
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 260px;
  gap: 16px;
}
.mosaic figure {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--hair);
  box-shadow: 0 18px 40px -26px rgba(13, 27, 61, 0.5);
}
.mosaic img { transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mosaic figure:hover img { transform: scale(1.06); }
.mosaic figure::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 44%, rgba(6, 18, 58, 0.92) 100%);
  pointer-events: none;
}
.mosaic figcaption {
  position: absolute;
  left: 20px; right: 20px; bottom: 18px;
  z-index: 1;
}
.mosaic figcaption strong {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px; font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}
.mosaic figcaption span { font-size: 13px; color: rgba(255, 255, 255, 0.78); }
.m-a { grid-column: span 2; grid-row: span 2; }
.m-b { grid-column: span 2; }
.m-c { grid-column: span 1; }
.m-d { grid-column: span 1; }

/* ============================================================
   MANIFESTO — a white card floating on the red band
   ============================================================ */
.manifesto {
  max-width: 940px;
  padding: clamp(48px, 6vw, 84px);
  border-radius: 26px;
  background: var(--card);
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.55);
}
.manifesto h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: 1.06; letter-spacing: -0.038em;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 26px;
}
.manifesto h2 em { font-style: italic; font-weight: 400; color: var(--red); }
.manifesto-lede { font-size: 17.5px; color: var(--ink-2); max-width: 56ch; margin-bottom: 16px; }
.manifesto-lede strong { color: var(--red-deep); font-weight: 600; }
.manifesto .btn { margin-top: 24px; }

/* ============================================================
   LIBRARY
   ============================================================ */
.library { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lib {
  position: relative;
  padding: 38px 34px 40px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgba(13, 27, 61, 0.04), 0 18px 40px -28px rgba(13, 27, 61, 0.45);
}
.lib:hover { transform: translateY(-5px); border-color: var(--hair-2); }
.lib > *:not(.sheen) { position: relative; z-index: 1; }
.lib-cat {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red-deep);
  margin-bottom: 18px;
}
.lib h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 32px; font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 12px;
}
.lib > p:not(.lib-cat) { font-size: 15.5px; color: var(--ink-2); margin-bottom: 24px; max-width: 42ch; }
.lib-go { font-size: 14.5px; font-weight: 700; color: var(--red); }

/* ============================================================
   OUTRO — back to flag blue to close the loop
   ============================================================ */
.outro {
  position: relative;
  padding: clamp(90px, 12vw, 170px) 32px;
  text-align: center;
  overflow: hidden;
  background: var(--blue-night);
}
.outro::before {
  content: '';
  position: absolute;
  left: 50%; bottom: -60%;
  width: 900px; height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(213, 43, 30, 0.3), transparent 62%);
  filter: blur(40px);
  pointer-events: none;
}
.outro-in { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.outro h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(36px, 6vw, 88px);
  line-height: 0.98; letter-spacing: -0.045em;
  font-weight: 900;
  color: #fff;
  margin-bottom: 24px;
}
.outro h2 em { font-style: italic; font-weight: 400; color: var(--gold); }
.outro p { font-size: 18px; color: var(--on-dark); margin-bottom: 36px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { padding: 0 32px 40px; background: var(--blue-night); }
.foot-in {
  max-width: 1400px; margin: 0 auto;
  display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  padding: 70px 0 36px;
  border-bottom: 1px solid var(--on-dark-line);
}
.foot-tag { font-family: 'Fraunces', Georgia, serif; font-size: 21px; color: rgba(255, 255, 255, 0.9); margin-top: 16px; }
.foot-loc { font-size: 14px; color: var(--on-dark-2); margin-top: 4px; }
.foot-links { display: flex; gap: 26px; flex-wrap: wrap; align-content: flex-start; }
.foot-links a { font-size: 14px; color: var(--on-dark-2); transition: color 0.2s; }
.foot-links a:hover { color: #fff; }
.foot-made { max-width: 1400px; margin: 30px auto 0; font-size: 13px; color: rgba(255, 255, 255, 0.42); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .live-card { display: none; }
  .do-grid { grid-template-columns: 1fr 1fr; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 230px; }
  .m-a { grid-column: span 2; grid-row: span 1; }
  .m-b, .m-c, .m-d { grid-column: span 1; }
}

@media (max-width: 900px) {
  .nav-in { padding: 12px 20px; }
  .nav-links { display: none; }
  .flagband { padding: 13px 20px; }
  .flagband-in { gap: 10px; }
  .flagband-t { font-size: 17px; }
  .flagband-d { font-size: 11px; }
  .hero { padding: 70px 20px 44px; min-height: auto; }
  .hero-in { padding-left: 24px; }
  .hero-in::before { width: 7px; }
  .sec { padding: 72px 20px; }
  .sec.band { padding-left: 20px; padding-right: 20px; }
  .feature { grid-template-columns: 1fr; }
  .feature-media { min-height: 280px; }
  .feature-body { padding: 32px 24px 40px; }
  .library { grid-template-columns: 1fr; }
  .manifesto { padding: 32px 24px 40px; }
  footer { padding: 0 20px 34px; }
  .foot-in { padding: 52px 0 30px; }
  .outro { padding: 80px 20px; }
}

@media (max-width: 600px) {
  .brand-logo { height: 28px; }
  .foot-brand .brand-logo { height: 32px; }
  .btn { padding: 11px 16px; font-size: 13px; }
  .do-grid { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .m-a, .m-b, .m-c, .m-d { grid-column: span 1; grid-row: span 1; }
  .btn.big, .btn.xl { padding: 15px 24px; font-size: 15px; }
  .foot-in { flex-direction: column; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pulse, .ticker-track { animation: none !important; }
  .lift, .btn, .do-go { transition: none !important; }
  .mosaic img, .feature-media img { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   ADAPTATION: live-copy type scale
   The display sizes above (9.2vw / 148px) were tuned for the mockup's
   two short lines. The live homepage carries more copy per line, so the
   scale is pulled back and the lead-line is given its own smaller
   voice instead of display weight.
   ══════════════════════════════════════════════════════════════════ */

.hero h1,
.hero-sub {
  font-size: clamp(40px, 6.2vw, 88px);
  line-height: 0.94;
  max-width: 16ch;
}

/* "Real Asuncion hangs with the Open Asu crew." — live .lead-line.
   Was being rendered at 148px display weight; it is a supporting line. */
.hero-note {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.25;
  color: #fff;
  max-width: 26ch;
  margin: 18px 0 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
}

/* Keep hero copy clear of the floating live card. */
@media (min-width: 900px) {
  .hero-in { padding-right: 372px; }
  .hero h1,
  .hero-sub { max-width: 12ch; }
  .hero-note { max-width: 24ch; }
}

/* ══════════════════════════════════════════════════════════════════
   ADAPTATION: restored live content + a11y
   The homepage's second and third prose paragraphs, its
   "Find your next idea" heading, the skip link and the footer's
   "Help with the community" link all exist on the live site and must
   survive the re-skin.
   ══════════════════════════════════════════════════════════════════ */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--red, #d52b1e); color: #fff;
  padding: 0.6rem 1rem; font-weight: 700; text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.intro {
  background: #fff;
  padding: 64px 34px 8px;
}
.intro-in {
  max-width: 1400px; width: 100%; margin: 0 auto;
  max-width: 62ch;
}
.intro p {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  color: #2b3a52;
  margin: 0 0 18px;
}

/* ══════════════════════════════════════════════════════════════════════════
   INNER PAGES — articles, section indexes, 404
   Same tokens as the homepage. The editorial pages are dense (tables,
   credits, verify boxes, FAQ), so the measure is narrow and the furniture
   is quiet: the content is the loud part.
   ══════════════════════════════════════════════════════════════════════════ */

.page {
  background: var(--paper);
  padding: 0 24px 96px;
}
.page-in { max-width: 1180px; margin: 0 auto; }

/* ── breadcrumb ─────────────────────────────────────────────────────────── */
.crumbs {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 20px 0 4px;
  font-size: 13px; font-weight: 600; color: var(--ink-3);
}
.crumbs a { color: var(--ink-3); transition: color 0.18s; }
.crumbs a:hover { color: var(--blue); }
.crumbs [aria-hidden] { color: var(--hair-2); }

/* ── article head ───────────────────────────────────────────────────────── */
.art { max-width: 760px; margin: 0 auto; }

.art-kicker {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--red);
  margin: 26px 0 14px;
}
.art h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.04; letter-spacing: -0.03em; font-weight: 900;
  color: var(--ink); margin: 0 0 20px;
}
.art-lede {
  font-size: clamp(18px, 1.9vw, 22px); line-height: 1.55;
  color: var(--ink-2); margin: 0 0 28px;
}

/* ── article body prose (the * reset kills p margins; restore them here) ── */
.art p {
  font-size: 17px; line-height: 1.72; color: #26304f; margin: 0 0 1.4em;
}
.art p.kicker { margin-bottom: 20px; }
.art ul, .art ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.art li { font-size: 17px; line-height: 1.65; color: #26304f; margin: 0 0 0.6em; }
.art li::marker { color: var(--red); font-weight: 700; }
.art blockquote {
  font-size: 17px; line-height: 1.7; color: var(--ink);
  border-left: 4px solid var(--red); padding: 4px 0 4px 20px;
  margin: 0 0 1.4em;
}
.art a:not(.pbtn):not(.in):not(.btn) {
  color: var(--blue); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}

/* ── prose ──────────────────────────────────────────────────────────────── */
.prose2 { max-width: 68ch; }
.prose2 p {
  font-size: 17px; line-height: 1.72; color: #26304f; margin: 0 0 20px;
}
.prose2 a:not(.pbtn):not(.in) {
  color: var(--blue); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.prose2 a:not(.pbtn):not(.in):hover { color: var(--red); }
.prose2 strong { color: var(--ink); font-weight: 700; }
.prose2 ul, .prose2 ol { margin: 0 0 22px; padding-left: 22px; }
.prose2 li { font-size: 17px; line-height: 1.65; color: #26304f; margin: 0 0 9px; }
.prose2 li::marker { color: var(--red); font-weight: 700; }
.prose2 hr {
  border: 0; border-top: 3px solid var(--red);
  width: 54px; margin: 40px 0;
}

/* ── section headings ───────────────────────────────────────────────────── */
.art h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(25px, 2.9vw, 34px); line-height: 1.12;
  letter-spacing: -0.02em; font-weight: 700; color: var(--ink);
  margin: 52px 0 16px; padding-top: 22px;
  border-top: 1px solid var(--hair);
}
.art h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(19px, 2vw, 23px); line-height: 1.25;
  font-weight: 700; color: var(--ink); margin: 30px 0 10px;
}
.art h2 em, .art h3 em, .sec-head h2 em, .page-hero h1 em {
  font-style: italic; color: var(--red);
}

/* ── figures ────────────────────────────────────────────────────────────── */
.fig { margin: 34px 0; }
.fig img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; box-shadow: 0 18px 44px -22px rgba(13, 27, 61, 0.5);
}
.fig figcaption {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-3);
  margin-top: 12px; padding-left: 13px;
  border-left: 3px solid var(--red);
}
.fig-credit { display: block; margin-top: 3px; color: var(--ink-3); opacity: 0.85; }
.fig-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ── verify box ─────────────────────────────────────────────────────────── */
.vbox {
  background: var(--card);
  border: 1px solid var(--hair);
  border-left: 5px solid var(--blue);
  border-radius: 4px 14px 14px 4px;
  padding: 24px 26px;
  margin: 32px 0;
  box-shadow: 0 12px 34px -26px rgba(13, 27, 61, 0.5);
}
.vbox-t {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--blue);
  margin: 0 0 16px;
}
.vbox p { font-size: 15.5px; line-height: 1.6; color: #26304f; margin: 0 0 14px; }
.vbox p:last-child { margin-bottom: 0; }
.vbox strong { color: var(--ink); }
.vbox ul { margin: 0 0 14px; padding-left: 20px; }
.vbox li { font-size: 15.5px; line-height: 1.55; color: #26304f; margin: 0 0 7px; }
.vbox li::marker { color: var(--blue); }

/* ── tables ─────────────────────────────────────────────────────────────── */
.twrap { overflow-x: auto; margin: 18px 0 0; -webkit-overflow-scrolling: touch; }
.vbox table, .twrap table {
  width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px;
}
.vbox th, .vbox td, .twrap th, .twrap td {
  text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--hair); vertical-align: top;
}
.vbox th, .twrap th {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom: 2px solid var(--hair-2); white-space: nowrap;
}
.vbox td { color: #26304f; line-height: 1.5; }
.vbox tbody tr:hover, .twrap tbody tr:hover { background: rgba(0, 56, 168, 0.035); }
.vbox a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* ── on this page ───────────────────────────────────────────────────────── */
.toc {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--card); border: 1px solid var(--hair);
  border-radius: 12px; padding: 14px 18px; margin: 26px 0 8px;
  box-shadow: 0 10px 26px -22px rgba(13, 27, 61, 0.5);
}
.toc strong {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); margin-right: 4px;
}
.toc a {
  font-size: 14px; font-weight: 600; color: var(--blue);
  background: rgba(0, 56, 168, 0.07);
  padding: 5px 12px; border-radius: 999px;
  transition: background 0.18s, color 0.18s;
}
.toc a:hover { background: var(--blue); color: #fff; }

.note {
  font-size: 14px; color: var(--ink-3); font-style: italic;
  margin: 14px 0 0;
}

/* ── cards (section listings) ───────────────────────────────────────────── */
.pcard {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 14px; padding: 24px 26px;
  margin: 0 0 18px;
  box-shadow: 0 12px 30px -26px rgba(13, 27, 61, 0.45);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s;
}
.pcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -26px rgba(13, 27, 61, 0.5);
}
.pcard h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px; font-weight: 700; color: var(--ink); margin: 0 0 10px;
}
.pcard p { font-size: 16px; line-height: 1.62; color: #26304f; margin: 0 0 12px; }
.pcard ul { margin: 0; padding-left: 20px; }

.pmeta {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-3);
  margin: 0 0 8px;
}
.pmeta strong { color: var(--ink-2); }

.in {
  font-size: 15px; font-weight: 700; color: var(--blue);
  text-decoration: none; border-bottom: 2px solid rgba(0, 56, 168, 0.25);
  transition: color 0.18s, border-color 0.18s;
}
.in:hover { color: var(--red); border-color: var(--red); }

/* ── WhatsApp-style example quotes ──────────────────────────────────────── */
.quote {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15.5px; line-height: 1.5; color: #1d3b2a;
  background: #dcf8c6;
  border-radius: 0 14px 14px 14px;
  padding: 12px 16px; margin: 0 0 10px;
  max-width: 46ch;
  box-shadow: 0 6px 14px -10px rgba(13, 27, 61, 0.5);
}

/* ── page-level CTA row ─────────────────────────────────────────────────── */
.prow { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.pbtn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px; font-weight: 700;
  padding: 12px 22px; border-radius: 10px;
  background: var(--ink); color: #fff;
  transition: transform 0.2s, background 0.2s;
}
.pbtn:hover { transform: translateY(-2px); background: var(--blue); }
.pbtn.pbtn-ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--hair-2);
}
.pbtn.pbtn-ghost:hover { background: var(--ink); color: #fff; box-shadow: none; }
.pbtn.pbtn-hot {
  background: linear-gradient(135deg, #12853f 0%, #0e6b35 55%, #0a5326 100%);
  color: #fff;
}
.pbtn.pbtn-hot:hover { background: linear-gradient(135deg, #11783d 0%, #0d6031 55%, #094a22 100%); }

/* ── FAQ (disclosure) ───────────────────────────────────────────────────── */
.faq { margin: 20px 0 28px; }
.faq details {
  background: var(--card); border: 1px solid var(--hair);
  border-radius: 12px; margin: 0 0 10px; overflow: hidden;
  transition: box-shadow 0.22s, border-color 0.22s;
}
.faq details[open] { box-shadow: 0 14px 32px -24px rgba(13, 27, 61, 0.5); border-color: var(--hair-2); }
.faq summary {
  cursor: pointer; list-style: none;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px; font-weight: 700; color: var(--ink);
  padding: 17px 48px 17px 20px; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 400;
  color: var(--red); transition: transform 0.22s;
}
.faq details[open] summary::after { content: '\2212'; }
.faq details p {
  font-size: 16px; line-height: 1.65; color: #26304f;
  margin: 0; padding: 0 20px 18px;
}

/* ── section page hero ──────────────────────────────────────────────────── */
.page-hero {
  background: var(--card);
  border-bottom: 1px solid var(--hair);
  padding: 46px 0 40px; margin-bottom: 34px;
}
.page-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.04;
  letter-spacing: -0.03em; font-weight: 900; color: var(--ink);
  margin: 0 0 16px; max-width: 20ch;
}
.page-hero p {
  font-size: clamp(17px, 1.7vw, 20px); line-height: 1.6;
  color: var(--ink-2); margin: 0 0 14px; max-width: 60ch;
}
.page-hero p:last-child { margin-bottom: 0; }

/* ── rules / checked note ───────────────────────────────────────────────── */
.rules { margin: 16px 0 24px; padding: 0; list-style: none; }
.rules li {
  font-size: 16.5px; line-height: 1.6; color: #26304f;
  padding: 12px 0 12px 30px; position: relative;
  border-bottom: 1px solid var(--hair);
}
.rules li::before {
  content: '\2713'; position: absolute; left: 0; top: 12px;
  color: var(--green); font-weight: 800;
}

.steps { counter-reset: st; margin: 18px 0 24px; padding: 0; list-style: none; }
.steps li {
  counter-increment: st; position: relative;
  font-size: 16.5px; line-height: 1.6; color: #26304f;
  padding: 0 0 18px 52px; margin: 0;
}
.steps li::before {
  content: counter(st, decimal-leading-zero);
  position: absolute; left: 0; top: -2px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px; font-weight: 900; color: var(--red);
}

/* ── lede on a light ground ─────────────────────────────────────────────
   The homepage .lede is white-on-dark. Section pages reuse the word for
   their standfirst, so it needs its own light-ground value. */
.lede2 {
  font-size: clamp(17px, 1.7vw, 20px); line-height: 1.6;
  color: var(--ink-2); margin: 0 0 22px; max-width: 62ch;
}
.page-hero .lede2 { margin: 0; }
.nf .lede2 { margin: 0 auto 30px; }

/* ── 404 ────────────────────────────────────────────────────────────────── */
.nf {
  text-align: center; padding: 84px 24px 104px;
  max-width: 640px; margin: 0 auto;
}
.nf h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(38px, 6.4vw, 66px); line-height: 1.02;
  font-weight: 900; color: var(--ink); margin: 0 0 18px;
  letter-spacing: -0.035em;
}
.nf h1::after {
  content: '404'; display: block; margin-top: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 800; letter-spacing: 0.34em;
  color: var(--red);
}
.nf p { font-size: 17.5px; line-height: 1.65; color: var(--ink-2); margin: 0 auto 30px; }
.nf .prow { justify-content: center; }

/* ── narrow screens ─────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .page { padding: 0 18px 72px; }
  .art { max-width: 100%; }
  .prose2 p, .prose2 li { font-size: 16.5px; }
  .vbox { padding: 20px 18px; }
  .pcard { padding: 20px; }
  .page-hero { padding: 34px 0 30px; }
  .art h2 { margin-top: 40px; }
  .toc { padding: 12px 14px; }
  .quote { max-width: 100%; }
}

/* ── footer WhatsApp CTA ────────────────────────────────────────────────────
   The old footer carried a "Join on WhatsApp" button. The redesigned
   footer keeps it so the link survives on every page, in the design's
   green CTA style (same gradient as the header button). */
.foot-cta { max-width: 1400px; margin: 26px auto 0; }
.foot-cta .pbtn { padding: 13px 24px; }

/* ══════════════════════════════════════════════════════════════════
   SHIMMER ON CTA BUTTONS
   One narrow specular band travelling across the button, like light
   glinting off a polished surface. Deliberately a single moving
   highlight rather than scattered dots -- a field of small points
   reads as falling snow, not as something crafted to catch the eye.
   The band sits at z-index -1: above the fill, below the label, so
   the wording never washes out. Pure CSS, no assets, no JS.
   ══════════════════════════════════════════════════════════════════ */
.btn, .pbtn {
  position: relative;
  overflow: hidden;      /* clip the band to the button shape */
  isolation: isolate;    /* contain the blend inside the button  */
}

.btn::after, .pbtn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 0%, transparent 35%,
    rgba(255, 255, 255, 0.30) 48%,
    rgba(255, 255, 255, 0.62) 50%,
    rgba(255, 255, 255, 0.30) 52%,
    transparent 65%, transparent 100%);
  background-size: 240% 100%;
  background-position: 240% 0;
  mix-blend-mode: screen;
  animation: shimmer-sweep 3.6s linear infinite;
}

@keyframes shimmer-sweep {
  from { background-position: 240% 0; }
  to   { background-position: -140% 0; }
}

/* ── the outlined button on a light page ───────────────────────────────────
   White light screened onto a white page is invisible, so this variant
   runs the same band in the brand gold at normal blend. */
.pbtn-ghost::after {
  mix-blend-mode: normal;
  background: linear-gradient(115deg,
    transparent 0%, transparent 35%,
    rgba(253, 224, 71, 0.35) 48%,
    rgba(253, 224, 71, 0.95) 50%,
    rgba(253, 224, 71, 0.35) 52%,
    transparent 65%, transparent 100%);
  background-size: 240% 100%;
  background-position: 240% 0;
}

/* ── respect reduced-motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn::after, .pbtn::after { animation: none !important; }
}

/* ── WhatsApp CTAs match the nav button exactly ───────────────────────────
   The green gradient was already identical; the nav button also carries a
   soft green drop shadow plus a top highlight, which .pbtn.pbtn-hot lacked.
   Same values as .btn-hot so a WhatsApp button reads the same wherever
   it appears -- in the header, mid-article, or in the footer. */
.pbtn.pbtn-hot {
  box-shadow: 0 10px 28px -10px rgba(18, 133, 63, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.pbtn.pbtn-hot:hover {
  box-shadow: 0 18px 44px -12px rgba(18, 133, 63, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Recovered shared UI styles from 01M4JW91JNJMY7X505NG5DG7CK. */
footer > .tri { margin-left: -32px; margin-right: -32px; }
@media (max-width: 900px) { footer > .tri { margin-left: -20px; margin-right: -20px; } }
.eyebrow .pulse { background: rgb(37, 211, 102); box-shadow: rgba(37, 211, 102, 0.6) 0px 0px 0px 0px; animation: 1.6s ease-out 0s infinite normal none running go-ring, 1.6s steps(1) 0s infinite normal none running go-blink; }
@keyframes go-ring { 
  0% { box-shadow: rgba(37, 211, 102, 0.6) 0px 0px 0px 0px; }
  70% { box-shadow: rgba(37, 211, 102, 0) 0px 0px 0px 9px; }
  100% { box-shadow: rgba(37, 211, 102, 0) 0px 0px 0px 0px; }
}
@keyframes go-blink { 
  0%, 60% { opacity: 1; }
  80% { opacity: 0.35; }
}
.nav-end { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0px; margin: 0px; border: 1px solid var(--hair-2); border-radius: 10px; background: var(--paper); color: var(--ink); cursor: pointer; flex: 0 0 auto; }
.nav-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 1px; position: relative; }
.nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0px; }
.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top: 6px; }
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav.is-open .nav-toggle-icon { background: transparent; }
  .nav.is-open .nav-toggle-icon::before { top: 0px; transform: rotate(45deg); }
  .nav.is-open .nav-toggle-icon::after { top: 0px; transform: rotate(-45deg); }
  .nav.is-open .nav-links { display: flex; flex-direction: column; gap: 0px; position: absolute; left: 0px; right: 0px; top: 100%; z-index: 70; margin: 0px; padding: 6px 20px 12px; background: var(--paper); border-bottom: 1px solid var(--hair); box-shadow: rgba(6, 18, 58, 0.12) 0px 16px 32px; }
  .nav.is-open .nav-links a { padding: 14px 0px; font-size: 16px; color: var(--ink); border-bottom: 1px solid var(--hair); }
  .nav.is-open .nav-links a:last-child { border-bottom: 0px; }
  .nav.is-open .nav-links a::after { display: none; }
}
.foot-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot-social { display: flex; gap: 10px; }
.foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--on-dark-2); transition: color 0.2s, background 0.2s; }
.foot-social a:hover, .foot-social a:focus-visible { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.18); }
.foot-social svg { width: 18px; height: 18px; fill: currentcolor; }
.ab-strip { background: rgb(0, 37, 110); color: rgb(255, 255, 255); position: relative; padding: 40px 16px; overflow: hidden; }
.ab-strip::before { content: ""; position: absolute; inset: 0px 0px auto; height: 8px; background: linear-gradient(rgb(213, 43, 30) 0px, rgb(213, 43, 30) 40%, rgb(255, 255, 255) 40%, rgb(255, 255, 255) 65%, rgb(0, 56, 168) 65%); }
.ab-in { max-width: 980px; margin: 0px auto; display: flex; gap: 32px; align-items: center; }
.ab-card { flex: 0 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: 190px; padding: 12px; background: rgb(255, 255, 255); border-radius: 16px; box-shadow: rgb(213, 43, 30) 0px 0px 0px 5px, rgba(0, 0, 0, 0.3) 0px 14px 30px; transform: rotate(-4deg); transition: transform 0.2s; }
.ab-card:hover { transform: rotate(0deg) scale(1.03); }
.ab-card span { aspect-ratio: 1 / 1; border-radius: 6px; background: rgb(241, 237, 230); }
.ab-card { position: relative; }
.ab-card span.on { background: radial-gradient(circle, transparent 0px, transparent 17%, rgb(168, 105, 47) 19%, rgb(168, 105, 47) 23%, rgb(224, 167, 86) 25%, rgb(224, 167, 86) 37%, rgb(185, 119, 47) 39%, rgb(185, 119, 47) 42%, transparent 44%) rgb(255, 243, 196); }
.ab-guampa { position: absolute; top: -34px; right: -30px; width: 62px; height: 78px; transform: rotate(14deg); filter: drop-shadow(rgba(0, 0, 0, 0.35) 0px 6px 8px); pointer-events: none; }
@media (max-width: 640px) {
  .ab-guampa { width: 52px; height: 66px; top: -28px; right: -24px; }
}
.ab-card span.wa { background: rgb(37, 211, 102); }
.ab-copy { flex: 1 1 0%; min-width: 0px; }
.ab-tag { display: inline-block; font: 700 14px / 1 Inter, system-ui, sans-serif; color: rgb(6, 18, 58); background: rgb(254, 223, 0); padding: 7px 11px; border-radius: 999px; transform: rotate(-2deg); }
.ab-copy h2 { font: 900 clamp(34px, 6vw, 54px) / 1 Fraunces, Georgia, serif; color: rgb(255, 255, 255); margin: 12px 0px 10px; }
.ab-copy p { font: 500 17px / 1.55 Inter, system-ui, sans-serif; color: rgb(223, 229, 255); margin: 0px 0px 18px; max-width: 520px; }
.ab-btn { display: inline-block; background: rgb(213, 43, 30); color: rgb(255, 255, 255); font: 700 17px / 1 Inter, system-ui, sans-serif; text-decoration: none; padding: 16px 24px; border-radius: 12px; box-shadow: rgb(143, 28, 20) 0px 6px 0px; }
.ab-btn:hover { transform: translateY(2px); box-shadow: rgb(143, 28, 20) 0px 4px 0px; }
@media (max-width: 640px) {
  .ab-in { flex-direction: column; text-align: center; gap: 22px; }
  .ab-card { width: 150px; }
  .ab-copy p { margin-left: auto; margin-right: auto; }
}
.do { display: flex; flex-direction: column; padding-bottom: 26px; }
.do .do-go { left: auto; bottom: auto; align-self: flex-start; display: inline-grid; place-items: center; width: 38px; height: 38px; margin-top: auto; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--ct); background: color-mix(in srgb, var(--c) 12%, transparent); transform: translateY(6px); }
.do > p:not(.do-n) { margin-bottom: 0px; }
.do:hover .do-go { transform: translate(6px, 6px); background: var(--c); color: rgb(255, 255, 255); }
.ab-btn { position: relative; isolation: isolate; background: linear-gradient(rgb(236, 75, 62) 0%, rgb(213, 43, 30) 55%, rgb(184, 36, 26) 100%); transition: transform 0.15s, box-shadow 0.15s; animation: 2.6s ease-in-out 0s infinite normal none running ab-glow; }
.ab-btn::before { content: ""; position: absolute; left: 6px; right: 6px; top: 3px; height: 46%; border-radius: 9px 9px 14px 14px; background: linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)); pointer-events: none; z-index: -1; }
.ab-btn::after { content: ""; position: absolute; inset: -14px -16px; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fedf00' d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0px top 0px, left 2px bottom 4px; background-size: 0px 0px, 0px 0px; animation: 2.6s ease-in-out 0s infinite normal none running ab-twinkle; }
@keyframes ab-glow { 
  0%, 100% { box-shadow: rgb(143, 28, 20) 0px 6px 0px, rgba(254, 223, 0, 0) 0px 0px 0px 0px; }
  50% { box-shadow: rgb(143, 28, 20) 0px 6px 0px, rgba(254, 223, 0, 0.45) 0px 0px 26px 4px; }
}
@keyframes ab-twinkle { 
  0%, 15%, 100% { background-size: 0px 0px, 0px 0px; }
  30% { background-size: 28px 28px, 0px 0px; }
  42% { background-size: 14px 14px, 20px 20px; }
  55% { background-size: 0px 0px, 10px 10px; }
  65% { background-size: 0px 0px, 0px 0px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-btn, .ab-btn::after { animation: auto ease 0s 1 normal none running none !important; }
}


/* Restore popup-scoped styles from Here.now version 01M4JW91JNJMY7X505NG5DG7CK. */
.asupop .ab-card { flex: 0 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: 190px; padding: 12px; background: rgb(255, 255, 255); border-radius: 16px; box-shadow: rgb(213, 43, 30) 0px 0px 0px 5px, rgba(0, 0, 0, 0.3) 0px 14px 30px; transform: rotate(-4deg); transition: transform 0.2s; }
.asupop .ab-card:hover { transform: rotate(0deg) scale(1.03); }
.asupop .ab-card span { aspect-ratio: 1 / 1; border-radius: 6px; background: rgb(241, 237, 230); }
.asupop .ab-card { position: relative; }
.asupop .ab-card span.on { background: radial-gradient(circle, transparent 0px, transparent 17%, rgb(168, 105, 47) 19%, rgb(168, 105, 47) 23%, rgb(224, 167, 86) 25%, rgb(224, 167, 86) 37%, rgb(185, 119, 47) 39%, rgb(185, 119, 47) 42%, transparent 44%) rgb(255, 243, 196); }
.asupop .ab-card span.wa { background: rgb(37, 211, 102); }
.asupop .ab-tag { display: inline-block; font: 700 14px / 1 Inter, system-ui, sans-serif; color: rgb(6, 18, 58); background: rgb(254, 223, 0); padding: 7px 11px; border-radius: 999px; transform: rotate(-2deg); }
.asupop .ab-btn { display: inline-block; background: rgb(213, 43, 30); color: rgb(255, 255, 255); font: 700 17px / 1 Inter, system-ui, sans-serif; text-decoration: none; padding: 16px 24px; border-radius: 12px; box-shadow: rgb(143, 28, 20) 0px 6px 0px; }
.asupop .ab-btn:hover { transform: translateY(2px); box-shadow: rgb(143, 28, 20) 0px 4px 0px; }
@media (max-width: 640px) {
.asupop .ab-card { width: 150px; }
}
.asupop .ab-btn { position: relative; isolation: isolate; background: linear-gradient(rgb(236, 75, 62) 0%, rgb(213, 43, 30) 55%, rgb(184, 36, 26) 100%); transition: transform 0.15s, box-shadow 0.15s; animation: 2.6s ease-in-out 0s infinite normal none running oa-asupop-glow; }
.asupop .ab-btn::before { content: ""; position: absolute; left: 6px; right: 6px; top: 3px; height: 46%; border-radius: 9px 9px 14px 14px; background: linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)); pointer-events: none; z-index: -1; }
.asupop .ab-btn::after { content: ""; position: absolute; inset: -14px -16px; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fedf00' d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0px top 0px, left 2px bottom 4px; background-size: 0px 0px, 0px 0px; animation: 2.6s ease-in-out 0s infinite normal none running ab-twinkle; }
@keyframes oa-asupop-glow { 
  0%, 100% { box-shadow: rgb(143, 28, 20) 0px 6px 0px, rgba(254, 223, 0, 0) 0px 0px 0px 0px; }
  50% { box-shadow: rgb(143, 28, 20) 0px 6px 0px, rgba(254, 223, 0, 0.45) 0px 0px 26px 4px; }
}
@media (prefers-reduced-motion: reduce) {
.asupop .ab-btn, .asupop .ab-btn::after { animation: auto ease 0s 1 normal none running none !important; }
}
html.asupop-lock { overflow: hidden; }
.asupop[hidden] { display: none; }
.asupop { position: fixed; inset: 0px; z-index: 1000; display: grid; place-items: center; padding: 16px; }
.asupop-back { position: absolute; inset: 0px; background: rgba(6, 18, 58, 0.72); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.22s; }
.asupop-box { position: relative; width: 100%; max-width: 460px; max-height: calc(-32px + 100vh); overflow: auto; background: rgb(0, 37, 110); color: rgb(255, 255, 255); text-align: center; border-radius: 22px; padding: 30px 24px 18px; box-shadow: rgb(213, 43, 30) 0px 0px 0px 5px, rgba(0, 0, 0, 0.5) 0px 30px 70px; transform: translateY(24px) scale(0.96); opacity: 0; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1.2), opacity 0.22s; }
.asupop-box::before { content: ""; position: absolute; inset: 0px 0px auto; height: 8px; border-radius: 22px 22px 0px 0px; background: linear-gradient(rgb(213, 43, 30) 0px, rgb(213, 43, 30) 40%, rgb(255, 255, 255) 40%, rgb(255, 255, 255) 65%, rgb(0, 56, 168) 65%); }
.asupop.is-in .asupop-back { opacity: 1; }
.asupop.is-in .asupop-box { transform: none; opacity: 1; }
.asupop-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: rgb(255, 255, 255); font: 400 24px / 36px Inter, system-ui, sans-serif; cursor: pointer; }
.asupop-x:hover { background: rgba(255, 255, 255, 0.22); }
.asupop-art { position: relative; width: 130px; margin: 4px auto 14px; }
.asupop-card.ab-card { width: 130px; padding: 9px; gap: 4px; pointer-events: none; }
.asupop-card.ab-card span { border-radius: 4px; }
.asupop-s { position: absolute; display: block; color: rgb(254, 223, 0); animation: 2.4s ease-in-out 0s infinite normal none running oa-asupop-twinkle; }
.asupop-s svg { width: 100%; height: 100%; fill: currentcolor; display: block; }
.asupop-s.s1 { width: 26px; height: 26px; top: -10px; right: -22px; }
.asupop-s.s2 { width: 16px; height: 16px; bottom: 4px; left: -24px; color: rgb(255, 255, 255); animation-delay: 0.8s; }
.asupop-s.s3 { width: 12px; height: 12px; top: 36px; left: -12px; animation-delay: 1.6s; }
@keyframes oa-asupop-twinkle { 
  0%, 100% { transform: scale(0.2) rotate(0deg); opacity: 0; }
  45% { transform: scale(1) rotate(45deg); opacity: 1; }
  60% { transform: scale(0.85) rotate(60deg); opacity: 0.9; }
}
.asupop-box h2 { font: 900 clamp(32px, 8vw, 42px) / 1 Fraunces, Georgia, serif; color: rgb(255, 255, 255); margin: 12px 0px 10px; }
.asupop-box > p { font: 500 16px / 1.5 Inter, system-ui, sans-serif; color: rgb(223, 229, 255); margin: 0px auto 16px; max-width: 380px; }
.asupop-box small { display: block; font: 500 12px / 1.4 Inter, system-ui, sans-serif; color: rgb(159, 176, 232); margin-top: 6px; }
.asupop-box small a { color: rgb(255, 255, 255); }
.asupop-no { margin-top: 8px; background: none; border: 0px; color: rgb(159, 176, 232); font: 600 13px Inter, system-ui, sans-serif; text-decoration: underline; cursor: pointer; padding: 6px; }
.asupop-form { min-height: 64px; }
.asupop-form form.sendiio-form { background: transparent !important; box-shadow: none !important; border: 0px !important; max-width: none !important; margin: 0px !important; }
.asupop-form ul.formList { flex-wrap: wrap; gap: 10px; list-style: none; display: flex !important; padding: 0px !important; margin: 0px !important; }
.asupop-form ul.formList > li { flex: 0 0 100%; padding: 0px !important; margin: 0px !important; min-height: 0px !important; }
.asupop-form ul.formList > li:first-child { flex: 1 1 220px; }
.asupop-form ul.formList > li:has(.sendiio-form-submit-element) { flex: 1 1 160px; }
.asupop-form ul.formList > li:not(:has(input:not([type="hidden"]), button)) { flex-basis: 100%; height: auto; }
.asupop-form .sendiio-form-email-label, .asupop-form .sendiio-form-email-sublabel { width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); position: absolute !important; }
.asupop-form .sendiio-form-element-wrapper > div:empty, .asupop-form .sendiio-form-element-wrapper > div:has(> img) { display: none !important; }
.asupop-form input.sendiio-form-email-input { box-sizing: border-box; width: 100% !important; height: 52px !important; border: 2px solid rgb(255, 255, 255) !important; border-radius: 12px !important; background: rgb(255, 255, 255) !important; color: rgb(13, 27, 61) !important; font: 600 16px Inter, system-ui, sans-serif !important; padding: 0px 14px !important; }
.asupop-form input.sendiio-form-email-input:focus { outline-offset: 2px; outline: rgb(254, 223, 0) solid 3px !important; }
.asupop-form .sendiio-form-submit-element { width: 100%; }
.asupop-form button.sendiio-form-submit-button { position: relative; cursor: pointer; animation: 2.6s ease-in-out 0s infinite normal none running oa-asupop-glow; width: 100% !important; height: 52px !important; border: 0px !important; border-radius: 12px !important; background: linear-gradient(rgb(236, 75, 62) 0%, rgb(213, 43, 30) 55%, rgb(184, 36, 26) 100%) !important; color: rgb(255, 255, 255) !important; font: 700 16px Inter, system-ui, sans-serif !important; box-shadow: rgb(143, 28, 20) 0px 5px 0px !important; }
.asupop-form button.sendiio-form-submit-button:active { transform: translateY(2px); box-shadow: rgb(143, 28, 20) 0px 3px 0px !important; }
.asupop-form .sendiio-form-error, .asupop-form [class*="error"] { color: rgb(255, 210, 204) !important; text-align: left; }
@media (prefers-reduced-motion: reduce) {
.asupop-box, .asupop-back { transition: none; }
.asupop-s, .asupop-form button.sendiio-form-submit-button { animation: auto ease 0s 1 normal none running none !important; }
}
.asupop-box { overflow-x: hidden; scrollbar-width: none; }
.asupop-box::-webkit-scrollbar { display: none; }
.asupop-form, .asupop-form form.sendiio-form, .asupop-form ul.formList, .asupop-form ul.formList > li, .asupop-form .sendiio-form-email-element, .asupop-form .sendiio-form-element-wrapper, .asupop-form .sendiio-form-submit-element, .asupop-form input.sendiio-form-email-input, .asupop-form button.sendiio-form-submit-button { width: 100% !important; min-width: 0px !important; max-width: 100% !important; box-sizing: border-box !important; }
.asupop-form ul.formList > li { flex: 1 1 100% !important; }
@media (min-width: 520px) {
.asupop-form ul.formList > li:first-child { flex: 1 1 58% !important; width: auto !important; }
.asupop-form ul.formList > li:has(.sendiio-form-submit-element) { flex: 1 1 36% !important; width: auto !important; }
}
.asupop-box { max-width: 480px; }
@media (max-height: 760px) {
.asupop-box { padding: 22px 20px 12px; }
.asupop-art { width: 92px; margin: 0px auto 8px; }
.asupop-card.ab-card { width: 92px; padding: 6px; gap: 3px; box-shadow: rgb(213, 43, 30) 0px 0px 0px 4px, rgba(0, 0, 0, 0.3) 0px 10px 20px; }
.asupop-box h2 { font-size: 32px; margin: 8px 0px; }
.asupop-box > p { font-size: 15px; margin-bottom: 12px; }
.asupop-form input.sendiio-form-email-input, .asupop-form button.sendiio-form-submit-button { height: 48px !important; }
.asupop-no { margin-top: 2px; }
}
@media (max-height: 620px) {
.asupop-box { padding: 18px 18px 8px; }
.asupop-art { width: 64px; margin-bottom: 4px; }
.asupop-card.ab-card { width: 64px; padding: 4px; gap: 2px; }
.asupop-card.ab-card span { border-radius: 2px; }
.asupop-s.s1 { width: 18px; height: 18px; right: -16px; }
.asupop-s.s3 { display: none; }
.asupop-box h2 { font-size: 28px; margin: 6px 0px; }
.asupop-box > p { font-size: 14px; line-height: 1.4; }
.asupop-box small { margin-top: 2px; }
.asupop-x { top: 10px; right: 10px; width: 32px; height: 32px; line-height: 32px; }
}
@media (max-width: 400px) {
.asupop { padding: 10px; }
.asupop-box { padding-left: 16px; padding-right: 16px; }
.asupop-box h2 { font-size: 30px; }
}
.asupop-help { font: 600 14px / 1.45 Inter, system-ui, sans-serif; color: rgb(255, 225, 220); background: rgba(213, 43, 30, 0.22); border: 1px solid rgba(255, 140, 125, 0.45); border-radius: 10px; padding: 10px 12px; margin: 10px 0px 2px; text-align: left; }
.asupop-help[hidden] { display: none; }
.asupop-help a { color: rgb(255, 255, 255); font-weight: 800; }