/* Reo design tokens — editorial, sober, source-first */

:root {
  /* Surface — warm-neutral paper, never pure white */
  --paper:        oklch(0.985 0.002 90);
  --paper-2:      oklch(0.970 0.003 85);
  --paper-3:      oklch(0.950 0.004 85);
  --paper-inset:  oklch(0.935 0.005 85);

  /* Hairlines — slightly warm, very subtle */
  --rule:         oklch(0.90 0.003 85);
  --rule-2:       oklch(0.84 0.004 85);
  --rule-strong:  oklch(0.72 0.005 85);

  /* Ink — near-black with a whisper of blue, never pure */
  --ink:          oklch(0.18 0.010 270);
  --ink-2:        oklch(0.30 0.010 270);
  --ink-3:        oklch(0.45 0.008 270);
  --ink-4:        oklch(0.58 0.006 270);
  --ink-5:        oklch(0.72 0.004 85);

  /* Accent — Reo Ink: deep indigo-violet, not SaaS blue */
  --accent:       oklch(0.32 0.15 268);
  --accent-2:     oklch(0.28 0.15 268);
  --accent-3:     oklch(0.42 0.13 268);
  --accent-tint:  oklch(0.95 0.025 268);
  --accent-tint-2:oklch(0.90 0.040 268);

  /* Source-citation highlight — used very sparingly */
  --highlight:    oklch(0.93 0.06 90);

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Radii — tight, editorial, never pillowy */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;
  --r-5: 10px;

  /* Shadows — almost never used; hairline borders carry hierarchy */
  --shadow-1: 0 1px 0 oklch(0.92 0.004 85);
  --shadow-2: 0 1px 2px oklch(0 0 0 / 0.04), 0 8px 24px oklch(0 0 0 / 0.04);

  color-scheme: light;
}

/* Reo page reset — scoped to artboards */
.reo-page,
.reo-page * {
  box-sizing: border-box;
}
.reo-page {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11", "tnum";
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.45;
  /* Safety net: prevent any in-flow element from triggering a horizontal
     scrollbar on the document. Without this, intrinsic min-content widths
     inside the hero illustration (Gmail chrome, inbox rows, popover) can
     push past the viewport on phones. */
  overflow-x: clip;
}
html, body { overflow-x: clip; max-width: 100%; }
.reo-page p { margin: 0; }
.reo-page button { font-family: inherit; }

/* Mono used only for source citations, eyebrows, metadata */
.reo-page .mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss01", "ss02", "tnum", "zero";
  letter-spacing: 0.01em;
}

/* Eyebrow — small-caps mono, very muted */
.reo-page .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.reo-page .eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.reo-page .eyebrow::after {
  content: "";
  flex: 0 0 28px;
  height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
  margin-left: 2px;
  opacity: 0.55;
}

/* Dotted-rule frame used around product stills (containment, not decoration) */
.dotframe {
  position: relative;
  padding: 22px;
  background: var(--paper);
  border: 1px dashed var(--rule-2);
  border-radius: var(--r-3);
}
.dotframe::before,
.dotframe::after,
.dotframe > .corner-tl,
.dotframe > .corner-tr,
.dotframe > .corner-bl,
.dotframe > .corner-br {
  position: absolute;
  width: 9px; height: 9px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  border-radius: 1px;
  content: "";
}
.dotframe::before { top: -5px; left: -5px; }
.dotframe::after  { top: -5px; right: -5px; }
.dotframe > .corner-bl { bottom: -5px; left: -5px; }
.dotframe > .corner-br { bottom: -5px; right: -5px; }
.dotframe > .corner-label {
  position: absolute;
  top: -9px;
  left: 22px;
  background: var(--paper);
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
}
.dotframe > .corner-meta {
  position: absolute;
  bottom: -9px;
  right: 22px;
  background: var(--paper);
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
}

/* Primary CTA */
.reo-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 22px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r-2);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 120ms, transform 120ms;
}
.reo-cta:hover { background: var(--accent); border-color: var(--accent); }
.reo-cta.accent { background: var(--accent); border-color: var(--accent); }
.reo-cta.accent:hover { background: var(--accent-2); border-color: var(--accent-2); }
.reo-cta .arrow {
  display: inline-block;
  width: 16px;
  height: 12px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6h12m-4-4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6h12m-4-4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Secondary text-link with play glyph */
.reo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  cursor: pointer;
}
.reo-link:hover { border-bottom-color: var(--ink-3); color: var(--ink); }
.reo-link .play {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.reo-link .play::before {
  content: "";
  border-left: 4px solid var(--paper);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  margin-left: 1px;
}

/* In-progress chip — accent-tinted so it reads as active, not parked */
.chip-progress {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  font-weight: 600;
}
.chip-progress .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
}
.chip-progress .dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: chipPulse 2.4s ease-out infinite;
}
@keyframes chipPulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Hairline divider used between page sections */
.reo-rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* ---- responsive grid stacks at narrow widths */
.reo-hero-grid,
.reo-howitworks-grid,
.reo-privacy-grid,
.reo-section-head,
.reo-final-grid,
.reo-footer-grid,
.reo-trust-grid {
  display: grid;
}
/* Hero grid columns — defined in CSS (not inline) so the responsive
   override below wins cleanly without specificity battles. */
.reo-hero-grid {
  grid-template-columns: minmax(440px, 510px) minmax(0, 1fr);
}

@media (max-width: 1180px) {
  .reo-hero-grid,
  .reo-privacy-grid,
  .reo-trust-grid,
  .reo-final-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .reo-howitworks-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 820px) {
  .reo-howitworks-grid,
  .reo-section-head,
  .reo-footer-grid {
    grid-template-columns: 1fr !important;
  }
  .reo-footer-grid {
    gap: 28px !important;
  }
  .reo-footer-nav {
    justify-content: flex-start !important;
  }
}

/* Section heads — title (h2/h3) lives next to a nowrap meta label by default.
   On anything narrower than a wide desktop, the meta is long enough to crush
   the title into a one-word-per-line column. Stack them at the same breakpoint
   where the hero stacks, let the meta wrap, and drop the title's max-width +
   text-wrap:balance so it streches the full container width naturally instead
   of leaving large gaps on the right. */
@media (max-width: 1180px) {
  .reo-page .section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 36px !important;
  }
  .reo-page .section-head .title {
    max-width: none !important;
    width: 100% !important;
    text-wrap: pretty !important;
  }
  .reo-page .section-head .meta {
    white-space: normal !important;
  }
}

/* trim horizontal padding at narrower widths */
@media (max-width: 1024px) {
  .reo-section-container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .reo-page header[role="banner"],
  .reo-page > header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 640px) {
  .reo-section-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* === Readability — bump base sizes & line-height for body copy === */
.reo-page {
  font-size: 17px;
  line-height: 1.65;
}

/* Lift muted body copy contrast: keep editorial gray but darker than ink-4 */
.reo-page p {
  font-size: inherit;
  line-height: 1.65;
}

/* Strengthen eyebrow legibility */
.reo-page .eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.15em;
  color: var(--ink-2);
}

/* Section meta labels (top-right "X / Y" metadata) */
.section-head .meta {
  font-size: 12.5px;
}

/* Section head title — strengthen slightly */
.section-head .title {
  font-size: 46px;
  line-height: 1.06;
}

/* === Generous accent — interactive states === */

/* Nav links pop accent on hover */
.reo-page .reo-nav-links a {
  position: relative;
  transition: color 140ms;
}
.reo-page .reo-nav-links a:hover {
  color: var(--accent) !important;
}
.reo-page .reo-nav-links a:hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* Footer nav links also hover accent */
.reo-page .reo-footer-nav a:hover {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* === Mobile-responsive overrides === */

/* Hide centered nav links and shrink CTA on narrow screens */
@media (max-width: 900px) {
  .reo-nav-links { display: none !important; }
  .reo-nav-grid {
    grid-template-columns: 1fr auto !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}

/* Heading scale at mobile — overrides large inline fontSizes */
@media (max-width: 900px) {
  .reo-page h1 {
    font-size: 44px !important;
    line-height: 1.06 !important;
    letter-spacing: -0.025em !important;
  }
  .reo-page h2 {
    font-size: 40px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.022em !important;
  }
  .reo-page h3 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }
  .section-head .title {
    font-size: 34px !important;
    line-height: 1.1 !important;
  }
}
@media (max-width: 600px) {
  .reo-page h1 {
    font-size: 34px !important;
  }
  .reo-page h2 {
    font-size: 28px !important;
  }
  .section-head .title {
    font-size: 26px !important;
  }
}

/* Trim section vertical padding on small viewports */
@media (max-width: 900px) {
  .reo-page section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .reo-page header {
    /* nav already gets its own treatment */
  }
}
@media (max-width: 600px) {
  .reo-page section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* Touch targets — make buttons at least 44px tall on mobile (WCAG 2.5.5) */
@media (max-width: 600px) {
  .reo-cta {
    min-height: 48px !important;
    width: 100%;
    justify-content: center;
  }
}

/* Footer bottom row stacks on narrow */
@media (max-width: 600px) {
  .reo-footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}


/* Used on section eyebrow rows */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
}
.section-head .title {
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.022em;
  font-weight: 450;
  max-width: 720px;
  text-wrap: balance;
}
.section-head .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Selection */
.reo-page ::selection {
  background: var(--accent-tint-2);
  color: var(--ink);
}

/* Testimonial marquee — infinite scroll, pauses on hover */
@keyframes reo-marquee-l {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes reo-marquee-r {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.reo-marquee:hover > div {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .reo-marquee > div { animation: none !important; }
}

/* ============================================================
   Responsive grid utilities — cascade on top of inline
   grid-template-columns. Each class adjusts its grid at the
   breakpoints below; the inline desktop value still wins above
   the largest breakpoint, so desktop renders unchanged.
   ============================================================ */

/* 3-col grids (step cards, plan tiers, "how it works" layers) */
@media (max-width: 1024px) {
  .reo-rgrid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 720px) {
  .reo-rgrid-3 { grid-template-columns: 1fr !important; }
}

/* 4-col grid (agent shelf) */
@media (max-width: 1024px) {
  .reo-rgrid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .reo-rgrid-4 { grid-template-columns: 1fr !important; }
}

/* 5-col grid (compliance badges) */
@media (max-width: 1024px) {
  .reo-rgrid-5 { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  .reo-rgrid-5 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 400px) {
  .reo-rgrid-5 { grid-template-columns: 1fr !important; }
}

/* 2-col grid stacks at small breakpoint (general 2-col content).
   Drop the inner column-divider on direct children when stacked so the
   layout reads as a single column, not as orphan right-edges. */
@media (max-width: 720px) {
  .reo-rgrid-2 { grid-template-columns: 1fr !important; gap: 20px !important; }
  .reo-rgrid-2 > * { border-right: none !important; }
}

/* 2-col grid stacks earlier — used by hero/header-style layouts and
   the privacy + final-CTA two-column composition */
@media (max-width: 900px) {
  .reo-rgrid-2-wide { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* Mixed grid with one fixed-px column (e.g. "1fr 280px") stacks to 1-col */
@media (max-width: 720px) {
  .reo-rgrid-fixed { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* === Body copy adjustments at mobile === */

/* Hero subhead — large p that needs to scale down on narrow viewports */
@media (max-width: 900px) {
  .reo-hero-subhead { font-size: 18px !important; line-height: 1.5 !important; }
}
@media (max-width: 600px) {
  .reo-hero-subhead { font-size: 16px !important; }
}

/* Final CTA supporting paragraph — keeps editorial proportion on phones */
@media (max-width: 600px) {
  .reo-final-sub { font-size: 16px !important; }
}

/* === Testimony marquee — keep cards readable on phones === */
@media (max-width: 768px) {
  .reo-testimony-card { width: 300px !important; padding: 20px 22px !important; }
}
@media (max-width: 420px) {
  .reo-testimony-card { width: 260px !important; padding: 18px 20px !important; }
}
@media (max-width: 640px) {
  .reo-marquee-fade { width: 40px !important; }
}

/* === BetweenComp carousel — allow sender column to shrink on phones
       so the Reo chip and date stay inside the inbox row === */
@media (max-width: 480px) {
  .reo-between-sender {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .reo-between-thread-subj,
  .reo-between-thread-excerpt {
    padding-left: 0 !important;
  }
}

/* === Section padding on extra-narrow widths === */
@media (max-width: 380px) {
  .reo-section-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* === Sticky-nav offset for anchored sections on mobile === */
@media (max-width: 900px) {
  [id="how"], [id="skills"], [id="privacy"], [id="security"] {
    scroll-margin-top: 64px !important;
  }
}

/* === Modal close button — make it WCAG-compliant 44px tap target === */
@media (max-width: 600px) {
  .reo-modal-close {
    min-height: 44px !important;
    padding: 0 14px !important;
  }
}

/* === Visibility helpers for desktop / mobile-only blocks.
       - .reo-only-mobile is hidden on desktop and block on mobile.
       - .reo-only-desktop has no display rule on desktop (so the element's
         own inline `display: flex|grid|block|…` keeps working) and is hidden
         on mobile. Used by PrivacyVariantC (figures inline-after-principle
         on mobile, right-column stack on desktop) and DiffComparison
         (card-per-pair on mobile, 2-col table on desktop). */
.reo-only-mobile { display: none !important; }
@media (max-width: 900px) {
  .reo-only-mobile { display: block !important; }
  .reo-only-desktop { display: none !important; }
}