/* AI for Beginners design system, from tokens.json. Light is default; dark follows the device. */
@font-face{font-family:"Bitstream Vera Sans";src:url(fonts/Vera.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bitstream Vera Sans";src:url(fonts/VeraBd.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Bitstream Vera Sans";src:url(fonts/VeraIt.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Bitstream Vera Sans Mono";src:url(fonts/VeraMono.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}

:root{
  color-scheme:light dark;
  --surface:#f3ede1;--surface-raised:#fbf8f2;--line:#d8cdb9;--ink:#241c16;--ink-muted:#5e5246;
  --teal:#1d5f5a;--on-teal:#ffffff;--teal-soft:#d6e6e1;
  --orange:#a8441a;--on-orange:#ffffff;--orange-soft:#f6ddca;
  --mustard:#d9a521;--warn:#a3261b;--warn-soft:#f8dcd7;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;
  --radius-none:0;--radius-sm:2px;--radius-round:999px;
  --rule-heavy:4px;--rule:1px;--focus:3px;
  --font-display:"Bitstream Vera Sans",Verdana,"DejaVu Sans",sans-serif;
  --font-sans:"Bitstream Vera Sans",Verdana,"DejaVu Sans",sans-serif;
  --font-mono:"Bitstream Vera Sans Mono","DejaVu Sans Mono",Menlo,monospace;
  --body-size:18px;--body-line:29px;
  --gutter:var(--space-12);
}
@media (prefers-color-scheme:dark){
  :root{
    --surface:#1b1714;--surface-raised:#25201b;--line:#3b332b;--ink:#ffffff;--ink-muted:#d6cbbb;
    --teal:#6cc3b8;--on-teal:#10201e;--teal-soft:#18332f;
    --orange:#f08a4b;--on-orange:#1b1714;--orange-soft:#3b2215;
    --mustard:#d9a521;--warn:#f2725f;--warn-soft:#3a1813;
    --body-size:19.5px;--body-line:31px;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:var(--body-size);line-height:var(--body-line);-webkit-font-smoothing:antialiased}
@media (prefers-color-scheme:dark){body{-webkit-font-smoothing:auto}}
p,h1,h2,h3,ul,ol,figure{margin:0}
a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:var(--focus) solid var(--orange);outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--surface);padding:var(--space-3) var(--space-4);font-weight:700}
.skip:focus{left:var(--space-4);top:var(--space-4);z-index:10}

.page{max-width:1120px;margin:0 auto;padding:var(--space-12) var(--gutter) var(--space-16)}
.block{margin-bottom:var(--space-12)}
.stack{display:grid;gap:var(--space-4)}
.measure{max-width:38em}

/* Type */
.display{font:700 54px/58px var(--font-display);letter-spacing:-.02em}
.h1{font:700 34px/40px var(--font-display);letter-spacing:-.01em}
.h2{font:700 25px/30px var(--font-display)}
.eyebrow{font:700 14px/20px var(--font-display);letter-spacing:.06em;text-transform:uppercase}
.lead{font-size:20px;line-height:32px}
.small{font-size:16px;line-height:24px;color:var(--ink-muted)}
.mono{font-family:var(--font-mono);font-size:17px;line-height:27px}
.you{color:var(--orange)}

/* Section header: the heavy rule */
.section-head{border-top:var(--rule-heavy) solid var(--ink);padding-top:var(--space-2)}
.section-head .h2,.section-head .h1{margin-top:var(--space-1)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:var(--space-3) var(--space-6);border:2px solid transparent;border-radius:var(--radius-sm);font:700 16px/22px var(--font-sans);text-decoration:none;cursor:pointer;background:none;color:var(--ink)}
.btn--primary{background:var(--teal);color:var(--on-teal)}
.btn--action{background:var(--orange);color:var(--on-orange)}
.btn--secondary{border-color:var(--ink);color:var(--ink)}
.btn--primary:hover,.btn--action:hover,.btn--secondary:hover{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-4)}

/* Parts */
.chip{display:inline-block;font:700 14px/20px var(--font-display);letter-spacing:.06em;text-transform:uppercase;padding:var(--space-1) var(--space-2);background:var(--ink);color:var(--surface)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.num{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-round);background:var(--teal);color:var(--on-teal);font:700 17px/1 var(--font-display)}
.card{background:var(--surface-raised);padding:var(--space-6)}
.card__head{display:flex;gap:var(--space-4);align-items:flex-start;margin-bottom:var(--space-4)}
.list{list-style:none;padding:0}
.list li{padding:var(--space-3) 0;border-top:var(--rule) solid var(--line)}
.list li:first-child{border-top:0}
.prompt{background:var(--teal-soft);padding:var(--space-4) var(--space-6)}
.prompt .eyebrow{color:var(--teal);margin-bottom:var(--space-2)}
.warn{background:var(--warn-soft);border-top:var(--rule-heavy) solid var(--warn);padding:var(--space-4) var(--space-6)}
.warn__title{display:flex;gap:var(--space-2);align-items:center;font:700 18px/26px var(--font-sans);color:var(--warn);margin-bottom:var(--space-2)}
.warn__mark{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:var(--radius-round);background:var(--warn);color:var(--surface);font:700 15px/1 var(--font-sans)}
.price{background:var(--orange-soft);padding:var(--space-6);display:grid;gap:var(--space-4);align-content:start}
.price__fig{font:700 54px/1 var(--font-display);letter-spacing:-.02em}
.price-biz{background:var(--surface-raised);padding:var(--space-6);display:grid;gap:var(--space-4);align-content:start}
.rule{display:flex;align-items:center;gap:var(--space-6)}
.rule__dots{display:flex;flex:none}
.rule__dots span{width:56px;height:56px;border-radius:var(--radius-round)}
.rule__dots span:first-child{background:var(--teal)}
.rule__dots span:last-child{background:var(--orange);margin-left:-16px}
.contact{background:var(--surface-raised);padding:var(--space-6);display:grid;gap:var(--space-1);font-style:normal;align-content:start}
.contact a{font-weight:700}

/* Layout grids: two columns on desktop, one on phones */
.hero{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-6);align-items:end;margin-bottom:var(--space-12)}
.hero .display{margin:var(--space-2) 0 var(--space-4)}
.hero svg{display:block;width:100%;height:auto;max-width:420px;justify-self:end}
.hero .t{fill:var(--teal)}.hero .o{fill:var(--orange)}.hero .m{fill:var(--mustard)}.hero .s{fill:var(--surface)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-top:var(--space-6)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);margin-top:var(--space-6)}
.about{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-8);margin-top:var(--space-6)}
.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}

/* Form */
.form{display:grid;gap:var(--space-8);max-width:40em;margin-top:var(--space-6)}
.field{display:grid;gap:var(--space-2)}
.field label,.field legend{font:700 16px/22px var(--font-sans)}
.field .hint{font-size:16px;line-height:24px;color:var(--ink-muted)}
fieldset.field{border:0;margin:0;padding:0}
fieldset.field legend{padding:0;margin-bottom:var(--space-2)}
.input,.textarea{width:100%;min-height:48px;padding:var(--space-3) var(--space-4);border:2px solid var(--ink-muted);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--ink);font:inherit}
.textarea{min-height:160px;resize:vertical}
.choice{display:flex;gap:var(--space-3);align-items:center;min-height:48px;cursor:pointer}
.choice input{width:24px;height:24px;margin:0;accent-color:var(--teal);flex:none}
.choices{display:grid;gap:var(--space-1)}
.choices--grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--space-4)}
.field--error .input,.field--error .textarea{border-color:var(--warn)}
.error{color:var(--warn);font-weight:700}
.errors{background:var(--warn-soft);border-top:var(--rule-heavy) solid var(--warn);padding:var(--space-4) var(--space-6)}
.errors ul{margin:var(--space-2) 0 0;padding-left:1.2em}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Hub */
.hub-list{display:grid;gap:var(--space-6);margin-top:var(--space-6);grid-template-columns:1fr 1fr}
.hub-item{background:var(--surface-raised);padding:var(--space-6);display:grid;gap:var(--space-4);align-content:start}

.footer{margin-top:var(--space-16);padding-top:var(--space-4);border-top:var(--rule) solid var(--line)}

@media (max-width:760px){
  :root{--gutter:var(--space-4)}
  .page{padding-top:var(--space-8)}
  .display{font-size:40px;line-height:46px}
  .h1{font-size:28px;line-height:34px}
  .hero,.two,.cols,.about,.hub-list{grid-template-columns:1fr}
  .hero svg{max-width:220px;justify-self:start;order:-1}
  .choices--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btn{width:100%}
  .rule__dots span{width:40px;height:40px}
}