/* ============================================================================
   gn2-brand.css — gn2.me shared brand foundation
   One stylesheet for the marketing site + link-flow surfaces. Pages keep their
   own layout CSS but pull color / type / components from here.
   Spec: docs/design/gn2me-website-revamp-spec.md §2.
   Fonts (Montserrat display + Poppins body) are <link>ed by each page's <head>;
   this file only references the families.
   ========================================================================== */

:root {
  /* ---- Brand red (aligned with the app; logo keeps its OWN red #e92027, §5) */
  --gn-red:        #F14950;   /* brand red — hero band, accents, soft-tint icons */
  --gn-red-dark:   #D93B42;   /* primary CTA resting fill; AA-safe white-on-dark (~4.5:1) + coral TEXT on white (~4.6:1) */
  --gn-red-press:  #B42318;   /* primary CTA hover/active press shade (white-on-press ~6.8:1) */
  --gn-red-text:   #B42318;   /* dark-coral text when more contrast is needed (~6.8:1) */
  --gn-red-tint:   #FFF5F5;   /* soft bg wash, eyebrow pill bg, card hover */
  --gn-red-tint-2: #FFEEF0;   /* slightly deeper wash / active */

  /* ---- Ink + neutrals ---- */
  --gn-ink:        #0F1729;   /* display headings, stat numbers */
  --gn-body:       #3A4256;   /* body copy (~10.4:1 on white) */
  --gn-muted:      #667085;   /* captions, labels (~4.9:1 on white) */
  --gn-divider:    #E5E7EB;   /* hairlines, card borders */
  --gn-surface:    #FFFFFF;   /* cards */
  --gn-bg:         #FFF9F9;   /* page bg behind dotted grid (warm near-white) */
  --gn-bg-alt:     #F9FAFB;   /* alternating section bg */

  /* ---- Semantic ---- */
  --gn-success:      #027A48;  --gn-success-tint: #ECFDF3;
  --gn-warning:      #F59E0B;  --gn-warning-tint: #FFFBEB;
  --gn-danger:       #D92D20;  --gn-danger-tint:  #FEE4E2;
  --gn-info:         #1D4ED8;  --gn-info-tint:    #EFF4FF;
  /* note (gn-note--*) border/text — tokenized so link-flow surfaces reuse them */
  --gn-warn-border:   #FDE9B5;  --gn-warn-text:   #8A5A00;
  --gn-danger-border: #FECDCA;

  /* ---- Type ---- */
  --gn-font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gn-font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Radii / shadow / spacing ---- */
  --gn-radius-sm: 8px;
  --gn-radius:    16px;   /* cards */
  --gn-radius-pill: 999px;
  --gn-shadow-card:  0 1px 2px rgba(15,23,41,.04), 0 6px 20px rgba(15,23,41,.06);
  --gn-shadow-hover: 0 10px 30px rgba(15,23,41,.10);
  --gn-shadow-red:   0 10px 25px rgba(241,73,80,.28); /* CTA hover lift */
  --gn-maxw: 1200px;
  --gn-focus: 0 0 0 3px rgba(241,73,80,.45); /* keyboard focus ring */
}

/* ============================================================================
   §2.3  Type scale + base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 5rem; }   /* fixed .gn-header offset so anchor targets clear the bar */
body {
  margin: 0;
  font-family: var(--gn-font-body);
  color: var(--gn-body);
  font-size: 1.0625rem;        /* 17px Poppins body — marketing register is roomier */
  line-height: 1.65;
  background: var(--gn-bg);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--gn-font-display);
  color: var(--gn-ink);
  line-height: 1.15;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}
h1 { font-weight: 800; font-size: clamp(2.5rem, 5vw, 3.75rem); }
h2 { font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.75rem); }
h3 { font-weight: 700; font-size: clamp(1.35rem, 3vw, 1.75rem); }
h4 { font-weight: 700; font-size: 1.25rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--gn-red-dark); text-decoration: none; }   /* AA: never bare --gn-red as text */
a:hover { color: var(--gn-red-text); text-decoration: underline; }
.gn-container { width: 100%; max-width: var(--gn-maxw); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 1.5rem); }

/* ============================================================================
   §2.4  Key component classes
   ========================================================================== */

/* ---------- DOTTED-GRID TEXTURE ---------- */
/* Apply to a section/body wrapper. Dots are low-opacity ink so text contrast is untouched. */
.gn-dotgrid {
  background-color: var(--gn-bg);
  background-image: radial-gradient(rgba(15,23,41,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -11px -11px;
}

/* ---------- PILL CTA ---------- */
.gn-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--gn-font-body); font-weight: 600; font-size: 1rem;
  padding: .8rem 1.6rem; border-radius: var(--gn-radius-pill);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap; line-height: 1;
}
.gn-btn--primary { background: var(--gn-red-dark); color: #fff; border-color: var(--gn-red-dark); }  /* AA: white-on-#D93B42 ~4.5:1 (1.4.3) */
.gn-btn--primary:hover, .gn-btn--primary:active { background: var(--gn-red-press); border-color: var(--gn-red-press);
  color:#fff; transform: translateY(-2px); box-shadow: var(--gn-shadow-red); text-decoration:none; }
.gn-btn--primary .gn-btn__arrow { transition: transform .18s ease; }
.gn-btn--primary:hover .gn-btn__arrow { transform: translateX(3px); }   /* arrow nudge */
.gn-btn--outline { background: transparent; color: var(--gn-red-dark); border-color: var(--gn-red); }
.gn-btn--outline:hover { background: var(--gn-red-tint); color: var(--gn-red-text); text-decoration:none; }
/* DEPRECATED (tonal-refinement 2026-10): hero/CTA are now light — no red band to sit on.
   Use .gn-btn--primary + .gn-btn--outline instead. Left in place only for safety. */
.gn-btn--onred { background:#fff; color: var(--gn-red-dark); border-color:#fff; }   /* for use ON the red hero band */
.gn-btn--onred:hover { background: var(--gn-red-tint); color: var(--gn-red-text); }
.gn-btn--onred-outline { background: transparent; color:#fff; border-color: rgba(255,255,255,.7); } /* outline on red band */
.gn-btn--onred-outline:hover { background: rgba(255,255,255,.14); color:#fff; border-color:#fff; text-decoration:none; }
.gn-btn:focus-visible { outline: none; box-shadow: var(--gn-focus); }
.gn-btn[disabled], .gn-btn--disabled { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
/* full-width button (e.g. pricing CTAs): fill the column and WRAP long labels so they don't overflow at 320px */
.gn-btn--block { display:flex; width:100%; justify-content:center; text-align:center; white-space:normal; }

/* Append an arrow glyph in markup: <a class="gn-btn gn-btn--primary">Start free <span class="gn-btn__arrow" aria-hidden="true">→</span></a> */

/* ---------- EYEBROW PILL ---------- */
.gn-eyebrow {
  display:inline-block; font-family: var(--gn-font-body); font-weight:700;
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--gn-red-text); background: var(--gn-red-tint);
  border:1px solid rgba(241,73,80,.35); padding:.3rem .8rem; border-radius: var(--gn-radius-pill);
  margin-bottom: 1rem;
}

/* ---------- HEADLINE ACCENT (coral emphasis word) ---------- */
.gn-accent { color: var(--gn-red-text); font-style: italic; }   /* #B42318 on white ~6.8:1 AA pass */

/* ---------- CARD ---------- */
.gn-card {
  background: var(--gn-surface); border:1px solid var(--gn-divider);
  border-radius: var(--gn-radius); box-shadow: var(--gn-shadow-card);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.gn-card--hover { transition: transform .2s ease, box-shadow .2s ease; }
.gn-card--hover:hover { transform: translateY(-6px); box-shadow: var(--gn-shadow-hover); }
.gn-card__icon {   /* soft red icon chip */
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:14px; margin-bottom:1.25rem;
  background: var(--gn-red-tint); color: var(--gn-red); font-size:1.6rem;
}

/* ---------- HERO BAND (light) ---------- */
.gn-hero {
  position: relative; color: var(--gn-body);
  background: var(--gn-bg);                 /* warm near-white */
  padding: clamp(7rem, 12vw, 9rem) 0 clamp(4rem, 8vw, 6rem);
  overflow: hidden;
}
.gn-hero::after {                           /* pale ink dot-grid */
  content:""; position:absolute; inset:0; opacity:1; pointer-events:none;
  background-image: radial-gradient(rgba(15,23,41,.05) 1px, transparent 1px);
  background-size: 22px 22px; background-position:-11px -11px;
}
.gn-hero h1, .gn-hero h2 { color: var(--gn-ink); }
.gn-hero p { color: var(--gn-body); font-size: clamp(1.125rem, 2.2vw, 1.3rem); }
/* eyebrow override REMOVED → inherits default light-tint .gn-eyebrow pill */
.gn-hero > * { position: relative; z-index: 1; }

/* CTA band — soft red-tint wash, dark-ink copy, red button (NOT a red background) */
.gn-cta--red {
  position: relative; color: var(--gn-body); text-align:center;
  background: var(--gn-red-tint);           /* #FFF5F5 */
  border-top: 1px solid var(--gn-red-tint-2);
  border-bottom: 1px solid var(--gn-red-tint-2);
  padding: clamp(4rem, 8vw, 6rem) 0;
  overflow: hidden;
}
.gn-cta--red::after {
  content:""; position:absolute; inset:0; opacity:1; pointer-events:none;
  background-image: radial-gradient(rgba(15,23,41,.04) 1px, transparent 1px);
  background-size: 22px 22px; background-position:-11px -11px;
}
.gn-cta--red h2 { color: var(--gn-ink); }
.gn-cta--red p  { color: var(--gn-body); }
.gn-cta--red > * { position: relative; z-index: 1; }

/* ---------- SITE HEADER / NAV ---------- */
.gn-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gn-divider); padding: .9rem 0;
}
.gn-header__inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.gn-nav a { color: var(--gn-body); font-family: var(--gn-font-body); font-weight:600;
  font-size:.98rem; padding:.35rem 0; position:relative; }
.gn-nav a:hover { color: var(--gn-red-dark); text-decoration:none; }
.gn-nav a[aria-current="page"]::after {   /* red active underline */
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px;
  border-radius:3px; background: var(--gn-red); }

/* ---------- FORM FIELD ---------- */
.gn-field { width:100%; padding:.8rem 1rem; font-family: var(--gn-font-body); font-size:1rem;
  color: var(--gn-body); border:1.5px solid var(--gn-divider); border-radius: var(--gn-radius-sm);
  background:#fff; }
.gn-field:focus { outline:none; border-color: var(--gn-red); box-shadow: var(--gn-focus); }
.gn-label { display:block; font-weight:600; font-size:.9rem; color: var(--gn-ink); margin-bottom:.4rem; }

/* ---------- FOOTER ---------- */
.gn-footer { background: var(--gn-ink); color: rgba(255,255,255,.72); padding: clamp(3rem,6vw,4rem) 0 2rem; }
.gn-footer a { color: rgba(255,255,255,.72); }
.gn-footer a:hover { color:#fff; text-decoration:none; }
.gn-footer__brand { color:#fff; font-family: var(--gn-font-display); font-weight:800; font-size:1.5rem; }
.gn-footer h4 { color:#fff; font-size:1.05rem; margin-bottom:1rem; }
.gn-footer__copy { border-top:1px solid rgba(255,255,255,.12); margin-top:2rem; padding-top:1.5rem;
  color: rgba(255,255,255,.6); font-size:.85rem; text-align:center; }

/* ---------- LINK-FLOW CENTERED CARD (link-flow tier, §3.3) ---------- */
.gn-screen { min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px; }
.gn-screen__card { background:var(--gn-surface); border:1px solid var(--gn-divider);
  border-radius: var(--gn-radius); box-shadow: var(--gn-shadow-card);
  padding: clamp(2rem, 5vw, 2.75rem); width:100%; max-width:440px; text-align:center; }
.gn-screen__mark { height:34px; margin-bottom:1.25rem; }       /* brand logo at top of card */
.gn-screen__icon { font-size:46px; margin-bottom:1rem; }       /* status emoji, decorative */
.gn-screen__title { font-size:1.6rem; margin-bottom:.4rem; }
.gn-screen__sub { color:var(--gn-muted); font-size:.9rem; margin-bottom:1.5rem; word-break:break-all; }
.gn-screen__msg { color:var(--gn-body); margin-bottom:1.5rem; }
.gn-note { border-radius:var(--gn-radius-sm); padding:1rem; margin-bottom:1rem; font-size:.9rem; text-align:left; }
.gn-note--info    { background:var(--gn-bg-alt);      border:1px solid var(--gn-divider); color:var(--gn-body); }
.gn-note--warn    { background:var(--gn-warning-tint); border:1px solid var(--gn-warn-border);   color:var(--gn-warn-text); }
.gn-note--danger  { background:var(--gn-danger-tint);  border:1px solid var(--gn-danger-border); color:var(--gn-red-text); }
.gn-screen__foot { margin-top:1.5rem; color:var(--gn-muted); font-size:.78rem; }

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