/* Wourdoboros — one-page explainer */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);overflow-x:hidden}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--gutter-mobile)}
a{color:var(--brick-violet-dark)}
a:hover{color:var(--brick-violet)}

/* dotted paper accent */
.dots{background-image:radial-gradient(var(--paper-3) 1.3px,transparent 1.5px);background-size:26px 26px}

/* ---- header ---- */
.hdr{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);background:color-mix(in oklab,var(--paper) 82%,transparent);border-bottom:1px solid color-mix(in oklab,var(--ink) 8%,transparent)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:var(--s-4)}
.brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;color:var(--ink)}
.brand img{width:36px;height:36px;display:block;filter:drop-shadow(0 2px 3px rgba(31,26,20,.16))}
.brand b{font-family:var(--font-display);font-weight:400;font-size:24px;letter-spacing:.01em}
.hdr-nav{display:flex;align-items:center;gap:var(--s-5)}
.hdr-nav .madeby{font-weight:600;font-size:var(--fs-sm);color:var(--ink-3);text-decoration:none}
.hdr-nav .madeby:hover{color:var(--ink)}

/* ---- hero ---- */
.hero{position:relative;padding:var(--s-10) 0 var(--s-9)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-9);align-items:center}
.eyebrow-row{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-5)}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(40px,5.4vw,72px);line-height:1.02;letter-spacing:-.01em;margin:0}
.hero .lede{font-size:var(--fs-lg);line-height:1.5;color:var(--ink-2);margin:var(--s-5) 0 0;max-width:34ch;text-wrap:pretty}

/* store CTA cluster (PRIMARY) */
.cta-stores{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-8)}
.store-btn{display:flex;align-items:center;gap:14px;min-height:66px;padding:0 24px 0 20px;border:0;border-radius:var(--r-card);text-decoration:none;cursor:pointer;user-select:none;transform-origin:50% 100%;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),filter var(--dur-fast)}
.store-btn .glyph{width:30px;height:30px;flex:0 0 auto}
.store-btn .st{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.store-btn .st .k{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;opacity:.8}
.store-btn .st .v{font-family:var(--font-display);font-weight:400;font-size:20px;letter-spacing:.01em}
.store-btn.ios{--f:var(--brick-yellow);--s:var(--brick-yellow-dark);--t:var(--brick-yellow-light);color:var(--ink)}
.store-btn.and{--f:var(--brick-sky);--s:var(--brick-sky-dark);--t:var(--brick-sky-light);color:var(--ink)}
.store-btn{background:linear-gradient(180deg,color-mix(in oklab,var(--t) 92%,white) 0%,var(--f) 24%,var(--f) 80%);box-shadow:inset 0 4px 0 rgba(255,255,255,.32),inset 0 -8px 0 0 var(--s),0 6px 0 var(--s),0 8px 16px rgba(31,26,20,.16)}
.store-btn:hover{filter:brightness(1.04)}
.store-btn:active{transform:translateY(4px);box-shadow:inset 0 3px 0 rgba(255,255,255,.2),inset 0 -6px 0 0 var(--s),0 2px 0 var(--s),0 3px 8px rgba(31,26,20,.14)}
.store-btn.soon{cursor:default;pointer-events:none;filter:none;--f:var(--paper-2);--s:var(--paper-3);--t:#fff;color:var(--ink-4);box-shadow:inset 0 0 0 2px var(--paper-3),0 3px 0 var(--paper-3)}
.store-btn.soon .glyph{opacity:.4}
.store-btn.soon .st .v{color:var(--ink-3)}
.soon-tag{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);background:var(--paper);border-radius:var(--r-pill);padding:4px 9px;box-shadow:inset 0 0 0 1.5px var(--paper-3)}

.cta-note{margin-top:var(--s-4);font-size:var(--fs-sm);color:var(--ink-3);min-height:1em}
.demo-link{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-6);font-weight:600;font-size:var(--fs-sm);color:var(--ink-2);text-decoration:none;border-bottom:2px solid color-mix(in oklab,var(--ink) 22%,transparent);padding-bottom:2px}
.demo-link:hover{color:var(--ink);border-color:var(--ink)}
.demo-link .ar{transition:transform var(--dur-base) var(--ease-out)}
.demo-link:hover .ar{transform:translateX(3px)}

/* hero ring */
.hero-art{position:relative;display:flex;align-items:center;justify-content:center}
.hero-art .ring{width:min(100%,460px);height:auto;animation:spin 60s linear infinite;filter:drop-shadow(0 18px 40px rgba(31,26,20,.16))}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero-art .ring{animation:none}}
.hero-art .core{position:absolute;text-align:center}
.hero-art .core .cw{font-family:var(--font-display);font-size:clamp(28px,4vw,46px);color:var(--ink);letter-spacing:.02em}
.hero-art .core .cs{font-size:var(--fs-sm);color:var(--ink-3);font-weight:600;margin-top:2px}

/* ---- section frame ---- */
.sec{padding:var(--s-10) 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto var(--s-8)}
.sec-head h2{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,4vw,44px);line-height:1.05;letter-spacing:-.01em;margin:var(--s-3) 0 0}
.sec-head p{margin:var(--s-4) auto 0;color:var(--ink-2);font-size:var(--fs-md);max-width:52ch}

/* ---- how it works ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.step{background:var(--paper);border-radius:var(--r-card);padding:var(--s-7) var(--s-6);box-shadow:var(--shadow-card);position:relative}
.step .n{position:absolute;top:var(--s-6);right:var(--s-6);font-family:var(--font-display);font-size:44px;color:var(--paper-3);line-height:1}
.step .tiles{display:flex;gap:6px;margin-bottom:var(--s-5)}
.step h3{font-family:var(--font-body);font-weight:700;font-size:var(--fs-lg);margin:0 0 var(--s-2)}
.step p{color:var(--ink-2);font-size:var(--fs-base)}

/* ---- screenshots ---- */
.shots-sec{background:var(--paper-2);border-radius:var(--r-sheet);margin:0 auto;padding:var(--s-10) 0}
.shots{display:flex;gap:var(--s-6);justify-content:center;flex-wrap:wrap;padding:0 var(--gutter-mobile)}
.phone{position:relative;width:250px;padding:9px;background:linear-gradient(160deg,#2a2620,#141210);border-radius:42px;box-shadow:0 22px 48px rgba(31,26,20,.28),inset 0 0 0 2px rgba(255,255,255,.06);flex:0 0 auto}
.phone .screen{position:relative;border-radius:33px;overflow:hidden;aspect-ratio:402/874;background:var(--paper-3)}
.phone .notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:82px;height:22px;background:#141210;border-radius:999px;z-index:3;pointer-events:none}
.phone image-slot{position:absolute;inset:0}
/* Static placeholder for the phone screens until real screenshots are dropped in
   (replaces the design-time image-slot.js editor). Swap for <img> when ready. */
.shot-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 22px;background:linear-gradient(160deg,var(--paper-2),var(--paper-3));background-image:radial-gradient(var(--paper) 1.3px,transparent 1.5px);background-size:22px 22px;color:var(--ink-3);font-weight:600;font-size:var(--fs-sm);line-height:1.4}
.shot-cap{text-align:center;margin-top:var(--s-4);font-size:var(--fs-sm);font-weight:600;color:var(--ink-3)}

/* ---- bottom CTA band ---- */
.band{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--brick-navy),var(--brick-navy-dark));border-radius:var(--r-sheet);padding:var(--s-10) var(--s-8);text-align:center;color:var(--paper)}
.band h2{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,4vw,48px);color:var(--paper);margin:0}
.band p{color:color-mix(in oklab,var(--paper) 78%,var(--brick-navy));font-size:var(--fs-md);margin:var(--s-4) 0 0}
.band .cta-stores{justify-content:center;margin-top:var(--s-8)}
.band .cta-note{color:color-mix(in oklab,var(--paper) 64%,var(--brick-navy))}
.band .band-demo{margin-top:var(--s-6)}
.band .band-demo a{color:color-mix(in oklab,var(--paper) 80%,var(--brick-navy));border-color:color-mix(in oklab,var(--paper) 40%,transparent)}
.band .band-demo a:hover{color:var(--paper);border-color:var(--paper)}

/* ---- footer ---- */
.ftr{padding:var(--s-9) 0 var(--s-8)}
.ftr-in{display:flex;flex-wrap:wrap;gap:var(--s-6);align-items:center;justify-content:space-between}
.ftr-brand{display:flex;align-items:center;gap:var(--s-3)}
.ftr-brand img{width:30px;height:30px}
.ftr-brand .fb-txt{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.4}
.ftr-brand .fb-txt b{color:var(--ink-2);font-weight:700;font-family:var(--font-body)}
.ftr-links{display:flex;flex-wrap:wrap;gap:var(--s-5)}
.ftr-links a{font-size:var(--fs-sm);font-weight:600;color:var(--ink-3);text-decoration:none}
.ftr-links a:hover{color:var(--ink)}

/* contact button (brick ghost) */
.btn-contact{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r-tight);font-family:var(--font-body);font-weight:700;font-size:var(--fs-sm);color:var(--ink);text-decoration:none;background:transparent;box-shadow:inset 0 0 0 2.5px var(--ink);transition:transform var(--dur-fast) var(--ease-out)}
.btn-contact:hover{color:var(--ink);background:color-mix(in oklab,var(--ink) 6%,transparent)}
.btn-contact:active{transform:translateY(2px)}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s-7)}
  .hero-art{order:-1}
  .hero-art .ring{width:min(74%,320px)}
  .steps{grid-template-columns:1fr}
  .hdr-nav .madeby{display:none}
}