/* Scaffuld.ai design system
   Layout: drawing-set feel. One centered column on faint grid paper; sections read like sheets in a set; title block as footer.
   Color: accent blue + cool neutrals (2–3 colors total). Spacing: 8-point grid. Type: 48 / 32 / 20 / 16. */
:root{
  /* Color */
  --bg:#F6F8FB;
  --surface:#FFFFFF;
  --fg:#121722;
  --muted:#586377;
  --line:#DCE2EB;
  --grid:rgba(36,87,214,.07);
  --accent:#2457D6;
  --accent-soft:#E7EEFD;
  --on-accent:#FFFFFF;
  --hatch:rgba(36,87,214,.10);
  --ok:#1C7C4D;
  --err:#C2412D;
  --shadow:0 12px 30px rgba(18,23,34,.10);

  /* Type */
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --fs-h1:clamp(2.25rem,4.8vw,3rem);   /* 48 */
  --fs-h2:clamp(1.625rem,3.2vw,2rem);  /* 32 */
  --fs-h3:1.25rem;                     /* 20 */
  --fs-lede:1.25rem;                   /* 20 */
  --fs-body:1rem;                      /* 16 */
  --fs-small:.8125rem;                 /* 13 */

  /* Spacing (8-point) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s7:56px; --s8:64px; --s12:96px;
  --radius:8px; --radius-lg:12px;
  --wrap:1120px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0D1117; --surface:#151B24; --fg:#E7ECF3; --muted:#9AA5B7; --line:#26303D;
  --grid:rgba(120,155,255,.06); --accent:#7096FF; --accent-soft:#1A2540; --on-accent:#0D1117;
  --hatch:rgba(120,155,255,.12); --ok:#4CC28A; --err:#FF8A73; --shadow:0 12px 30px rgba(0,0,0,.45); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0D1117; --surface:#151B24; --fg:#E7ECF3; --muted:#9AA5B7; --line:#26303D;
  --grid:rgba(120,155,255,.06); --accent:#7096FF; --accent-soft:#1A2540; --on-accent:#0D1117;
  --hatch:rgba(120,155,255,.12); --ok:#4CC28A; --err:#FF8A73; --shadow:0 12px 30px rgba(0,0,0,.45); color-scheme:dark}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.6;
  font-feature-settings:"ss01"; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--accent)}
h1,h2,h3{line-height:1.15; margin:0; text-wrap:balance; letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:var(--wrap); margin:0 auto;
  padding-left:max(var(--s2),env(safe-area-inset-left,0px)); padding-right:max(var(--s2),env(safe-area-inset-right,0px))}
.label{font-family:var(--font-mono); font-size:var(--fs-small); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

/* Component: buttons */
.btn{display:inline-flex; align-items:center; gap:var(--s1); font:600 var(--fs-body)/1 var(--font-body);
  padding:14px 20px; border-radius:var(--radius); text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), filter .18s var(--ease)}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.btn:active{transform:translateY(0); box-shadow:none}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{color:var(--fg); border-color:var(--line); background:var(--surface)}
.btn-ghost:hover{border-color:var(--accent)}

/* Component: header */
.top{padding-block:var(--s3)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--s2)}
.brand{display:flex; align-items:center; gap:var(--s1); color:var(--fg); text-decoration:none; font-weight:700; font-size:var(--fs-h3); letter-spacing:-.01em}
.brand svg{width:24px; height:24px}
.brand .tld{color:var(--muted); font-weight:500}
.nav{display:flex; align-items:center; gap:var(--s3)}
.nav a.link{color:var(--muted); text-decoration:none; font-weight:500; transition:color .18s var(--ease)}
.nav a.link:hover{color:var(--fg)}
.nav .btn{padding:10px 16px; font-size:.9375rem}
@media (max-width:720px){.nav a.link{display:none}}

/* Component: hero on grid paper */
.hero{
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px; border-bottom:1px solid var(--line); padding-block:var(--s7) var(--s12)}
.hero .wrap{display:grid; grid-template-columns:1fr; gap:var(--s7)}
.hero .wrap > div:first-child{max-width:48rem}
.hero h1{font-size:var(--fs-h1); font-weight:700; margin-top:var(--s2)}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero .lede{font-size:var(--fs-lede); color:var(--muted); max-width:34em; margin-top:var(--s3)}
.hero .ctas{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4)}
.hero .note{margin-top:var(--s2); font-size:var(--fs-small); color:var(--muted)}
@media (max-width:900px){.hero .wrap{gap:var(--s5)}}

/* Component: screenshot placeholder (hatched frame with drawing-style callout) */
.ph{position:relative; border:1.5px dashed var(--accent); border-radius:10px; min-width:0;
  background:repeating-linear-gradient(135deg,var(--hatch) 0 1px,transparent 1px 12px),var(--surface);
  display:flex; flex-direction:column; justify-content:flex-end; padding:var(--s2); aspect-ratio:16/9; max-width:100%}
.ph .tag{font-family:var(--font-mono); font-size:.75rem; color:var(--accent); background:var(--surface);
  border:1px solid var(--line); border-radius:6px; padding:var(--s1) 12px; line-height:1.45; max-width:100%}
.ph .tag b{display:block; color:var(--fg); font-weight:500}

/* Component: product screenshot */
.shot{margin:0; min-width:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow)}
.shot img{display:block; width:100%; height:auto}
.shot-hero{border-radius:16px}

/* Component: section frame */
section{padding-block:var(--s12)}
.sec-head{display:grid; gap:var(--s2); max-width:44rem; margin-bottom:var(--s6)}
.sec-head h2{font-size:var(--fs-h2); font-weight:700}
.sec-head p{color:var(--muted); font-size:var(--fs-lede)}
.rule{border:0; border-top:1px solid var(--line); margin:0}
.sub-label{margin:var(--s6) 0 var(--s2)}
.after{margin-top:var(--s5); max-width:44rem; color:var(--muted); font-size:var(--fs-lede)}

/* Component: cards (same size in a row, lift on hover) */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--s4);
  display:grid; gap:12px; align-content:start; min-width:0;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease)}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
.card h3{font-size:var(--fs-h3); font-weight:650}
.card p{color:var(--muted)}
.card .q{font-family:var(--font-mono); font-size:var(--fs-small); color:var(--accent)}
.quad{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3)}
@media (max-width:860px){.trio,.quad{grid-template-columns:1fr}}

/* Component: pull quote */
.pull{margin-top:var(--s6); display:grid; grid-template-columns:auto 1fr; gap:var(--s4); align-items:start; max-width:52rem}
.pull .bar{width:3px; align-self:stretch; background:var(--accent); border-radius:2px}
.pull p{font-size:var(--fs-lede); line-height:1.65}
.parties{display:flex; flex-wrap:wrap; gap:var(--s1); margin-top:var(--s3)}
.parties span{font-size:.875rem; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:4px 12px; color:var(--muted)}

/* Component: stage rows */
.stages{display:grid; gap:var(--s7)}
.stage{display:grid; grid-template-columns:1fr 1.25fr; gap:var(--s6); align-items:center}
.stage:nth-child(even){grid-template-columns:1.25fr 1fr}
.stage:nth-child(even) .stage-text{order:2}
.stage-text{display:grid; gap:12px; min-width:0}
.stage-text .label{color:var(--accent)}
.stage-text h3{font-size:var(--fs-h3); font-weight:650}
.stage-text p{color:var(--muted)}
.stage-text .code{margin-top:4px; padding:12px var(--s2); background:var(--accent-soft); border-radius:var(--radius); color:var(--fg); font-size:.9375rem}
.stage-text .code b{display:block; font-family:var(--font-mono); font-size:var(--fs-small); font-weight:500; color:var(--accent); margin-bottom:2px}
.stage-text ul{margin:4px 0 0; padding-left:1.1rem; color:var(--muted); display:grid; gap:4px}
@media (max-width:860px){.stage,.stage:nth-child(even){grid-template-columns:1fr; gap:var(--s3)}.stage:nth-child(even) .stage-text{order:0}}

/* Component: founder */
.founder{display:grid; grid-template-columns:280px 1fr; gap:var(--s7); align-items:center}
.headshot{width:100%; height:auto; max-width:280px; aspect-ratio:1/1; border-radius:50%; object-fit:cover; display:block;
  box-shadow:0 0 0 1px var(--line), 0 0 0 8px var(--bg), 0 0 0 9px var(--accent)}
.founder .bio{display:grid; gap:var(--s2); max-width:40rem; min-width:0}
.founder .bio h2{font-size:var(--fs-h2)}
.founder .bio .role{color:var(--muted); font-weight:500; margin-top:-8px}
.founder .bio p{font-size:1.0625rem; line-height:1.7}
@media (max-width:820px){.founder{grid-template-columns:1fr; gap:var(--s4)}.headshot{max-width:192px}}

/* Component: demo form */
.demo{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.demo .wrap{display:grid; grid-template-columns:1fr 1.1fr; gap:var(--s7); align-items:start}
@media (max-width:860px){.demo .wrap{grid-template-columns:1fr; gap:var(--s4)}}
.demo-copy{display:grid; gap:var(--s2); min-width:0}
.demo-copy h2{font-size:var(--fs-h2)}
.demo-copy p{color:var(--muted); font-size:var(--fs-lede)}
.demo-copy ol{margin:var(--s1) 0 0; padding-left:1.2rem; color:var(--muted); display:grid; gap:6px}
form{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--s4); min-width:0}
.field{display:grid; gap:6px; min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:.875rem; font-weight:600}
.field label .opt{color:var(--muted); font-weight:400}
input,select,textarea{font:inherit; color:var(--fg); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px; width:100%;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease)}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
textarea{min-height:96px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.form-foot{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center}
.form-foot small{color:var(--muted)}
.err{grid-column:1/-1; color:var(--err); font-size:.875rem}
.thanks{grid-column:1/-1; display:grid; gap:var(--s1); padding:var(--s1) 0}
.thanks h3{font-size:var(--fs-h3); color:var(--ok)}
.thanks p{color:var(--muted)}
.hp{position:absolute; left:-9999px}
@media (max-width:520px){form{grid-template-columns:1fr; padding:var(--s3)}}

/* Component: footer as a drawing title block */
footer{padding-block:var(--s5) var(--s7)}
.titleblock{display:grid; grid-template-columns:1.4fr 1.8fr 1fr .8fr; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
.titleblock > div{padding:12px var(--s2); border-left:1px solid var(--line); display:grid; gap:2px; min-width:0}
.titleblock > div:first-child{border-left:0}
.titleblock .v{font-weight:600; font-size:.9375rem; overflow-wrap:anywhere}
.titleblock .v a{color:var(--fg); text-decoration:none; user-select:all}
.titleblock .v a:hover{color:var(--accent)}
@media (max-width:720px){
  .titleblock{grid-template-columns:1fr 1fr}
  .titleblock > div:nth-child(2){grid-column:1/-1; order:-1; border-left:0; border-bottom:1px solid var(--line)}
  .titleblock > div:nth-child(1){border-left:0}
  .titleblock > div:nth-child(3){border-left:0; border-top:1px solid var(--line)}
  .titleblock > div:nth-child(4){border-top:1px solid var(--line)}
}

/* Scroll-in: content is visible at rest; JS adds .reveal only when motion is allowed */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.in{opacity:1; transform:none}

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