/* embedpath.com — shadcn-compatible token system, static HTML
   Token names match shadcn/ui so components port cleanly if this moves to Astro.
   Light values on :root; dark overrides the same names. */

:root{
  --background:        #FBFBF9;
  --foreground:        #14171A;
  --card:              #FFFFFF;
  --card-foreground:   #14171A;
  --muted:             #F1F2EE;
  --muted-foreground:  #6B747C;
  --secondary-foreground:#3C434A;
  --primary:           #1A5E4A;
  --primary-foreground:#FBFBF9;
  --accent:            #E4F0EA;
  --accent-foreground: #1A5E4A;
  --border:            #E2E5DF;
  --ring:              #1A5E4A;
  --radius:            3px;
  --shadow:0 1px 2px rgba(20,23,26,.04),0 10px 28px -16px rgba(20,23,26,.18);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --background:        #0F1213;
    --foreground:        #E8ECEC;
    --card:              #171B1D;
    --card-foreground:   #E8ECEC;
    --muted:             #131718;
    --muted-foreground:  #7C8887;
    --secondary-foreground:#B0BAB9;
    --primary:           #4FB795;
    --primary-foreground:#0F1213;
    --accent:            #122C25;
    --accent-foreground: #4FB795;
    --border:            #262D2E;
    --ring:              #4FB795;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --background:#0F1213; --foreground:#E8ECEC;
  --card:#171B1D; --card-foreground:#E8ECEC;
  --muted:#131718; --muted-foreground:#7C8887;
  --secondary-foreground:#B0BAB9;
  --primary:#4FB795; --primary-foreground:#0F1213;
  --accent:#122C25; --accent-foreground:#4FB795;
  --border:#262D2E; --ring:#4FB795;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -16px rgba(0,0,0,.7);
}

/* ── atoms ─────────────────────────────────────────────── */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--background);color:var(--foreground);
  font-family:"Source Serif 4",Georgia,serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:960px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.spine{max-width:66ch}

h1,h2,h3,nav,.btn,th,.label,.metric{font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif}
h1{font-size:clamp(2.1rem,5vw,3.1rem);line-height:1.08;letter-spacing:-.025em;font-weight:600;margin:0;text-wrap:balance}
h2{font-size:clamp(1.35rem,2.6vw,1.75rem);line-height:1.2;letter-spacing:-.015em;font-weight:600;margin:0;text-wrap:balance}
h3{font-size:1.05rem;font-weight:600;margin:0;line-height:1.35}
p{margin:0 0 1.1em}
a{color:var(--primary);text-decoration-thickness:1px;text-underline-offset:2px}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:var(--radius)}

.label{
  font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-foreground);display:block;
}
.metric{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.78rem;line-height:1.5;color:var(--primary);
  margin:12px 0 0;padding-top:11px;border-top:1px solid var(--border);
}
code{font-family:"IBM Plex Mono",monospace;font-size:.88em;background:var(--muted);padding:1px 6px;border-radius:2px}

.btn{
  display:inline-block;background:var(--primary);color:var(--primary-foreground);
  padding:13px 26px;border-radius:var(--radius);text-decoration:none;
  font-weight:600;font-size:.95rem;margin-top:1.6em;
  transition:opacity .15s ease, transform .15s ease;
}
.btn:hover{opacity:.9;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--primary);border:1px solid var(--primary)}

/* ── molecules ─────────────────────────────────────────── */

nav{
  display:flex;gap:22px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--border);
  font-size:.9rem;flex-wrap:wrap;
}
nav .brand{font-weight:600;color:var(--foreground);text-decoration:none;letter-spacing:-.01em}
nav a:not(.brand){color:var(--secondary-foreground);text-decoration:none}
nav a:not(.brand):hover{color:var(--primary)}
nav .sp{margin-left:auto}

.figures{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;margin:48px 0 0;
}
.fig{background:var(--card);padding:18px 20px}
.fig b{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:1.5rem;font-weight:600;
  display:block;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--card-foreground);
}
.fig span{display:block;font-size:.8rem;color:var(--muted-foreground);line-height:1.4;margin-top:5px;
  font-family:"IBM Plex Sans",system-ui,sans-serif}

.card{
  background:var(--card);color:var(--card-foreground);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-2px);border-color:var(--primary)}
.card h3{margin-bottom:7px}
.card p{font-size:.95rem;color:var(--secondary-foreground);margin:0}
.card .label{margin-bottom:10px}

.panel{
  background:var(--card);border:1px solid var(--border);
  border-left:3px solid var(--primary);
  border-radius:var(--radius);padding:20px 24px;margin:28px 0;box-shadow:var(--shadow);
}
.panel p:last-child{margin-bottom:0}

.pricebar{
  display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;justify-content:space-between;
  background:var(--muted);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 24px;margin:28px 0;
}
.pricebar .amount{
  font-family:"IBM Plex Mono",monospace;font-size:1.7rem;font-weight:600;
  color:var(--primary);letter-spacing:-.02em;
}
.pricebar .terms{font-size:.9rem;color:var(--muted-foreground);font-family:"IBM Plex Sans",sans-serif}

ul.ticks{list-style:none;padding:0;margin:0}
ul.ticks li{
  padding:10px 0 10px 28px;border-bottom:1px solid var(--border);
  position:relative;font-size:1rem;color:var(--secondary-foreground);
}
ul.ticks li:last-child{border-bottom:none}
ul.ticks li::before{
  content:"";position:absolute;left:4px;top:19px;
  width:8px;height:8px;border-radius:50%;background:var(--primary);
}

/* ── organisms ─────────────────────────────────────────── */

header.hero{padding:clamp(48px,8vw,86px) 0 0}
.hero .lede{font-size:1.2rem;color:var(--secondary-foreground);max-width:58ch;margin-top:1.15em}

section{padding:clamp(52px,8vw,80px) 0 0}
.shead{border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:28px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;margin-top:26px}

footer{
  margin-top:clamp(56px,9vw,96px);border-top:1px solid var(--border);
  padding:24px 0 64px;color:var(--muted-foreground);font-size:.87rem;
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  display:flex;gap:18px;flex-wrap:wrap;
}
footer a{color:var(--muted-foreground)}
footer .sp{margin-left:auto}

/* ── motion ────────────────────────────────────────────────
   Elements start visible. Motion.dev sets the hidden state only
   if the script loads, so a JS failure never hides content from
   a crawler or a reader. */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card,.btn{transition:none}
  [data-reveal]{opacity:1 !important;transform:none !important}
}

/* ── hero particle field ───────────────────────────────── */
header.hero{position:relative}
#hero-canvas{
  position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  width:118%;height:min(540px,72vh);
  z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 35%,#000 35%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 35%,#000 35%,transparent 78%);
}
header.hero > *:not(#hero-canvas){position:relative;z-index:1}

/* ── breadcrumbs ───────────────────────────────────────── */
.crumbs{
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:.82rem;
  color:var(--muted-foreground);padding:20px 0 0;
}
.crumbs a{color:var(--muted-foreground);text-decoration:none}
.crumbs a:hover{color:var(--primary)}
.crumbs span{margin:0 7px;opacity:.5}

/* ── answer block (AEO) ────────────────────────────────── */
.answer{
  background:var(--accent);border-radius:var(--radius);
  padding:18px 22px;margin:0 0 26px;color:var(--accent-foreground);
  font-size:1.02rem;line-height:1.6;
}
.answer p{margin:0}

/* ── form ──────────────────────────────────────────────── */
form.book{display:grid;gap:12px;max-width:520px;margin-top:22px}
form.book input,form.book textarea{
  font-family:inherit;font-size:1rem;padding:12px 14px;
  background:var(--card);color:var(--foreground);
  border:1px solid var(--border);border-radius:var(--radius);
}
form.book textarea{min-height:84px;resize:vertical}
form.book input:focus-visible,form.book textarea:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
form.book button{
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:600;font-size:.95rem;
  background:var(--primary);color:var(--primary-foreground);
  border:0;border-radius:var(--radius);padding:13px 26px;cursor:pointer;justify-self:start;
}

/* ── process steps ─────────────────────────────────────── */
ol.steps{list-style:none;counter-reset:s;padding:0;margin:22px 0 0}
ol.steps li{
  counter-increment:s;position:relative;padding:14px 0 14px 54px;
  border-bottom:1px solid var(--border);color:var(--secondary-foreground);font-size:.98rem;
}
ol.steps li:last-child{border-bottom:none}
ol.steps li::before{
  content:"Day " counter(s);position:absolute;left:0;top:15px;
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:600;
  color:var(--primary);letter-spacing:.03em;
}
ol.steps li b{color:var(--foreground);font-weight:600}

.updated{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  color:var(--muted-foreground);letter-spacing:.04em;
}


/* ── scroll reveal — CSS only, JS just adds .in ─────────── */
[data-reveal],[data-reveal-group] > *{
  opacity:1;                      /* visible by default — no JS, no hiding */
}
.js [data-reveal],.js [data-reveal-group] > *{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);
}
.js [data-reveal].in,.js [data-reveal-group] > .in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal-group] > *{opacity:1;transform:none;transition:none}
}

/* ── form: honeypot + status ───────────────────────────── */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{
  margin:18px 0 0;padding:12px 16px;border-radius:var(--radius);
  background:var(--accent);color:var(--accent-foreground);
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:.93rem;
}

/* ── mobile overflow fix ───────────────────────────────────
   The hero canvas is intentionally wider than the content column. On
   narrow screens that pushed the document past the viewport, so every
   block laid out too wide and got cropped. Clip horizontal overflow at
   the root, and keep the canvas inside the viewport on phones. */
html,body{overflow-x:hidden}
@supports (overflow-x:clip){ html,body{overflow-x:clip} }
@media (max-width:640px){
  #hero-canvas{width:100%;left:0;transform:none}
  .figures{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:minmax(0,1fr)}
  h1{font-size:clamp(1.8rem,8vw,2.4rem)}
  nav{gap:14px 18px}
  nav .sp{display:none}
}
.card,.fig{min-width:0}
.metric{overflow-wrap:anywhere}

/* ── mobile: nav on one line, particles behind the headline only ── */
@media (max-width:640px){
  /* email stays in the footer and the booking form; drop it from the nav
     so the four links sit on one line instead of wrapping */
  nav{flex-wrap:nowrap;gap:14px;font-size:.86rem;padding:14px 0}
  nav .brand{margin-right:auto}
  nav .sp{display:none}

  /* keep the field up behind the headline and fade it well before
     the paragraph, so body text sits on a clean background */
  #hero-canvas{
    top:-20px;height:400px;opacity:1;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
  }
}

/* ── nav email: full address on desktop, envelope icon on phone ── */
.nav-email{display:inline-flex;align-items:center;gap:8px}
.nav-email-icon{display:none;flex:none}
@media (max-width:640px){
  nav .nav-email{
    width:44px;height:44px;margin:-12px -10px -12px 0;   /* 44px tap target without growing the row */
    justify-content:center;border-radius:var(--radius);color:var(--primary);
  }
  nav .nav-email:active{background:var(--accent)}
  .nav-email-icon{display:block}
  .nav-email-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}