/* Quizzy — sketchbook look: ink outlines, Amatic SC headings, Playfair accents, chalk-green fills. */
@font-face{font-family:'Josefin Sans';src:url('/assets/JosefinSans.ttf') format('truetype');font-weight:100 700;font-display:swap}
@font-face{font-family:'Amatic SC';src:url('/assets/amatic-sc-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'Playfair Display';src:url('/assets/playfair-display-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/assets/playfair-display-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --ink:#1d2939;--ink-soft:#344650;--muted:#52636d;--line:#91a5af;
  --paper:#f4f8f9;--sky:#d3e6eb;--chalk:#e3ebc8;--chalk-hi:#edf2d8;--mist:#e5edf1;
  --hand:'Amatic SC',sans-serif;--serif:'Playfair Display',Georgia,serif;--sans:'Josefin Sans',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);--nav-h:68px;
  --squiggle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -1 124 20' preserveAspectRatio='none'%3E%3Cpath d='M3 9c11-7 21-7 32 0s21 7 32 0 21-7 32 0 12-5 18-3' fill='none' stroke='%231d2939' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  font-family:var(--sans);color:var(--ink);background:#d9e1e5;font-synthesis:none
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 32px)}
body{margin:0;overflow-x:clip;background:linear-gradient(145deg,#e5edf1 0%,#d9e1e5 48%,#b6c6cf 100%);background-attachment:fixed}
button,input{font:inherit;color:inherit}
button,a.button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.6}
a{color:inherit;text-underline-offset:5px}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #68d9c1;outline-offset:4px}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
p{line-height:1.65}

main,footer{max-width:1200px;margin:auto;padding-inline:48px}
h1,h2,h3{font-family:var(--hand);font-weight:700;letter-spacing:.01em;margin:0}
h1{font-size:clamp(76px,10vw,132px);line-height:.9;margin-bottom:28px}
h2{font-size:clamp(58px,6.6vw,88px);line-height:.92;margin-bottom:18px}
h3{font-size:40px;line-height:1}
.kicker{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--muted);margin:0 0 10px}
.hero h1 .scribble,.install-section .scribble{background-size:100% .16em}
.scribble{display:inline-block;background:var(--squiggle) 0 100%/100% .22em no-repeat;padding-bottom:.13em}
.small{font-size:14px;line-height:1.65;color:#44555f}

/* Buttons: chalk pills with an ink outline and a drawn drop shadow. */
.button{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:48px;padding:10px 24px 12px;background:var(--chalk);color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;box-shadow:2px 3px 0 var(--ink);font-family:var(--serif);font-size:20px;line-height:1.1;text-decoration:none;transition:background-color .4s ease,box-shadow .45s var(--ease),transform .45s var(--ease)}
.button:hover:not(:disabled){background:var(--chalk-hi);box-shadow:2px 5px 0 var(--ink);transform:translateY(-2px)}
.button:active:not(:disabled){box-shadow:none;transform:translateY(1px)}
.secondary{background:transparent}
.secondary:hover:not(:disabled){background:#ffffff80}
.text-link{font-family:var(--serif);font-style:italic;font-size:19px}
.text-link span{padding-left:4px}
.text-button{border:0;background:none;padding:12px 8px;color:var(--muted);text-decoration:underline;font-size:14px}

/* Floating navbar. */
.site-nav{position:fixed;inset:14px 0 auto;z-index:50;padding:0 24px;pointer-events:none}
.nav-pill{pointer-events:auto;max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;min-height:var(--nav-h);padding:5px 10px 5px 18px;background:color-mix(in srgb,var(--sky) 88%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1.5px solid var(--ink);border-radius:999px;box-shadow:0 10px 30px #14232d12;transition:box-shadow .45s var(--ease)}
.site-nav.is-scrolled .nav-pill{box-shadow:0 12px 34px #14232d24}
.nav-avatar{justify-self:start;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;transition:transform .45s var(--ease)}
.nav-avatar:hover{transform:translateY(-2px) rotate(-4deg)}
.nav-avatar svg{width:40px;height:40px;fill:var(--chalk);stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.nav-brand{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.nav-brand img{width:46px;height:50px;object-fit:contain;transition:transform .5s var(--ease)}
.nav-brand:hover img{transform:rotate(-6deg) scale(1.04)}
.nav-word{display:grid;grid-template-columns:0fr;transition:grid-template-columns .5s var(--ease)}
.nav-word>span{min-width:0;overflow:hidden;font-family:var(--hand);font-weight:700;font-size:46px;line-height:1;letter-spacing:.02em;opacity:0;transform:translateX(-12px);transition:opacity .35s ease,transform .5s var(--ease),padding .5s var(--ease)}
.site-nav.is-scrolled .nav-word{grid-template-columns:1fr}
.site-nav.is-scrolled .nav-word>span{opacity:1;transform:none;padding-left:12px;transition-delay:.06s}
.nav-cta{justify-self:end;font-family:var(--serif);font-size:20px;line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap;background:var(--chalk);border:1.5px solid var(--ink);border-radius:999px;padding:9px 20px 11px;box-shadow:2px 3px 0 var(--ink);transition:transform .45s var(--ease),box-shadow .45s var(--ease),background-color .4s ease}
.nav-cta:hover{background:var(--chalk-hi);transform:translateY(-2px);box-shadow:2px 5px 0 var(--ink)}
.nav-cta:active{transform:translateY(1px);box-shadow:none}

/* Wordmark intro: the pencil writes QUIZZY, then "The extension"; the U hops. */
.intro{min-height:100svh;overflow-x:clip;display:grid;place-items:center;padding:calc(var(--nav-h) + 40px) 0 40px}
.mark{position:relative;margin:0;font-size:inherit;display:flex;flex-direction:column;align-items:flex-start;line-height:1;color:var(--ink)}
.mark-word{display:block;white-space:nowrap;font-family:var(--hand);font-weight:700;font-size:clamp(130px,24vw,300px);line-height:.92;letter-spacing:.015em}
.mark-word>span{display:inline-block}
.mark-u{transform:translateY(-.075em)}
.mark-tag{display:block;margin:-.32em 0 0 24%;font-family:var(--serif);font-style:italic;font-size:clamp(28px,4.6vw,58px);letter-spacing:.05em;white-space:nowrap}
.pencil{position:absolute;left:0;top:0;width:clamp(150px,26vw,330px);height:auto;transform-origin:0 50%;pointer-events:none;opacity:0;overflow:visible;filter:drop-shadow(3px 4px 0 #14232d1f)}
.pencil path{stroke:none}.pencil .pencil-lines{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.pencil-wood{fill:#f1c9a5}.pencil-lead{fill:var(--ink)}.pencil-body{fill:#f5a841}.pencil-shade{fill:#d9772a}.pencil-shine{fill:#f8c06f}.pencil-ferrule{fill:#eadcdc}.pencil-eraser{fill:#f0a2a8}
/* Hidden until the intro script takes over; if it never runs, reveal anyway. */
.mark-word,.mark-tag{animation:mark-fallback 0s 1.4s both}
@keyframes mark-fallback{from{clip-path:inset(0 100% 0 0)}to{clip-path:none}}
.mark.is-js .mark-word,.mark.is-js .mark-tag{animation:none;color:transparent}
.mark.is-js .mark-u{transform:none}
.mark.is-done .mark-word,.mark.is-done .mark-tag{color:inherit}
.mark.is-done .mark-u{transform:translateY(-.075em)}
.mark-ink{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.mark-ink text{fill:var(--ink)}
.mark-ink-u{transform-box:fill-box;transform-origin:50% 100%}
.mark-ink-word{font-family:var(--hand);font-weight:700}
.mark-ink-tag{font-family:var(--serif);font-style:italic}

/* Hero. */
.hero{display:flex;flex-direction:column;align-items:center;padding:110px 0 0}
.hero .demo-stage{width:440px;max-width:100%}
.game-strip{margin-top:300px}
.hero-intro{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--muted);margin:0 0 18px}
.lead{font-size:21px;line-height:1.6;max-width:430px;margin:0 0 30px;color:var(--ink-soft)}
.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero .small{margin-top:18px}
.demo-stage{position:relative;min-width:0}
.demo-stage iframe{display:block;border:0;width:100%;height:350px;background:transparent}
.demo-note{position:absolute;top:-58px;left:-8px;margin:0;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--muted);transform:rotate(-4deg)}
.doodle-arrow{position:absolute;left:100%;top:6px;width:76px;height:46px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* Game marquee: a strip of drawing tape. */
.game-strip{margin-inline:calc(50% - 50vw);padding:20px 0;overflow:hidden}
.marquee{transform:rotate(-1.6deg);margin-inline:-5vw;background:var(--ink);color:#eef3f5;box-shadow:0 10px 24px #14232d1f;padding:12px 0 6px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track>div{display:flex;align-items:center;gap:38px;padding-right:38px;font-family:var(--hand);font-weight:700;font-size:60px;line-height:1;letter-spacing:.03em;white-space:nowrap}
.marquee-track i{font-style:normal;font-size:24px;color:var(--chalk);transform:translateY(-4px)}
.marquee-track small{font-size:.5em;color:#b9c8cf}
.marquee-note{font-family:var(--serif);font-style:italic;font-weight:400;font-size:30px;color:var(--chalk);letter-spacing:.02em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* How it works: the section pins while three notes are slapped onto the page one
   by one and taped down. Pinned mode (.how-pinned) is turned on by motion.mjs only on
   screens with room for the whole board; otherwise each note lands as it scrolls in. */
.how-section{padding:40px 0 70px}
.how-title{text-align:center;font-size:clamp(64px,7.4vw,104px);margin:0}
.how-sticky{display:flex;flex-direction:column;align-items:center;gap:clamp(28px,6svh,72px)}
.how-stage{position:relative;width:100%;max-width:440px;display:flex;flex-direction:column;gap:40px;padding-top:14px}
.how-pinned .how-pin{height:calc(100svh + 3 * 42svh)}
.how-pinned .how-sticky{position:sticky;top:0;height:100svh;justify-content:center;padding:calc(var(--nav-h) + 24px) 0 24px}
.how-pinned .how-stage{display:block;width:800px;max-width:none;height:620px;padding:0;zoom:var(--stage-zoom,1)}
.how-pinned .note{position:absolute;width:312px}
.how-pinned .note:nth-child(1){left:190px;top:0}
.how-pinned .note:nth-child(2){left:470px;top:236px}
.how-pinned .note:nth-child(3){left:6px;top:396px}
.note{--r:0deg;position:relative;background:var(--paper);border:1.5px solid var(--ink);border-radius:22px;box-shadow:3px 5px 0 var(--ink);padding:26px 24px 28px;transform:rotate(var(--r));transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.note{--spin:26deg}
.note:nth-child(2){background:var(--chalk);--fly-x:14vw;--spin:32deg}
.note:nth-child(3){background:var(--sky);--fly-x:-14vw;--spin:-30deg}
.note.is-landed:hover{transform:rotate(calc(var(--r) * .4)) translateY(-6px);box-shadow:4px 9px 0 var(--ink)}
.note::before{content:'';position:absolute;top:-12px;left:50%;width:76px;height:22px;margin-left:-38px;background:#ffffffb3;border:1px solid #ffffffe0;transform:rotate(-2deg);box-shadow:0 2px 4px #14232d14;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.step-number{display:inline-grid;place-items:center;width:40px;height:40px;border:2px solid var(--ink);border-radius:52% 46% 55% 44%/48% 55% 45% 52%;font-family:var(--hand);font-weight:700;font-size:27px;line-height:1;padding-top:2px}
.how-stage h3{font-size:36px;margin:16px 0 10px}
.how-stage p,.how-stage li{font-size:16px;line-height:1.6;color:var(--ink-soft)}
.how-stage p{margin:0}
.how-stage ul{margin:4px 0 0;padding-left:1.2em}
.how-fine{margin:28px 0 0}
.how-cue{display:none}
.how-pinned .how-cue{display:flex;align-items:center;gap:8px;position:absolute;bottom:22px;left:50%;margin:0;transform:translateX(-50%);font-family:var(--serif);font-style:italic;font-size:16px;color:var(--muted);transition:opacity .5s ease}
.how-cue svg{width:14px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:cue-bob 1.6s var(--ease) infinite}
.how-section.is-complete .how-cue{opacity:0}
@keyframes cue-bob{50%{transform:translateY(5px)}}

/* Waiting notes are invisible; landing drops each from above the viewer, too big
   and spinning, slams it flat with a squash, then a strip of tape smacks on. */
.how-js .note:not(.is-landed,.is-leaving){opacity:0;visibility:hidden}
.how-js .note:not(.is-landed,.is-leaving)::before{opacity:0}
.note.is-landed{animation:note-land 1s cubic-bezier(.2,.7,.2,1) var(--delay,0s) backwards}
.note.is-landed::before{animation:tape-slap .55s cubic-bezier(.2,.9,.25,1.2) calc(var(--delay,0s) + .62s) backwards}
.how-stage.is-thump{animation:stage-thump .42s ease-out}
@keyframes note-land{
  0%{opacity:0;transform:translate(var(--fly-x,0),-34vh) rotate(calc(var(--r) + 16deg)) scale(1.9);box-shadow:3px 5px 0 #1d293900,0 90px 90px #14232d00}
  20%{opacity:1}
  58%{transform:translate(0,0) rotate(calc(var(--r) - 1.2deg)) scale(.95);box-shadow:1px 2px 0 var(--ink),0 6px 10px #14232d26}
  74%{transform:rotate(calc(var(--r) + .5deg)) scale(1.025)}
  88%{transform:rotate(var(--r)) scale(.995)}
  100%{transform:rotate(var(--r)) scale(1);box-shadow:3px 5px 0 var(--ink),0 0 0 #14232d00}
}
@keyframes tape-slap{0%{opacity:0;transform:translateY(-26px) rotate(-14deg) scale(1.6,1.3)}55%{opacity:1;transform:translateY(2px) rotate(-1deg) scale(.96,1)}100%{opacity:1;transform:rotate(-2deg)}}
/* Leaving (scrolling back up): the tape is ripped off in one yank, the note peels
   up a little, then drops away under gravity, spinning and fading. */
.note.is-leaving{pointer-events:none;animation:note-fall .78s cubic-bezier(.5,0,.75,.2) calc(var(--delay,0s) + .14s) both}
.note.is-leaving::before{animation:tape-rip .3s cubic-bezier(.4,0,.7,1) var(--delay,0s) both}
@keyframes tape-rip{0%{opacity:1;transform:rotate(-2deg)}30%{opacity:1;transform:translate(6px,-6px) rotate(4deg) scale(1.04,.9)}100%{opacity:0;transform:translate(110px,-80px) rotate(42deg) scale(1.1)}}
@keyframes note-fall{
  0%{opacity:1;transform:rotate(var(--r))}
  16%{transform:translateY(-14px) rotate(calc(var(--r) - var(--spin) * .15)) scale(1.02)}
  75%{opacity:1}
  100%{opacity:0;transform:translate(calc(var(--fly-x,0px) * .5),60vh) rotate(calc(var(--r) + var(--spin))) scale(.96)}
}
@keyframes stage-thump{0%{transform:none}25%{transform:translateY(5px)}55%{transform:translateY(-2px)}100%{transform:none}}

/* Scroll reveals for the rest of the page (reveal.mjs adds .is-in). */
.reveal-js [data-reveal]:not(.is-in){opacity:0;translate:0 30px}
.reveal-js [data-reveal].is-in{transition:opacity .8s ease var(--reveal-delay,0s),translate .9s var(--ease) var(--reveal-delay,0s),transform .55s var(--ease),box-shadow .55s var(--ease),background-color .4s ease}

/* Plans and packs. */
#plans{background:#f4f8f9d9;border:1.5px solid var(--ink);border-radius:38px;box-shadow:4px 6px 0 var(--ink);padding:50px 40px}
.plan-heading{text-align:center}.plan-heading h2{margin-bottom:0}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:56px 0 0;align-items:stretch}
.plan{display:flex;flex-direction:column;padding:30px 24px 26px;background:var(--mist);border:1.5px solid var(--ink);border-radius:28px;box-shadow:2px 4px 0 var(--ink);transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.plan:hover{transform:translateY(-5px);box-shadow:3px 9px 0 var(--ink)}
.plan.is-current{background:var(--ink);color:var(--paper)}
.plan-title{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 10px}
.plan h3{margin:0 0 16px;font-size:48px}
.plan-badge{padding:5px 12px 4px;border-radius:999px;background:var(--chalk);color:var(--ink);border:1.5px solid var(--ink);font-family:var(--serif);font-style:italic;font-size:14px}
.price{font-family:var(--hand);font-weight:700;font-size:64px;line-height:1}
.price small{display:block;font-family:var(--sans);font-size:14px;font-weight:400;margin-top:8px}
.price del:not([hidden]){font-size:.5em;opacity:.7;margin-right:.3em;vertical-align:middle}
.plan p{font-size:15px;line-height:1.85}
.plan p strong{font-weight:600}
.plan>p{margin:14px 0 0}
.plan>p[data-offer]{margin-top:10px}
.plan>p:last-of-type{margin-bottom:28px}
.plan .button{width:100%;margin-top:auto;font-size:18px;padding-inline:12px}
.plan.is-current .button{background:var(--paper)}
.coming-soon{max-width:32ch;color:#44555f;font-size:15px;line-height:1.45}
.plan-note{text-align:center}
#billing-note{text-align:center;margin-bottom:0}
.packs{padding:150px 8px 160px}
.packs-heading{text-align:center}.packs-heading h2{margin-bottom:0}
.pack-grid{display:grid;grid-template-columns:repeat(2,minmax(0,340px));justify-content:center;gap:24px 58px;margin-top:70px}
.pack{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border:1.5px solid var(--ink);border-radius:24px;padding:24px 24px 26px;background:var(--sky);color:var(--ink);box-shadow:2px 4px 0 var(--ink);text-align:left;transition:background-color .4s ease,transform .5s var(--ease),box-shadow .5s var(--ease)}
.pack:last-child{background:var(--chalk)}
.pack:hover:not(:disabled){transform:translateY(-4px);box-shadow:3px 8px 0 var(--ink)}
.pack:active:not(:disabled){transform:translateY(1px);box-shadow:none;transition-duration:.12s}
.pack:disabled{opacity:1;cursor:default}
.pack strong{font-family:var(--hand);font-size:40px;line-height:1}
.pack span{font-size:14px;color:var(--ink-soft)}

/* Account. */
.account{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;background:var(--sky);border:1.5px solid var(--ink);border-radius:38px;box-shadow:4px 6px 0 var(--ink);padding:48px;scroll-margin-top:calc(var(--nav-h) + 32px)}
.account-intro>img{object-fit:contain;margin-bottom:18px;transform:rotate(-6deg)}
.account-intro p{font-size:18px}
#account-summary:empty,#renewal:empty{display:none}
.account .small{font-size:13px}
.account-intro .account-fine{max-width:260px}
.balance{font-family:var(--hand);font-size:48px!important;font-weight:700;line-height:1}
.account-form{background:var(--paper);border:1.5px solid var(--ink);border-radius:28px;padding:30px}
.account-title{font-size:44px;margin:0 0 6px}
#message{font-size:15px;min-height:24px;margin:8px 0 16px}
#message.error{color:#8d2640}
#auth-controls>.button{width:100%;margin:0 0 12px;font-size:19px;white-space:nowrap}
.google-button{background:#fff}
.google-g{width:22px;height:22px;flex:none}
form label{display:block;font-size:14px;font-weight:600;margin:13px 0}
input{display:block;width:100%;padding:13px 15px 11px;border:1.5px solid var(--ink);border-radius:14px;background:#fff;margin-top:8px;font-size:17px}
input::placeholder{color:#7a8a93;font-size:15px}
.button-row{display:flex;gap:10px;flex-wrap:wrap}.button-row .button{flex:1}
#trial-check{margin-top:8px}
#connect{margin-top:18px;width:100%}
#member-controls{display:flex;gap:10px;flex-wrap:wrap}
#game-options{display:flex;flex-wrap:wrap;gap:16px;margin:16px 0}#game-options label{display:flex;align-items:center;gap:6px}#game-options input{width:auto}

/* Sign-in steps: choose Google or email first; the email step shows only the form. */
.auth-or{display:flex;align-items:center;gap:14px;margin:4px 0 16px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--muted)}
.auth-or::before,.auth-or::after{content:'';flex:1;border-top:2px dashed var(--line)}
[data-auth-mode=choose] #email-form,[data-auth-mode=google] #email-form,[data-auth-mode=guest] #email-form{display:none}
[data-auth-mode=choose] #guest{display:none!important}
[data-auth-mode=email] #google,[data-auth-mode=email] #email-toggle,[data-auth-mode=email] #guest,[data-auth-mode=email] .auth-or{display:none!important}
#email-form label:first-of-type{margin-top:4px}
/* Switching sign-in steps fades the new step in instead of snapping. */
#email-form,#auth-controls>.button,.auth-or,#member-controls,#game-settings{animation:step-in .45s var(--ease) both}
@keyframes step-in{from{opacity:0;translate:0 8px}}
.back-link{border:0;background:none;padding:0;margin:0 0 6px;font-family:var(--serif);font-style:italic;font-size:16px;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.button-row{margin-top:20px}.button-row .button{white-space:nowrap;font-size:18px;padding-inline:14px}

/* The popular plan: a thick chalk-green band between two ink lines, like the buttons. */
.plan.plus{padding:26.5px 20.5px 22.5px;border:5px solid var(--chalk);outline:1.5px solid var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink),3px 5px 0 var(--ink)}

/* Navbar wordmark: drawn by a small pencil on the way down, rubbed out on the way up. */
.nav-brand{position:relative}
.nav-word>span{white-space:nowrap}
.nav-word i{font-style:normal;display:inline-block}
.site-nav.is-js .nav-word>span{opacity:1;transform:none;transition:padding .3s var(--ease)}
.site-nav.is-js .nav-word{transition-duration:.3s}
.nav-brand.is-inking .nav-word i{color:transparent}
.nav-ink{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.nav-ink text{fill:var(--ink);font-family:var(--hand);font-weight:700}
.pencil.nav-pencil{width:96px;z-index:2;filter:drop-shadow(2px 2px 0 #14232d1f)}

/* Install + FAQ + footer. */
.install-section{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:center;padding:120px 8px 70px}
.install-section p{margin-top:0;font-size:19px;color:var(--ink-soft)}
.install-section .button{margin-top:10px}
.faq-section{padding:40px 8px 100px}
.faq-section h2{margin-bottom:30px}
details{border-top:2px dashed var(--line);padding:22px 0}
details:last-child{border-bottom:2px dashed var(--line)}
summary{cursor:pointer;font-family:var(--serif);font-size:23px;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';font-family:var(--hand);font-weight:700;font-size:38px;line-height:.7;transition:transform .4s var(--ease)}
details[open] summary:after{transform:rotate(45deg)}
/* Answers slide open where the browser can animate to auto height; elsewhere they snap. */
:root{interpolate-size:allow-keywords}
details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .5s var(--ease),opacity .4s ease,content-visibility .5s allow-discrete}
details[open]::details-content{block-size:auto;opacity:1}
summary{transition:color .3s ease}
summary:hover{color:var(--ink-soft)}
details p{max-width:770px;color:var(--ink-soft);font-size:17px;margin-bottom:0}
footer{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-block:34px 40px;border-top:1.5px solid var(--ink)}
footer p{font-family:var(--serif);font-style:italic;font-size:18px}
footer small{font-family:var(--sans);font-style:normal;font-size:12px;color:#44555f}
footer>div{display:flex;flex-direction:column;gap:12px;font-size:14px}

/* Brand lockup (footer, support and privacy pages). */
.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-family:var(--hand);font-weight:700;font-size:44px;letter-spacing:.02em;color:var(--ink)}
.brand img{width:40px;height:46px;object-fit:contain}
.brand span{color:var(--ink)}
.nav{max-width:1200px;margin:auto;padding:24px 48px;display:flex;justify-content:space-between;align-items:center}
.policy{max-width:780px;margin-bottom:70px}
.policy h1{font-size:72px;margin-top:30px}
.policy h2{font-size:48px;margin-top:35px}
.policy p{font-size:17px;line-height:1.8}

/* Extension sign-in (opened with ?redirect=): only the account card. */
.connecting .intro,.connecting .hero,.connecting .game-strip,.connecting .how-section,.connecting #plans,.connecting .packs,.connecting .install-section,.connecting .faq-section,.connecting footer,.connecting .account-title,.connecting .account-fine,.connecting .account-intro>img,.connecting .nav-avatar,.connecting .nav-cta{display:none}
.connecting .site-nav{position:static;padding:20px 22px 6px}
.connecting .nav-pill{grid-template-columns:1fr;justify-items:center;max-width:466px}
.connecting .nav-word{grid-template-columns:1fr}.connecting .nav-word>span{opacity:1;transform:none;padding-left:10px}
.connecting main{max-width:510px;padding-inline:22px}
.connecting .account{display:block;margin:12px 0 28px;padding:24px;border-radius:30px}
.connecting .account>div+div{margin-top:18px}
.connecting .account-form{padding:22px}
.connecting .account h2{font-size:48px}.connecting .account h2 br{display:none}
.connecting #account-summary{font-size:15px}

@media(max-width:850px){
  main,footer{padding-inline:26px}
  .account{gap:30px;padding:32px}
  .plan-grid{gap:12px}.plan{padding:24px 16px}
  .marquee-track>div{font-size:50px}
}
@media(max-width:650px){
  :root{--nav-h:56px}
  main,footer{padding-inline:20px}
  h1{font-size:70px;margin-bottom:22px}
  h2{font-size:56px}
  .site-nav{inset-block-start:10px;padding:0 12px}
  .nav-pill{display:flex;justify-content:space-between;gap:8px;padding:4px 6px 4px 8px}
  .nav-avatar{width:40px;height:40px}.nav-avatar svg{width:34px;height:34px}
  .nav-brand img{width:36px;height:40px}.nav-word>span{font-size:34px}
  .site-nav.is-scrolled .nav-word>span{padding-left:7px}
  .nav-cta{font-size:16px;padding:8px 13px 9px}
  .intro{min-height:78svh}
  .mark-tag{margin-top:-.25em}
  .hero{padding-top:90px}
  .game-strip{margin-top:140px}
  .lead{font-size:19px}
  .demo-stage{max-width:470px;width:100%;justify-self:center}
  .demo-note{top:-50px;left:4px}
  .marquee-track>div{font-size:44px;gap:26px;padding-right:26px}.marquee-note{font-size:22px}
  .how-section{padding:30px 0 50px}
  #plans{padding:34px 18px;border-radius:30px}
  .plan-grid{grid-template-columns:1fr;gap:16px}
  .price small{display:inline;margin-left:8px}
  .account,.install-section{grid-template-columns:1fr}
  .packs{padding:90px 0}
  .pack-grid{grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
  .pack{padding:18px 14px}.pack strong{font-size:30px}.pack span{font-size:12px}
  .account{padding:22px;gap:22px;border-radius:30px}
  .account-form{padding:22px 18px}
  .account-intro>img{width:49px;height:60px}
  .install-section{gap:16px;padding:80px 0 40px}
  .faq-section{padding:30px 0 60px}
  summary{font-size:19px}
  footer{flex-wrap:wrap;gap:16px}
  footer>div{flex-direction:row;flex-wrap:wrap;gap:20px;width:100%}
  .nav{padding:20px}
  .connecting main{padding:0 12px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .mark-word,.mark-tag{clip-path:none}.mark .mark-u{transform:translateY(-.075em)}
}
@media(prefers-reduced-transparency:reduce){#plans,.nav-pill{background:var(--paper)}}