/* The home page (2026-11-06, docs/home-revamp-plan.md): picture first, one short
   line, white and near-black. Loaded after the page's own styles. */
:root{--bg:#fff;--ink:#0D0D12;--muted:#62666E}
html,body{background:#fff}
.h2 h1,.h2 h2{font-family:var(--display);font-weight:500;letter-spacing:-.035em;color:inherit}
.h2 h2{margin:0;font-size:clamp(38px,5.6vw,76px);line-height:1.04}
.h2-sec{padding:130px 0;text-align:center}
.h2-sec>.wrap>p,.h2-line{max-width:560px;margin:18px auto 0;font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--muted)}
.h2-dark{background:#0D0D12;color:#fff}
.h2-dark .h2-line,.h2-sec.h2-dark>.wrap>p{color:#A6A8B0}
.h2-link{display:inline-flex;align-items:center;gap:8px;margin-top:40px;padding:13px 24px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:600;text-decoration:none;transition:transform .2s}
.h2-link:hover{transform:translateY(-2px)}
.h2-dark .h2-link{background:#fff;color:var(--ink)}

/* 1. Hero: the same top as every other page, then a real store on a laptop and a phone */
.page-hero{position:relative;isolation:isolate;padding:170px 0 0;background:#F4F2EE;text-align:center;overflow:clip}
.page-hero .dots{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(21,21,26,.09) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%)}
.page-hero .glow{position:absolute;z-index:-1;left:50%;top:8%;width:min(1500px,150vw);height:80vh;opacity:.55;transform:translateX(-50%);filter:blur(60px);pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 25%,transparent 80%);mask-image:linear-gradient(to bottom,#000 25%,transparent 80%)}
.page-hero .glow i{position:absolute;border-radius:50%}
.glow .g1{left:8%;top:18%;width:46%;height:62%;background:radial-gradient(closest-side,#4ABDFB,rgba(74,189,251,0))}
.glow .g2{left:30%;top:6%;width:44%;height:70%;background:radial-gradient(closest-side,#9D5BFF,rgba(157,91,255,0))}
.glow .g3{left:52%;top:20%;width:42%;height:60%;background:radial-gradient(closest-side,#E36BD8,rgba(227,107,216,0));opacity:.55}
.glow .g4{left:22%;top:44%;width:56%;height:46%;background:radial-gradient(closest-side,#7C8CFF,rgba(124,140,255,0));opacity:.6}
.pill{display:inline-flex;align-items:center;gap:8px;height:34px;margin-bottom:22px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid rgba(21,21,26,.08);font-size:13px;font-weight:700;color:var(--ink);box-shadow:0 8px 20px -14px rgba(21,21,26,.4)}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px rgba(170,55,252,.14)}
.h2-hero h1{max-width:900px;margin:0 auto;font-size:clamp(44px,6.4vw,84px);line-height:1.04;color:var(--ink)}
.h2-hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.h2-hero .lead{max-width:640px;margin:22px auto 0;font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--muted)}
.h2-devices{position:relative;width:min(1080px,calc(100% - 96px));margin:64px auto -70px}
.h2-laptop img{display:block;width:100%;height:auto;aspect-ratio:1024/640;border:clamp(6px,1vw,12px) solid #0D0D12;border-bottom-width:clamp(10px,1.4vw,18px);border-radius:clamp(12px,1.6vw,20px) clamp(12px,1.6vw,20px) 0 0}
.h2-base{height:clamp(10px,1.4vw,16px);margin:0 -5.5%;border-radius:0 0 18px 18px;background:linear-gradient(#D9D9DE,#B9B9C0)}
.h2-mobile{position:absolute;right:-3%;bottom:-3%;width:23%;padding:.7%;border-radius:clamp(16px,2.8vw,34px);background:#0D0D12;box-shadow:0 26px 50px -24px rgba(13,13,18,.6)}
.h2-mobile img{display:block;width:100%;height:auto;aspect-ratio:520/1090;object-fit:cover;object-position:top;border-radius:clamp(13px,2.4vw,29px)}

/* 2. Watch it build */
.h2-build{padding:190px 0 130px}
.h2-build h2{margin-bottom:56px}
.h2-build .vid{padding:0 16px}
.h2-build .vid-card{border-radius:20px;box-shadow:none}

/* 3. The wall of real stores */
.h2-wall{padding-bottom:110px;overflow:hidden}
.h2-rows{display:grid;gap:16px;margin-top:56px}
.h2-row{overflow:hidden}
.h2-track{display:flex;gap:16px;width:max-content;animation:h2-slide 90s linear infinite}
.h2-row:nth-child(even) .h2-track{animation-direction:reverse;animation-duration:110s}
.h2-rows:hover .h2-track{animation-play-state:paused}
.h2-track img{display:block;flex:none;width:clamp(240px,25vw,360px);height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top;border-radius:14px;background:#F1F1F3}
@keyframes h2-slide{to{transform:translateX(calc(-50% - 8px))}}

/* 4. Edit by clicking */
.h2-edit{background:#F5F5F7}
.h2-player{max-width:1120px;margin:56px auto 0;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px rgba(13,13,18,.07)}

/* 5. Ignitor OMS */
.h2-oms{padding-bottom:90px}
.h2-oms .h2-eye{display:block;margin-bottom:14px;font-size:15px;font-weight:600;color:#A6A8B0}
.h2-oms-main{margin-top:56px}
.h2-deck{display:grid;grid-template-columns:minmax(0,1fr);gap:30vh;width:min(100%,calc((100vh - 200px) * 2));margin:120px auto 0;padding-bottom:30px}
.hs-card{position:sticky;top:104px;transform-origin:center top;will-change:transform;padding:0;border:0;background:#0D0D12}
.h2-deck .oms{height:54em}
.hs-card h3{display:flex;align-items:baseline;gap:14px;margin:0 0 14px;padding:14px 0 0;font-family:var(--display);font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-.02em;text-align:left;color:#fff;background:#0D0D12}
.hs-card h3 small{font-family:var(--body);font-size:15px;font-weight:500;letter-spacing:0;color:#A6A8B0}

/* 6. One order: the story, pinned */
.hs-story{height:420vh;background:#fff}
.hs-story-pin{position:sticky;top:0;height:100vh;padding-top:64px;display:flex;align-items:center;overflow:hidden}
.hs-story-in{display:grid;grid-template-columns:1fr 340px;gap:70px;align-items:center;text-align:left}
.h2-steps{list-style:none;margin:30px 0 0;padding:0}
.h2-steps li{padding:9px 0;font-family:var(--display);font-size:clamp(24px,3vw,40px);font-weight:500;letter-spacing:-.025em;color:#C9CAD1;transition:color .3s}
.h2-steps li.on{color:var(--ink)}
.h2-now{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:14px;font-weight:600}
.h2-now span{color:#6D28D9}
.hs-line{height:4px;margin-bottom:18px;border-radius:99px;background:#F1F1F3;overflow:hidden}
.hs-line i{display:block;width:20%;height:100%;border-radius:99px;background:var(--ink);transition:width .35s}
.h2-stack{position:relative;height:44em;font-size:min(13px,1.5vh)}
.h2-stack .h2-ph{font-size:inherit}
.h2-pane{position:absolute;inset:0;display:grid;justify-items:center;opacity:0;transform:translateY(14px);transition:opacity .35s,transform .35s}
.h2-pane.now{opacity:1;transform:none}
.h2-pane .cap{display:none}
.h2-ph{width:22.5em;padding:.7em;border-radius:3em;background:#0D0D12;font-size:13px;line-height:1.35;box-shadow:0 30px 60px -30px rgba(13,13,18,.5)}
.h2-ph>div{display:flex;flex-direction:column;gap:.8em;height:42em;padding:1.8em 1.4em;border-radius:2.4em;background:#fff;overflow:hidden;color:var(--ink);text-align:left}
.h2-ph.wa>div{background:#ECE5DD}
.h2-ph b{font-weight:600}
.h2-ph small{color:#62666E}
.h2-bub{align-self:flex-start;max-width:86%;padding:.7em .95em;border-radius:1em;background:#fff;font-size:1.08em;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.h2-bub.me{align-self:flex-end;background:#DCF8C6}
.h2-bub i{display:block;margin-top:.5em;padding:.45em;border-radius:.6em;background:#F4F4F5;color:#047857;font-style:normal;font-weight:700;text-align:center}
.h2-tile{padding:1.2em;border:1px solid #ECECF0;border-radius:1.2em;background:#fff}
.h2-tile h4{margin:.2em 0;font-family:var(--display);font-size:1.9em;font-weight:600;letter-spacing:-.02em}
.h2-big{margin:auto 0;text-align:center}
.h2-big .ok{display:grid;place-items:center;width:4.6em;height:4.6em;margin:0 auto 1em;border-radius:50%;background:#E6F8F0;color:#047857}
.h2-big .ok svg{width:2.2em;height:2.2em}
.h2-big h4{margin:0;font-family:var(--display);font-size:2.6em;font-weight:600;letter-spacing:-.03em}
.h2-bars{display:grid;gap:.5em}
.h2-bars i{display:block;height:.7em;border-radius:99px;background:#F1F1F3}
.h2-stripes{height:4.4em;border-radius:.5em;background:repeating-linear-gradient(90deg,#0D0D12 0 2px,#fff 2px 5px,#0D0D12 5px 9px,#fff 9px 11px)}

/* 7. Plans */
.h2-plans{padding-bottom:90px}
.h2-pl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1040px;margin:56px auto 0;text-align:left}
.h2-pl article{padding:32px;border:1px solid #E7E7EB;border-radius:22px}
.h2-pl article.pop{background:#0D0D12;border-color:#0D0D12;color:#fff}
.h2-pl h3{margin:0;font-family:var(--display);font-size:20px;font-weight:600}
.h2-pl .price{margin:14px 0 2px;font-family:var(--display);font-size:clamp(44px,5vw,60px);font-weight:500;letter-spacing:-.04em;line-height:1}
.h2-pl .price span{font-size:17px;letter-spacing:0;color:var(--muted)}
.h2-pl .pop .price span,.h2-pl .pop small,.h2-pl .pop dt{color:#A6A8B0}
.h2-pl small{color:var(--muted);font-size:13.5px}
.h2-pl dl{margin:24px 0 0;border-top:1px solid rgba(127,127,140,.22)}
.h2-pl dl div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(127,127,140,.22);font-size:15px}
.h2-pl dt{color:var(--muted)}
.h2-pl dd{margin:0;font-weight:600}
.h2-faq{max-width:760px;margin:90px auto 0;text-align:left}
.h2-faq details{border-bottom:1px solid #E7E7EB}
.h2-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:18px;font-weight:600;cursor:pointer;list-style:none}
.h2-faq summary::-webkit-details-marker{display:none}
.h2-faq summary svg{width:18px;height:18px;flex:none}
.h2-faq p{margin:0 0 20px;color:var(--muted);line-height:1.6}

/* 8. Start */
.h2-start{padding:150px 0}
.h2-start .capsule{margin-top:40px}
.h2-start .capsule .box-content{color:var(--ink)}

@media (max-width:860px){
  .h2-sec{padding:84px 0}
  .page-hero{padding-top:130px}
  .h2-devices{width:calc(100% - 44px);margin:44px auto -40px}
  .h2-mobile{right:-2%;width:27%}
  .h2-build{padding:110px 0 84px}
  .h2-build h2,.h2-rows,.h2-player,.h2-oms-main,.h2-pl{margin-top:36px}
  .h2-build h2{margin:0 0 36px}
  .h2-deck{width:100%;gap:36px;margin-top:56px}
  .hs-card{position:static}
  .h2-pl{grid-template-columns:1fr}
  .h2-faq{margin-top:56px}
}
/* The story on a phone, or with reduced motion: pictures to swipe through */
@media (max-width:860px),(prefers-reduced-motion:reduce){
  .hs-story{height:auto;padding:84px 0;overflow-x:clip}
  .hs-story-pin{position:static;height:auto;padding-top:0;display:block;overflow:visible}
  .hs-story-in{display:block;text-align:center}
  .h2-steps,.h2-now,.hs-line{display:none}
  .h2-stack{display:flex;gap:16px;height:auto;font-size:13px;margin:36px -22px 0;padding:0 22px 12px;overflow-x:auto;scroll-snap-type:x mandatory}
  .h2-pane{position:static;flex:none;opacity:1;transform:none;scroll-snap-align:center;gap:14px}
  .h2-pane .cap{display:block;font-family:var(--display);font-size:20px;font-weight:500}
}
@media (prefers-reduced-motion:reduce){
  .h2-track{animation:none}
  .h2-row{overflow-x:auto}
  .hs-card{position:static}
  .h2-deck{gap:36px}
}