/* Made by build/build.py from build/partials/home.css. Edit that file, then rebuild. */
  /* ---- home.css: the home page (built by site_pages.build_home) ----
     Every section has the same shape: a centred head (eyebrow, H2, one short line), then one simple layout. */
  .home-hero{text-align:center;padding:96px 0 120px}
  .home-hero h1{font-size:clamp(50px,13vw,128px);margin:20px 0 24px}
  .home-hero .lede{max-width:460px;margin:0 auto}
  .rotate{display:inline-block;text-align:left;transition:width .3s cubic-bezier(.2,.7,.2,1)}
  .rotate.out{animation:word-out .22s ease-in forwards}
  .rotate.in{animation:word-in .4s cubic-bezier(.2,.7,.2,1) both}
  @keyframes word-out{to{opacity:0;transform:translateY(-.18em);filter:blur(6px)}}
  @keyframes word-in{from{opacity:0;transform:translateY(.18em);filter:blur(6px)}}
  .home-hero h1{position:relative}
  .rotate-probe{position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap;pointer-events:none}
  .hero-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:34px}
  .hero-btns .btn{width:184px}
  @media (max-width:420px){.hero-btns{flex-wrap:nowrap}.hero-btns .btn{width:auto;flex:1 1 0;padding-left:12px;padding-right:12px}}
  @media (max-width:360px){.hero-btns{flex-direction:column}.hero-btns .btn{flex:none;width:100%}}
  @media (max-width:640px){.home-hero{padding:56px 0 72px}}

  .home-sec{padding:96px 0;border-top:1px solid var(--line)}
  .home-sec:first-child{border-top:0;padding-top:72px}
  .sec-head{text-align:center;max-width:760px;margin:0 auto 48px}
  .sec-head h2{font-family:var(--font-display);font-weight:400;font-size:clamp(36px,5.5vw,56px);line-height:1.05;letter-spacing:-0.015em;margin-top:12px}
  .sec-head .about-lead{max-width:520px;margin:16px auto 0;font-size:17px;color:var(--ash)}
  .sec-foot{text-align:center;margin-top:32px}
  @media (max-width:640px){.home-sec{padding:64px 0}.home-sec:first-child{padding-top:48px}.sec-head{margin-bottom:32px}.sec-head .about-lead{font-size:16px}}

  /* how it works: a player's file, then four short facts */
  @media (max-width:900px){.file{grid-template-columns:minmax(0,1fr);max-width:460px;margin:0 auto}}
  .facts{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:64px}
  .facts li{border-top:1px solid var(--line);padding-top:20px}
  .facts .num{margin-bottom:10px}
  .facts h3{font-family:var(--font-head);font-weight:600;font-size:18px;letter-spacing:-0.01em;line-height:1.3;margin-bottom:6px}
  .facts p{font-size:15px;color:var(--ash)}
  @media (max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:560px){.facts{grid-template-columns:minmax(0,1fr);gap:0;margin-top:40px}.facts li{padding:18px 0}}

  /* quest order: three cards a row, each with a line-art mockup (pages/home-art.html), linked to its guides */
  .parts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .parts .card{display:flex;flex-direction:column;height:100%;padding:16px 16px 22px}
  .part-art{height:150px;border:1px solid var(--line);border-radius:4px;margin-bottom:20px;overflow:hidden;
    background:radial-gradient(90% 120% at 50% 0%, rgba(66,33,3,.45) 0%, rgba(66,33,3,0) 70%), var(--void)}
  .part-art svg{display:block;width:100%;height:100%}
  .parts .num,.parts h3,.parts p{padding:0 8px}
  .parts .num{margin-bottom:10px}
  .parts h3{display:block;margin-bottom:6px}
  .parts h3::after{display:inline-block;vertical-align:-2px;margin-left:6px}
  .parts p{font-size:15px;color:var(--ash)}
  a.card:hover .part-art{border-color:#2C2C2F}
  @media (max-width:900px){.parts{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:560px){.parts{grid-template-columns:minmax(0,1fr)}}

  /* tools */
  .tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  @media (max-width:900px){.tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .tools .mega-ico{margin-bottom:18px}
  .tools h3{margin-bottom:8px}
  .tools p{font-size:15px;color:var(--ash)}
  @media (max-width:640px){.tools{grid-template-columns:minmax(0,1fr)}}
  /* tools not built yet: same card, no link, a Soon tag across from the icon */
  .tool-soon .soon-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
  .tool-soon .soon-top .mega-ico{margin-bottom:0;opacity:.6}

  /* guides and FAQ */
  .home-sec .sample-note{text-align:center;margin:-24px 0 20px}
  .faq-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:72px;align-items:start}
  .faq-head{text-align:left;margin:0}
  .faq-head .about-lead{margin:16px 0 0;max-width:360px}
  .faq-head a{color:var(--bone);text-decoration:underline;text-decoration-color:#4A4A50;text-underline-offset:3px}
  .faq-head a:hover{text-decoration-color:var(--bone)}
  @media (max-width:860px){.faq-split{grid-template-columns:minmax(0,1fr);gap:28px}}
  .faq-list details p{font-size:16px;color:#CFD1D5}
  .faq-list details a{color:var(--bone);text-decoration:underline;text-decoration-color:#4A4A50;text-underline-offset:3px}
  .faq-list details a:hover{text-decoration-color:var(--bone)}