/* spareday funnel pages · shared design system extracted from the locked homepage (site/index.html).
   Tokens, atmosphere, header, type and components match the homepage exactly. Light base only. */
:root{
  --paper:#FAFAF7;
  --ink:#141412;
  --muted:#8A8A84;
  --faint:#B9B9B2;
  --line:#E7E7E1;
  --cream:#FAF8F3;
  --green:#1d6b40;
  --serif:'Instrument Serif', Georgia, serif;
  --sans:'Inter Tight', -apple-system, 'Helvetica Neue', sans-serif;
  --mono:'IBM Plex Mono', 'SF Mono', monospace;
  --gutter:clamp(1.25rem, 4vw, 4rem);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto;}
html.lenis{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--ink);color:var(--paper);}
.wordmark img{display:block;height:22px;width:auto;}
a{color:inherit;text-decoration:none;}
a:focus-visible{outline:1px solid var(--ink);outline-offset:4px;}

/* atmosphere: warm washes above content (multiply keeps images frameless) + paper grain */
.atmo{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  mix-blend-mode:multiply;
  background:
    radial-gradient(58% 46% at 78% 8%, rgba(210,182,142,.11), transparent 72%),
    radial-gradient(50% 42% at 8% 92%, rgba(178,178,166,.09), transparent 70%);
}
.grain{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.frame{position:fixed;inset:0;pointer-events:none;z-index:1;}
.frame::before,.frame::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line);}
.frame::before{left:var(--gutter);}
.frame::after{right:var(--gutter);}
@media(max-width:700px){.frame{display:none;}}

.wrap{position:relative;z-index:2;}
.inner{padding-left:calc(var(--gutter) + clamp(1rem,3vw,3rem));padding-right:calc(var(--gutter) + clamp(1rem,3vw,3rem));max-width:90rem;margin:0 auto;}
@media(max-width:700px){.inner{padding-left:1.25rem;padding-right:1.25rem;}}

.mono{font-family:var(--mono);font-weight:300;font-size:.72rem;letter-spacing:.08em;text-transform:lowercase;color:var(--muted);}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;}

/* header (matches homepage) */
header{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.05rem calc(var(--gutter) + clamp(1rem,3vw,3rem));
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
@media(max-width:700px){header{padding:.85rem 1.25rem;}}
.wordmark{font-weight:500;font-size:1.05rem;letter-spacing:-.01em;}
.head-right{display:flex;gap:.55rem;align-items:center;}
.nav-link{
  display:inline-block;font-size:.88rem;font-weight:400;letter-spacing:.005em;color:var(--ink);
  padding:.52rem 1.05rem;border-radius:999px;border:1px solid transparent;
  transition:border-color .3s ease, background-color .3s ease;
}
.nav-link:hover{border-color:var(--line);background:color-mix(in srgb, var(--ink) 4%, transparent);}
.nav-cta{
  display:inline-block;margin-left:.7rem;
  background:var(--ink);color:var(--paper);
  border-radius:999px;padding:.56rem 1.25rem;
  font-size:.88rem;font-weight:400;letter-spacing:.01em;
  box-shadow:0 10px 22px -14px rgba(20,20,18,.5);
  transition:transform .3s ease, box-shadow .3s ease;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 14px 28px -16px rgba(20,20,18,.55);}
@media(max-width:700px){.nav-link{display:none;}.nav-cta{margin-left:0;}}

/* page head (shorter than the homepage hero, same voice) */
.page-head{min-height:52svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:7rem;padding-bottom:clamp(2rem,5vh,3.5rem);}
.page-head .eyebrow{margin-bottom:clamp(1.1rem,2.4vh,1.8rem);display:flex;gap:1.5rem;flex-wrap:wrap;}
.page-head h1{
  font-weight:250;
  font-size:clamp(2.4rem, 6.4vw, 5.6rem);
  line-height:1.03;
  letter-spacing:-.032em;
  max-width:56rem;
  text-wrap:balance;
}
.page-sub{max-width:30rem;margin-top:clamp(1.2rem,3vh,2rem);font-size:1.02rem;color:var(--muted);font-weight:300;line-height:1.65;}
.page-sub strong{color:var(--ink);font-weight:400;}

/* buttons */
.btn{
  display:inline-block;border:0;cursor:pointer;
  background:var(--ink);color:var(--paper);
  border-radius:999px;padding:.95rem 2rem;
  font-family:var(--sans);font-size:.95rem;font-weight:400;letter-spacing:.01em;
  box-shadow:0 14px 30px -18px rgba(20,20,18,.55);
  transition:transform .35s ease, box-shadow .35s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 20px 38px -20px rgba(20,20,18,.6);}
.btn-note{margin-top:.9rem;max-width:26rem;}

/* section scaffolding */
section{position:relative;}
.sec{padding-top:clamp(4rem,9vh,6.5rem);padding-bottom:clamp(4rem,9vh,6.5rem);}
.sec-head{display:flex;align-items:baseline;gap:1.25rem;margin-bottom:clamp(2rem,5vh,3.4rem);}
.sec-head .rule{flex:1;height:1px;background:var(--line);}
.sec-title{
  font-weight:250;font-size:clamp(1.9rem,4.2vw,3.4rem);
  letter-spacing:-.03em;line-height:1.08;max-width:44rem;
  margin-bottom:clamp(1.4rem,3.5vh,2.4rem);text-wrap:balance;
}
.sec-body{color:var(--muted);font-size:1.02rem;line-height:1.7;max-width:36rem;}
.sec-body + .sec-body{margin-top:1.1rem;}
.sec-body strong{color:var(--ink);font-weight:400;}

/* the checks list (audit page): numbered rows, mono tags */
.checks{max-width:56rem;}
.check{
  display:grid;grid-template-columns:3.2rem 1fr;gap:1.2rem;align-items:baseline;
  padding:clamp(1.2rem,2.6vh,1.7rem) 0;border-top:1px solid var(--line);
}
.check:last-child{border-bottom:1px solid var(--line);}
.check .n{font-family:var(--mono);font-weight:300;font-size:.78rem;color:var(--faint);}
.check h3{font-weight:400;font-size:1.14rem;letter-spacing:-.012em;margin-bottom:.35rem;}
.check p{color:var(--muted);font-size:.98rem;max-width:34rem;}

/* the ledger: doing it alone vs with spareday (green handled stamps) */
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);max-width:62rem;}
@media(max-width:800px){.ledger{grid-template-columns:1fr;gap:2.2rem;}}
.ledger h3{font-weight:400;font-size:1.05rem;letter-spacing:-.01em;margin-bottom:1.1rem;}
.ledger ul{list-style:none;}
.ledger li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem 0;border-top:1px solid var(--line);
  font-size:.98rem;color:var(--muted);
}
.ledger .col-with li{color:var(--ink);font-weight:350;}
.stamp{font-family:var(--mono);font-weight:400;font-size:.68rem;letter-spacing:.08em;text-transform:lowercase;color:var(--green);white-space:nowrap;}
.ledger-under{margin-top:clamp(1.6rem,3.5vh,2.4rem);font-size:1.05rem;color:var(--ink);font-weight:350;max-width:34rem;}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4rem);max-width:66rem;}
@media(max-width:800px){.pillars{grid-template-columns:1fr;gap:2.4rem;}}
.pillar .n{display:block;margin-bottom:1.3rem;font-family:var(--mono);font-weight:300;font-size:.72rem;letter-spacing:.08em;color:var(--faint);}
.pillar h3{font-weight:400;font-size:1.15rem;letter-spacing:-.01em;margin-bottom:.7rem;}
.pillar h3 .serif{font-size:1.05em;}
.pillar p{color:var(--muted);font-size:.95rem;max-width:22rem;}

/* steps (thank-you: what happens next) */
.steps{max-width:52rem;}
.step{
  display:grid;grid-template-columns:3.2rem 1fr;gap:1.2rem;align-items:baseline;
  padding:clamp(1.3rem,2.8vh,1.8rem) 0;border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line);}
.step .n{font-family:var(--mono);font-weight:300;font-size:.78rem;color:var(--faint);}
.step h3{font-weight:400;font-size:1.14rem;letter-spacing:-.012em;margin-bottom:.35rem;}
.step p{color:var(--muted);font-size:.98rem;max-width:36rem;}

/* video stage: frameless block on the paper, mono production stamp */
.stage{
  position:relative;max-width:56rem;
  aspect-ratio:16/9;border:1px solid var(--line);border-radius:16px;background:#fff;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;
}
.stage .play{
  width:4.2rem;height:4.2rem;border-radius:999px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--faint);
  font-size:1.2rem;
}
.stage .play::after{content:"▶";transform:translateX(2px);}

/* faq (matches homepage) */
.faq-list{max-width:52rem;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
  padding:clamp(1.1rem,2.4vh,1.5rem) 0;
  font-weight:400;font-size:1.08rem;letter-spacing:-.01em;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-family:var(--mono);font-weight:300;color:var(--faint);
  font-size:1.1rem;transition:transform .3s ease;flex-shrink:0;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{color:var(--muted);font-size:.98rem;line-height:1.65;max-width:42rem;
  padding:0 0 clamp(1.2rem,2.6vh,1.6rem);}

/* form: deliberately ORDINARY (Reece round-1: the arty hairline form read weird and could
   hurt conversion) — plain labels, boxed inputs, familiar contact-form look */
.form{max-width:38rem;}
.form-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(1.4rem,3vw,2.2rem);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem;}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:.4rem;}
.field.full{grid-column:1 / -1;}
.field label{font-family:var(--sans);font-weight:400;font-size:.9rem;color:var(--ink);}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-weight:300;font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);
  padding:.7rem .9rem;border-radius:10px;appearance:none;-webkit-appearance:none;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8A84' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.2rem;}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,20,18,.06);}
/* compact contact layout (/start/): form beside a short what-you-get list */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.aside-list{list-style:none;}
.aside-list li{display:flex;gap:.7rem;align-items:baseline;padding:.55rem 0;color:var(--muted);font-size:.98rem;}
.aside-list li::before{content:"✓";font-family:var(--mono);font-size:.8rem;color:var(--green);flex-shrink:0;}
.aside-note{margin-top:1.4rem;color:var(--muted);font-size:.95rem;max-width:24rem;}
.aside-note strong{color:var(--ink);font-weight:400;}
.field textarea{resize:vertical;min-height:5.5rem;line-height:1.55;}
.field .err{display:none;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:#8a4b3a;}
.field.invalid .err{display:block;}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#c9a396;}
.form .btn{margin-top:1.8rem;}
.form-fine{margin-top:1rem;}

/* final close (matches homepage begin) */
.begin{padding-top:clamp(4.5rem,10vh,7.5rem);padding-bottom:clamp(4.5rem,9vh,7rem);text-align:center;}
.begin .lede{margin-bottom:clamp(1.6rem,3.5vh,2.4rem);}
.begin h2{font-weight:250;font-size:clamp(2.4rem,7vw,6rem);letter-spacing:-.036em;line-height:1;}
.begin .fine{margin-top:1.4rem;max-width:34rem;margin-left:auto;margin-right:auto;}
.begin .btn{margin-top:clamp(2rem,4.5vh,3rem);}
.begin .addr{margin-top:.9rem;}
.begin .addr a{border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .4s;color:var(--ink);}
.begin .addr a:hover{border-color:var(--ink);}

footer{border-top:1px solid var(--line);padding-top:2rem;padding-bottom:2.4rem;}
.foot-row{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;}
}