/* 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 removed per request — .dots is now a no-op (the class stays in the
   hero/band markup harmlessly). */

/* ---- 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)}
/* Single-column flow with the ring floated into it (see .hero-art) so the headline,
   tiles and lede wrap AROUND the spinner rather than sitting in a rigid second column. */
.hero-grid{display:block}
.hero-grid::after{content:"";display:block;clear:both}   /* contain the floated ring */
.eyebrow-row{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-5)}
/* Sized so "Find the longest words — or" holds a single row on desktop (mockup "blue box"),
   above the down-shifted ring; it wraps naturally on narrow screens. */
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(32px,3.6vw,48px);line-height:1.12;letter-spacing:-.01em;margin:0}
/* "forge epic chains" rendered as game-style letter tiles inside the headline,
   built to match the flat two-tone brick look of the spinning hero-ring tiles: a
   solid face over a darker bottom "side" lip, no gloss/gradient, ring-matched corner
   radius. Interior letters are neutral grey; the chain-link letters (the E that ends
   the first word / starts "epic", and the C that ends "epic" / starts "chains") take
   the ring's green / sky brand tokens. Sized in em so tiles track the responsive
   headline. The pop-in / double-bounce / first-word-cycling motion is driven by the
   inline script at the end of the page (Web Animations API); this CSS only styles the
   tiles and supplies the no-JS / reduced-motion resting state. */
/* The tiles sit on their own row under the headline prose, in a single row by default so
   they wrap the top of the ring. `.wt-word` stays an unbreakable unit; below the wrap
   breakpoint they stack one word per row (three rows, never a lone trailing word). */
/* Fixed to the widest phrase (a 6-tile first word) so the last word ("chains") is always
   anchored at the right edge and the first word stays flush left; a shorter first word
   leaves slack in the middle. */
.word-tiles{display:flex;flex-wrap:nowrap;align-items:center;gap:.72em;margin:.5em 0 .3em;font-size:.46em;line-height:1;width:27.5em}
.wt-word{display:inline-flex;gap:.16em;white-space:nowrap}   /* a word's tiles never split across lines */
/* The middle word ("epic") auto-centres in that slack, so it subtly shifts left/right as
   the first word's length changes while the first and last words stay pinned. */
.word-tiles .wt-word:nth-child(2){margin-inline:auto}
.wt{
  --wt-face:#8B8B8B; --wt-side:#5C5C5C; --wt-ink:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  width:1.5em;height:1.5em;border-radius:.34em;
  font-family:var(--font-display);font-weight:400;font-size:1em;line-height:1;
  color:var(--wt-ink);text-transform:uppercase;
  background:var(--wt-face);   /* flat solid face, like the ring rects (no gradient) */
  box-shadow:0 .13em 0 var(--wt-side),0 .18em .2em rgba(31,26,20,.22);  /* darker bottom lip + soft drop */
  transform-origin:50% 100%;
}
/* Chain-link tiles use spinner colours that keep BLACK letter text (matching the ring's
   orange "O" and sky "O", both ink-lettered), so every tile in the title reads black. */
.wt--e{--wt-face:var(--brick-orange);--wt-side:var(--brick-orange-dark);--wt-ink:var(--ink)}
.wt--c{--wt-face:var(--brick-sky);   --wt-side:var(--brick-sky-dark);   --wt-ink:var(--ink)}
/* No-JS / reduced-motion fallback: the link tiles keep a gentle idle bounce and the
   whole phrase rests fully visible. When the script takes over it adds `.js` to
   .word-tiles, hides the tiles so it can pop them in, and drives every bounce itself —
   so this idle animation is switched off to avoid fighting the scripted keyframes. */
.wt--link{animation:wt-bounce 2.6s ease-in-out infinite}
.wt--c.wt--link{animation-delay:.55s}   /* the C pair links a beat after the E pair */
.word-tiles.js .wt{opacity:0}
.word-tiles.js .wt--link{animation:none}
@keyframes wt-bounce{
  0%,60%,100%{transform:translateY(0)}
  68%{transform:translateY(-16%)}
  76%{transform:translateY(0)}
  82%{transform:translateY(-7%)}
  88%{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){.wt--link{animation:none}}
/* No hard max-width here (unlike a normal column) so the paragraph flows out to the ring
   and its right edge follows the circle's curve — the "wrap with stronger shape" note. */
.hero .lede{font-size:var(--fs-lg);line-height:1.5;color:var(--ink-2);margin:var(--s-5) 0 0;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 — floated into the copy so text wraps around it */
.hero-art{
  position:relative;
  float:right;
  width:min(46%,440px);
  /* Shifted down a touch (mockup "pink circle") so the first headline line clears above
     it and the tiles + lede wrap the upper-left; circle shape-outside makes the wrap hug
     the ring instead of a bounding box (mockup "black line"). */
  margin:4.75rem 0 1.25rem 2.25rem;
  shape-outside:circle(50%);
  shape-margin:16px;
}
.hero-art .ring{width:100%;height:auto;filter:drop-shadow(0 18px 40px rgba(31,26,20,.16))}
/* The whole ring of tiles revolves around the SVG centre... */
.hero-art .ring .ring-rot{transform-box:view-box;transform-origin:250px 250px;animation:spin 60s linear infinite}
/* ...while every tile counter-rotates about its own centre at the same rate,
   so the tiles (and their letters) always stay upright. */
.hero-art .ring .tile{transform-box:fill-box;transform-origin:center;animation:spin 60s linear infinite reverse}
.hero-art .ring text{font-family:var(--font-display);font-weight:400}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero-art .ring .ring-rot,.hero-art .ring .tile{animation:none}}
.hero-art .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);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)}
/* Reuse the hero headline tiles' flat two-tone brick finish (solid face, darker bottom
   lip, ring-matched corner radius) instead of the glossy design-system default, so every
   letter tile on the page reads as the same object. */
.step .tiles .tile{
  border-radius:9px;
  background:var(--tile-face);
  box-shadow:0 3px 0 var(--tile-side),0 5px 7px rgba(31,26,20,.20);
}
/* Middle-grey interior, matching the hero headline's non-anchor tiles. Card words use this
   for their inner letters; their first/last letters stay coloured "anchor" tiles (white text)
   via the brand .tile--* classes. */
.tile--wtgray{--tile-face:#8B8B8B;--tile-side:#5C5C5C;color:var(--ink)}
.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}
/* Real screenshots dropped into the phone screens. */
.shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* 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)}

/* Tiles can't fit one row beside the ring below this width — stack the three words
   (never leaving a lone trailing word on its own line, which the single-row/three-row
   split avoids). Drop the first-word reservation since each word now owns its row. */
@media (max-width:1080px){
  .word-tiles{flex-direction:column;align-items:flex-start;gap:.42em;width:auto}
  .word-tiles .wt-word:nth-child(2){margin-inline:0}
}

@media (max-width:860px){
  /* Ring stops floating and centers above the copy (it's first in source order now). */
  .hero-art{float:none;shape-outside:none;width:min(74%,300px);margin:0 auto var(--s-6)}
  .hero-copy{clear:both}
  .steps{grid-template-columns:1fr}
  .hdr-nav .madeby{display:none}
}