/* Cadence — Four Eighth Notes ------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Hanken+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#2a2721;
  --body:#4c463a;
  --soft:#645d4e;
 /* --muted:#948d7c; */
  --muted: #635d50;
  --footer_muted: #99a297;
  --line:rgba(42,39,33,0.1);
  --line-soft:rgba(42,39,33,0.08);
  --card:#fdfcf8;
  /*--footer-bg:#f2ede0;*/
 /* --footer-bg:#1c2620; */
  --footer-bg:#1c262F;
  --violet:oklch(0.55 0.14 290);
  --violet-deep:oklch(0.5 0.14 290);
  --blue:oklch(0.55 0.14 250);
  --green-a:oklch(0.6 0.12 145);
  --green-b:oklch(0.64 0.12 175);
  --grad-accent:linear-gradient(90deg,var(--violet),var(--blue));
  --grad-green:linear-gradient(90deg,var(--green-a),var(--green-b));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
 /* background:linear-gradient(160deg,#f8f5ec 0%,#f6f2e6 45%,#f3eee0 100%); */
 /* background:linear-gradient(160deg,#edefe5 0%,#e8ebde 45%,#e2e6d6 100%); */
 /* background:linear-gradient(160deg,#edebe6 0%,#eaede1 45%,#e4e8d9 100%); */
  background:linear-gradient(160deg,#edebe6 0%,#e0e3e7 45%,#e3e9e8 100%); 
  background-attachment:fixed;
  overflow-x:clip;
}
a{color:var(--ink);transition:color .2s}
a:hover{color:var(--violet-deep)}
img{max-width:100%}
strong,b{font-weight:600;color:var(--violet-deep)}
.mono{font-family:'JetBrains Mono',monospace}
.serif{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}

/* page shell + ambient glows */
.page{position:relative;overflow:clip;min-height:100vh;display:flex;flex-direction:column}
.glow-field{position:absolute;top:0;bottom:0;left:50%;width:100%;max-width:1240px;transform:translateX(-50%);z-index:0;pointer-events:none}
.glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.glow-violet{background:radial-gradient(circle,oklch(0.88 0.05 290 / 0.45) 0%,rgba(248,245,236,0) 65%)}
.glow-blue{background:radial-gradient(circle,oklch(0.89 0.04 250 / 0.4) 0%,rgba(248,245,236,0) 65%)}
.glow-green{background:radial-gradient(circle,oklch(0.9 0.04 165 / 0.38) 0%,rgba(248,245,236,0) 65%)}
.glow-yellow{background:radial-gradient(circle,oklch(0.95 0.08 95 / 0.4) 0%, rgba(248,245,236,0) 65%)}
main{position:relative;z-index:1;flex:1;width:100%;max-width:1240px;margin:0 auto}

/* header ----------------------------------------------------------------- */
.site-header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:26px 48px;width:100%;max-width:1240px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand:hover{color:var(--ink)}
.brand img{width:45px;height:45px;border-radius:7px;display:block}
.brand span{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:0.16em;line-height:1.3}
.header-line{flex:1;height:1px;background:rgba(42,39,33,0.22);margin:0 40px}
.site-nav{display:flex;gap:36px;font-size:14px;font-weight:500}
.site-nav a{text-decoration:none;color:var(--muted);border-bottom:2px solid transparent;padding-bottom:4px;transition:color .2s,border-color .2s}
.site-nav a:hover{color:var(--ink);border-color:var(--blue)}
.site-nav a.active{color:var(--ink);border-color:var(--violet)}

/* buttons ----------------------------------------------------------------- */
.btn{display:inline-block;color:#fff;text-decoration:none;font-weight:500;font-size:15px;padding:13px 26px;border-radius:999px;border:none;cursor:pointer;font-family:inherit;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);color:#fff}
.btn-accent{background:var(--grad-accent)}
.btn-accent:hover{box-shadow:0 8px 28px oklch(0.55 0.14 290 / 0.35)}
.btn-green{background:var(--grad-green)}
.btn-green:hover{box-shadow:0 8px 28px oklch(0.62 0.12 150 / 0.4)}

/* hero ----------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:400px 1fr;gap:48px;align-items:center;padding:64px 48px 90px}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.22em;color:var(--violet);margin-bottom:20px}
.hero h1{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:84px;margin:0 0 22px;letter-spacing:-0.01em;line-height:0.95}
.hero .tagline{font-size:20px;line-height:1.5;color:var(--soft);margin:0 0 36px;max-width:320px}
.hero-actions{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.buy-note{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);margin-top:8px;text-align:center}
.hero-shot{perspective:1400px}
.hero-shot .frame{transform:rotateX(4deg) rotateY(-7deg);background:#fff;border:1px solid rgba(42,39,33,0.12);border-radius:16px;overflow:hidden;box-shadow:0 40px 80px rgba(70,60,40,0.22),0 0 60px oklch(0.55 0.14 290 / 0.08);transition:transform .5s}
.hero-shot .frame:hover{transform:rotateX(0deg) rotateY(0deg)}
.hero-shot .crop{position:relative;aspect-ratio:2200/1666;overflow:hidden}
.hero-shot .crop .hero-img{width:100%;height:100%;object-fit:contain;display:block}
.hero-shot .crop .hero-img-dark{position:absolute;top:0;left:0;opacity:0;transition:opacity .35s}
.hero-shot:hover .crop .hero-img-dark{opacity:1}
.hero-shot.auto-dark .crop .hero-img-dark{opacity:1}
.hero-shot.auto-dark:hover .crop .hero-img-dark{opacity:0}

/* pillars ----------------------------------------------------------------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:0 64px 80px;text-align:center}
.pillar .icon{width:76px;height:76px;margin:0 auto 18px;border-radius:50%;background:#fbf9f2;border:1px solid oklch(0.75 0.09 290);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:36px;color:var(--violet-deep);transition:transform .25s,box-shadow .25s}
.pillar:hover .icon{transform:translateY(-4px);box-shadow:0 10px 26px oklch(0.55 0.14 290 / 0.18)}
.pillar h3{font-weight:600;font-size:15px;margin:0 0 8px}
.pillar p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0}

/* feature callouts -------------------------------------------------------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:0 64px 72px}
.feature:last-of-type{padding-bottom:88px}
.feature .label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.22em;color:var(--violet);margin-bottom:14px}
.feature h2{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:34px;margin:0 0 14px}
.feature p{font-size:15px;line-height:1.65;color:var(--soft);margin:0}
.media{aspect-ratio:16/10;border-radius:12px;border:1px solid var(--line);background:repeating-linear-gradient(45deg,#f7f3e8 0 14px,#f0ead9 14px 28px);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .3s,box-shadow .3s}
.media:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(70,60,40,0.15)}
.media span{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)}
.media img{width:100%;height:100%;object-fit:cover;display:block}
/* --- variants for arbitrary aspect ratios (no crop / no zoom) --- */
/* A: box shrink-wraps the image at its natural size, never upscaled */
.media.fit,.figure .media.fit,.figure-pair .media.fit{aspect-ratio:auto;background:none;border:none;overflow:visible}
/* natural size, but cap it with --img-max-w / --img-max-h to stop over-scaling */
.media.fit img{width:auto;height:auto;max-width:min(100%,var(--img-max-w,100%));max-height:var(--img-max-h,none);object-fit:contain}
/* B: keep a fixed frame but letterbox the whole image inside it */
.media.contain img{object-fit:contain}
/* align a capped .fit image to the left (default is centered) */
.media.fit.left{justify-content:flex-start}

/* CTA band ----------------------------------------------------------------- */
.cta-band{margin:0 48px 72px;border-radius:16px;background:linear-gradient(120deg,oklch(0.93 0.04 290 / 0.7),oklch(0.95 0.03 250 / 0.7));border:1px solid oklch(0.75 0.09 290);display:flex;align-items:center;justify-content:space-between;gap:32px;padding:36px 44px}
.cta-band .serif{font-size:28px;margin:0 0 8px}
.cta-band p{font-size:15px;color:var(--soft);margin:0}

/* footer ----------------------------------------------------------------- */
.site-footer{position:relative;z-index:1;border-top:1px solid var(--line-soft);padding:44px 48px 0;background:var(--footer-bg)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:40px;padding-bottom:40px;max-width:1144px;margin:0 auto}
.footer-brand img{width:45px;height:45px;border-radius:6px;display:block}
.footer-brand .brand{margin-bottom:16px}
.footer-brand span{font-size:10.5px;color:#e6e9df}
.footer-brand p{font-size:13px;color:var(--footer_muted);line-height:1.6;margin:0}
.footer-col h4{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.18em;color:var(--footer_muted);margin:0 0 14px;font-weight:400}
.footer-col div{display:flex;flex-direction:column;gap:9px;font-size:14px}
.footer-col a{text-decoration:none; color:#e6e9df}
.footer-col a:hover{color:#f2e6a8}
.social{display:flex;gap:12px}
.social a{width:36px;height:36px;border:1px solid rgba(42,39,33,0.15);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);text-decoration:none;transition:border-color .2s,color .2s}
.social a:hover{border-color:var(--ink);color:var(--ink)}
.footer-base{border-top:1px solid var(--line-soft);padding:20px 0;text-align:center;font-size:12.5px;color:var(--footer_muted);max-width:1144px;margin:0 auto}

/* manual ----------------------------------------------------------------- */
.page-title{padding:56px 48px 48px}
.page-title h1{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:64px;margin:0 0 16px;line-height:0.95}
.page-title p{font-size:18px;line-height:1.55;color:var(--soft);margin:0;max-width:520px}
.manual-layout{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start;padding:0 48px 88px}
.toc{position:sticky;top:24px;background:rgba(255,255,255,0.6);border:1px solid var(--line);border-radius:14px;padding:22px 22px 24px;backdrop-filter:blur(8px)}
.toc h4{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.2em;color:var(--muted);margin:0 0 16px;font-weight:400}
.toc nav{display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.toc a{color:var(--soft);text-decoration:none;padding:7px 10px;border-radius:8px;border-left:2px solid transparent;transition:background .2s,color .2s}
.toc a:hover{background:rgba(42,39,33,0.05);color:var(--ink)}
.toc a.sub{padding:5px 10px 5px 22px;font-size:12.5px;color:var(--muted);border-radius:8px}
.toc a.active{color:var(--ink);font-weight:500;background:oklch(0.93 0.04 290 / 0.7);border-left-color:var(--violet)}
.manual-content{min-width:0;display:flex;flex-direction:column;gap:64px}
.manual-content section{scroll-margin-top:32px}
.manual-content .label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.22em;color:var(--violet);margin-bottom:12px}
.manual-content h2{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:40px;margin:0 0 18px;line-height:1.05}
.manual-content h3{font-weight:600;font-size:20px;margin:32px 0 12px;scroll-margin-top:32px}
/* lightweight subheader — like a bold lead-in but on its own line, hugging the text below */
.manual-content .subhead{font-weight:600;font-size:15.5px;color:var(--violet-deep);margin:22px 0 4px;line-height:1.45}
.manual-content p{font-size:15.5px;line-height:1.75;color:var(--body);margin:0 0 20px;max-width:900px}
.manual-content ul,.manual-content ol{font-size:15.5px;line-height:1.75;color:var(--body);max-width:720px;padding-left:24px;margin:0 0 20px}
.figure{margin:4px 0 8px}
.figure .media{aspect-ratio:16/9}
.figure figcaption{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);margin-top:12px}
.figure-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:4px 0 28px}
.figure-pair .media{aspect-ratio:4/3}
/* image beside a text block; size the image with --img-w / --img-h (default: natural size).
   add class="flip" to put the image on the right. */
.figure-side{display:flex;align-items:flex-start;gap:28px;margin:8px 0 24px}
.figure-side.flip{flex-direction:row-reverse}
.figure-side .side-media{flex:0 0 auto;max-width:100%}
.figure-side .side-media img{display:block;width:var(--img-w,auto);height:var(--img-h,auto);max-width:100%;border:1px solid var(--line);border-radius:10px}
.figure-side .side-body{flex:1 1 0;min-width:0}
.figure-side .side-body>*:first-child{margin-top:0}
.figure-side .side-body>*:last-child{margin-bottom:0}
.figure-side figcaption{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);margin-top:12px}
kbd,.ui-ref{font-family:'JetBrains Mono',monospace;font-size:13.5px;background:rgba(42,39,33,0.06);border:1px solid rgba(42,39,33,0.08);border-radius:5px;padding:1px 6px}
.callout{border-left:3px solid var(--green-a);background:rgba(255,255,255,0.55);border-radius:0 12px 12px 0;padding:16px 20px;max-width:600px;margin:0 0 20px}
.callout .tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.18em;color:oklch(0.5 0.12 150);margin-bottom:6px}
.callout p{font-size:14.5px;line-height:1.65;margin:0;max-width:none}

/* contact ----------------------------------------------------------------- */
.contact-layout{display:grid;grid-template-columns:380px 1fr;gap:64px;align-items:start;padding:64px 48px 96px}
.contact-intro h1{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:56px;margin:0 0 18px;line-height:1}
.contact-intro p{font-size:16px;line-height:1.65;color:var(--soft);margin:0 0 28px}
.contact-email{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted);text-decoration:none}
.contact-email:hover{color:var(--ink)}
.contact-form{background:rgba(255,255,255,0.65);border:1px solid var(--line);border-radius:16px;padding:36px;backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:22px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.contact-form label{display:flex;flex-direction:column;gap:8px;font-size:13.5px;font-weight:500}
.contact-form input,.contact-form textarea{font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:var(--ink);background:var(--card);border:1px solid rgba(42,39,33,0.15);border-radius:10px;padding:12px 14px;outline:none;transition:border-color .2s,box-shadow .2s}
.contact-form textarea{resize:vertical;min-height:180px}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px oklch(0.55 0.14 290 / 0.15)}
.form-status{font-size:13.5px;color:oklch(0.5 0.12 150);margin-left:16px}

/* legal pages (privacy / terms / eula) ------------------------------------ */
.legal{max-width:800px;margin:0 auto;padding:8px 48px 88px}
.legal .updated{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.04em;color:var(--muted);margin:0 0 32px}
.legal .intro{font-size:16px;line-height:1.7;color:var(--soft);margin:0 0 28px}
.legal h2{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:27px;margin:38px 0 12px;line-height:1.1}
.legal h2:first-of-type{margin-top:8px}
.legal h3{font-weight:600;font-size:16.5px;margin:24px 0 8px}
.legal p{font-size:15px;line-height:1.72;color:var(--body);margin:0 0 16px;max-width:none}
.legal ul{font-size:15px;line-height:1.7;color:var(--body);padding-left:22px;margin:0 0 16px}
.legal li{margin-bottom:7px}
.legal a{color:var(--violet-deep)}
.legal strong{color:var(--ink)}
.legal .note{font-size:13.5px;line-height:1.6;color:var(--soft);background:rgba(255,255,255,0.5);border-left:3px solid var(--violet);border-radius:0 10px 10px 0;padding:14px 18px;margin:0 0 24px}

/* scroll reveal ------------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* responsive ----------------------------------------------------------------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;padding:48px 32px 64px}
  .pillars{grid-template-columns:repeat(2,1fr);padding:0 32px 56px}
  .feature{grid-template-columns:1fr;gap:28px;padding:0 32px 56px}
  .feature.flip .media{order:1}
  .cta-band{flex-direction:column;align-items:flex-start;margin:0 32px 56px}
  .manual-layout{grid-template-columns:1fr;padding:0 32px 64px}
  .toc{position:static}
  .figure-side,.figure-side.flip{flex-direction:column;gap:16px}
  .figure-side .side-media img{width:var(--img-w,auto)}
  .contact-layout{grid-template-columns:1fr;padding:48px 32px 64px}
  .footer-grid{grid-template-columns:1fr 1fr;padding-bottom:32px}
  .site-header{padding:20px 24px}
}
@media (max-width:640px){
  .site-nav{gap:20px;font-size:13px}
  .header-line{margin:0 20px}
  .hero{padding:36px 20px 48px}
  .hero h1{font-size:56px}
  .hero .tagline{font-size:18px}
  .hero-shot .crop{aspect-ratio:2200/1666}
  .pillars{grid-template-columns:repeat(2,1fr);gap:28px 16px;padding:0 20px 48px}
  .pillar p{display:none}
  .feature{padding:0 20px 48px}
  .feature h2{font-size:28px}
  .cta-band{margin:0 20px 48px;padding:28px 24px}
  .cta-band .serif{font-size:24px}
  .page-title{padding:36px 20px 32px}
  .page-title h1{font-size:44px}
  .manual-layout{padding:0 20px 48px;gap:32px}
  .manual-content h2{font-size:30px}
  .contact-layout{padding:36px 20px 48px;gap:36px}
  .contact-intro h1{font-size:42px}
  .contact-form{padding:22px}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .site-footer{padding:32px 20px 0}
  .glow{display:none}
}