/* ==========================================================================
   Ridgeline AI, 2026 redesign
   Shared design system for index, customization, activate
   Direction: warm editorial light, with deliberate midnight product sections
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------ */
:root {
  /* Warm paper family */
  --paper:      #F7F5F2;
  --paper-2:    #EFEAE1;
  --paper-3:    #E6DFD3;

  /* Ink family, warm charcoal not cool gray */
  --ink:        #211F1D;
  --ink-2:      #3D3833;
  --muted:      #6B635B;
  --line:       rgba(33, 31, 29, 0.14);
  --line-soft:  rgba(33, 31, 29, 0.08);

  /* Copper, the single brand signature */
  --copper:      #B0713A;
  --copper-deep: #8F5A2C;
  --copper-soft: rgba(176, 113, 58, 0.10);
  --copper-line: rgba(176, 113, 58, 0.34);

  /* Midnight family, warm black so it belongs with the paper */
  --night:       #171614;
  --night-2:     #211F1C;
  --night-3:     #2C2926;
  --night-text:  #EDE8E1;
  --night-muted: #A39A90;
  --night-line:  rgba(247, 245, 242, 0.12);

  /* Type */
  --display: 'Fraunces', 'Source Serif 4', Georgia, serif;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rhythm */
  --shell:    1200px;
  --measure:  62ch;
  --pad-x:    clamp(1.25rem, 5vw, 3rem);
  --sec:      clamp(3.5rem, 9vw, 7.5rem);
  --sec-tight: clamp(2.75rem, 6vw, 5rem);

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;

  --shadow-lift: 0 1px 2px rgba(33,31,29,.05), 0 8px 24px -12px rgba(33,31,29,.18);
  --shadow-deep: 0 40px 80px -32px rgba(23,22,20,.55), 0 8px 24px -12px rgba(23,22,20,.35);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }

a { color: var(--copper-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.25rem; z-index: 200;
}
.skip:focus { left: 0; }

/* --- Layout ------------------------------------------------------------ */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  min-width: 0;
}
.shell-narrow { max-width: 880px; }

section { position: relative; }
.band      { padding-block: var(--sec); }
.band-tight{ padding-block: var(--sec-tight); }

/* Anchor landing offset. The nav is sticky, so an un-offset jump hides the
   top of the target section behind it. Nav is ~68px, plus breathing room. */
:root { --nav-h: 68px; }
[id] { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
/* The hero demo needs extra clearance so the device header is fully clear. */
#demo { scroll-margin-top: calc(var(--nav-h) + 2.5rem); }
@media (min-width: 900px) {
  [id]  { scroll-margin-top: calc(var(--nav-h) + 2rem); }
  #demo { scroll-margin-top: calc(var(--nav-h) + 3rem); }
}

.band-paper2 { background: var(--paper-2); }
.band-night  { background: var(--night); color: var(--night-text); }
.band-night h2, .band-night h3 { color: var(--night-text); }

/* --- Type -------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.06;
  text-wrap: balance;
}

.h-display {
  font-size: clamp(2.6rem, 8.2vw, 5.25rem);
  letter-spacing: -0.038em;
  line-height: 1.02;
}
h2 { font-size: clamp(2rem, 4.6vw, 3.25rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -0.02em; line-height: 1.25; }

.deck {
  font-size: clamp(1.0625rem, 2.1vw, 1.3125rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
  margin: 1.25rem 0 0;
  text-wrap: pretty;
}
.band-night .deck { color: var(--night-muted); }

p { margin: 1rem 0 0; max-width: var(--measure); text-wrap: pretty; }
p:first-child { margin-top: 0; }

.label {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: .625rem;
}
.label::before {
  content: '';
  width: 1.75rem; height: 1px;
  background: var(--copper);
  flex: none;
}
.band-night .label { color: var(--night-muted); }

.lede { font-size: 1.125rem; color: var(--ink-2); }
.fine { font-size: .8125rem; color: var(--muted); line-height: 1.55; }
.band-night .fine { color: var(--night-muted); }

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.005em;
  padding: .9375rem 1.5rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s var(--ease), background-color .2s var(--ease),
              border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  will-change: transform;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--copper);
  color: #FFF;
  box-shadow: 0 1px 2px rgba(33,31,29,.12), 0 10px 22px -14px rgba(176,113,58,.9);
}
.btn-primary:hover { background: var(--copper-deep); color: #FFF; }

.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #000; color: var(--paper); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink); background: rgba(33,31,29,.03); color: var(--ink); }

.band-night .btn-ghost { color: var(--night-text); border-color: var(--night-line); }
.band-night .btn-ghost:hover { background: rgba(247,245,242,.06); border-color: rgba(247,245,242,.4); color: var(--night-text); }

.btn-lg { padding: 1.0625rem 1.875rem; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-arrow svg { transition: transform .2s var(--ease); }
.btn-arrow:hover svg { transform: translateX(3px); }

/* --- Nav --------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 245, 242, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); }

.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.375rem, 3.2vw, 1.75rem);
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 60;
  transition: color .2s var(--ease);
}
.brand:hover { color: var(--copper-deep); }

.nav-links {
  display: none;
  gap: 2rem;
  align-items: center;
}
.nav-links a {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  position: relative;
  padding-block: .25rem;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current='page'] { color: var(--ink); }
.nav-links a[aria-current='page']::after { transform: scaleX(1); }

.nav-cta { display: none; }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-cta   { display: inline-flex; }
}

/* --- Rules and small parts --------------------------------------------- */
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.band-night .rule { background: var(--night-line); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .4375rem .8125rem;
  border-radius: 100px;
  border: 1px solid var(--copper-line);
  background: var(--copper-soft);
  color: var(--copper-deep);
}
.band-night .pill { color: #E2A971; border-color: rgba(226,169,113,.34); background: rgba(226,169,113,.10); }

.dot-live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4FA96A;
  box-shadow: 0 0 0 0 rgba(79,169,106,.65);
  animation: pulse 2.4s var(--ease) infinite;
  flex: none;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(79,169,106,.6); }
  70%  { box-shadow: 0 0 0 7px rgba(79,169,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(79,169,106,0); }
}

/* --- Scroll reveal ----------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d='1'] { transition-delay: .07s; }
.reveal[data-d='2'] { transition-delay: .14s; }
.reveal[data-d='3'] { transition-delay: .21s; }
.reveal[data-d='4'] { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .dot-live { animation: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- Footer ------------------------------------------------------------ */
.foot {
  background: var(--night);
  color: var(--night-muted);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
}
.foot a { color: var(--night-text); text-decoration: none; }
.foot a:hover { color: #E2A971; text-decoration: underline; text-underline-offset: 3px; }

.foot-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
}
.foot .brand { color: var(--night-text); }
.foot .brand:hover { color: #E2A971; }
.foot h4 {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--night-muted);
  margin: 0 0 1rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; font-size: .9375rem; }
.foot address { font-style: normal; font-size: .9375rem; line-height: 1.7; margin-top: 1rem; }
.foot-base {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--night-line);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  font-size: .8125rem;
}