/* Senders Design System — Colors & Type
 * Source: brand-specs.md, Senders Visual Identity Guidelines by Yoske Mitsui (2021)
 */

/* Static-build: ensure the hidden attribute wins over inline display (mobile menu, mode views). */
[hidden] { display: none !important; }

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap');

:root {
  /* ── Primary ──────────────────────────────────────────── */
  --senders-blue: #0032A0;
  --white: #FFFFFF;

  /* ── Text ─────────────────────────────────────────────── */
  --fg1: #3E454C;            /* Primary body text — darkened from spec #7C878E */
  --fg2: #0032A0;            /* Heading text */
  --fg3: #7C878E;            /* Original spec gray, used sparingly for captions */
  --fg-invert: #FFFFFF;

  /* ── Supporting / Chart palette ───────────────────────── */
  --light-gray: #D0D3D4;     /* Borders, subtle backgrounds, alt rows */
  --light-blue: #71C5E8;     /* Charts, infographics, secondary accents */
  --purple: #753BBD;         /* Charts, callout boxes */
  --yellow: #CFB023;         /* Charts, warning highlights */
  --green: #00B140;          /* Charts, success states */

  /* ── Tints (brand-approved) ───────────────────────────── */
  --blue-10: #E6EAF3;        /* Summary row bg, subtle blue fill */
  --blue-20: #CCD5E6;
  --light-gray-30: #F0F1F1;
  --light-gray-50: #E8E9E9;
  --light-gray-10: #F3F4F4;  /* Alt table rows */

  /* ── Semantic surfaces ────────────────────────────────── */
  --bg: #FFFFFF;
  --bg-muted: #F3F4F4;
  --bg-accent: #E6EAF3;
  --bg-invert: #0032A0;
  --border: #D0D3D4;
  --rule: #0032A0;            /* Horizontal rules are blue in this brand */

  /* ── Type ─────────────────────────────────────────────── */
  --font-primary: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Document scale — ground truth from brand-specs.md */
  --fs-h1: 28pt;             /* 37px */
  --fs-h2: 18pt;             /* 24px */
  --fs-h3: 12pt;             /* 16px */
  --fs-body: 10pt;           /* 13.3px */
  --fs-caption: 8pt;
  --fs-small: 7pt;           /* header/footer */

  /* Presentation scale */
  --fs-slide-title: 36pt;
  --fs-slide-subtitle: 24pt;
  --fs-slide-body: 18pt;
  --fs-slide-caption: 14pt;

  /* Screen UI scale — derived for web, same proportions */
  --fs-display: 56px;
  --fs-title: 40px;
  --fs-h1-ui: 32px;
  --fs-h2-ui: 22px;
  --fs-h3-ui: 16px;
  --fs-body-ui: 15px;
  --fs-small-ui: 13px;
  --fs-micro-ui: 11px;

  /* Line heights from brand-specs */
  --lh-tight: 1.1;           /* H1/H2 */
  --lh-snug: 1.25;           /* H3 */
  --lh-normal: 1.4;          /* Body (14pt for 10pt body = 1.4) */
  --lh-loose: 1.6;

  /* Spacing (DXA → px rough analog; doc spacing expressed in units of 4px) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Borders / radii — brand is flat. No shadows, minimal rounding. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;            /* Max rounding — buttons/inputs */
  --border-1: 1px solid var(--light-gray);
  --border-rule: 2pt solid var(--senders-blue);

  /* Motion */
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

/* ── Semantic element defaults ─────────────────────────── */
html, body {
  font-family: var(--font-primary);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h1-ui);
  line-height: var(--lh-tight);
  color: var(--fg2);
  margin: 0 0 var(--s-4);
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h2-ui);
  line-height: var(--lh-tight);
  color: var(--fg2);
  margin: var(--s-6) 0 var(--s-3);
}
h3, .h3 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-h3-ui);
  line-height: var(--lh-snug);
  color: var(--fg2);
  margin: var(--s-5) 0 var(--s-2);
}
p, li {
  font-size: var(--fs-body-ui);
  line-height: var(--lh-normal);
  color: var(--fg1);
}
.eyebrow, .kicker {
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-small-ui);
  color: var(--fg2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.caption {
  font-size: var(--fs-small-ui);
  color: var(--fg1);
}
strong, .strong {
  font-weight: var(--font-weight-bold);
  color: var(--fg2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
code, kbd, samp, pre {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.92em;
  color: var(--fg2);
  background: var(--light-gray-10);
  padding: 1px 4px;
  border-radius: var(--radius-1);
}
hr, .rule-blue {
  border: 0;
  height: 2px;
  background: var(--senders-blue);
  margin: var(--s-4) 0;
}
a {
  color: var(--senders-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

/* "Looking for senders.co?" header pill — shows on desktop widths with room to
   spare. Below this it hides; the footer "senders.co (consultancy)" link is the
   all-widths fallback. */
@media (max-width: 1040px) {
  .hdr-altsite, .hdr-altdiv { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE REDESIGN — shared chrome (header, burger panel, footer, taps)
   Breakpoints: desktop ≥1024 · tablet 768–1023 · mobile ≤767.
   Every mobile layout is the SAME content nodes from desktop, restacked.
   Only chrome/decoration is hidden — never copy. (Mobile = desktop text.)
   ══════════════════════════════════════════════════════════════════ */

/* ── Header collapses to logo + burger (≤900: tablet + phone) ─────── */
@media (max-width: 900px) {
  .hdr-nav, .hdr-actions { display: none !important; }
  /* The For-me/For-my-AI toggle moves INTO the burger panel here, so the
     bar stays logo + burger and never overflows the viewport. */
  .hdr-toggle-m { display: none !important; }
  .hdr-burger {
    display: flex !important;
    margin-left: auto !important;
    width: 44px; height: 44px; padding: 0 !important;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 5px !important; background: transparent; border: 0; cursor: pointer;
  }
  /* The sticky header bar: tighter gutters, comfortable height. */
  header > div { gap: 14px !important; padding-top: 12px !important; padding-bottom: 12px !important; }
}
@media (max-width: 767px) {
  header > div { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ── Burger dropdown panel: full-width, generous tap rows ─────────── */
@media (max-width: 900px) {
  .hdr-mobile {
    width: 100%;
    padding: 10px 18px 18px !important;
    gap: 2px !important;
    background: #fff;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* nav links → full-width 48px rows with hairline separators */
  .hdr-mobile > a {
    display: flex !important; align-items: center;
    min-height: 50px; padding: 0 4px !important;
    font-size: 16px !important;
    border-bottom: 1px solid var(--light-gray-30);
  }
  /* the audience toggle spans the full width as two equal segments */
  .hdr-mobile > div:first-child { margin: 4px 0 8px; }
  .hdr-mobile > div:first-child > div[role="tablist"] { display: flex !important; width: 100%; }
  .hdr-mobile > div:first-child div[role="tablist"] > button {
    flex: 1 1 0; min-height: 44px; padding: 7px 10px !important; font-size: 14px !important;
  }
  /* sign-in / sign-up: equal-width comfy buttons */
  .hdr-mobile > div:not(:first-child) {
    display: flex !important; gap: 12px !important; margin-top: 12px !important;
  }
  .hdr-mobile > div:not(:first-child) > a {
    flex: 1 1 0; min-height: 48px;
    display: inline-flex !important; align-items: center; justify-content: center;
    text-align: center;
  }
}

/* ── Footer: collapse to a single readable column on phones ───────── */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* legal/product links become tappable rows */
  .footer-grid a[style*="display:block"] { min-height: 40px; display: flex !important; align-items: center; }
}

/* ── Comfortable tap targets on primary CTA rows (touch widths) ───── */
@media (max-width: 760px) {
  .ask-row > a, .ask-row > button { min-height: 46px; }
}
@media (max-width: 620px) {
  .ask-row { width: 100% !important; flex-wrap: wrap; }
  .ask-row > a, .ask-row > button { flex: 1 1 100%; justify-content: center; }
}

/* ── Forms & auth (Login / Signup): single column + comfy tap targets ─ */
@media (max-width: 767px) {
  /* every text input gets a ≥46px touch height */
  input.fi, input[type="text"], input[type="email"],
  input[type="password"], input[type="search"], select { min-height: 46px; }
  .btn-primary, button[type="submit"] { min-height: 48px; }
  /* the marketing aside sheds its big desktop padding when it stacks below */
  .auth-aside > div { padding: 34px 22px !important; }
  /* plan switcher chips wrap instead of overflowing on the narrowest phones */
  [role="tablist"][aria-label="Plan"] { flex-wrap: wrap; }
  .plan-tab { min-height: 40px; }
}