/* 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;
}
.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;
}

@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;
  }
}

/* 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; }
}