/* Paper-Cards website. Same palette as the app (paper gray, ink, one teal, yellow only as a highlighter). */
:root{color-scheme:light;--bg:#f3f4f2;--card:#fff;--ink:#151917;--dim:rgba(21,25,23,.72);--line:rgba(21,25,23,.14);--accent:#0b6e6a;--on:#fff;--mark:#ffe45e;--ok:#1f9d55;--bad:#c0281c;--display:"Bricolage Grotesque","Atkinson Hyperlegible",system-ui,sans-serif;--body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif}
html.dark{color-scheme:dark;--bg:#0f1312;--card:#171d1b;--ink:#edf3f0;--dim:rgba(237,243,240,.72);--line:rgba(255,255,255,.14);--accent:#2dd4bf;--on:#06201d;--ok:#4ade80;--bad:#ff9b8c}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--body);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0;text-wrap:balance}p{margin:0;text-wrap:pretty}a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}[id]{scroll-margin-top:84px}[hidden]{display:none!important}
.skip{position:absolute;left:12px;top:-64px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;z-index:100}.skip:focus{top:12px}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:9px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:700 16px/1 var(--body);cursor:pointer;text-decoration:none;white-space:nowrap;touch-action:manipulation;transition:background-color .15s,color .15s,filter .15s}
.btn:hover{background:var(--ink);color:var(--bg)}.btn[disabled]{opacity:.55;cursor:default}.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on)}.btn.pri:hover{background:var(--accent);color:var(--on);filter:brightness(1.1)}
.btn.lg{padding:15px 24px;font-size:17px}.btn.quiet{border-color:transparent}.btn.quiet:hover{background:var(--line);color:var(--ink)}.btn.pill{border-radius:99px;border-color:transparent;background:var(--line)}.btn.pill:hover{background:var(--ink);color:var(--bg)}
.bar{text-align:center;padding:10px 16px;font:700 15px/1.4 var(--body);background:var(--mark);color:#151917}.bar a{color:inherit}
/* header */
.nav{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}.nav .wrap{display:flex;align-items:center;gap:6px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font:800 20px/1 var(--display);text-decoration:none;margin-right:14px;white-space:nowrap}.brand img{display:block;flex:none}
.nav-links{display:none;gap:2px;margin-right:auto}@media(min-width:860px){.nav-links{display:flex}}.nav .sp{margin-left:auto}
.dd{position:relative}.dd summary{list-style:none;cursor:pointer;padding:10px 12px;border-radius:8px;font-weight:700}.dd summary::-webkit-details-marker{display:none}
.dd summary::after{content:"";display:inline-block;width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);margin-left:9px}.dd[open] summary,.dd summary:hover{background:var(--line)}
.dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.2)}.dd-menu a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;font-weight:700}.dd-menu a:hover{background:var(--bg)}
@media(max-width:520px){.nav .btn{padding:10px 12px;font-size:15px}.nav #theme,.nav .teach{display:none}.brand{font-size:18px;margin-right:6px}}
/* hero */
.hero{padding:clamp(36px,6vw,80px) 0 clamp(36px,5vw,64px)}.hero .wrap{display:grid;gap:48px;grid-template-columns:1fr;align-items:center}@media(min-width:940px){.hero .wrap{grid-template-columns:1.05fr .95fr}}
.hero h1{font-size:clamp(40px,6.4vw,76px)}.lede{margin-top:16px;font-size:clamp(18px,2vw,21px);color:var(--dim);max-width:34em}.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.note{margin-top:12px;color:var(--dim);font-size:15px}.tlink{display:inline-block;margin-top:18px;font-weight:700}
.demo{justify-self:center;width:min(100%,440px)}.flip{perspective:1200px}
.flip .card{display:block;width:100%;aspect-ratio:3/2;border:0;padding:0;background:none;color:inherit;cursor:pointer;position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.7,.2,1)}.flip.on .card{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:24px;border-radius:14px;background:var(--card);border:1.5px solid var(--ink);font:800 clamp(30px,5vw,42px)/1.1 var(--display);text-align:center}
.face small{font:400 14px var(--body);color:var(--dim)}.face.back{transform:rotateY(180deg)}.face mark{background:var(--mark);color:#151917;padding:0 .12em}
.dbar{display:flex;align-items:center;gap:10px;margin-top:20px}.dbar .cnt{margin-right:auto;color:var(--dim)}.dbar .btn{padding:10px 16px}
/* sections */
.sect{padding:clamp(48px,7vw,96px) 0;border-top:1px solid var(--line)}.sect h2{font-size:clamp(30px,4.4vw,48px)}.sect .lead{margin-top:14px;color:var(--dim);max-width:36em;font-size:19px}
.head{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap}.rail-nav{display:flex;gap:8px}.rail-nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:none;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background-color .15s,color .15s}.rail-nav button:hover:not([disabled]){background:var(--ink);color:var(--bg)}.rail-nav button[disabled]{opacity:.35;cursor:default}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:28px -20px 0;padding:4px 20px 8px;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}
.panel{flex:0 0 min(310px,82vw);scroll-snap-align:start;background:var(--card);border:1.5px solid var(--ink);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px;min-height:360px}.panel h3{font-size:24px}.panel p{color:var(--dim)}
.ui{margin-top:auto;border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--bg);font-size:15px}.ui .q{font-weight:700;margin-bottom:8px}.opt{padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin-top:6px;background:var(--card)}
.opt.good{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,var(--card))}.opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--card))}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.tile{aspect-ratio:1;border-radius:8px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;font-size:13px;font-weight:700}.tile.on{background:var(--mark);color:#151917;border-color:#9a8300}
.timer{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:10px}.timer i{display:block;height:100%;width:62%;background:var(--accent)}.big{font:800 34px/1 var(--display)}
.split{display:grid;gap:40px;grid-template-columns:1fr;align-items:center}@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split.rev .pic{order:-1}}
.pic img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1.5px solid var(--ink);background:var(--line)}.sect .cta{margin-top:24px}
.band{background:var(--ink);color:var(--bg);border-top:0}.band .lead{color:color-mix(in srgb,var(--bg) 78%,transparent)}.band .btn{border-color:var(--bg);color:var(--bg)}.band .btn:hover{background:var(--bg);color:var(--ink)}
.tiers{display:grid;grid-template-columns:1fr;margin-top:28px;border:1.5px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--card)}@media(min-width:760px){.tiers{grid-template-columns:repeat(3,1fr)}.tier+.tier{border-left:1px solid var(--line);border-top:0}}
.tier{padding:22px;border-top:1px solid var(--line)}.tier:first-child{border-top:0}.tier h3{font-size:22px}.tier p{color:var(--dim);margin-top:6px}.tier.hi{background:var(--mark);color:#151917}.tier.hi p{color:rgba(21,25,23,.78)}
.foot{border-top:1px solid var(--line);padding:48px 0 64px;color:var(--dim);font-size:15px}.foot .wrap{display:grid;gap:28px;grid-template-columns:1fr}@media(min-width:760px){.foot .wrap{grid-template-columns:2fr 1fr 1fr}}
.foot h4{margin:0 0 10px;font:800 15px var(--display);color:var(--ink)}.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.foot a{text-decoration:none}.foot a:hover{color:var(--ink);text-decoration:underline}.credits{margin-top:14px;font-size:13px}.credits a{text-decoration:underline}
/* sign-up dialog */
dialog{border:0;padding:0;border-radius:16px;background:var(--card);color:var(--ink);width:min(440px,calc(100% - 24px));box-shadow:0 30px 80px rgba(0,0,0,.45);overscroll-behavior:contain}dialog::backdrop{background:rgba(10,14,13,.6)}dialog.wide{width:min(860px,calc(100% - 24px))}
.dlg2{display:grid;grid-template-columns:1fr}.dlg-art{display:none;position:relative;background:var(--line)}.dlg-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.dlg-art p{position:absolute;left:22px;right:22px;top:22px;margin:0;font:800 28px/1.1 var(--display);color:#151917}
@media(min-width:760px){.dlg2{grid-template-columns:.85fr 1.15fr}.dlg-art{display:block}}
.dlg{position:relative;padding:28px 24px 22px}.dlg h2{font-size:30px}.dlg .sub{margin:6px 0 16px;color:var(--dim);font-size:16px}.dlg .x{position:absolute;right:10px;top:10px;width:40px;height:40px;padding:0}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--line);border-radius:10px;padding:3px;margin-bottom:6px}.seg button{border:0;background:none;padding:10px;border-radius:7px;font:700 15px var(--body);color:var(--dim);cursor:pointer}.seg button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.field{display:block;margin-top:14px}.field span{display:block;font-size:14px;font-weight:700;margin-bottom:6px}.field input{width:100%;padding:13px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:16px}.field input:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.msg{min-height:22px;margin-top:12px;font-size:15px;color:var(--bad)}.msg.ok{color:var(--accent)}.dlg .btn.pri{width:100%;margin-top:6px}.dlg .link{margin-top:10px;border:0;background:none;color:var(--ink);font:700 15px var(--body);text-decoration:underline;cursor:pointer;padding:6px 0}
/* plans */
.ph{padding:clamp(36px,6vw,72px) 0 8px}.ph h1{font-size:clamp(36px,5.6vw,64px)}.ph .lede{margin-top:12px}
.toggle{display:inline-grid;grid-template-columns:1fr 1fr;margin-top:24px;border:1.5px solid var(--ink);border-radius:10px;padding:3px}.toggle button{border:0;background:none;padding:10px 20px;border-radius:7px;font:700 15px var(--body);color:var(--dim);cursor:pointer}.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}.toggle em{font-style:normal;margin-left:6px;font-size:13px}
.plans{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:32px auto 0;max-width:1000px;align-items:stretch}
.plan{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:14px;background:var(--card);border:1.5px solid var(--ink);color:var(--ink)}.plan h2{font-size:28px}.plan .price{font:800 clamp(36px,4.6vw,48px)/1 var(--display)}.plan .price s{font:400 20px var(--body);color:var(--dim);margin-right:8px}.plan .price small{font:400 16px var(--body);color:var(--dim)}.plan .eq{min-height:22px;color:var(--dim);font-size:15px;margin-top:-6px}
.plan ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}.plan li{display:grid;grid-template-columns:22px 1fr;gap:8px}.plan li svg{width:20px;height:20px;color:var(--accent)}.plan li.soon{color:var(--dim)}.plan .btn{margin-top:auto;width:100%}
.plan.pop{background:var(--mark);color:#151917}.plan.pop li svg{color:#151917}.plan.pop .price small,.plan.pop .eq,.plan.pop .price s{color:rgba(21,25,23,.74)}.plan.pop .btn{background:#151917;border-color:#151917;color:#fff}.plan.pop .btn:hover{background:#fff;color:#151917}
.fine2{text-align:center;color:var(--dim);font-size:15px;margin:24px auto 0;max-width:640px}.err{color:var(--bad);text-align:center;min-height:22px;margin-top:14px;font-weight:700}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html.embed .nav,html.embed .foot,html.embed .skip,html.embed .bar{display:none!important}html.embed body{background:transparent}