/* reddcrew.ing — shared design system.
 *
 * Single source of truth for colour, type, chrome and the primary/secondary buttons.
 * Every page links this file before its own <style>: index (EN/ES), questionnaire,
 * terms and privacy. Page-specific layout stays in the page.
 *
 * Contract when editing:
 *   - change a token here, and it changes everywhere; never re-declare one per page
 *   - pink (#FD2C72) is spent only on the primary CTA, the logo dot and prices
 *   - radii are halved from the original system: cards 6/4px, buttons 3px, pills 100px
 *   - text colours come from the grey ramp (--ink-2/3/4), not from the accent
 * These rules were extracted verbatim from index.html, so index renders identically
 * whether the rules arrive inline or from here.
 */
:root{
  --bg:#08090a; --text:#f7f8f8; --accent:#FD2C72; --accent-hover:#ff5c93; --accent-glow:rgba(253,44,114,.12);
  /* monochrome ramp for everything that used to borrow the accent */
  --ink-2:#c9ccd1; --ink-3:#a8adb5; --ink-4:#6f747c;
  --muted:#8a8f98; --frost:rgba(255,255,255,.03); --frost-hi:rgba(255,255,255,.5); --on-accent:#0a0b0c; --accent-hover:#ea1b60;
  /* ============================ TYPE SWITCH ============================
     Current build: Barlow everywhere, IBM Plex Mono for labels/numerals.
     To go back to the previous pairing (Plex Sans text + Barlow display),
     change ONE line -- --face-text below -- to:
         --face-text:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
     Nothing else in the file needs touching. Measured at 100px, Barlow is only
     1.4% shorter in x-height and 4.1% narrower than Plex Sans in running text,
     so body copy needs no size compensation; the display sizes are set ~8%
     larger on purpose, to trade Barlow's narrowness for extra presence.
     ===================================================================== */
  --face-display:'Barlow','IBM Plex Sans',system-ui,sans-serif;
  --face-text:'Barlow','IBM Plex Sans',system-ui,sans-serif;
  --font:var(--face-text);
  --font-display:var(--face-display);
  /* card chrome (ported from Resend's boxes): a cool 1px edge plus a fill that
     fades downward, so the top edge catches light and the bottom edge sinks. The
     glare is a wide, shallow radial pinned to the top centre -- it never reaches
     the middle of the card, which is what keeps it reading as a highlight rather
     than a tint. */
  --edge:rgba(222,231,240,.17); --edge-hi:rgba(222,231,240,.26);
  --card-fill:radial-gradient(120% 55% at 50% 0%,rgba(255,255,255,.065),rgba(255,255,255,0) 62%),linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.008) 46%,rgba(255,255,255,.004));
  --card-fill-hi:radial-gradient(120% 55% at 50% 0%,rgba(255,255,255,.085),rgba(255,255,255,0) 62%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016) 46%,rgba(255,255,255,.01));
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;flex:none}

h3 .ic{margin-right:10px;transform:translateY(4px)}

.ic-sm{width:16px;height:16px;padding:2px}

.ic-lg{width:26px;height:26px;stroke-width:1.5}

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

html{scroll-behavior:smooth;background:#000}

body{background:transparent;color:var(--text);font-family:var(--font);overflow-x:hidden}

::selection{background:var(--accent);color:#000}

nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(0,0,0,.72);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05)}

.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:18px 24px}

.logo{font-family:var(--font);font-weight:700;font-size:16px;letter-spacing:-.3px;text-decoration:none;color:#fff;display:flex;align-items:center;gap:8px}

.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);display:inline-block}

.logo .logo-mark{width:28px;height:28px;display:inline-block;border-radius:5px}

.nav-links{display:flex;align-items:center;gap:28px}

.lang-note{font-family:var(--mono);font-size:12px;color:var(--muted)}

.lang-note a{color:var(--ink-2);text-decoration:none}

/* Global body-link rule (2026-10-20): ONE colour, NO underline, every page.
   Blue links seen on some pages were the browser default leaking through
   where a page had no local rule. This kills per-page link styling:
   add links freely in body copy -- they inherit this. */
main a:not(.btn):not(.btn-primary), main a:visited:not(.btn):not(.btn-primary),
.prose a:not(.btn):not(.btn-primary), .prose a:visited:not(.btn):not(.btn-primary){
  color:var(--text);text-decoration:none;
  transition:color .2s cubic-bezier(.2,.7,.2,1)}
main a:hover:not(.btn):not(.btn-primary), .prose a:hover:not(.btn):not(.btn-primary){
  color:var(--accent-hover)}

.nav-links a{color:#d0d6e0;text-decoration:none;font-size:14px;line-height:1;letter-spacing:-.1px;opacity:.9;transition:color .2s cubic-bezier(.2,.7,.2,1),opacity .2s}

.nav-links a:hover{color:#f7f8f8;opacity:1}

.nav-links .lang-note a{color:var(--ink-2);font-size:12px;font-family:var(--mono);line-height:1;letter-spacing:normal;opacity:1}

.nav-cta{background:rgba(255,255,255,.05);color:#f7f8f8!important;text-decoration:none;font-size:13px;font-weight:500;padding:8px 16px;border:1px solid rgba(255,255,255,.08);border-radius:3px;transition:background .2s cubic-bezier(.2,.7,.2,1)}

.nav-cta:hover{background:rgba(255,255,255,.1)}

@media(max-width:809px){.nav-links a:not(.nav-cta):not(.lang-note a){display:none}}

/* Display type: one gradient per element, never per span, so a multi-line headline
   grades as a single object. PAGES MUST SET `padding-bottom:.14em` (and subtract it
   from their margin) on any heading that keeps a line-height below ~1.2 -- i.e. every
   h1 and h2 here: background-clip paints only inside the padding box, so a descender
   hanging below the last line's box gets no fill and vanishes. That is what used to
   eat the tail of "your" at line-height .94, and later the g/p/q/y tails on every h2
   at line-height 1.04. Check it by rendering the heading twice, gradient vs solid
   fill, and diffing ink below the padding box; a fixed heading loses 0 rows. */
h1,h2{color:#eceef0}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  h1{background-image:linear-gradient(180deg,#ffffff 0%,#d5d9de 48%,#9ba1a9 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  /* h2 keeps the idea at a fraction of the contrast: a silver sheen rather than a
     second headline announcement. */
  h2{background-image:linear-gradient(180deg,#ffffff 0%,#f3f5f7 60%,#d4d9de 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}

h1 .accent{background:none;color:inherit}

.btn-primary{background:var(--accent);color:#fff;text-decoration:none;font-weight:600;font-size:15px;border-radius:3px;transition:background .2s cubic-bezier(.2,.7,.2,1);
  /* explicit height + inline-flex: padding-based heights drifted 38 vs 40 depending
     on inherited line-height and on flex stretch, so button pairs didn't match. */
  display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;line-height:1}

.btn-primary:hover{background:#ea1b60}

.btn-ghost{color:#f7f8f8;text-decoration:none;font-size:15px;border-radius:3px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);transition:background .2s cubic-bezier(.2,.7,.2,1);
  display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;line-height:1}

.btn-ghost:hover{background:rgba(255,255,255,.08)}

/* Button rims: a 1.5px gradient edge drawn with a mask, so the pill reads as a lit
   surface -- bright top, almost nothing mid-height, lifting again at the base. 1px and
   .62 alpha was invisible to the eye, so this sat at .92 for a while -- which read as a
   glow. .58 top / .32 base is the workable middle: an edge you can see, not a light. */
.btn-primary,.btn-ghost,.nav-cta{position:relative}

.btn-primary::after,.btn-ghost::after,.nav-cta::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}

.btn-primary::after{background:linear-gradient(180deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.32) 100%)}

.btn-ghost::after,.nav-cta::after{background:linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.05) 54%,rgba(255,255,255,.16) 100%)}

.btn-primary:hover::after{background:linear-gradient(180deg,rgba(255,255,255,.70) 0%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.40) 100%)}

.btn-ghost:hover::after,.nav-cta:hover::after{background:linear-gradient(180deg,rgba(255,255,255,.44) 0%,rgba(255,255,255,.08) 54%,rgba(255,255,255,.24) 100%)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}