/* ===== Brand tokens ===== */
:root{
    --ink-bg: #FFF6DA;         /* soft paper */
    --ink-amber: #FFD76B;      /* glow */
    --ink-orange: #FF8A00;     /* primary */
    --ink-deep: #E36200;       /* darker accent */
    --ink-ink: #2A1C00;        /* body text */
    --ink-muted: #6B5B3B;      /* secondary text */
    --ink-card: #FFFFFF;
    --radius: 16px;
    --shadow: 0 10px 30px rgba(230,98,0,.15);
  }
  
  /* ===== Base ===== */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    color:var(--ink-ink);
    font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
    background: radial-gradient(1200px 600px at 70% -10%, #FFF3C2 0%, rgba(255,243,194,0) 60%) ,
                radial-gradient(900px 500px at 0% 0%, #FFEAA2 0%, rgba(255,234,162,0) 60%), var(--ink-bg);
  }
  .bg { background: inherit; }
  .wrap{max-width:1040px;margin-inline:auto;padding:24px}
  
  /* ===== Header ===== */
  .site-header{display:flex;align-items:center;justify-content:space-between;padding-block:20px}
  .brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}
  .brand__icon{border-radius:22%}
  .brand__text{font-weight:700;font-size:1.1rem;letter-spacing:.2px}
  .site-nav a{color:var(--ink-muted);text-decoration:none;margin-inline:12px}
  .site-nav a:hover{color:var(--ink-ink)}
  
  /* ===== Hero ===== */
  .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-block:40px}
  .hero h1{font-size:clamp(2rem, 4vw, 3rem);line-height:1.1;margin:0 0 12px}
  .lead{font-size:1.125rem;color:var(--ink-muted);max-width:60ch}
  .hero__meta{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
  .pill{background:#fff; border:1px solid #F6D494; padding:6px 10px; border-radius:999px; font-size:.85rem; color:#7A4A00}
  .hero__art{position:relative;display:grid;place-items:center}
  .icon-xl{width:220px;height:220px;border-radius:26%}
  .glow{position:absolute;inset:auto; width:380px;height:380px;border-radius:999px;filter:blur(48px);
    background: radial-gradient(circle at 50% 55%, rgba(255,183,55,.55), rgba(255,138,0,.18) 50%, rgba(255,138,0,0) 65%);}
  
  /* ===== CTA card (holds Kit embed) ===== */
  .cta-card{background:var(--ink-card);padding:20px;border-radius:var(--radius);box-shadow:var(--shadow);margin-top:22px}
  .cta-title{margin:0 0 6px}
  .cta-sub{margin:0 0 14px;color:var(--ink-muted)}
  .fake-form{display:flex;gap:10px}
  .fake-form input{
    flex:1; padding:12px 14px; border:1px solid #F2D7A5; border-radius:12px; font-size:1rem; outline:none;
  }
  .fake-form input:focus{border-color:#F0BD65; box-shadow:0 0 0 3px rgba(255,208,115,.35)}
  .fake-form button,.btn{
    cursor:pointer; border:0; border-radius:12px; padding:12px 16px; font-weight:600;
    background:linear-gradient(180deg, var(--ink-orange) 0%, var(--ink-deep) 100%); color:#fff;
    box-shadow:0 6px 16px rgba(230,98,0,.3);
  }
  .btn:hover,.fake-form button:hover{filter:brightness(1.03)}
  .btn.ghost{
    background:#fff; color:var(--ink-deep); border:1px solid #F2D7A5; box-shadow:none;
  }
  
  /* ===== Feature grid ===== */
  .grid.features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-block:40px}
  .grid.features article{background:#fff;border:1px solid #F6D494;border-radius:var(--radius);padding:18px}
  .grid.features h3{margin:0 0 6px}
  
  /* ===== Gallery ===== */
  .gallery{margin-block:14px 34px}
  .gallery h2{margin:12px 0 16px}
  .screens{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:22px}
  .screen{margin:0;background:#fff;border:1px solid #F6D494;border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);min-width:0}
  .screen a{display:block}
  .screen img{width:100%;height:auto;display:block;border-radius:12px}
  .screen figcaption{margin-top:10px;color:var(--ink-muted);font-size:.98rem}
  
  /* ===== Split section ===== */
  .split{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start;margin-block:30px}
  .card.soft{background:#fff;border:1px solid #F6D494;border-radius:var(--radius);padding:18px}
  .checklist{margin:0;padding-left:1.2rem}
  .checklist li{margin:6px 0}
  
  /* ===== FAQ ===== */
  .faq details{background:#fff;border:1px solid #F6D494;border-radius:12px;padding:12px 14px;margin:10px 0}
  .faq summary{cursor:pointer;font-weight:600}
  
  /* ===== Footer ===== */
  .site-footer{padding-block:60px 40px;text-align:center;color:var(--ink-muted)}
  .site-footer nav{display:flex;gap:10px;justify-content:center;margin-bottom:8px}
  .fineprint{font-size:.9rem;color:var(--ink-muted)}
  
  /* ===== Confirm page ===== */
  .confirm{display:grid;place-items:center;text-align:center;min-height:70dvh;gap:12px}
  .icon-lg{width:120px;height:120px;border-radius:24%}
  .cta-row{display:flex;gap:12px;justify-content:center;margin-top:8px}
  
  /* ===== Utilities ===== */
  .visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
  @media (max-width: 900px){
    .hero{grid-template-columns:1fr;gap:28px}
    .grid.features{grid-template-columns:1fr;gap:16px}
    .split{grid-template-columns:1fr}
  }
  @media (max-width: 700px){
    .screens{grid-template-columns:1fr}
  }
  @media (min-width: 900px){
    .screens{grid-template-columns:repeat(2, minmax(0, 1fr))}
  }