/* Honk! – honk.algomate.se
   Same look as the game: Fredoka, warm wood panels, chunky buttons, sky, hills and roads. Based on the Poppis site. */
@font-face{font-family:"Fredoka";src:url(/fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fredoka";src:url(/fonts/fredoka-ext.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4}

:root{
  --ink:#2b1d14;--ink-2:#5a4636;--muted:#806b59;
  --paper:#fff8ec;--cream:#fbefd9;--cream-2:#f4e2c3;--line:#ead6b4;
  --wood-9:#24160d;--wood-8:#33221a;--wood-7:#43301f;--wood-6:#5a3f29;--wood-4:#a8703f;--wood-3:#d79a5a;
  --sky-1:#4fbfff;--sky-2:#c4f0ff;--grass-1:#9be07a;--grass-2:#6cc85f;--grass-3:#47a84f;
  --green:#5fd46a;--green-d:#2f9a3f;--orange:#ff9a3d;--orange-d:#d2621c;--gold:#ffd23f;--gold-d:#c99000;
  --pink:#ff6f91;--pink-d:#c83e62;--purple:#8b6cf0;--purple-d:#5a3fc0;--blue:#4aa8ff;
  --display:"Fredoka","Arial Rounded MT Bold",system-ui,sans-serif;
  --sans:"Fredoka",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --r:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
main{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:500 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.02;letter-spacing:.005em}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.shell{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}
@media(min-width:720px){.shell{padding:0 32px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons ---------- */
.btn{--c:var(--green);--d:var(--green-d);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:400 1.05rem/1 var(--display);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 82%,#fff),var(--c));border-radius:16px;padding:.8rem 1.3rem .75rem;
  box-shadow:0 5px 0 var(--d),0 10px 18px -8px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.45);
  text-shadow:0 2px 0 rgba(0,0,0,.18);transition:transform .2s var(--ease),box-shadow .2s var(--ease);white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--d),0 14px 22px -8px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.45)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--d),inset 0 2px 0 rgba(255,255,255,.45)}
.btn.sm{font-size:.9rem;padding:.62rem 1rem .58rem;border-radius:13px;box-shadow:0 4px 0 var(--d),inset 0 2px 0 rgba(255,255,255,.45)}
.btn.gold{--c:var(--gold);--d:var(--gold-d);color:var(--ink);text-shadow:none}
.btn.orange{--c:var(--orange);--d:var(--orange-d)}
.btn.purple{--c:var(--purple);--d:var(--purple-d)}

/* Butiksknappar (App Store och Google Play, även läget "kommer snart") */
.store{display:inline-flex;align-items:center;gap:.75rem;padding:.7rem 1.25rem .7rem 1rem;border-radius:16px;background:#111;color:#fff;text-decoration:none;
  box-shadow:0 5px 0 #000,0 14px 24px -12px rgba(0,0,0,.6);transition:transform .2s var(--ease)}
.store svg{width:28px;height:28px;flex:none}
.store small{display:block;font:800 .66rem/1.1 var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.store b{display:block;font:800 1.3rem/1.1 var(--sans);letter-spacing:-.01em}
a.store:hover{transform:translateY(-2px)}
.store.soon{cursor:default}
.cta-row .store+.store{margin-left:0}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(36,22,13,.88);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);color:#fff;border-bottom:1px solid rgba(255,255,255,.06)}
.nav .shell{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:66px}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none}
.brand img{width:36px;height:36px;border-radius:10px;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.brand b{font:400 1.45rem/1 var(--display);letter-spacing:.01em}
.brand span{font:800 .78rem/1 var(--sans);opacity:.55;margin-left:.1rem;margin-top:.25rem}
.nav-links{display:none;gap:1.7rem;font-weight:700;font-size:.95rem}
.nav-links a{text-decoration:none;opacity:.75;transition:opacity .2s}
.nav-links a:hover,.nav-links a[aria-current]{opacity:1}
.nav-links a[aria-current]{box-shadow:0 3px 0 var(--gold)}
@media(min-width:860px){.nav-links{display:flex}}

/* ---------- sky scenery (hero + legal headers) ---------- */
.sky{position:relative;overflow:hidden;color:var(--ink);
  background:radial-gradient(60rem 30rem at 78% 8%,rgba(255,246,176,.9),rgba(255,246,176,0) 60%),linear-gradient(180deg,var(--sky-1) 0%,#8fd8ff 45%,var(--sky-2) 100%)}
.cloud{position:absolute;background:#fff;border-radius:999px;opacity:.85;filter:drop-shadow(0 8px 0 rgba(120,190,230,.35));animation:drift 60s linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:55%;height:180%;left:12%;bottom:20%}
.cloud::after{width:40%;height:140%;right:12%;bottom:25%}
.cloud.c1{width:180px;height:46px;top:16%;left:-4%}
.cloud.c2{width:130px;height:34px;top:34%;left:52%;animation-duration:80s;opacity:.7}
.cloud.c3{width:220px;height:54px;top:9%;left:70%;animation-duration:95s}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(120px)}}
.hills{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:auto;pointer-events:none}

/* ---------- hero ---------- */
.hero .shell{position:relative;z-index:2;display:grid;gap:2.5rem;padding-top:3rem;padding-bottom:7rem;align-items:center}
@media(min-width:900px){.hero .shell{grid-template-columns:1.08fr .92fr;padding-top:4.5rem;padding-bottom:8.5rem}}
.pill{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.75);border:2px solid rgba(255,255,255,.9);color:var(--ink);border-radius:999px;padding:.35rem .9rem .35rem .45rem;font-weight:700;font-size:.85rem;box-shadow:0 6px 18px -10px rgba(0,60,120,.5)}
.pill img{width:26px;height:26px}
.wordmark{display:block;margin-top:1.1rem;font:400 clamp(4.4rem,13vw,8.6rem)/.86 var(--display);letter-spacing:.01em;
  background:linear-gradient(180deg,#ffb36b 0%,#ff7a8a 55%,#ff5d8f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:0;filter:drop-shadow(0 4px 0 #fff) drop-shadow(0 7px 0 rgba(43,29,20,.85)) drop-shadow(0 18px 18px rgba(0,60,120,.25))}
.hero h1{margin:0}
.tagline{display:block;margin-top:1.4rem;font:400 clamp(1.7rem,3.6vw,2.4rem)/1.08 var(--display);color:var(--ink)}
.hero .lede{margin-top:1.1rem;max-width:31rem;font-size:1.15rem;font-weight:700;color:var(--ink-2)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.8rem}
.facts{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.4rem;padding:0;list-style:none}
.facts li{background:rgba(255,255,255,.6);border-radius:999px;padding:.25rem .75rem;font-weight:700;font-size:.82rem;color:var(--ink-2)}

/* phone */
.stage{position:relative;display:flex;justify-content:center;padding:1rem 0}
.phone{position:relative;width:min(300px,72vw);aspect-ratio:1170/1992;border-radius:44px;padding:10px;
  background:linear-gradient(150deg,#3a3f48,#121418 60%);box-shadow:0 0 0 2px #0b0c0f,0 40px 60px -30px rgba(0,40,80,.75),inset 0 0 0 1.5px rgba(255,255,255,.12)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:35px}
.hero .phone{transform:rotate(3deg)}
.float{position:absolute;width:clamp(58px,9vw,92px);filter:drop-shadow(0 10px 10px rgba(0,50,90,.25));animation:bob 3.4s ease-in-out infinite}
.float.f1{left:2%;top:12%;animation-delay:-.4s;transform:rotate(-12deg)}
.float.f2{right:0;top:30%;animation-delay:-1.4s}
.float.f3{left:6%;bottom:12%;animation-delay:-2.2s;width:clamp(50px,7vw,74px)}
.float.f4{right:9%;bottom:3%;animation-delay:-.9s;width:clamp(46px,6vw,64px)}
@keyframes bob{0%,100%{translate:0 0;rotate:-4deg}50%{translate:0 -12px;rotate:4deg}}
.burst{position:absolute;right:-2%;top:6%;font:400 1.5rem/1 var(--display);color:#fff;background:var(--orange);padding:.5rem .8rem .45rem;border-radius:14px;transform:rotate(8deg);
  box-shadow:0 4px 0 var(--orange-d),0 14px 20px -10px rgba(0,0,0,.4);text-shadow:0 2px 0 rgba(0,0,0,.2);animation:pulse 2.4s var(--spring) infinite}
@keyframes pulse{0%,70%,100%{scale:1}80%{scale:1.12}}
@media(max-width:520px){.float.f2{right:-4%}.burst{right:2%}}

/* ---------- sections ---------- */
section.block{position:relative;padding:clamp(4rem,9vw,7rem) 0}
.kicker{display:inline-block;font:900 .8rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--orange-d)}
.h2{margin-top:.8rem;font-size:clamp(2.2rem,5.4vw,3.6rem);max-width:16ch}
.lede-2{margin-top:1rem;font-size:1.15rem;font-weight:700;color:var(--muted);max-width:36rem}
.center{text-align:center}.center .h2,.center .lede-2{margin-left:auto;margin-right:auto}

/* wood section */
.wood{background:radial-gradient(70rem 40rem at 50% -10%,var(--wood-6),var(--wood-8) 60%,var(--wood-9));color:#fff}
.wood .kicker{color:var(--gold)}
.wood .lede-2{color:rgba(255,255,255,.72)}

/* how-to with live board */
.how{display:grid;gap:3rem;align-items:center;margin-top:1rem}
@media(min-width:900px){.how{grid-template-columns:1fr 1fr}}
.steps{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1rem}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:1.1rem 1.2rem;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.steps li.on{background:rgba(255,210,63,.12);border-color:rgba(255,210,63,.45);transform:translateX(6px)}
.steps .n{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;font:400 1.35rem/1 var(--display);color:#fff;background:var(--pink);box-shadow:0 4px 0 var(--pink-d)}
.steps li:nth-child(2) .n{background:var(--orange);box-shadow:0 4px 0 var(--orange-d)}
.steps li:nth-child(3) .n{background:var(--green);box-shadow:0 4px 0 var(--green-d)}
.steps h3{font-size:1.4rem}
.steps p{margin-top:.25rem;color:rgba(255,255,255,.72);font-weight:600}

.demo{position:relative;justify-self:center;width:min(440px,100%)}
.frame{position:relative;padding:14px;border-radius:30px;background:linear-gradient(180deg,#e2a868,#b9773d);box-shadow:0 6px 0 #7a4a22,0 30px 50px -24px rgba(0,0,0,.7),inset 0 2px 0 rgba(255,255,255,.4)}
.grid8{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:10px;border-radius:20px;background:#8e5a30;box-shadow:inset 0 4px 10px rgba(0,0,0,.35)}
.grid8 i{position:relative;aspect-ratio:1;border-radius:22%;background:#d4a06a;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),inset 0 2px 0 rgba(255,255,255,.25)}
.grid8 i img{position:absolute;inset:-8%;width:116%;height:116%;max-width:none}
.grid8 i img.in{animation:drop .35s var(--spring) both}
.grid8 i img.pop{animation:pop .45s var(--ease) forwards}
.grid8 i.hint{background:#e9c08b}
@keyframes drop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes pop{30%{transform:scale(1.25);filter:brightness(1.3)}100%{transform:scale(0);opacity:0}}
.tray{display:flex;justify-content:space-around;align-items:center;margin-top:12px;height:74px;border-radius:18px;background:rgba(0,0,0,.18)}
.tray .piece{display:grid;gap:2px;transition:opacity .3s,transform .3s var(--ease)}
.tray .piece img,.tray .piece span{width:22px;height:22px}
.tray .piece.used{opacity:.15;transform:scale(.8)}
.score{position:absolute;left:50%;top:44%;translate:-50% -50%;font:400 2.6rem/1 var(--display);color:#fff;text-shadow:0 4px 0 var(--orange-d),0 0 20px rgba(255,154,61,.6);pointer-events:none;opacity:0}
.score.go{animation:rise 1.1s var(--ease) forwards}
@keyframes rise{0%{opacity:0;transform:translateY(20px) scale(.6)}20%{opacity:1;transform:translateY(0) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translateY(-40px) scale(1)}}
.hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#fff;font:400 1rem/1 var(--display)}
.hud b{font-size:1.8rem;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.hud span{background:rgba(0,0,0,.25);padding:.4rem .7rem;border-radius:10px;font-size:.85rem;letter-spacing:.04em}

/* feature rows */
.feature{display:grid;gap:2.5rem;align-items:center}
@media(min-width:900px){.feature{grid-template-columns:1fr 1fr;gap:4rem}.feature.flip .media{order:2}}
@media(max-width:600px){.media .phone.back{transform:translate(-34%,8%) rotate(-7deg)}.media .phone.front{transform:translate(16%,0) rotate(4deg)}}
.feature + .feature{margin-top:clamp(4rem,9vw,7rem)}
.media{position:relative;display:flex;justify-content:center}
.media .phone{width:min(290px,68vw)}
.media .phone.back{position:absolute;width:min(250px,56vw);transform:translate(-46%,8%) rotate(-7deg);opacity:.95;z-index:0}
.media .phone.front{z-index:1;transform:translate(22%,0) rotate(4deg)}
.blob{position:absolute;inset:6% 4%;border-radius:42% 58% 55% 45%/48% 42% 58% 52%;z-index:-1}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem;list-style:none;padding:0}
.chips li{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .85rem .45rem .5rem;border-radius:999px;background:#fff;font-weight:700;font-size:.92rem;box-shadow:0 3px 0 var(--line)}
.chips li i{width:22px;height:22px;border-radius:7px;flex:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.ticks{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.8rem}
.ticks li{position:relative;padding-left:2.1rem;font-weight:700;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.15rem;width:1.4rem;height:1.4rem;border-radius:8px;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:0 3px 0 var(--green-d)}
.ticks b{color:var(--ink)}

/* buddies */
.buddies-sec{background:linear-gradient(180deg,var(--paper),var(--cream))}
.worlds{display:grid;gap:.8rem;margin-top:3rem;grid-template-columns:repeat(2,1fr)}
.worlds .world:last-child{grid-column:1/-1;width:calc(50% - .4rem);justify-self:center}
@media(min-width:1000px){.worlds .world:last-child{grid-column:auto;width:auto}}
@media(min-width:1000px){.worlds{grid-template-columns:repeat(5,1fr)}}
.world{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:26px;padding:1rem 1rem 1.5rem;overflow:hidden;box-shadow:0 6px 0 rgba(0,0,0,.18),0 20px 30px -20px rgba(0,0,0,.5);transition:transform .3s var(--ease)}
.world:hover{transform:translateY(-6px) rotate(-1deg)}
.world::after{content:"";position:absolute;left:-15%;right:-15%;bottom:-44px;height:84px;border-radius:50%;background:var(--h);opacity:.85}
.world .tag{position:relative;z-index:1;white-space:nowrap;font:900 clamp(.58rem,1.8vw,.68rem)/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;background:rgba(0,0,0,.22);color:#fff;padding:.4rem .65rem;border-radius:999px}
.world .crew{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;margin:.9rem 0 .5rem;width:100%}
.world .crew img{width:31%;filter:drop-shadow(0 4px 4px rgba(0,0,0,.18))}
.world .crew img:nth-child(n+4){margin-top:-7%}
.world h3{position:relative;z-index:1;font-size:clamp(1.3rem,4.5vw,1.7rem)}
.world p{position:relative;z-index:1;margin-top:.15rem;font-weight:700;font-size:.85rem;opacity:.9}

/* promises */
.promises{display:grid;gap:1rem;margin-top:2.8rem}
@media(min-width:820px){.promises{grid-template-columns:repeat(3,1fr)}}
.promise{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:1.5rem}
.promise .ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--gold);box-shadow:0 4px 0 var(--gold-d)}
.promise:nth-child(2) .ico{background:var(--blue);box-shadow:0 4px 0 #1f6fc0}
.promise:nth-child(3) .ico{background:var(--pink);box-shadow:0 4px 0 var(--pink-d)}
.promise .ico svg{width:28px;height:28px}
.promise h3{margin-top:1.1rem;font-size:1.45rem}
.promise p{margin-top:.4rem;color:rgba(255,255,255,.72);font-weight:600}

/* faq */
.faq{max-width:48rem;margin:2.6rem auto 0;display:grid;gap:.8rem}
.faq details{background:#fff;border-radius:18px;box-shadow:0 4px 0 var(--line);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.3rem;font-weight:700;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:9px;background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b1d14' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/60% no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 1.3rem 1.2rem;color:var(--ink-2);font-weight:600}
.faq a{color:var(--orange-d);font-weight:700}

/* final cta */
.final{padding:clamp(4.5rem,10vw,7rem) 0 clamp(8rem,14vw,11rem);text-align:center}
.final .h2{margin:0 auto;font-size:clamp(2.6rem,7vw,4.6rem);color:var(--ink);text-shadow:0 3px 0 #fff}
.final .lede-2{margin:1rem auto 0;color:#1c3a52}
.final .cta-row{justify-content:center}
.final .crowd{display:flex;justify-content:center;gap:clamp(.2rem,1.5vw,.8rem);margin-bottom:1.6rem}
.final .crowd img{width:clamp(48px,8vw,78px);animation:bob 3s ease-in-out infinite}
.final .crowd img:nth-child(2n){animation-delay:-1s}.final .crowd img:nth-child(3n){animation-delay:-2s}

/* ---------- footer ---------- */
footer{background:var(--wood-9);color:rgba(255,255,255,.62);font-size:.92rem;font-weight:700}
footer .shell{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;align-items:center;justify-content:space-between;padding-top:2.4rem;padding-bottom:2.4rem}
footer nav{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem}
footer a{text-decoration:none}
footer a:hover{color:var(--gold)}
footer .brand b{color:#fff;font-size:1.25rem}
footer .brand img{width:30px;height:30px}

/* ---------- legal / support pages ----------
   Same sky header as the rest of the site, then a calm, roomy reading layout:
   a light index on the left, one readable column (~68ch), sections as soft cards. */
.doc-head .shell{position:relative;z-index:2;padding-top:3rem;padding-bottom:6rem;max-width:1060px}
.doc-head h1{font-size:clamp(2.6rem,7vw,4.2rem);color:var(--ink);text-shadow:0 3px 0 #fff,0 10px 30px rgba(0,60,120,.2)}
.doc-head .lede{margin-top:.9rem;max-width:36rem;font-size:1.15rem;font-weight:700;color:#18344a}
.doc-head .stamp{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;background:rgba(255,255,255,.8);border-radius:999px;padding:.35rem .85rem;font-weight:700;font-size:.82rem;color:var(--ink-2)}
.doc-head .stamp::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.doc-head .crumb{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.9rem;color:#18344a;text-decoration:none;margin-bottom:.9rem}
.doc-head .crumb:hover{text-decoration:underline}

.doc-wrap{background:var(--cream);padding:0 0 clamp(3rem,7vw,5rem)}
.doc-wrap .shell{max-width:1100px;display:grid;gap:2.2rem;align-items:start}
.doc-wrap .shell>*{min-width:0}
@media(min-width:960px){.doc-wrap .shell{grid-template-columns:240px minmax(0,1fr)}.paper{margin-top:-3rem}}
@media(max-width:959px){.doc-wrap .shell{gap:1rem}}

/* index */
.toc{position:relative;z-index:2;margin-top:-3rem;background:#fff;border:2px solid var(--line);border-radius:20px;padding:.9rem .8rem;box-shadow:0 4px 0 var(--line)}
@media(min-width:960px){.toc{position:sticky;top:90px;margin-top:2.2rem;background:var(--paper);box-shadow:none;padding:1.1rem .8rem 1rem}.toc summary{pointer-events:none}.toc summary::after{display:none}}
.toc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font:700 .74rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:.1rem .5rem}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"";width:22px;height:22px;border-radius:7px;background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b1d14' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/60% no-repeat;transition:transform .3s var(--ease)}
.toc details[open] summary::after{transform:rotate(180deg)}
.toc details[open] summary{margin-bottom:.7rem}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;counter-reset:t}
.toc li{counter-increment:t}
.toc a{display:flex;gap:.55rem;align-items:baseline;text-decoration:none;font-weight:700;font-size:.9rem;padding:.42rem .55rem;border-radius:10px;color:var(--ink-2);line-height:1.3;transition:background .2s,color .2s}
.toc a::before{content:counter(t);flex:none;width:1.35rem;font:400 .85rem/1 var(--display);color:var(--wood-4);text-align:right}
.toc a:hover{background:var(--cream)}
.toc a.on{background:#fff3c4;color:var(--ink)}
.toc a.on::before{color:var(--orange-d)}

/* reading column */
.paper{position:relative;margin-top:0;max-width:760px;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;overflow-wrap:break-word}
.paper section{background:#fff;border-radius:22px;padding:clamp(1.4rem,3.5vw,2.2rem) clamp(1.25rem,4vw,2.5rem);box-shadow:0 4px 0 var(--line),0 18px 36px -30px rgba(80,50,20,.4)}
.paper h2{display:flex;align-items:center;gap:.75rem;font-size:clamp(1.45rem,3.2vw,1.8rem);line-height:1.15;color:var(--ink)}
.paper h2 .n{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;font-size:1rem;color:var(--wood-6);background:var(--cream);border:2px solid var(--cream-2)}
.paper h3{margin-top:1.5rem;font:700 1.08rem/1.35 var(--sans);color:var(--ink)}
.paper p,.paper ul,.paper .table{margin-top:.95rem}
.paper p,.paper li{font-size:1.06rem;line-height:1.75;color:#3d2c20;font-weight:500}
.paper ul{list-style:none;padding:0}
.paper li{position:relative;padding-left:1.6rem;margin-top:.6rem}
.paper li::before{content:"";position:absolute;left:.2rem;top:.68em;width:8px;height:8px;border-radius:50%;background:var(--wood-3)}
.paper strong,.paper b{color:var(--ink);font-weight:700}
.paper a{overflow-wrap:anywhere;color:var(--orange-d);font-weight:700;text-decoration-thickness:2px;text-underline-offset:3px}

/* the short version: a friendly summary card */
.paper section#short{background:linear-gradient(180deg,#f2fbe9,#fff 70%);box-shadow:0 4px 0 #cfe9b8,0 18px 36px -30px rgba(40,90,30,.45)}
.paper #short h2 .n{color:#fff;background:var(--green);border-color:var(--green-d)}
.paper #short li{padding-left:2rem}
.paper #short li::before{left:0;top:.38em;width:1.2rem;height:1.2rem;border-radius:6px;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/72% no-repeat}

/* data table: each row becomes an easy-to-scan card */
.paper .table{border:0;overflow:visible}
.paper table,.paper tbody,.paper tr,.paper td{display:block;width:100%}
.paper thead{display:none}
.paper tbody{display:grid;gap:.7rem}
.paper tr{background:var(--paper);border:2px solid var(--cream-2);border-radius:16px;padding:1rem 1.1rem}
.paper td{padding:0;border:0;font-size:.98rem;line-height:1.6;color:#3d2c20}
.paper td+td{margin-top:.55rem}
.paper td:first-child{font-weight:700;color:var(--ink);font-size:1.02rem}
.paper td:first-child::before{display:none}
.paper td::before{content:attr(data-label);display:block;font:700 .7rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--wood-4)}
@media(min-width:720px){.paper td:not(:first-child){display:grid;grid-template-columns:8.5rem 1fr;gap:1rem}.paper td::before{padding-top:.2rem}}

.note{margin-top:1rem;padding:1rem 1.2rem;border-radius:16px;background:#fff6d6;border:2px solid #ffe28a;font-weight:700;color:var(--ink-2)}
.docs-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem;padding:0 .2rem}
.docs-nav a{text-decoration:none}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Honk extras */
.display-w{font-weight:700}
.road{position:relative;height:46px;background:#4a4f5c;border-top:4px solid #f4e2c3;border-bottom:4px solid #f4e2c3;overflow:hidden}
.road::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:repeating-linear-gradient(90deg,#fff 0 28px,transparent 28px 56px)}
.road .car{position:absolute;top:8px;width:48px;height:26px;border-radius:9px;animation:drive 9s linear infinite}
.road .car::after{content:"";position:absolute;left:12px;top:5px;width:20px;height:16px;border-radius:5px;background:rgba(255,255,255,.55)}
.road .car.b{animation-delay:-3s}.road .car.c{animation-delay:-6s}
@keyframes drive{from{left:-60px}to{left:100%}}
@media (prefers-reduced-motion:reduce){.road .car{animation:none;left:20%}.road .car.b{left:50%}.road .car.c{left:80%}}
.shot-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
.shot-row .phone{position:relative;width:min(220px,42vw)}
.phone{aspect-ratio:390/860}.phone img{width:100%;height:100%;object-fit:cover;object-position:top}
h1,h2,h3,.h2,.wordmark,.tagline,.brand b,.btn,.kicker{font-weight:700}.wordmark{font-weight:700}