/* shared by the v3 mockup pages: fonts, palette, buttons, doodles, nav, footer */
@font-face{font-family:"Space Grotesk";src:url(m/space-grotesk-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Manrope";src:url(m/manrope-latin.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Bubbles";src:url(m/RubikBubbles-Regular.ttf);font-display:swap}
@font-face{font-family:"Caveat";src:url(m/Caveat-Bold.ttf);font-display:swap}
:root{
  /* the app's own palette (app/ui/theme.js) */
  --ink:#1A1A1A;--ink-soft:#6E6656;--cream:#FFF9E8;--creamT:#FFEFD0;--white:#fff;
  --purple:#A78BFA;--purple-d:#6D4FD1;--purple-t:#ECE3FF;--mint:#A6DDBE;--mint-l:#DDF0E4;--blue-t:#E3ECFF;
  --bd:3px solid var(--ink);--sh:6px 6px 0 var(--ink);--sh-sm:3px 3px 0 var(--ink);
  --ios-blue:#0A84FF;--ios-gray:#E9E9EB;
  --sc-canvas:var(--cream);--sc-ink:var(--ink);--sc-ink-soft:var(--ink-soft);--sc-accent:var(--purple);--sc-accent-ink:var(--ink);
  --sc-font-display:"Space Grotesk",system-ui,sans-serif;--sc-font-text:"Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--ink);font-family:"Manrope",system-ui,sans-serif;overflow-x:clip}
h1,h2,h3{font-family:"Space Grotesk",system-ui,sans-serif;letter-spacing:-.035em;margin:0}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px;position:relative;z-index:1}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 17px/1 "Space Grotesk";padding:18px 24px;border:var(--bd);border-radius:18px;box-shadow:var(--sh-sm);background:var(--ink);color:#fff;text-decoration:none;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn.alt{background:#fff;color:var(--ink)}
.btn.cta{background:var(--purple-d);font-size:21px;padding:22px 30px;border-radius:22px;box-shadow:6px 6px 0 var(--ink);position:relative;overflow:hidden;gap:12px}
.btn.cta:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn.cta svg{width:22px;height:22px;flex:none}
.btn.cta::after{content:"";position:absolute;inset:-20% auto -20% 0;width:38%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-160%) skewX(-18deg);animation:shine 4.5s ease-in-out 1.2s infinite}
@keyframes shine{0%{transform:translateX(-160%) skewX(-18deg)}35%,100%{transform:translateX(340%) skewX(-18deg)}}
.hero .dd{opacity:.55}.hero .dd.muted{opacity:.065}
.pill{display:inline-block;font:800 12px/1 "Manrope";letter-spacing:1.4px;text-transform:uppercase;padding:9px 13px;border:2.5px solid var(--ink);border-radius:999px;background:#fff}
.hand{font:700 28px/1.05 "Caveat";color:var(--purple-d)}
.cut{display:block;width:100%;filter:drop-shadow(0 10px 14px rgba(26,26,26,.2))}

/* colour blocks, joined by a hand-drawn wavy edge */
.blk{position:relative;overflow:clip}
.blk.edge::before{content:"";position:absolute;left:0;right:0;top:-1px;height:26px;z-index:2;background:var(--prev);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V12C110 22 100 22 90 12S70 2 60 12 40 22 30 12 10 2 0 12Z'/%3E%3C/svg%3E") 0 0/240px 26px repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V12C110 22 100 22 90 12S70 2 60 12 40 22 30 12 10 2 0 12Z'/%3E%3C/svg%3E") 0 0/240px 26px repeat-x}

/* doodles */
.dd-layer{position:absolute;inset:0;pointer-events:none;z-index:0}
.dd{position:absolute;overflow:visible;animation:sway var(--f) ease-in-out infinite alternate}
.dd path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.6,0,.2,1) var(--d)}
.drawn .dd path{stroke-dashoffset:0}
.dd.muted{opacity:.11;animation-duration:calc(var(--f)*1.6)}
@keyframes sway{to{translate:0 -8px;rotate:7deg}}

/* NAV */
nav{position:fixed;top:14px;left:50%;translate:-50% 0;z-index:80;width:min(1140px,calc(100% - 28px));display:flex;justify-content:space-between;align-items:center;padding:9px 9px 9px 14px;border:var(--bd);border-radius:22px;background:#fff;box-shadow:var(--sh-sm)}
.logo{display:flex;align-items:center;gap:10px;font:700 22px "Space Grotesk";color:var(--ink);text-decoration:none}
.logo img{width:36px;height:36px;border-radius:10px;border:2px solid var(--ink)}
nav .links{display:flex;gap:26px;font-weight:800;font-size:15px}
nav .links a{color:var(--ink);text-decoration:none}
nav .btn{padding:12px 18px;font-size:15px}
@media (max-width:760px){nav .links{display:none}}
footer{background:var(--ink);color:#BDB6A5;padding:34px 0;font-weight:700;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:var(--cream);text-decoration:none;margin-right:18px}
.mark{position:relative;display:inline-block;rotate:-2.5deg;padding:0 .06em;z-index:0;white-space:nowrap}.mark svg{position:absolute;left:-.08em;top:.18em;width:calc(100% + .16em);height:.78em;z-index:-1;overflow:visible}
@media (prefers-reduced-motion:reduce){.dd,.btn.cta::after{animation:none!important}.dd path{transition:none;stroke-dashoffset:0}}
footer .legal{flex-basis:100%;margin-top:14px;font-size:12px;font-weight:600;color:#8F887A;line-height:1.5;max-width:80ch}
/* article pages: no hero, just the title and a short intro */
.art-top{padding:140px 0 40px}
.art-top .wrap>*{max-width:760px}
.art-top h1{font-size:clamp(40px,6vw,68px);line-height:1.02;letter-spacing:-.03em;margin:18px 0 20px}
.art-top p{font-size:19px;line-height:1.5;margin:0 0 12px}
.art-top p.small{font-size:14px;opacity:.7}
@media (max-width:600px){.art-top{padding:110px 0 24px}.art-top p{font-size:17px}}

/* Eilon 2026-10-23: no tilted tiles. Cards, photos, stickers and labels sit straight.
   Handwritten notes and background doodles keep their angle. */
:where(body *:not(.hand):not(.dd):not(.dd *)){rotate:none!important}

footer .guides{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px}
footer .guides span{color:#8F887A}
footer .guides a{margin-right:0}

/* footer columns (same as the home page) */
footer .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:100%}
footer .cols b{display:block;color:#fff;margin-bottom:10px}
footer .cols a{display:block;margin:0 0 8px}
@media (max-width:700px){footer .cols{grid-template-columns:1fr 1fr}}
/* breadcrumbs on guide pages */
.crumbs{display:flex;flex-wrap:wrap;gap:6px 8px;font-size:14px;font-weight:700;color:var(--ink-soft);margin:0 0 14px}
.crumbs a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* download box under a guide's opening: button, plus a QR code on computers */
.getapp{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin:26px 0 10px}
.getapp .qr{display:none;align-items:center;gap:14px;max-width:330px;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:8px 16px 8px 8px;box-shadow:4px 4px 0 var(--ink)}
.getapp .qr img{width:84px;height:84px;border-radius:10px;flex:none}
.getapp .qr p{font-size:14px!important;font-weight:700;line-height:1.4;margin:0!important}
@media (min-width:981px){.getapp .qr{display:flex}}
.art-top p.answer{margin-top:22px}