/* =====================================================================
   ReyfynAI — shared stylesheet
   Base tokens, header, hero, sections and components are carried over
   verbatim from the original single-page site so every page matches it
   exactly. Additions for the multi-page build are marked "NEW:".
===================================================================== */

/* ============ TOKENS — Ivory / Sage / Gold (luxury venue palette) ============ */
:root{
  --bg-void: #E9DEC3;
  --bg-panel: #FFFFFF;
  --bg-panel-raised: #F3EDDD;
  --bg-panel-alt: #EFE7D3;
  --bg-panel-border: rgba(62,76,54,0.16);

  --sage: #3E4C36;
  --sage-light: #6B7F5E;
  --sage-dark: #2C3626;
  --gold: #C6A15B;
  --gold-light: #E1CB9C;

  --rust: #B4553F;

  --text-primary: #2B2A24;
  --text-secondary: #6B6558;
  --text-muted: #9B9384;

  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;

  --border-radius: 10px;
  --max-width: 1180px;
}

*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--bg-void);
  color:var(--text-primary);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(ellipse 900px 600px at 15% -10%, rgba(198,161,91,0.10), transparent 60%),
    radial-gradient(ellipse 800px 600px at 100% 10%, rgba(62,76,54,0.06), transparent 55%);
  pointer-events:none;
  z-index:0;
}

.wrap{max-width:var(--max-width); margin:0 auto; padding:0 32px; position:relative; z-index:1;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; letter-spacing:-0.005em; color:var(--text-primary);}
a{color:inherit; text-decoration:none;}

.eyebrow{
  font-family:var(--font-body); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600;
  color:var(--sage); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); }

section{position:relative; z-index:1;}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* NEW: focus visibility (kept subtle, matches palette) */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;
}

/* NEW: whole-page fade-in on load, and fade-out just before navigating away */
/* The fade-in is a pure-CSS animation that ends at full opacity ("backwards" = it only
   applies the starting opacity:0 before it begins), so the page can never get stuck
   hidden if a script fails or a browser restores the page from its back/forward cache.
   The earlier version hid the body by default and relied on JS to reveal it, which left
   the page blank after Back/refresh. .page-leaving is only ever added just before
   navigating away, and main.js clears it again on `pageshow`. */
body{ animation:page-in .35s ease backwards; transition:opacity .28s ease; }
@keyframes page-in{ from{opacity:0;} to{opacity:1;} }
body.page-leaving{ opacity:0; }

/* ============ NAV ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:24px 0; transition:padding .35s ease, background .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  padding:15px 0; background:rgba(247,241,228,0.88); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bg-panel-border);
}
/* NEW: the open mobile drawer needs its own solid backdrop, since without it
   (e.g. before the page has scrolled) the page content behind shows through
   and the links become unreadable */
header.nav-open{
  background:rgba(247,241,228,0.98); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bg-panel-border);
}
nav.wrap{display:flex; align-items:center; justify-content:space-between;}

.logo{font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-0.01em; display:flex; align-items:center; gap:10px;}
.logo .mark{ background:var(--sage); padding:7px 8px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; }
.logo .mark img{height:22px; width:auto; display:block;}
footer .logo .mark{padding:6px 7px;}
footer .logo .mark img{height:18px;}

.nav-links{display:flex; gap:32px; font-size:13.5px; color:var(--text-secondary); font-weight:500;}
.nav-links a{transition:color .2s ease; position:relative;}
.nav-links a:hover{color:var(--sage);}
.nav-links a.active{color:var(--sage);} /* NEW: current-page indicator */
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--gold);
}

.btn{
  font-family:var(--font-body); font-weight:600; font-size:14px; padding:12px 22px;
  border-radius:6px; border:1px solid transparent; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-primary{ background:var(--sage); color:#FBF8F0; box-shadow:0 6px 16px rgba(43,42,36,0.14); }
.btn-primary:hover{ background:var(--sage-dark); transform:translateY(-1px); box-shadow:0 10px 22px rgba(43,42,36,0.20); }
.btn-ghost{ background:transparent; color:var(--sage); border-color:var(--bg-panel-border); }
.btn-ghost:hover{ border-color:var(--sage); background:rgba(62,76,54,0.05); }

@media (max-width:900px){
  .nav-links{display:none;}
  /* the header's own CTA button is redundant with the drawer's CTA and has no room
     next to the logo + hamburger at phone widths, so it's hidden here only */
  header nav.wrap > a.btn-primary{display:none;}
}

/* NEW: mobile nav toggle + drawer */
.nav-toggle{
  display:none; width:40px; height:40px; border-radius:8px; border:1px solid var(--bg-panel-border);
  background:var(--bg-panel); align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.nav-toggle .bar{width:18px; height:2px; background:var(--sage); position:relative; display:block;}
.nav-toggle .bar::before, .nav-toggle .bar::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--sage); transition:transform .25s ease, top .25s ease, opacity .25s ease;
}
.nav-toggle .bar::before{ top:-6px; }
.nav-toggle .bar::after{ top:6px; }
.nav-toggle[aria-expanded="true"] .bar{ background:transparent; }
.nav-toggle[aria-expanded="true"] .bar::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar::after{ top:0; transform:rotate(-45deg); }
@media (max-width:900px){ .nav-toggle{display:flex;} }

.nav-drawer{
  display:none; flex-direction:column; gap:2px; padding:14px 0 6px;
  border-top:1px solid var(--bg-panel-border); margin-top:16px;
}
.nav-drawer a{
  padding:13px 4px; font-size:14.5px; color:var(--text-secondary); font-weight:500; border-bottom:1px solid var(--bg-panel-border);
}
.nav-drawer a.active{ color:var(--sage); }
.nav-drawer .btn{ margin-top:14px; justify-content:center; }
header.nav-open .nav-drawer{ display:flex; }
@media (min-width:901px){ .nav-drawer{ display:none !important; } }

/* ============ PAGE HERO (sub-pages) ============ */
/* NEW: compact intro header used on every page except Home, which keeps the full hero below */
.page-hero{ padding:168px 0 64px; }
@media (max-width:760px){ .page-hero{ padding:140px 0 48px; } }
.page-hero .wrap{ max-width:760px; }
.page-hero h1{ font-size:clamp(32px, 4.4vw, 48px); line-height:1.14; margin-bottom:18px; }
.page-hero p.lead{ font-size:16.5px; color:var(--text-secondary); max-width:560px; }

/* ============ HERO ============ */
.hero{padding:170px 0 110px;}
.hero-grid{display:grid; grid-template-columns:0.95fr 1.05fr; gap:64px; align-items:center;}
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr; gap:56px;} .hero{padding:148px 0 70px;} }

.hero h1{ font-family:var(--font-display); font-size:clamp(38px, 5vw, 60px); line-height:1.1; margin-bottom:24px; font-weight:600; }
.hero h1 .accent{ color:var(--sage); }
.hero p.lead{ font-size:17px; color:var(--text-secondary); max-width:480px; margin-bottom:36px; }
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}

/* ---- Command Deck (hero signature) ---- */
.deck{display:flex; flex-direction:column; gap:14px;}
.deck-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:560px){ .deck-row{grid-template-columns:1fr;} }

.deck-widget{
  background:var(--bg-panel); border:1px solid var(--bg-panel-border); border-radius:14px;
  padding:18px 18px 16px; box-shadow:0 24px 54px -30px rgba(43,42,36,0.22);
}
.widget-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:10.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600;
  margin-bottom:14px;
}
.dot-live{width:6px; height:6px; border-radius:50%; background:var(--sage); display:inline-block; animation:blink 2.2s infinite;}
@keyframes blink{0%,100%{opacity:1;} 50%{opacity:0.35;}}

.scanner{padding:20px 20px 14px;}
.scanner-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:var(--text-muted); letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
  margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--bg-panel-border);
}
.scanner-head .live{display:flex; align-items:center; gap:6px; color:var(--sage);}
.scanner-head .live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--sage); animation:blink 2.2s infinite;}

.ledger{position:relative;}
.ledger-row{
  display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center;
  padding:11px 4px; border-bottom:1px solid var(--bg-panel-alt); font-size:13px;
}
.ledger-row:last-child{border-bottom:none;}
.ledger-row .name{color:var(--text-primary); font-weight:500;}
.ledger-row .unit{color:var(--text-muted); font-size:12px;}
.ledger-row .delta{font-size:12px; font-weight:700; padding:3px 8px; border-radius:5px; opacity:0.2; transition:opacity .5s ease;}
.ledger-row .delta.up{color:var(--rust); background:rgba(180,85,63,0.10);}
.ledger-row .delta.down{color:var(--sage); background:rgba(62,76,54,0.10);}
.ledger-row.scanned .delta{opacity:1;}

.scan-line{
  position:absolute; left:0; right:0; height:26px;
  background:linear-gradient(180deg, transparent, rgba(198,161,91,0.18) 45%, rgba(198,161,91,0.32) 50%, rgba(198,161,91,0.18) 55%, transparent);
  animation:scan 5.5s cubic-bezier(.65,0,.35,1) infinite;
  pointer-events:none;
}
@keyframes scan{ 0%{top:-10%;} 50%{top:100%;} 100%{top:-10%;} }

.scanner-foot{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--bg-panel-border);
  display:flex; justify-content:space-between; font-size:11px; color:var(--text-muted);
}

.chart-title{font-size:12.5px; color:var(--text-secondary); margin-bottom:4px;}
.chart-delta{font-size:12px; color:var(--sage); font-weight:600; margin-bottom:8px; display:inline-block;}
.sparkline{width:100%; height:60px; overflow:visible;}
.spark-path{stroke:var(--gold);}
.spark-dot{
  fill:var(--gold);
  offset-path: path('M4,46 C40,10 70,58 104,26 C138,-4 170,40 206,18');
  animation:travel 4.5s linear infinite;
}
@keyframes travel{ 0%{offset-distance:0%; opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{offset-distance:100%; opacity:0;} }

.alert-stack{position:relative; height:74px;}
.alert-item{
  position:absolute; inset:0; display:flex; align-items:center; gap:10px;
  opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .6s ease;
  font-size:12.5px; color:var(--text-secondary); line-height:1.4;
}
.alert-item.active{opacity:1; transform:translateY(0);}
.a-icon{width:24px; height:24px; border-radius:7px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;}
.a-icon.up{background:rgba(180,85,63,0.12); color:var(--rust);}
.a-icon.down{background:rgba(62,76,54,0.12); color:var(--sage);}
.a-icon.core{background:rgba(198,161,91,0.16); color:var(--gold);}

/* ============ STATS BAR ============ */
.stats{border-top:1px solid var(--bg-panel-border); border-bottom:1px solid var(--bg-panel-border); padding:48px 0;}
.stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
@media (max-width:760px){ .stats-grid{grid-template-columns:1fr; gap:28px;} }
.stat .num{font-family:var(--font-display); font-size:36px; font-weight:700; color:var(--sage); margin-bottom:8px;}
.stat .label{font-size:13px; color:var(--text-secondary); max-width:280px;}
.stats-note{text-align:center; margin-top:32px; font-size:12.5px; font-style:italic; color:var(--text-muted);}

/* ============ SECTION SHELL ============ */
.section{padding:120px 0;}
@media (max-width:760px){ .section{padding:80px 0;} }
.section-head{max-width:640px; margin-bottom:64px;}
.section-head h2{font-size:clamp(28px,3.4vw,40px); margin-bottom:16px; line-height:1.16;}
.section-head p{color:var(--text-secondary); font-size:15.5px;}

/* NEW: first section on a sub-page sits right under the page-hero, so trim the top padding */
.page-hero + .section{ padding-top:0; }

/* ============ HOW IT WORKS ============ */
.steps.reveal{opacity:1; transform:none; transition:none;}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative;}
@media (max-width:860px){ .steps{grid-template-columns:1fr; gap:36px;} }
.steps::before{
  content:""; position:absolute; top:25px; left:8%; right:8%; height:1px;
  background:var(--gold-light);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1.4s cubic-bezier(.4,0,.2,1) .2s;
}
.steps.is-visible::before{ transform:scaleX(1); }
@media (max-width:860px){ .steps::before{display:none;} }
.step{padding-right:36px;}
.step.reveal:nth-child(1){transition-delay:0s;}
.step.reveal:nth-child(2){transition-delay:.18s;}
.step.reveal:nth-child(3){transition-delay:.36s;}
.step .index{
  font-family:var(--font-display); font-size:15px; color:#FBF8F0; width:50px; height:50px; border-radius:50%;
  background:var(--sage);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px; position:relative; z-index:2; font-weight:700;
  box-shadow:0 0 0 5px var(--bg-void);
}
.step h3{font-size:19px; margin-bottom:10px;}
.step p{color:var(--text-secondary); font-size:14.5px;}

/* ============ CALCULATOR ============ */
.calc-panel{
  background:var(--bg-panel); border:1px solid var(--bg-panel-border); border-radius:16px;
  padding:48px 44px; box-shadow:0 30px 70px -38px rgba(43,42,36,0.24);
}
.calc-input{margin-bottom:36px;}
.calc-input label{display:flex; justify-content:space-between; font-size:14px; color:var(--text-secondary); margin-bottom:14px; font-weight:500;}
.calc-input label span{font-family:var(--font-display); font-size:18px; color:var(--sage); font-weight:700;}
input[type="range"]{
  -webkit-appearance:none; width:100%; height:4px; border-radius:2px; background:var(--bg-panel-alt); outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--sage);
  border:3px solid var(--bg-panel); box-shadow:0 2px 8px rgba(43,42,36,0.3); cursor:pointer;
}
input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--sage); border:3px solid var(--bg-panel);
  box-shadow:0 2px 8px rgba(43,42,36,0.3); cursor:pointer;
}
.calc-results{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:600px){ .calc-results{grid-template-columns:1fr;} }
.calc-result{ text-align:center; padding:28px 20px; background:var(--bg-panel-raised); border-radius:12px; }
.calc-num{ font-family:var(--font-display); font-size:38px; font-weight:700; color:var(--sage); margin-bottom:8px; }
.calc-label{ font-size:13px; color:var(--text-secondary); }
.calc-note{text-align:center; margin-top:28px; font-size:12.5px; font-style:italic; color:var(--text-muted); max-width:560px; margin-left:auto; margin-right:auto;}

/* ============ THE PATH ============ */
.path-track{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:14px;}
@media (max-width:900px){ .path-track{grid-template-columns:1fr;} }
.modules{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}

.module-card{
  background:var(--bg-panel); border:1px solid var(--bg-panel-border); border-radius:var(--border-radius);
  padding:32px 28px; display:flex; flex-direction:column;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.module-card:hover{transform:translateY(-5px); border-color:var(--gold); box-shadow:0 26px 60px -30px rgba(43,42,36,0.26);}
.module-icon{
  width:44px; height:44px; border-radius:10px; background:var(--bg-panel-alt); border:1px solid var(--bg-panel-border);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.module-icon svg{width:20px; height:20px;}
.module-tag{font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px; font-weight:600;}
.module-card h3{font-size:22px; margin-bottom:10px;}
.module-card .price-note{font-size:12px; color:var(--text-muted); margin-bottom:22px; text-align:center;}

/* NEW: card prices — one-off and monthly side by side in a tinted panel, each with a
   small label. The display font's default numerals are "old-style" (digits at uneven
   heights, which looks wobbly on prices), so prices use lining numerals instead. */
.module-card .price-block{
  display:grid; grid-template-columns:1fr 1fr; margin-bottom:12px;
  background:var(--bg-panel-raised); border:1px solid var(--bg-panel-border); border-radius:10px;
}
.module-card .pb{ padding:16px 16px 15px; }
.module-card .pb + .pb{ border-left:1px solid var(--bg-panel-border); }
.module-card .pb-label{
  font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600;
  color:var(--text-secondary); margin-bottom:5px; white-space:nowrap;
}
.module-card .pb-amt{
  font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--sage); line-height:1.15;
  font-variant-numeric:lining-nums; white-space:nowrap;
}
.module-card .pb-amt small{ font-family:var(--font-body); font-size:12px; font-weight:400; color:var(--text-secondary); margin-left:2px; }
.path-badge{
  display:inline-block; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; font-weight:600;
  color:var(--sage); background:rgba(62,76,54,0.08); border:1px solid rgba(62,76,54,0.22);
  padding:5px 11px; border-radius:20px; margin-bottom:18px; width:fit-content;
}
.path-desc{font-size:13.5px; color:var(--text-secondary); margin-bottom:14px;}
.path-note{font-size:11.5px; font-style:italic; color:var(--text-muted); margin-bottom:14px;}
.trust-meter{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:20px; margin-top:auto; padding-top:14px; border-top:1px solid var(--bg-panel-border);}
.trust-word{font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); font-weight:600;}
.trust-dots{display:flex; gap:4px;}
.trust-dots .dot{width:7px; height:7px; border-radius:50%; background:var(--bg-panel-border);}
.trust-dots .dot.on{background:var(--gold);}
.pricing-footnote{margin-top:28px; font-size:12.5px; color:var(--text-muted); font-style:italic;}

/* NEW: the three services are independent, so the old sequential "ladder" connectors
   (a gold shimmer implying step 1 -> 2 -> 3) are replaced by "+" joiners, which read
   as "combine these" instead. They sit in the same auto-width grid columns the
   connectors used, so the three cards keep equal widths and heights. */
.path-plus{
  width:30px; height:30px; border-radius:50%; align-self:center; justify-self:center;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-panel); border:1px solid var(--gold-light); color:var(--gold);
  font-family:var(--font-display); font-size:19px; font-weight:600; line-height:1;
  animation:plus-pulse 3.2s ease-in-out infinite;
}
@keyframes plus-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(198,161,91,0.28); }
  50%{ box-shadow:0 0 0 7px rgba(198,161,91,0); }
}
.in-package{
  font-size:11.5px; font-weight:600; color:var(--sage); margin-bottom:14px;
  display:flex; align-items:center; gap:7px;
}
.in-package::before{ content:"✓"; color:var(--gold); font-weight:700; }

/* NEW: two-part pricing on the service cards (one-off fee above the monthly fee) and the
   "Add-on — needs Data Concierge" marker on the Call Answering card */
.requires{
  font-size:11.5px; font-weight:600; color:var(--text-secondary); margin-bottom:6px;
  display:flex; align-items:center; gap:7px;
}
.requires::before{ content:"↳"; color:var(--gold); font-weight:700; }

/* NEW: "Build your package" — dark panel under the three service cards. Summary/estimate on
   the left, the choices on the right (mirror of the cards), so it reads as the "everything"
   option rather than a fourth peer card. The numbers are filled in by assets/js/main.js. */
.bundle-divider{
  display:flex; align-items:center; gap:18px; margin:44px 0 28px;
  font-size:12px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600; color:var(--sage);
}
.bundle-divider::before, .bundle-divider::after{ content:""; flex:1; height:1px; background:var(--bg-panel-border); }
.builder{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1.2fr; gap:44px; align-items:stretch;
  background:linear-gradient(155deg, var(--sage) 0%, var(--sage-dark) 100%);
  border:1px solid var(--gold); border-radius:16px; padding:48px 44px;
  box-shadow:0 30px 70px -38px rgba(43,42,36,0.45);
  color:#FBF8F0;
}
.builder::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 0% 0%, rgba(198,161,91,0.22), transparent 55%);
}
.builder-summary, .builder-options{ position:relative; }
.builder-summary{
  display:flex; flex-direction:column; justify-content:center;
  border-right:1px solid rgba(225,203,156,0.28); padding-right:44px;
}
.builder-badge{
  width:fit-content; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; font-weight:600;
  color:var(--gold-light); background:rgba(198,161,91,0.16); border:1px solid rgba(225,203,156,0.45);
  padding:5px 11px; border-radius:20px; margin-bottom:22px;
}
.builder-totals{ display:flex; gap:36px; margin-bottom:12px; }
.b-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; font-weight:600; color:rgba(251,248,240,0.78); margin-bottom:4px; }
.b-amt{ font-family:var(--font-display); font-size:44px; font-weight:700; color:var(--gold-light); line-height:1.1; transform-origin:left center; font-variant-numeric:lining-nums; }
.b-amt.bump{ animation:b-bump .35s ease; }
@keyframes b-bump{ 0%{transform:scale(1);} 40%{transform:scale(1.06);} 100%{transform:scale(1);} }
.b-was{ font-size:13px; color:rgba(251,248,240,0.65); text-decoration:line-through; min-height:20px; }
.b-save{ font-size:13px; font-weight:600; color:var(--gold-light); min-height:22px; margin-bottom:6px; }
.b-save.is-hint{ font-weight:400; color:rgba(251,248,240,0.85); }
.b-note{ font-size:12px; color:rgba(251,248,240,0.72); margin-bottom:22px; }
.btn-light{ background:#FBF8F0; color:var(--sage-dark); box-shadow:0 6px 16px rgba(0,0,0,0.22); justify-content:center; }
.btn-light:hover{ background:#FFFFFF; transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,0.28); }

.builder-options h3{ color:#FBF8F0; font-size:clamp(24px,2.6vw,30px); margin-bottom:10px; }
.builder-lead{ color:rgba(251,248,240,0.84); font-size:14px; max-width:520px; margin-bottom:22px; }
.opt-list{ display:flex; flex-direction:column; gap:12px; }
.opt{
  position:relative; display:flex; align-items:center; gap:16px; padding:16px 18px; cursor:pointer;
  border:1px solid rgba(225,203,156,0.35); border-radius:12px; background:rgba(251,248,240,0.05);
  transition:background .2s ease, border-color .2s ease;
}
.opt:hover{ background:rgba(251,248,240,0.1); }
.opt:has(input:checked){ border-color:var(--gold); background:rgba(198,161,91,0.12); }
.opt input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.opt-box{
  width:22px; height:22px; border-radius:6px; flex-shrink:0;
  border:1.5px solid rgba(225,203,156,0.7);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.opt input:checked + .opt-box{ background:var(--gold); border-color:var(--gold); }
.opt input:checked + .opt-box::after{ content:"✓"; color:var(--sage-dark); font-weight:700; font-size:14px; line-height:1; }
.opt input:focus-visible + .opt-box{ outline:2px solid var(--gold-light); outline-offset:3px; }
.opt-text strong{ display:block; font-size:15px; font-weight:600; color:#FBF8F0; }
.opt-text small{ display:block; font-size:12.5px; color:rgba(251,248,240,0.78); margin-top:2px; }
.builder-msg{ min-height:20px; margin-top:14px; font-size:12.5px; font-style:italic; color:var(--gold-light); }

@media (max-width:900px){
  .path-plus{ margin:0 auto; }
  .builder{ grid-template-columns:1fr; gap:30px; padding:36px 26px; }
  .builder-options{ order:-1; }
  .builder-summary{ border-right:none; border-top:1px solid rgba(225,203,156,0.28); padding-right:0; padding-top:28px; }
  .builder-totals{ gap:28px; }
  .b-amt{ font-size:38px; }
}

/* ============ THE STUDIO ============ */
.signal-panel{
  background-image: radial-gradient(circle, rgba(198,161,91,0.14) 1px, transparent 1.4px);
  background-size:22px 22px;
  background-color:var(--bg-panel);
  border:1px solid var(--bg-panel-border); border-radius:16px; padding:64px 44px 78px;
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:18px;
}
@media (max-width:900px){ .signal-panel{grid-template-columns:1fr; padding:40px 26px 56px;} }
.signal-node{text-align:center; position:relative;}
.signal-node .icon-ring{
  width:76px; height:76px; border-radius:50%; border:1px solid var(--bg-panel-border); background:var(--bg-panel-raised);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; position:relative; z-index:2;
}
.signal-node.core .icon-ring{
  border-color:var(--gold); background:var(--bg-panel);
  animation:studio-pulse 3.4s ease-in-out infinite;
}
@keyframes studio-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(198,161,91,0.30); }
  50%{ box-shadow:0 0 0 12px rgba(198,161,91,0); }
}
.signal-node svg{width:28px; height:28px;}
/* NEW: the ReyfynAI icon itself (the circle + its spokes, as one unit) spins one
   full turn exactly when each packet arrives (0%/33%/66% of the shared 6s loop,
   matching studio-packet's arrival instants below) — rotation is cumulative
   (0->360->720->1080deg) rather than resetting each time, so the loop restart from
   1080deg back to 0deg lands on the same visual angle with no snap. */
.signal-node.core .icon-ring svg{
  transform-origin:center; animation:studio-spin 6s ease-in-out infinite;
}
@keyframes studio-spin{
  0%{ transform:rotate(0deg); }
  12%{ transform:rotate(360deg); }
  33%{ transform:rotate(360deg); }
  45%{ transform:rotate(720deg); }
  66%{ transform:rotate(720deg); }
  78%{ transform:rotate(1080deg); }
  100%{ transform:rotate(1080deg); }
}
.signal-node h4{font-size:15.5px; margin-bottom:6px; font-family:var(--font-display);}
.signal-node p{font-size:12.5px; color:var(--text-muted); max-width:170px; margin:0 auto;}
.connector{position:relative; width:56px; height:1px; background:var(--bg-panel-border); align-self:center;}
/* the travelling dot itself lives in .packet below — one dot per connector, not an
   extra ambient one layered underneath it */
@media (max-width:900px){
  .connector{width:1px; height:40px; margin:6px auto;}
}
.signal-caption{text-align:center; margin-top:36px; font-size:12.5px; font-style:italic; color:var(--text-muted);}

/* NEW: labelled packet riding the first connector's dot (Your Data -> ReyfynAI).
   Centering is done once, statically, via top:50% + margin-top:-3px (half the dot's
   own height) — the keyframes below only ever animate `left`/`top` and `scale`,
   never a centering translate, so the two don't stack and push the dot off the line. */
.connector .packet{
  position:absolute; top:50%; left:-3px; width:6px; height:6px; margin-top:-3px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 6px var(--gold); opacity:0;
  animation:studio-packet 6s linear infinite;
}
.connector .packet .pill{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  padding:2px 8px; border-radius:999px; white-space:nowrap;
  background:var(--bg-panel); border:1px solid var(--gold); color:var(--sage-dark);
  font-size:10px; font-weight:600; font-family:var(--font-body);
}
.connector .packet:nth-child(1){ animation-delay:0s; }
.connector .packet:nth-child(2){ animation-delay:2s; }
.connector .packet:nth-child(3){ animation-delay:4s; }
@keyframes studio-packet{
  0%{ left:-3px; opacity:0; transform:scale(1); }
  4%{ opacity:1; }
  30%{ opacity:1; transform:scale(1); }
  33%{ left:100%; opacity:1; transform:scale(1.7); }
  36%{ opacity:0; }
  100%{ opacity:0; }
}
/* second connector: the same packet (same gold dot, same label) continues on to the
   Dashboard — only the label TEXT recolours gold here, to show it's now been through
   the engine, rather than changing the dot itself.
   IMPORTANT: this must share the first connector's 6s duration and delays (not a
   separate 2s loop) — a shorter duration whose value evenly divides those delays
   puts every packet back in phase with each other, which is what made all three
   labels appear stacked at once. Each reply packet instead sits idle (opacity 0)
   until the moment its counterpart arrives at ReyfynAI (33%/66%/0% of the shared
   6s loop, i.e. the same instants studio-packet "poofs" above), then travels at the
   SAME SPEED as the first connector — a 33%-of-loop-wide window (~2s), same as
   studio-packet's own 0%->33% travel window, just shifted to start where that one
   ends — so only ever one label is showing here, and it moves at matching pace. */
.connector.connector-reply .packet .pill{ color:var(--gold); }
.connector.connector-reply .packet{
  animation-name:studio-reply; animation-duration:6s; animation-iteration-count:infinite;
}
.connector.connector-reply .packet:nth-child(1){ animation-delay:0s; }
.connector.connector-reply .packet:nth-child(2){ animation-delay:2s; }
.connector.connector-reply .packet:nth-child(3){ animation-delay:4s; }
@keyframes studio-reply{
  0%{ left:-3px; opacity:0; transform:scale(1); }
  32%{ opacity:0; }
  33%{ left:-3px; opacity:1; transform:scale(1); }
  63%{ opacity:1; transform:scale(1); }
  66%{ left:100%; opacity:1; transform:scale(1.7); }
  69%{ opacity:0; }
  100%{ opacity:0; }
}
@media (max-width:900px){
  .connector .packet{ top:-3px; left:50%; margin-left:-3px; animation-name:studio-packet-v; }
  .connector .packet .pill{ bottom:auto; left:16px; top:-4px; transform:none; }
  @keyframes studio-packet-v{
    0%{ top:-3px; opacity:0; transform:scale(1); }
    4%{ opacity:1; }
    30%{ opacity:1; transform:scale(1); }
    33%{ top:100%; opacity:1; transform:scale(1.7); }
    36%{ opacity:0; }
    100%{ opacity:0; }
  }
  .connector.connector-reply .packet{ animation-name:studio-reply-v; }
  @keyframes studio-reply-v{
    0%{ top:-3px; opacity:0; transform:scale(1); }
    32%{ opacity:0; }
    33%{ top:-3px; opacity:1; transform:scale(1); }
    63%{ opacity:1; transform:scale(1); }
    66%{ top:100%; opacity:1; transform:scale(1.7); }
    69%{ opacity:0; }
    100%{ opacity:0; }
  }
}

/* NEW: "Replied" result badge under Your Dashboard — absolutely positioned so it never
   shifts the node row out of alignment with the other two nodes */
.signal-node .result-badge{
  position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:12px;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  padding:5px 11px; border-radius:999px; font-size:11px; font-weight:600;
  background:rgba(198,161,91,0.16); border:1px solid var(--gold); color:var(--sage-dark);
  opacity:0; animation:studio-badge 6s ease-in-out infinite;
}
@keyframes studio-badge{
  0%, 60%{ opacity:0; }
  67%, 88%{ opacity:1; }
  97%, 100%{ opacity:0; }
}

/* ============ TESTIMONIALS / PILOT ============ */
.pilot-badge{
  display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600;
  color:var(--sage); background:rgba(62,76,54,0.08); border:1px solid rgba(62,76,54,0.22);
  padding:6px 12px; border-radius:20px; margin-bottom:28px;
}
.testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:900px){ .testimonial-grid{grid-template-columns:1fr;} }
.t-card{border:1px dashed var(--bg-panel-border); border-radius:var(--border-radius); padding:28px; color:var(--text-muted);}
.t-card .quote-mark{font-family:var(--font-display); font-size:32px; color:var(--gold-light); line-height:1; margin-bottom:14px;}
.t-card p.placeholder-text{font-size:13.5px; font-style:italic; margin-bottom:18px; color:var(--text-secondary);}
.t-card .who{font-size:11.5px; color:var(--text-muted);}

/* ============ ABOUT ============ */
.about-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
@media (max-width:760px){ .about-grid{grid-template-columns:1fr;} }
.person-card{background:var(--bg-panel); border:1px solid var(--bg-panel-border); border-radius:var(--border-radius); padding:30px; display:flex; gap:18px; align-items:flex-start;}
.avatar{
  width:52px; height:52px; border-radius:10px; flex-shrink:0;
  background:var(--sage);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:#FBF8F0; font-size:16px;
}
.person-card h4{font-size:16.5px; margin-bottom:3px;}
.person-card .role{font-size:11.5px; color:var(--sage); margin-bottom:10px; text-transform:uppercase; letter-spacing:0.05em; font-weight:600;}
.person-card p.bio{font-size:13.5px; color:var(--text-secondary);}

/* ============ CONTACT ============ */
.contact-panel{
  background:linear-gradient(155deg, #FBF8F0, var(--bg-panel-raised));
  border:1px solid var(--bg-panel-border); border-radius:18px; padding:64px 48px; text-align:center;
  position:relative; overflow:hidden;
}
.contact-panel h2{font-size:clamp(26px,3.4vw,36px); margin-bottom:16px; position:relative;}
.contact-panel p{color:var(--text-secondary); max-width:440px; margin:0 auto 30px; position:relative; font-size:15px;}
.contact-meta{font-size:12.5px; color:var(--text-muted); margin-top:26px; position:relative;}

/* NEW: contact form (Contact page) */
.contact-form{ max-width:520px; margin:0 auto; text-align:left; position:relative; }
.form-row{ margin-bottom:18px; }
.form-row label{ display:block; font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; }
.form-row input, .form-row textarea{
  width:100%; font-family:var(--font-body); font-size:14.5px; color:var(--text-primary);
  background:var(--bg-panel); border:1px solid var(--bg-panel-border); border-radius:8px; padding:12px 14px;
}
.form-row textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:12px; color:var(--text-muted); margin-top:10px; }
.form-status{ font-size:13px; margin-top:14px; display:none; }
.form-status.visible{ display:block; }

/* ============ HOME — QUICK LINKS (teasers to the dedicated pages) ============ */
/* NEW */
.quicklinks{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:900px){ .quicklinks{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .quicklinks{grid-template-columns:1fr;} }
.quicklink-card{
  background:var(--bg-panel); border:1px solid var(--bg-panel-border); border-radius:var(--border-radius);
  padding:26px 24px; display:flex; flex-direction:column; gap:10px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.quicklink-card:hover{ transform:translateY(-4px); border-color:var(--gold); box-shadow:0 22px 50px -28px rgba(43,42,36,0.24); }
.quicklink-card h3{ font-size:17px; }
.quicklink-card p{ font-size:13px; color:var(--text-secondary); flex-grow:1; }
.quicklink-card .go{ font-size:12.5px; font-weight:600; color:var(--sage); display:inline-flex; align-items:center; gap:6px; }

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--bg-panel-border); padding:44px 0;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;}
.footer-row .logo{font-size:16px;}
.footer-links{display:flex; gap:26px; font-size:13px; color:var(--text-muted); flex-wrap:wrap;}
.footer-links a:hover{color:var(--sage);}
.footer-note{font-size:11.5px; color:var(--text-muted); margin-top:20px; font-style:italic;}

/* =====================================================================
   NEW: cross-page transitions + gold thread
===================================================================== */

/* Smooth page-to-page transitions with the browser's own View Transitions (no JS, no framework).
   Browsers without support ignore this block and keep the older fade in main.js. The header
   gets its own transition name so it stays put while the page underneath crossfades. */
@view-transition{ navigation:auto; }
header{ view-transition-name:site-header; }
::view-transition-group(site-header){ animation-duration:0s; }
::view-transition-old(root){ animation:vt-out .16s cubic-bezier(0.23,1,0.32,1) both; }
::view-transition-new(root){ animation:vt-in .38s cubic-bezier(0.23,1,0.32,1) .12s both; }
@keyframes vt-out{ to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(10px); } }
/* the page's own fade-in would double up with the transition, so drop it where transitions exist */
@supports at-rule(@view-transition){ body{ animation:none; } }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}

/* =====================================================================
   NEW: micro-interactions shared by every page (behaviour in assets/js/interactions.js)
===================================================================== */

/* words rise in one after another (page titles + section headings) */
.w{ display:inline-block; opacity:0; transform:translateY(16px); filter:blur(8px);
  transition:opacity .7s cubic-bezier(.23,1,.32,1), transform .7s cubic-bezier(.23,1,.32,1), filter .7s cubic-bezier(.23,1,.32,1); }
.in .w{ opacity:1; transform:none; filter:none; }

/* top navigation titles: the word rolls up and a sage copy rolls in */
.nav-links a .roll{ display:inline-block; overflow:hidden; vertical-align:top; height:1.4em; line-height:1.4; }
.roll > span{ display:block; transition:transform .5s cubic-bezier(.23,1,.32,1); }
.roll > span + span{ color:var(--sage); }
@media (hover:hover) and (pointer:fine){ .nav-links a:hover .roll > span{ transform:translateY(-100%); } }

/* logo mark turns a quarter-turn on hover; footer links draw an underline */
.logo .mark img{ transition:transform .7s cubic-bezier(.23,1,.32,1); }
.footer-links a{ background:linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; padding-bottom:2px; transition:background-size .35s cubic-bezier(.23,1,.32,1), color .2s ease; }
@media (hover:hover) and (pointer:fine){
  .logo:hover .mark img{ transform:rotate(90deg); }
  .footer-links a:hover{ background-size:100% 1px; }
}

/* buttons lean gently toward the pointer (translate is separate from the hover lift) */
.btn{ will-change:translate; transition:translate .3s cubic-bezier(.23,1,.32,1), transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }

/* cards get a soft gold spotlight that follows the pointer */
.spot{ position:relative; isolation:isolate; }
.spot::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; z-index:-1; transition:opacity .3s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(198,161,91,.17), transparent 65%); }
@media (hover:hover) and (pointer:fine){ .spot:hover::before{ opacity:1; } }

/* widgets tilt a few degrees toward the pointer */
.tilt{ transition:transform .3s cubic-bezier(.23,1,.32,1); will-change:transform; }
.stat .num{ font-variant-numeric:lining-nums tabular-nums; }

/* soft decorative glow behind page titles and sections (moves slower than the page) */
.page-hero{ position:relative; overflow:hidden; }
.proof-blob{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
.proof-blob.gold{ width:60vmax; height:60vmax; right:-24vmax; top:-10vmax; background:radial-gradient(circle, rgba(198,161,91,.16), transparent 62%); }
.proof-blob.sage{ width:52vmax; height:52vmax; left:-22vmax; bottom:-14vmax; background:radial-gradient(circle, rgba(62,76,54,.09), transparent 62%); }

@media (prefers-reduced-motion: reduce){
  .w{ opacity:1; transform:none; filter:none; transition:none; }
  .roll > span, .btn, .tilt, .logo .mark img{ transition:none; }
}