/* ============================================================
   Color Flags shared design system
   Used by the landing page and every guide page.
   ============================================================ */
:root{
  --bg:#FAF2E0;
  --bg2:#FFF3B8;
  --sun:#FFD93D;
  --ink:#2B1B0E;
  --inkSoft:#7A5A3D;
  --card:#FFFFFF;
  --coral:#FF5B5B;
  --sky:#3DA9FC;
  --green:#3FBF77;
  --yellow:#FFC83D;
  --blue:#3D6BFF;
  --purple:#A26BFF;
  --orange:#FF8A3D;
  --star:#FFB400;
  --font:"Fredoka","Baloo 2",system-ui,sans-serif;
  --body:"Nunito",system-ui,sans-serif;
  --sh:0 8px 0 var(--ink);
  --sh6:0 6px 0 var(--ink);
  --sh4:0 4px 0 var(--ink);
  --sh-soft:0 4px 0 rgba(43,27,14,0.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-weight:600;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.disp{font-family:var(--font);font-weight:700;margin:0}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============ NAV ============ */
nav.site{position:sticky;top:0;z-index:50;background:rgba(250,242,224,0.86);backdrop-filter:blur(8px);border-bottom:2.5px solid var(--ink)}
.navinner{display:flex;align-items:center;justify-content:space-between;height:74px;gap:14px}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:48px;height:48px;flex-shrink:0}
.brand b{font-family:var(--font);font-weight:700;font-size:23px;line-height:1;white-space:nowrap}
.navlinks{display:flex;align-items:center;gap:26px}
.navlinks a{font-family:var(--font);font-weight:600;font-size:17px;opacity:.8}
.navlinks a:hover{opacity:1}
.langpick{display:flex;background:var(--card);border:2.5px solid var(--ink);border-radius:999px;padding:4px;box-shadow:var(--sh-soft)}
.langpick button,.langpick a{appearance:none;border:none;background:transparent;font-family:var(--font);font-weight:700;font-size:14px;color:var(--ink);padding:7px 13px;border-radius:999px;cursor:pointer;line-height:1;text-decoration:none}
.langpick button.on,.langpick a.on{background:var(--ink);color:#fff}

/* ============ BUTTONS & BADGES ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font);font-weight:700;border:2.5px solid var(--ink);border-radius:999px;cursor:pointer;line-height:1;transition:transform .08s ease}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.btn-lg{font-size:21px;padding:18px 30px;box-shadow:var(--sh6)}
.btn-md{font-size:17px;padding:13px 22px;box-shadow:var(--sh4)}
.btn-coral{background:var(--coral);color:#fff}
.btn-sun{background:var(--sun);color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}

.badge{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;font-family:var(--font);font-weight:600;font-size:15px;padding:9px 16px 9px 13px;border-radius:999px;border:2.5px solid var(--ink);white-space:nowrap}
.badge .dot{width:8px;height:8px;border-radius:99px;background:var(--green);box-shadow:0 0 0 0 rgba(63,191,119,.6);animation:pulse 1.8s infinite}
.chiprow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.badge.access{background:var(--sky);color:var(--ink);border-color:var(--ink)}
.badge.access .dot{background:var(--ink);box-shadow:0 0 0 0 rgba(43,27,14,.5);animation:pulse-dark 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,191,119,.6)}70%{box-shadow:0 0 0 7px rgba(63,191,119,0)}100%{box-shadow:0 0 0 0 rgba(63,191,119,0)}}
@keyframes pulse-dark{0%{box-shadow:0 0 0 0 rgba(43,27,14,.5)}70%{box-shadow:0 0 0 7px rgba(43,27,14,0)}100%{box-shadow:0 0 0 0 rgba(43,27,14,0)}}

/* Store badges */
.store{display:inline-flex;align-items:center;gap:13px;background:#fff;color:var(--ink);border:2.5px solid var(--ink);border-radius:18px;padding:13px 24px 13px 20px;box-shadow:0 5px 0 rgba(0,0,0,.35);white-space:nowrap}
.store>span{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.store .small{font-family:var(--body);font-weight:700;font-size:12px;color:var(--inkSoft);line-height:1.1;white-space:nowrap}
.store .big{font-family:var(--font);font-weight:700;font-size:21px;line-height:1.05;margin-top:1px;white-space:nowrap}
.store.soft{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);box-shadow:none;opacity:.85}
.store.soft .small{color:rgba(255,255,255,.6)}
.store.on-light{box-shadow:var(--sh4)}
.store.soft.on-light{color:var(--ink);border-color:rgba(43,27,14,.35);opacity:.8}
.store.soft.on-light .small{color:var(--inkSoft)}

/* ============ HERO ============ */
.hero{position:relative;padding:64px 0 56px;overflow:hidden}
.hero-blobs{position:absolute;inset:0;pointer-events:none;z-index:0}
.herogrid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:72px;line-height:.92;letter-spacing:-.01em}
.hero .lead{font-size:21px;line-height:1.4;font-weight:700;color:var(--inkSoft);margin-top:20px;max-width:32ch;text-wrap:pretty}
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px}
.hero-note{display:flex;align-items:center;gap:8px;margin-top:22px;font-family:var(--font);font-weight:600;font-size:15px;color:var(--inkSoft)}
.hero-note svg{flex-shrink:0}
.stripe-callout{position:absolute;z-index:5;left:calc(50% - 264px);top:35%;width:170px;background:#fff;border:2.5px solid var(--ink);border-radius:18px;padding:12px 16px;font-family:var(--font);font-weight:600;font-size:15px;line-height:1.3;color:var(--ink);box-shadow:var(--sh4);rotate:-5deg;text-wrap:pretty}
.acc-stat{display:inline-flex;align-items:center;gap:10px;background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:13px 24px;font-family:var(--font);font-weight:700;font-size:19px;color:var(--ink);box-shadow:var(--sh4);margin:20px auto 0}

/* phone mock */
.phone-stage{position:relative;display:grid;place-items:center}
.phone{width:300px;height:610px;background:var(--sun);border:3px solid var(--ink);border-radius:46px;box-shadow:0 14px 0 var(--ink);position:relative;overflow:hidden;rotate:3deg}
.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:26px;background:var(--ink);border-radius:0 0 16px 16px;z-index:3}
.ph-status{display:flex;justify-content:space-between;align-items:center;padding:14px 26px 6px;font-family:-apple-system,system-ui;font-size:14px;font-weight:800}
.ph-pad{padding:6px 18px 0}
.ph-banner{background:#fff;border:2.5px solid var(--ink);border-radius:20px;box-shadow:var(--sh-soft);padding:12px 16px;display:flex;align-items:center;gap:10px}
.ph-banner b{font-family:var(--font);font-size:21px}
.ph-dots{display:flex;justify-content:center;gap:6px;margin:14px 0}
.ph-dots i{width:22px;height:6px;border-radius:4px;border:1.5px solid var(--ink);display:block}
.ph-canvas{background:#fff;border:2.5px solid var(--ink);border-radius:24px;box-shadow:var(--sh);padding:16px}
.ph-palette{display:flex;justify-content:center;gap:11px;margin-top:18px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:5px}
.swatch .chip{width:50px;height:50px;border-radius:18px;border:3px solid var(--ink);box-shadow:var(--sh-soft)}
.swatch.sel .chip{width:58px;height:58px;box-shadow:var(--sh4)}
.swatch span{font-family:var(--font);font-weight:600;font-size:12px}
.pinti-float{position:absolute;z-index:4;right:-26px;bottom:96px;rotate:-8deg;filter:drop-shadow(0 6px 0 rgba(43,27,14,.15))}

/* ============ STATS STRIP ============ */
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:8px}
.stat{background:#fff;border:2.5px solid var(--ink);border-radius:22px;box-shadow:var(--sh4);padding:16px 26px;text-align:center;min-width:150px}
.stat b{font-family:var(--font);font-weight:700;font-size:38px;display:block;line-height:1}
.stat span{font-family:var(--font);font-weight:600;font-size:14px;color:var(--inkSoft);letter-spacing:.02em}

/* ============ SECTIONS ============ */
section{padding:72px 0}
.kicker{font-family:var(--font);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#C42B2B}
.sec-head{text-align:center;max-width:38ch;margin:0 auto 48px}
.sec-head h2{font-size:46px;line-height:1.02;margin-top:12px;letter-spacing:-.01em}
.sec-head p{font-size:18px;font-weight:700;color:var(--inkSoft);margin-top:14px;line-height:1.4}

/* ============ DOWNLOAD BAND ============ */
.dl-band{background:#fff;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:44px 0}
.dl-grid{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.dl-copy h2{font-size:32px;line-height:1.05}
.dl-copy p{font-size:16.5px;font-weight:700;color:var(--inkSoft);margin:10px 0 0;line-height:1.45;max-width:52ch}
.dl-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dl-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.fact-chip{display:inline-flex;align-items:center;gap:7px;background:var(--bg);border:2px solid var(--ink);border-radius:999px;padding:7px 14px;font-family:var(--font);font-weight:600;font-size:13.5px;box-shadow:var(--sh-soft)}

/* ============ FEATURES ============ */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.feat{background:#fff;border:2.5px solid var(--ink);border-radius:30px;box-shadow:var(--sh6);padding:30px 30px 32px;display:flex;gap:20px;align-items:flex-start}
.feat .ic{width:66px;height:66px;border-radius:20px;border:2.5px solid var(--ink);box-shadow:var(--sh4);display:grid;place-items:center;flex-shrink:0}
.feat h3{font-size:25px;line-height:1.05}
.feat p{font-size:16.5px;font-weight:700;color:var(--inkSoft);margin-top:9px;line-height:1.42;text-wrap:pretty}

/* ============ SCREENSHOTS ============ */
.shots-rail{overflow-x:auto;padding:10px 24px 26px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.shots-track{display:flex;gap:26px;width:max-content;margin:0 auto}
.shots-rail::-webkit-scrollbar{display:none}
.shot{flex:0 0 auto;width:250px;scroll-snap-align:center;margin:0}
.shot img{display:block;width:100%;height:auto;border:3px solid var(--ink);border-radius:28px;box-shadow:var(--sh6);background:var(--sun)}
.shot figcaption{font-family:var(--font);font-weight:600;font-size:14.5px;color:var(--inkSoft);text-align:center;margin-top:14px;line-height:1.3;padding:0 6px}
.shots-hint{text-align:center;font-family:var(--font);font-weight:600;font-size:14px;color:var(--inkSoft);margin-top:2px}

/* ============ ACCESS BAND ============ */
.band{background:var(--sun);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);position:relative;overflow:hidden}
.band .kicker{color:var(--ink)}
.layers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.layer{background:#fff;border:2.5px solid var(--ink);border-radius:26px;box-shadow:var(--sh6);padding:26px 22px;position:relative}
.layer .num{width:44px;height:44px;border-radius:999px;border:2.5px solid var(--ink);display:grid;place-items:center;font-family:var(--font);font-weight:700;font-size:22px;color:var(--ink);box-shadow:var(--sh4)}
.layer h3{font-size:20px;margin-top:16px;line-height:1.1}
.layer p{font-size:14.5px;font-weight:700;color:var(--inkSoft);margin-top:8px;line-height:1.38}
.layers.layers-3{grid-template-columns:repeat(3,1fr);max-width:920px;margin-left:auto;margin-right:auto}

/* ============ STORY ============ */
.story{padding:72px 0}
.story-card{background:var(--sun);border:3px solid var(--ink);border-radius:40px;box-shadow:var(--sh);padding:44px 48px;display:grid;grid-template-columns:auto 1fr;gap:42px;align-items:center}
.story-pinti{display:grid;place-items:center;width:200px;flex-shrink:0}
.story-copy{display:flex;flex-direction:column}
.story-copy .kicker{color:var(--ink);display:block}
.story-copy h2{font-size:38px;line-height:1.08;margin-top:12px;letter-spacing:-.01em}
.story-copy p{font-size:18px;font-weight:700;color:var(--ink);line-height:1.5;margin-top:18px;text-wrap:pretty}
.story-copy .story-sign{font-family:var(--font);font-weight:600;font-size:17px;color:var(--inkSoft);margin-top:16px}

/* ============ GUIDES GRID ============ */
.guides-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gcard{background:#fff;border:2.5px solid var(--ink);border-radius:26px;box-shadow:var(--sh4);padding:24px 22px;display:flex;flex-direction:column;gap:10px;transition:transform .1s ease,box-shadow .1s ease}
.gcard:hover{transform:translateY(-4px);box-shadow:0 8px 0 var(--ink)}
.gcard .gic{width:52px;height:52px;border-radius:16px;border:2.5px solid var(--ink);box-shadow:var(--sh-soft);display:grid;place-items:center;font-size:26px;line-height:1}
.gcard h3{font-size:19px;line-height:1.14}
.gcard p{font-size:14px;font-weight:700;color:var(--inkSoft);line-height:1.4;margin:0;flex:1}
.gcard .more{font-family:var(--font);font-weight:700;font-size:14.5px;color:#C42B2B}

/* ============ FAQ ============ */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
details.qa{background:#fff;border:2.5px solid var(--ink);border-radius:22px;box-shadow:var(--sh4);overflow:hidden}
details.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 24px;font-family:var(--font);font-weight:700;font-size:18.5px;line-height:1.25}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary .tog{flex-shrink:0;width:34px;height:34px;border-radius:999px;border:2.5px solid var(--ink);background:var(--sun);display:grid;place-items:center;font-family:var(--font);font-weight:700;font-size:0;line-height:1;box-shadow:var(--sh-soft)}
details.qa summary .tog::after{content:"+";font-size:20px;line-height:1}
details.qa[open] summary .tog{background:var(--coral);color:#fff}
details.qa[open] summary .tog::after{content:"\2212"} /* minus sign when open */
details.qa .qa-body{padding:0 24px 22px;font-size:16px;font-weight:600;color:var(--inkSoft);line-height:1.55}
details.qa .qa-body a{color:#C42B2B;font-weight:800;text-decoration:underline;text-underline-offset:3px}
details.qa .qa-body p{margin:0 0 10px}
details.qa .qa-body p:last-child{margin-bottom:0}

/* ============ CTA / SOON ============ */
.soon{text-align:center;position:relative}
/* in-page anchor target (guide "Get the app" CTAs jump here); offset for the sticky nav */
#cta-heading{scroll-margin-top:96px}
.soon-card{background:var(--ink);color:#fff;border-radius:40px;padding:64px 40px;position:relative;overflow:hidden;box-shadow:0 12px 0 rgba(43,27,14,.25)}
.soon-card h2{font-size:48px;color:#fff;line-height:1.02;letter-spacing:-.01em;position:relative;z-index:1}
.soon-card p{font-size:18px;font-weight:700;color:#FFE9A8;margin-top:16px;position:relative;z-index:1}
.soon-cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:32px;position:relative;z-index:1}

/* ============ FOOTER ============ */
footer.site{padding:48px 0 56px;border-top:2.5px solid var(--ink);margin-top:0}
.footinner{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap}
.footinner .brand b{font-size:20px}
.footnote{font-family:var(--font);font-weight:600;font-size:14px;color:var(--inkSoft)}
.footcols{display:flex;gap:56px;flex-wrap:wrap}
.footcol{min-width:150px}
.footcol h3{font-family:var(--font);font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--inkSoft);margin-bottom:12px}
.footcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.footcol a{font-family:var(--font);font-weight:600;font-size:15px}
.footcol a:hover{color:#C42B2B}
.footlegal{margin-top:28px;padding-top:20px;border-top:1.5px solid rgba(43,27,14,0.15)}
.footlegal p{font-family:var(--body);font-size:12px;font-weight:600;color:var(--inkSoft);line-height:1.6;margin:0}

/* ============ GUIDE PAGES ============ */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:var(--font);font-weight:600;font-size:14px;color:var(--inkSoft);padding-top:26px}
.crumbs a:hover{color:#C42B2B}
.crumbs .sep{opacity:.5}
.g-hero{padding:26px 0 8px}
.g-hero h1{font-size:46px;line-height:1.04;letter-spacing:-.01em;max-width:22ch}
.g-hero .g-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.g-lead{font-size:19.5px;line-height:1.5;font-weight:700;color:var(--inkSoft);margin-top:18px;max-width:62ch;text-wrap:pretty}
.g-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start;padding:34px 0 72px}
.prose{max-width:680px}
.prose h2{font-size:31px;line-height:1.08;margin:44px 0 14px;letter-spacing:-.01em}
.prose h3{font-size:22px;line-height:1.15;margin:28px 0 10px}
.prose p,.prose li{font-size:17px;font-weight:600;line-height:1.62;color:#4A3621}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{padding-left:24px;margin:0 0 18px}
.prose li{margin-bottom:9px}
.prose li::marker{color:#C42B2B;font-weight:800}
.prose a{color:#C42B2B;font-weight:800;text-decoration:underline;text-underline-offset:3px}
/* Buttons inside prose keep their own label color/decoration, not the link style */
.prose a.btn{color:#fff;text-decoration:none}
.prose a.btn-sun,.prose a.btn-white{color:var(--ink)}
.prose strong{color:var(--ink)}
.prose .tip{background:#fff;border:2.5px solid var(--ink);border-radius:22px;box-shadow:var(--sh4);padding:20px 24px;margin:26px 0}
.prose .tip b{font-family:var(--font)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 20px;background:#fff;border:2.5px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:var(--sh4);font-size:15.5px}
.prose th,.prose td{text-align:left;padding:12px 16px;border-bottom:1.5px solid rgba(43,27,14,.15)}
.prose th{font-family:var(--font);font-weight:700;background:var(--bg2)}
.prose tr:last-child td{border-bottom:none}
.table-scroll{overflow-x:auto;margin:0 0 20px}
.table-scroll table{margin:0}

/* "Do it in the app" box */
.app-box{background:var(--sun);border:3px solid var(--ink);border-radius:30px;box-shadow:var(--sh6);padding:30px 30px 32px;margin:34px 0}
.app-box .ab-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.app-box .ab-head .abic{width:54px;height:54px;border-radius:16px;border:2.5px solid var(--ink);box-shadow:var(--sh-soft);overflow:hidden;flex-shrink:0;background:#fff}
.app-box .ab-head .abic img{width:100%;height:100%;display:block}
.app-box h2,.app-box h3{margin:0;font-size:24px}
.app-box ol{margin:14px 0 18px;padding-left:24px}
.app-box li{font-size:16.5px;font-weight:700;line-height:1.5;margin-bottom:8px;color:var(--ink)}
.app-box li::marker{color:var(--ink)}
.app-box .btn{margin-top:6px}
.app-box p{font-size:16px;font-weight:700;color:var(--ink);line-height:1.5;margin:0 0 6px}

/* Guide sidebar */
.g-side{position:sticky;top:98px;display:flex;flex-direction:column;gap:22px}
.side-card{background:#fff;border:2.5px solid var(--ink);border-radius:26px;box-shadow:var(--sh4);padding:24px}
.side-card h3{font-size:19px;margin-bottom:8px}
.side-card p{font-size:14.5px;font-weight:700;color:var(--inkSoft);line-height:1.45;margin:0 0 14px}
.side-card img.side-shot{width:100%;height:auto;border:2.5px solid var(--ink);border-radius:18px;display:block;margin-bottom:14px}
.side-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.side-links a{font-family:var(--font);font-weight:600;font-size:15px;line-height:1.3;display:block}
.side-links a:hover{color:#C42B2B}

/* Related guides */
.related{padding:0 0 84px}
.related h2{font-size:34px;text-align:center;margin-bottom:30px}
.related .guides-grid{grid-template-columns:repeat(3,1fr)}

/* ============ HERO ACCESSIBILITY PILL ============ */
.hero-accpill{display:inline-flex;align-items:center;gap:11px;margin-top:18px;background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:8px 18px 8px 9px;box-shadow:var(--sh-soft);font-family:var(--font);font-weight:700;font-size:14.5px;line-height:1.25;color:var(--ink);max-width:100%;text-wrap:pretty}
.hero-accpill .hero-accpill-num{background:var(--sky);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:5px 12px;font-size:14px;white-space:nowrap;flex-shrink:0}

/* ============ FOUNDER TEASER ============ */
.founder-teaser{display:flex;align-items:center;gap:18px;background:#fff;border:2.5px solid var(--ink);border-radius:26px;box-shadow:var(--sh4);padding:18px 24px;transition:transform .1s ease,box-shadow .1s ease}
.founder-teaser:hover{transform:translateY(-3px);box-shadow:var(--sh6)}
.founder-teaser-pinti{flex-shrink:0;width:64px;height:64px;display:grid;place-items:center}
.founder-teaser-copy{display:flex;flex-direction:column;gap:7px;min-width:0}
.founder-teaser-quote{font-family:var(--font);font-weight:600;font-size:17px;line-height:1.35;color:var(--ink);text-wrap:pretty}
.founder-teaser-sign{font-family:var(--font);font-weight:600;font-size:14.5px;color:var(--inkSoft);display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
.founder-teaser-sign b{color:var(--ink);font-weight:700}
.founder-teaser-link{color:#C42B2B;font-weight:700;white-space:nowrap}

/* ============ SCREENSHOTS ARROWS + DRAG ============ */
.shots-wrap{position:relative}
.shots-arrow{position:absolute;top:46%;transform:translateY(-50%);z-index:6;width:52px;height:52px;border-radius:999px;border:2.5px solid var(--ink);background:#fff;color:var(--ink);box-shadow:var(--sh4);cursor:pointer;font-size:30px;line-height:0;display:grid;place-items:center;font-family:var(--font);font-weight:700;transition:transform .08s ease,background .12s ease;padding-bottom:4px}
.shots-arrow:hover{background:var(--sun)}
.shots-arrow:active{transform:translateY(-50%) translateY(2px);box-shadow:var(--sh-soft)}
.shots-arrow.prev{left:10px}
.shots-arrow.next{right:10px}
.shots-rail{cursor:grab}
.shots-rail.dragging{cursor:grabbing;scroll-snap-type:none}
.shots-rail.dragging img{pointer-events:none}

/* ============ DOWNLOAD QR ============ */
.dl-badges{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dl-qr{display:flex;flex-direction:column;align-items:center;gap:9px;padding-left:22px;border-left:2px dashed rgba(43,27,14,.28)}
.dl-qr img{width:104px;height:104px;background:#fff;border:2.5px solid var(--ink);border-radius:16px;box-shadow:var(--sh-soft);padding:8px;display:block}
.dl-qr-cap{font-family:var(--font);font-weight:600;font-size:12.5px;color:var(--inkSoft);max-width:118px;text-align:center;line-height:1.25;text-wrap:pretty}

/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
  .g-layout{grid-template-columns:1fr}
  .g-side{position:static}
  .related .guides-grid{grid-template-columns:repeat(2,1fr)}
  .guides-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:920px){
  .herogrid{grid-template-columns:1fr;gap:24px}
  .phone-stage{order:-1}
  .hero h1{font-size:58px}
  .hero .lead{max-width:none}
  .features{grid-template-columns:1fr}
  .layers{grid-template-columns:repeat(2,1fr)}
  .layers.layers-3{grid-template-columns:repeat(3,1fr)}
  .story-card{grid-template-columns:1fr;text-align:center;gap:20px;padding:36px 30px}
  .story-pinti{width:150px;margin:0 auto}
  .story-copy p{text-align:left}
  .sec-head h2,.soon-card h2{font-size:36px}
  .navlinks .navlink{display:none}
  .g-hero h1{font-size:36px}
  .prose h2{font-size:26px}
  .shots-arrow{display:none}
  .dl-qr{display:none}
}
@media(min-width:921px){
  .shots-hint{display:none}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .hero h1{font-size:46px}
  .layers{grid-template-columns:1fr}
  .layers.layers-3{grid-template-columns:1fr}
  .soon-card{padding:48px 24px}
  .brand b{font-size:20px}
  .stripe-callout{position:static;rotate:-2deg;width:auto;max-width:250px;margin-top:16px;text-align:center}
  .guides-grid{grid-template-columns:1fr}
  .related .guides-grid{grid-template-columns:1fr}
  .shot{width:216px}
  .dl-copy h2{font-size:26px}
  .g-hero h1{font-size:31px}
  .founder-teaser{gap:14px;padding:16px 18px}
  .founder-teaser-pinti{width:52px;height:52px}
  .founder-teaser-quote{font-size:15.5px}
}

/* ============ COOKIE CONSENT ============ */
.cf-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:640px;margin:0 auto;background:#fff;border:2.5px solid var(--ink);border-radius:22px;box-shadow:var(--sh6);padding:18px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;animation:cf-consent-in .25s ease}
@keyframes cf-consent-in{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.cf-consent p{margin:0;font-family:var(--body);font-weight:700;font-size:15px;color:var(--ink);line-height:1.4;flex:1;min-width:220px}
.cf-consent-btns{display:flex;gap:10px;align-items:center}
.cf-consent-btns button{font-family:var(--font);font-weight:700;border:2.5px solid var(--ink);border-radius:999px;cursor:pointer;line-height:1;font-size:15px;padding:11px 20px;transition:transform .08s ease}
.cf-consent-btns button:active{transform:translateY(2px)}
.cf-consent .cf-accept{background:var(--coral);color:#fff;box-shadow:var(--sh-soft)}
.cf-consent .cf-decline{background:#fff;color:var(--ink)}
@media(max-width:560px){.cf-consent{padding:16px;gap:12px}.cf-consent-btns{width:100%}.cf-consent-btns button{flex:1}}