/* Backyard Ultra Live — shared across every page.
   "Headtorch": the app's own palette, so the site reads as the same product. */
  :root{
    --void:#0b0e0c; --peat:#141a16; --raised:#1c211e; --line:#242b26;
    --beam:#f2e4c4; --dew:#7e8f84;
    --hivis:#d6ff3f; --amber:#ffb335; --klaxon:#ff4d2e;
    --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
    --sans:ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
    --wrap:1140px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{background:var(--void); color:var(--beam); font-family:var(--sans);
    font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
    overflow-x:hidden}

  .wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
  .legend{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; color:var(--dew)}
  .readout{font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums;
    line-height:.95}
  h1,h2,h3{letter-spacing:-.02em; line-height:1.1; font-weight:800}
  h2{font-size:clamp(28px,4.4vw,40px); margin-bottom:14px}
  h3{font-size:clamp(19px,2.4vw,23px); margin-bottom:8px}
  p{max-width:68ch}
  a{color:var(--hivis)}
  strong{color:#fff; font-weight:700}
  .lede{font-size:clamp(18px,2.2vw,21px); color:#cfc4a8}
  .muted{color:var(--dew)}

  .skip{position:absolute; left:-9999px; background:var(--hivis); color:#0b0e0c;
    padding:10px 16px; border-radius:8px; font-weight:700; z-index:99}
  .skip:focus{left:12px; top:12px}
  :focus-visible{outline:2px solid var(--hivis); outline-offset:3px; border-radius:4px}

  /* Header */
  header.site{position:sticky; top:0; z-index:50; background:rgba(11,14,12,.86);
    backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line)}
  header.site .wrap{display:flex; align-items:center; gap:18px; height:60px}
  .brand{display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.02em;
    text-decoration:none; color:var(--beam); font-size:16px; white-space:nowrap}
  .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--hivis);flex:none;
    box-shadow:0 0 0 4px rgba(214,255,63,.16)}
  nav.site{margin-left:auto; display:flex; gap:22px; align-items:center}
  nav.site a{color:var(--dew); text-decoration:none; font-size:14px; font-weight:600}
  nav.site a:hover{color:var(--beam)}
  @media (max-width:860px){nav.site{display:none}}

  .btn{display:inline-block; background:var(--hivis); color:#0b0e0c; font-weight:800;
    padding:13px 22px; border-radius:10px; text-decoration:none; letter-spacing:-.01em;
    border:1px solid var(--hivis)}
  .btn:hover{filter:brightness(1.08)}
  .btn.ghost{background:transparent; color:var(--beam); border-color:var(--line)}
  .btn.ghost:hover{border-color:var(--dew)}
  .btn.sm{padding:9px 16px; font-size:14px}

  /* Sections */
  section{padding:76px 0; border-top:1px solid var(--line)}
  section:first-of-type{border-top:0}
  .kicker{margin-bottom:12px}
  .cols{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
  @media (max-width:900px){.cols{grid-template-columns:1fr; gap:28px}}

  .card{background:var(--peat); border-radius:10px; padding:22px; border:1px solid var(--line)}
  .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px}

  figure{margin:0}
  figcaption{font-family:var(--mono); font-size:12px; color:var(--dew); margin-top:12px;
    line-height:1.5; letter-spacing:.02em}
  svg{display:block; width:100%; height:auto}

  /* Hero */
  .hero{padding:64px 0 76px; position:relative}
  .hero::before{content:""; position:absolute; inset:-60px 0 auto 0; height:560px;
    pointer-events:none; z-index:-1;
    background:radial-gradient(ellipse 70% 100% at 50% 0,rgba(214,255,63,.14),transparent 70%)}
  .hero h1{font-size:clamp(38px,6.6vw,68px); margin:14px 0 18px}
  .hero .lede{margin-bottom:26px}
  .cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
  .cta .note{font-size:13px; color:var(--dew); font-family:var(--mono)}

  /* Device */
  .device{background:#000; border:9px solid #1a1f1c; border-radius:40px; padding:0;
    box-shadow:0 30px 80px rgba(0,0,0,.6); overflow:hidden; max-width:360px;
    margin-inline:auto}
  .device svg{border-radius:31px}

  /* Spec table */
  table{width:100%; border-collapse:collapse; font-size:15px}
  caption{text-align:left; color:var(--dew); font-family:var(--mono); font-size:11px;
    letter-spacing:.14em; text-transform:uppercase; padding-bottom:12px}
  th,td{text-align:left; padding:13px 14px; border-bottom:1px solid var(--line);
    vertical-align:top}
  thead th{color:var(--dew); font-family:var(--mono); font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; font-weight:600}
  tbody th{width:180px; color:#fff; font-weight:700; white-space:nowrap}
  @media (max-width:700px){
    tbody th{width:auto; display:block; border:0; padding-bottom:2px}
    tbody td{display:block; padding-top:0}
    tbody tr{display:block; border-bottom:1px solid var(--line)}
    tbody th,tbody td{border-bottom:0}
  }

  ul.ticks{list-style:none; display:grid; gap:9px; margin:14px 0}
  ul.ticks li{padding-left:26px; position:relative; color:#cfc4a8}
  ul.ticks li::before{content:""; position:absolute; left:4px; top:.62em; width:9px; height:9px;
    border-radius:2px; background:var(--hivis)}
  ul.ticks.swatched li{padding-left:0}
  ul.ticks.swatched li::before{display:none}

  /* FAQ */
  details{border:1px solid var(--line); border-radius:10px; background:var(--peat);
    padding:0; margin-bottom:10px}
  summary{cursor:pointer; padding:16px 18px; font-weight:700; color:#fff; list-style:none;
    display:flex; gap:12px; align-items:flex-start}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+"; margin-left:auto; color:var(--hivis); font-weight:800;
    font-size:20px; line-height:1}
  details[open] summary::after{content:"–"}
  details .body{padding:0 18px 18px; color:#cfc4a8}
  details .body p + p{margin-top:10px}

  footer.site{border-top:1px solid var(--line); padding:44px 0 60px; color:var(--dew);
    font-size:14px}
  footer.site .grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px}
  @media (max-width:760px){footer.site .grid{grid-template-columns:1fr 1fr}}
  footer.site a{color:var(--dew); text-decoration:none; display:block; padding:3px 0}
  footer.site a:hover{color:var(--beam)}
  footer.site h4{color:var(--beam); font-size:13px; font-family:var(--mono);
    letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px; font-weight:600}

  .pill{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--hivis); border:1px solid rgba(214,255,63,.34);
    border-radius:99px; padding:5px 11px}
  .swatch{width:11px;height:11px;border-radius:3px;display:inline-block;vertical-align:-1px;
    margin-right:7px}