/* ============================================================
   Rebuildaroo — design tokens + components
   Palette: bright off-white surfaces, confident teal primary CTA,
   fresh blue accent. Professional, trust-first, no mascots.
   ============================================================ */

:root, [data-theme='light']{
  /* Type scale (fluid) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem);
  --text-sm: clamp(0.875rem, 0.83rem + 0.25vw, 0.95rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.4vw, 3.4rem);
  --text-3xl: clamp(2.5rem, 1.3rem + 3.6vw, 4.5rem);

  /* Spacing (4px base) */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --space-20:5rem;--space-24:6rem;--space-32:8rem;

  /* Surfaces — brighter off-white */
  --color-bg:#F8FAF7;
  --color-surface:#FFFFFF;
  --color-surface-2:#FFFFFF;
  --color-surface-offset:#EEF6F4;
  --color-divider:#DCE9E6;
  --color-border:#C8DAD6;

  /* Text — cool charcoal */
  --color-text:#17211F;
  --color-text-muted:#5B6B67;
  --color-text-faint:#91A09B;
  --color-text-inverse:#FBFAF5;

  /* Primary — deep teal */
  --color-primary:#007A7A;
  --color-primary-hover:#006264;
  --color-primary-active:#004D50;
  --color-primary-soft:#D8F2EF;

  /* Accent — fresh sky */
  --color-accent:#2D8FD6;
  --color-accent-hover:#176FAB;
  --color-accent-soft:#DCEEFF;

  --color-success:#3F7A2C;
  --color-error:#A8412C;

  --radius-sm:.375rem;--radius-md:.625rem;--radius-lg:1rem;--radius-xl:1.5rem;--radius-full:9999px;
  --transition-interactive:200ms cubic-bezier(.16,1,.3,1);

  --shadow-sm:0 1px 2px rgba(23,33,31,.06);
  --shadow-md:0 6px 20px rgba(23,33,31,.09);
  --shadow-lg:0 18px 48px rgba(23,33,31,.14);

  --content-narrow:640px;--content-default:1000px;--content-wide:1240px;

  --font-display:'Fraunces','Georgia',serif;
  --font-body:'General Sans','Inter','Helvetica Neue',sans-serif;
}

[data-theme='dark']{
  --color-bg:#0F1716;
  --color-surface:#17211F;
  --color-surface-2:#1D2A27;
  --color-surface-offset:#1B2F2D;
  --color-divider:#29403D;
  --color-border:#36534F;
  --color-text:#EFF8F5;
  --color-text-muted:#A6BBB6;
  --color-text-faint:#6F8983;
  --color-text-inverse:#0F1716;
  --color-primary:#65D6D2;
  --color-primary-hover:#8EE5E1;
  --color-primary-active:#ADEDEA;
  --color-primary-soft:#193D3B;
  --color-accent:#74BFFF;
  --color-accent-hover:#9FD2FF;
  --color-accent-soft:#18324A;
  --color-success:#76B85C;
  --color-error:#E0795F;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 6px 20px rgba(0,0,0,.5);
  --shadow-lg:0 18px 48px rgba(0,0,0,.6);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --color-bg:#0F1716;--color-surface:#17211F;--color-surface-2:#1D2A27;--color-surface-offset:#1B2F2D;
    --color-divider:#29403D;--color-border:#36534F;--color-text:#EFF8F5;--color-text-muted:#A6BBB6;
    --color-text-faint:#6F8983;--color-text-inverse:#0F1716;--color-primary:#65D6D2;--color-primary-hover:#8EE5E1;
    --color-primary-active:#ADEDEA;--color-primary-soft:#193D3B;--color-accent:#74BFFF;--color-accent-hover:#9FD2FF;
    --color-accent-soft:#18324A;
  }
}

/* ---------- Layout primitives ---------- */
.container{width:100%;max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-6)}
.container--narrow{max-width:var(--content-narrow)}
.container--default{max-width:var(--content-default)}
section{padding-block:clamp(var(--space-16),8vw,var(--space-32))}
.section-sm{padding-block:clamp(var(--space-12),6vw,var(--space-20))}

/* ---------- Typography ---------- */
.eyebrow{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--color-accent);display:inline-flex;align-items:center;gap:var(--space-2)}
.eyebrow::before{content:"";width:1.75rem;height:1px;background:var(--color-accent);display:inline-block}
h1,h2,h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em}
.display{font-size:var(--text-3xl);line-height:1.02;font-weight:500}
.h-xl{font-size:var(--text-2xl)}
.h-lg{font-size:var(--text-xl)}
.h-md{font-size:var(--text-lg);font-family:var(--font-body);font-weight:600;letter-spacing:0}
.lead{font-size:var(--text-lg);color:var(--color-text-muted);max-width:60ch}
.muted{color:var(--color-text-muted)}
.measure{max-width:64ch}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;
  padding:.75rem 1.4rem;border-radius:var(--radius-md);text-decoration:none;line-height:1;border:1.5px solid transparent;white-space:nowrap}
.btn--primary{background:var(--color-primary);color:#fff}
.btn--primary:hover{background:var(--color-primary-hover);transform:translateY(-1px)}
[data-theme='dark'] .btn--primary{color:#08201F}
.btn--accent{background:var(--color-accent);color:#fff}
.btn--accent:hover{background:var(--color-accent-hover);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--color-text);border-color:var(--color-border)}
.btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn--lg{padding:.95rem 1.8rem;font-size:var(--text-base)}
.btn--block{width:100%}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:60;background:color-mix(in oklab,var(--color-bg) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color var(--transition-interactive),box-shadow var(--transition-interactive)}
.header--scrolled{border-bottom-color:var(--color-divider);box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;justify-content:space-between;height:4.5rem;gap:var(--space-4)}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--color-text);font-family:var(--font-display);font-weight:600;font-size:1.2rem;letter-spacing:-.01em}
.brand .logo{color:var(--color-primary);flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:.1rem;list-style:none;white-space:nowrap}
.nav-links a{text-decoration:none;color:var(--color-text-muted);font-size:var(--text-sm);font-weight:500;padding:.5rem .6rem;border-radius:var(--radius-sm)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--color-text);background:var(--color-surface-offset)}
.nav-actions{display:flex;align-items:center;gap:var(--space-3)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:var(--radius-sm);color:var(--color-text-muted);border:1px solid var(--color-border)}
.icon-btn:hover{color:var(--color-text);border-color:var(--color-primary)}
.nav-toggle{display:none}
.nav-cta-mobile{display:none}
@media (max-width:920px){
  .nav-cta-mobile{display:block}
  .nav-links{position:fixed;inset:4.5rem 0 auto 0;flex-direction:column;align-items:stretch;background:var(--color-surface);
    border-bottom:1px solid var(--color-divider);padding:var(--space-4);gap:var(--space-1);box-shadow:var(--shadow-lg);
    transform:translateY(-130%);transition:transform var(--transition-interactive);max-height:calc(100dvh - 4.5rem);overflow:auto}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:.85rem 1rem;font-size:var(--text-base)}
  .nav-links .btn{margin-top:var(--space-2)}
  .nav-toggle{display:inline-flex}
  .nav-cta-desktop{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero .badges{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.badge{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);
  background:var(--color-surface);border:1px solid var(--color-border);padding:.4rem .75rem;border-radius:var(--radius-full)}
.badge svg{color:var(--color-primary)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}

/* ---------- Before/After comparison ---------- */
.ba{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--color-border);box-shadow:var(--shadow-lg);background:var(--color-surface);user-select:none;touch-action:none}
.ba__pane{position:absolute;inset:0}
.ba__pane svg{width:100%;height:100%}
.ba--image{aspect-ratio:1.44/1;background:var(--color-surface-offset)}
.ba--image .ba__pane img{width:100%;height:100%;object-fit:cover;object-position:top center}
.ba__after{clip-path:inset(0 0 0 var(--ba-pos,50%))}
.ba__before{clip-path:inset(0 var(--ba-inv,50%) 0 0)}
.ba__label{position:absolute;top:var(--space-3);font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:var(--radius-full);color:#fff;z-index:3}
.ba__label--before{left:var(--space-3);background:rgba(60,52,42,.85)}
.ba__label--after{right:var(--space-3);background:var(--color-primary)}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--ba-pos,50%);width:3px;background:#fff;transform:translateX(-50%);z-index:4;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2.75rem;height:2.75rem;border-radius:50%;
  background:#fff;display:grid;place-items:center;box-shadow:var(--shadow-md);color:var(--color-primary)}
.ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:var(--space-6)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}
.card--pad-lg{padding:var(--space-8)}
.card h3{font-size:var(--text-lg);margin-bottom:var(--space-2)}
.card p{font-size:var(--text-sm);color:var(--color-text-muted)}
.feature-icon{width:2.75rem;height:2.75rem;border-radius:var(--radius-md);background:var(--color-primary-soft);color:var(--color-primary);
  display:grid;place-items:center;margin-bottom:var(--space-4)}

/* Step list */
.steps{counter-reset:step;display:grid;gap:var(--space-6)}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);align-items:start}
.step__num{counter-increment:step;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--color-primary);color:#fff;
  display:grid;place-items:center;font-weight:700;font-family:var(--font-display);flex-shrink:0}
[data-theme='dark'] .step__num{color:#08201F}
.step__num::before{content:counter(step,decimal-leading-zero)}
.step h3{font-size:var(--text-lg);margin-bottom:var(--space-1)}
.step p{font-size:var(--text-sm);color:var(--color-text-muted)}

/* ---------- Section tints ---------- */
.tint{background:var(--color-surface)}
.tint-primary{background:var(--color-primary);color:var(--color-text-inverse)}
.tint-primary .eyebrow{color:#fff}
.tint-primary .eyebrow::before{background:rgba(255,255,255,.6)}
.tint-primary .muted,.tint-primary .lead{color:rgba(255,255,255,.82)}
[data-theme='dark'] .tint-primary{color:#fff}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);text-align:center}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat__num{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1;color:var(--color-primary);font-weight:500}
.tint-primary .stat__num{color:#fff}
.stat__label{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-2)}
.tint-primary .stat__label{color:rgba(255,255,255,.8)}

/* ---------- Forms ---------- */
.form{display:grid;gap:var(--space-5)}
.field{display:grid;gap:var(--space-2)}
.field label{font-size:var(--text-sm);font-weight:600}
.field .req{color:var(--color-accent)}
.field input,.field textarea,.field select{background:var(--color-surface-2);border:1.5px solid var(--color-border);
  border-radius:var(--radius-md);padding:.75rem .9rem;font-size:var(--text-base);color:var(--color-text);width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--color-error)}
.field .hint{font-size:var(--text-xs);color:var(--color-text-faint)}
.field .error{font-size:var(--text-xs);color:var(--color-error);display:none}
.field.invalid .error{display:block}
.field.invalid input,.field.invalid textarea{border-color:var(--color-error)}
.form-note{font-size:var(--text-xs);color:var(--color-text-faint);display:flex;gap:.5rem;align-items:flex-start}
.form-success{display:none;background:var(--color-primary-soft);border:1px solid var(--color-primary);border-radius:var(--radius-md);
  padding:var(--space-5);color:var(--color-text)}
.form-success.show{display:block}
.form-success h3{font-size:var(--text-lg);margin-bottom:var(--space-1)}

/* ---------- FAQ accordion ---------- */
.faq{display:grid;gap:var(--space-3);max-width:760px;margin-inline:auto}
.faq details{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:0 var(--space-5)}
.faq summary{list-style:none;cursor:pointer;padding:var(--space-5) 0;font-weight:600;font-size:var(--text-base);display:flex;justify-content:space-between;gap:var(--space-4);align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{flex-shrink:0;transition:transform var(--transition-interactive);color:var(--color-primary)}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq details p{padding-bottom:var(--space-5);color:var(--color-text-muted);font-size:var(--text-sm);max-width:none}

/* ---------- Footer ---------- */
.footer{background:var(--color-surface);border-top:1px solid var(--color-divider);padding-block:var(--space-16) var(--space-8)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--space-8)}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer h4{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-faint);margin-bottom:var(--space-4);font-family:var(--font-body);font-weight:700}
.footer ul{list-style:none;display:grid;gap:var(--space-2)}
.footer a{color:var(--color-text-muted);text-decoration:none;font-size:var(--text-sm)}
.footer a:hover{color:var(--color-primary)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-12);
  padding-top:var(--space-6);border-top:1px solid var(--color-divider);font-size:var(--text-xs);color:var(--color-text-faint)}

/* ---------- Mobile sticky CTA ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:var(--space-3);padding:var(--space-3) var(--space-4);
  background:color-mix(in oklab,var(--color-bg) 92%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--color-divider)}
.sticky-cta .btn{flex:1}
@media (max-width:920px){.sticky-cta{display:flex}body{padding-bottom:4.5rem}}

/* ---------- Misc ---------- */
.skip-link{position:absolute;left:var(--space-4);top:-3rem;background:var(--color-primary);color:#fff;padding:.6rem 1rem;border-radius:var(--radius-sm);z-index:100;transition:top var(--transition-interactive)}
.skip-link:focus{top:var(--space-4)}
.page-hero{padding-block:clamp(var(--space-16),8vw,var(--space-24)) clamp(var(--space-8),5vw,var(--space-12))}
.divider{height:1px;background:var(--color-divider);border:0}
.pill-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pill{font-size:var(--text-xs);font-weight:600;padding:.3rem .7rem;border-radius:var(--radius-full);background:var(--color-surface-offset);color:var(--color-text-muted);border:1px solid var(--color-border)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
.center{text-align:center}
.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mt-12{margin-top:var(--space-12)}
.note-box{background:var(--color-accent-soft);border:1px solid var(--color-accent);border-radius:var(--radius-md);padding:var(--space-5);font-size:var(--text-sm)}
.prose h2{font-size:var(--text-xl);margin:var(--space-10) 0 var(--space-3)}
.prose h3{font-size:var(--text-lg);font-family:var(--font-body);font-weight:600;margin:var(--space-6) 0 var(--space-2)}
.prose p,.prose li{color:var(--color-text-muted);margin-bottom:var(--space-3)}
.prose ul{padding-left:var(--space-6);margin-bottom:var(--space-4)}
.prose a{color:var(--color-primary)}
.replace{background:var(--color-accent-soft);color:var(--color-accent-hover);padding:0 .25em;border-radius:3px;font-weight:600}