/* Store site. Dark-first, started from terminal.rasmic.xyz and scrawl.kitlangton.com (see store/redesign/breakdown.md in the
   project files): near-black surfaces, 8% hairlines, edges drawn with inset shadows, glass and raised pills, Apple's
   system greys, one sans family with mono only for keys and code, and the product shown inside a Mac. What makes it
   ours: a macOS menu bar as the nav, and the mark's ring (teal to indigo to coral, --ours) used only for the call to
   action, chapter progress and the launch tag.
   Light theme: <html data-theme="light">, set by the toggle in the nav and remembered in localStorage. */
:root{
  --bg:#0a0a0b;--fg:#f4f4f5;--body:#c7c7cc;--muted:#8e8e93;--faint:#48484a;--line:#ffffff14;
  --card:#161618;--card-edge:inset 0 1px 0 #ffffff0f,0 0 0 1px #ffffff17;--well:#111113;
  --glass:#18181c75;--glass-edge:inset 0 .5px 0 #ffffff47,inset 0 0 0 .5px #ffffff24,0 10px 28px -8px #00000080;
  --raised:linear-gradient(168deg,#ffffff3d,#ffffff14 46%,#ffffff24);
  --raised-edge:inset 0 .5px 0 #ffffff9e,inset 0 -.5px 0 #fff3,inset 0 0 0 .5px #fff3,0 4px 14px #00000061;
  --solid:#f5f5f7;--solid-hover:#fff;--on-solid:#000;--solid-glow:0 10px 30px #ffffff12;
  --tint:color-mix(in srgb,var(--fg) 7%,transparent);--tint-2:color-mix(in srgb,var(--fg) 12%,transparent);
  --blue:#6e9bff;--glow:#6e96ff17;--green:#30d158;--red:#ff453a;
  --kbd:linear-gradient(#2c2c2f,#222225);--kbd-fg:#d1d1d6;--kbd-edge:inset 0 1px 0 #ffffff1a,0 1px 0 #000;
  --frame-edge:0 0 0 1px #ffffff17,0 40px 120px -20px #000c;
  --sp:#ff6a48;--mb:#7b7dff;
  --ours:linear-gradient(90deg,#0ea193,#5a5cf2 55%,#ff5a36);
  --menubar:#1e1e23b8;--menubar-fg:#ffffffeb;--menubar-hover:#ffffff2b;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI","Helvetica Neue",sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,"Segoe UI","Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.3,1.4,.5,1);
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#f5f5f7;--fg:#1d1d1f;--body:#3a3a3c;--muted:#6e6e73;--faint:#aeaeb2;--line:#00000014;
  --card:#fff;--card-edge:0 0 0 1px #0000000f,0 1px 3px #0000000a;--well:#fff;
  --glass:#ffffff9e;--glass-edge:inset 0 .5px 0 #ffffffe6,inset 0 0 0 .5px #00000014,0 10px 28px -8px #00000024;
  --raised:linear-gradient(168deg,#fff,#ffffffc7 46%,#ffffffeb);
  --raised-edge:inset 0 .5px 0 #fff,inset 0 0 0 .5px #0000001a,0 2px 8px #00000014;
  --solid:#1d1d1f;--solid-hover:#000;--on-solid:#fff;--solid-glow:0 10px 30px #00000024;
  --menubar:#f6f6f8c2;--menubar-fg:#000000d9;--menubar-hover:#0000001a;
  --blue:#0a6cff;--glow:#6e96ff12;--green:#1c9640;--red:#d72828;
  --sp:#f75734;--mb:#5a5cf2;
  --kbd:linear-gradient(#fff,#f2f2f4);--kbd-fg:#3a3a3c;--kbd-edge:inset 0 0 0 .5px #0000001f,0 1px 0 #00000029;
  --frame-edge:0 0 0 1px #00000014,0 40px 100px -24px #00000059;
  color-scheme:light;
}

*,:before,:after{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:60px}
body{background:var(--bg);color:var(--fg);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
code,kbd,pre{font-family:var(--mono)}

/* ---------- nav: a macOS menu bar. Both apps live in the menu bar, so the site's top edge is where they show up:
   the OromMac name where an app's name goes, the apps as menus, and on the right their real status icons, the theme
   switch, the one call to action and a clock. ---------- */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(180%) brightness(106%);backdrop-filter:blur(20px) saturate(180%) brightness(106%);box-shadow:var(--glass-edge)}
.menubar-nav{position:sticky;top:0;z-index:20;background:var(--menubar);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:0 .5px 0 var(--line)}
.menubar-nav .in{display:flex;align-items:center;gap:4px;height:37px;padding-inline:max(12px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-right,0px));font:500 13px var(--sans);letter-spacing:-.003em}
.menubar-nav a,.menubar-nav .clock,.menubar-nav .theme{text-decoration:none;color:var(--menubar-fg);white-space:nowrap}
.menubar-nav .app{display:flex;align-items:center;gap:8px;padding:3px 10px 3px 6px;border-radius:5px}
.menubar-nav .app img{width:18px;height:18px}
.menubar-nav .app b{font-weight:700;letter-spacing:-.01em}
.menubar-nav .menus{display:flex;gap:2px}
.menubar-nav .menus a,.menubar-nav .try{padding:3px 10px;border-radius:5px;transition:background-color .12s}
.menubar-nav .menus a:hover,.menubar-nav .menus a[aria-current],.menubar-nav .app:hover,.menubar-nav .status-icon:hover,.menubar-nav .theme:hover{background:var(--menubar-hover)}
.menubar-nav .status{margin-left:auto;display:flex;align-items:center;gap:4px}
.status-icon{display:grid;place-items:center;width:30px;height:24px;border-radius:5px}
.status-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.theme{display:grid;place-items:center;width:30px;height:24px;padding:0;border:0;border-radius:5px;background:none;color:var(--fg);cursor:pointer;transition:background-color .15s}
.theme svg{grid-area:1/1;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s,rotate .5s var(--spring),scale .5s var(--spring)}
.theme .sun,:root[data-theme=light] .theme .moon{opacity:0;rotate:-90deg;scale:.5}
:root[data-theme=light] .theme .sun{opacity:1;rotate:0deg;scale:1}
.menubar-nav .try{margin-left:4px;color:#fff;background:var(--ours);font-weight:600}
.menubar-nav .try:hover{filter:brightness(1.08)}
.menubar-nav .clock{padding:3px 6px 3px 10px;font-variant-numeric:tabular-nums}
.brand{display:flex;align-items:center;gap:9px;font:600 15px var(--sans);letter-spacing:-.01em;text-decoration:none}
.brand img{width:26px;height:26px}
/* The notch: as on a MacBook, it is exactly as tall as the menu bar, with rounded lower corners, curved shoulders
   where it meets the top edge, and the camera in the middle. Menus and the clock step aside before they would run
   under it, and on phones it goes away. */
.notch{position:absolute;top:0;left:50%;translate:-50% 0;width:196px;height:37px;background:#000;border-radius:0 0 12px 12px;pointer-events:none}
.notch::before,.notch::after{content:"";position:absolute;top:0;width:8px;height:8px}
.notch::before{right:100%;background:radial-gradient(circle at 0 100%,transparent 7.5px,#000 8px)}
.notch::after{left:100%;background:radial-gradient(circle at 100% 100%,transparent 7.5px,#000 8px)}
.notch i{position:absolute;left:50%;top:50%;translate:-50% -50%;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2a3550,#0b0d14 70%);box-shadow:0 0 0 1.5px #0d0d10}
@media (max-width:1000px){.menubar-nav .menus,.menubar-nav .clock{display:none}}
@media (max-width:640px){.notch{display:none}}

/* ---------- buttons ---------- */
.download,.btn.primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--solid);color:var(--on-solid);font:600 15px/18px var(--sans);border:0;border-radius:999px;padding:13px 22px 13px 20px;text-decoration:none;cursor:pointer;box-shadow:var(--solid-glow);transition:scale .2s var(--ease),background-color .2s}
.download:hover,.btn.primary:hover{background:var(--solid-hover);scale:1.03}
.download:active,.btn.primary:active{scale:.98}
.download svg{width:15px;height:18px;fill:currentColor;margin-top:-2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--raised);box-shadow:var(--raised-edge);color:var(--fg);font:500 15px/18px var(--sans);border:0;border-radius:999px;padding:12px 20px;text-decoration:none;cursor:pointer;transition:scale .2s var(--ease)}
.btn:hover{scale:1.03}.btn:active{scale:.98}
.btn:disabled,.download:disabled{opacity:.5;cursor:default;scale:1}
.btn.sm{font-size:13px;padding:7px 14px}
.link{color:var(--muted);text-decoration:none;transition:color .15s}
.link:hover{color:var(--fg)}
.chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:5px 12px 5px 6px;font-size:13px;color:var(--muted);text-decoration:none;transition:color .15s}
.chip b{background:var(--solid);color:var(--on-solid);border-radius:999px;padding:2px 8px;font-size:11.5px;font-weight:600}
.chip:hover{color:var(--fg)}

/* ---------- hero: centred, staggered rise ---------- */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:900px;margin:0 auto;padding:64px 24px 44px}
.hero>*{animation:rise .9s var(--ease) both}
.hero>:nth-child(2){animation-delay:80ms}.hero>:nth-child(3){animation-delay:.16s}.hero>:nth-child(4){animation-delay:.24s}.hero>:nth-child(5){animation-delay:.32s}
.hero .chip{margin-bottom:28px}
.icons{display:flex;align-items:center;justify-content:center;animation-name:pop!important}
.icons img{width:112px;height:112px;filter:drop-shadow(0 18px 40px #0000008c) drop-shadow(0 0 40px #6e9bff29)}
.icons img+img{margin-left:-14px}
.icons.two img:first-child{rotate:-6deg;translate:0 4px}.icons.two img:last-child{rotate:6deg;translate:0 4px}
:root[data-theme=light] .icons img{filter:drop-shadow(0 18px 32px #0003) drop-shadow(0 0 40px #6e9bff1f)}
h1{font:700 58px/1.05 var(--display);letter-spacing:-.035em;text-wrap:balance;margin:32px 0 0}
.lede{max-width:600px;color:var(--muted);font-size:18px;line-height:29px;text-wrap:pretty;margin:20px 0 0}
.cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:32px}
.meta{color:var(--muted);font-size:13px;margin:0;font-variant-numeric:tabular-nums;text-wrap:balance}
.meta a{color:var(--muted);text-decoration:none}.meta a:hover{color:var(--fg)}
@keyframes rise{from{opacity:0;translate:0 16px}}
@keyframes pop{from{opacity:0;scale:.86}}

/* ---------- showcase: the app inside a Mac, told in chapters ---------- */
.showcase{max-width:1248px;margin:0 auto;padding:8px 24px 72px;display:flex;flex-direction:column;align-items:center;gap:14px;animation:rise 1s var(--ease) .32s both}
.switch{display:inline-flex;gap:2px;padding:4px;border-radius:999px;margin-bottom:6px}
.switch button{display:flex;align-items:center;gap:8px;border:0;background:none;border-radius:999px;padding:8px 18px 8px 12px;font:600 15px var(--sans);color:var(--muted);cursor:pointer;transition:color .15s,background .2s}
.switch button img{width:22px;height:22px}
.switch button[aria-pressed=true]{color:var(--fg);background:var(--raised);box-shadow:var(--raised-edge)}
.switch button:hover{color:var(--fg)}
.set[hidden]{display:none}
.set{width:100%;display:flex;flex-direction:column;gap:14px}
.frame{position:relative;width:100%;aspect-ratio:5/3;border-radius:16px;overflow:hidden;box-shadow:var(--frame-edge);background:#0c0b16;container-type:inline-size}
.wallpaper{position:absolute;inset:0;background-color:#0c0b16;background-image:radial-gradient(70% 70% at 82% -14%,#6050e68c,#0000 62%),radial-gradient(60% 70% at 4% 112%,#cc3e8057,#0000 62%),radial-gradient(55% 60% at 46% 62%,#2256aa4d,#0000 66%),radial-gradient(45% 50% at 104% 96%,#1a8aa838,#0000 62%),linear-gradient(158deg,#18152c 0%,#0d0c18 46%,#130d1c 100%)}
.set.sp .wallpaper{background-image:radial-gradient(70% 70% at 82% -14%,#ff5a3666,#0000 62%),radial-gradient(60% 70% at 4% 112%,#cc482b5c,#0000 62%),radial-gradient(55% 60% at 46% 62%,#7a2a1a4d,#0000 66%),radial-gradient(45% 50% at 104% 96%,#ff8a5c33,#0000 62%),linear-gradient(158deg,#26140f 0%,#120c0b 46%,#1d100d 100%)}
.set.mb .wallpaper{background-image:radial-gradient(70% 70% at 82% -14%,#5a5cf270,#0000 62%),radial-gradient(60% 70% at 4% 112%,#484ac25c,#0000 62%),radial-gradient(55% 60% at 46% 62%,#2a2b7a4d,#0000 66%),radial-gradient(45% 50% at 104% 96%,#7b7dff33,#0000 62%),linear-gradient(158deg,#14152a 0%,#0c0c16 46%,#141228 100%)}
.menubar{position:absolute;inset:0 0 auto;z-index:3;height:2.33cqw;min-height:20px;display:flex;align-items:center;justify-content:space-between;padding:0 1.6cqw;font-size:clamp(9px,1.08cqw,13px);color:#fffffff2;background:#14112452;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 -.5px 0 #ffffff0f;text-shadow:0 .5px 1px #00000040}
.menubar .left,.menubar .right{display:flex;align-items:center;gap:1.55cqw}
.menubar b{font-weight:700}
.menubar svg{width:1.15cqw;min-width:9px;fill:currentColor}
.menubar .tray{width:1.4cqw;min-width:11px;height:1.4cqw;min-height:11px;border-radius:3px}
.menubar .tray img{width:100%;height:100%}
.menubar .clock{font-variant-numeric:tabular-nums}
@container (max-width:560px){.menubar .left span{display:none}}
.scene{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .5s var(--ease),scale .6s var(--ease);scale:.985;pointer-events:none}
.scene.on{opacity:1;scale:1}
.scene .win{position:absolute;left:50%;top:48%;translate:-50% -50%;width:80%;max-height:70%;object-fit:contain;filter:drop-shadow(0 30px 50px #000000a6) drop-shadow(0 0 0 .5px #ffffff2e)}
.scene .win.shot{width:auto;height:84%;max-width:86%;filter:none}
.scene .menu{position:absolute;top:2.8cqw;right:9%;width:24%;filter:drop-shadow(0 20px 40px #0009)}
.scene .menu.wide{width:30%}
.caption{position:absolute;left:50%;bottom:4%;translate:-50%;z-index:4;max-width:min(760px,92%);padding:9px 18px;border-radius:14px;background:#08080a9e;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#fff;font:600 clamp(13px,1.75cqw,21px)/1.35 var(--sans);letter-spacing:-.01em;text-align:center;transition:opacity .3s}
.controls{display:flex;align-items:flex-start;gap:8px;width:100%}
.controls .icon{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:999px;background:var(--tint);color:var(--fg);cursor:pointer;transition:background .15s}
.controls .icon:hover{background:var(--tint-2)}
.controls svg{width:14px;height:14px;fill:currentColor}
.controls .icon .play,.controls .icon[data-paused=true] .pause{display:none}
.controls .icon[data-paused=true] .play{display:block}
.chapters{flex:1;display:flex;gap:4px;min-width:0;margin:0 0 0 8px;padding:0;list-style:none}
.chapters li{flex:1 1 0;min-width:0}
.chapters button{width:100%;display:flex;flex-direction:column;gap:8px;padding:13px 0 0;border:0;background:none;color:var(--muted);font:12px var(--sans);text-align:left;cursor:pointer}
.chapters button:hover,.chapters button.active{color:var(--fg)}
.track{display:block;height:4px;border-radius:2px;overflow:hidden;background:var(--tint-2)}
.track i{display:block;height:100%;background:var(--ours);transform-origin:0;scale:0 1}
.chapters .done .track i{scale:1 1}
.chapters .label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chapters .num{font:11px var(--mono);margin-right:6px}
@media (max-width:640px){.chapters .label span:not(.num){display:none}.showcase{padding-inline:16px}.caption{display:none}}

/* ---------- sections ---------- */
.section{max-width:1080px;margin:0 auto;padding:56px 24px;border-top:1px solid var(--line)}
h2{font:600 22px/28px var(--display);letter-spacing:-.02em;margin:0 0 24px}
h3{font:600 16px/20px var(--sans);letter-spacing:-.01em;margin:0}
.split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px}
.intro h2{margin-bottom:10px}
.intro p{max-width:260px;color:var(--muted);font-size:14px;line-height:22px;margin:0}
.intro .download,.intro .btn{margin-top:22px}
.intro .meta{margin-top:12px}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr);gap:24px}.intro p{max-width:none}}

/* cards: a visual on a faint glow, then a caption */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:var(--card);box-shadow:var(--card-edge);text-decoration:none;color:inherit}
a.card{transition:translate .3s var(--ease),box-shadow .3s}
a.card:hover{translate:0 -3px}
.visual{position:relative;height:300px;overflow:hidden;background:radial-gradient(70% 60% at 50% 0,var(--glow),#0000)}
.visual.sp{background:radial-gradient(70% 70% at 50% 0,#ff5a362e,#0000)}
.visual.mb{background:radial-gradient(70% 70% at 50% 0,#5a5cf233,#0000)}
.visual img{position:absolute;left:50%;top:28px;translate:-50% 0;width:auto;max-width:86%;height:auto;filter:drop-shadow(0 16px 30px #00000073)}

.visual.tall img{width:62%;max-width:none}
.caption-box{flex:1;display:flex;flex-direction:column;padding:20px 22px 24px}
.caption-box>p{margin-bottom:16px!important}
.caption-box p{color:var(--muted);font-size:14px;line-height:22px;margin:6px 0 0}
.caption-box .title{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.caption-box .title img{width:40px;height:40px}
.caption-box .title p{margin:2px 0 0}
.caption-box .row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.caption-box .row .go{color:var(--fg);font-weight:500;transition:translate .2s var(--ease)}
a.card:hover .go{translate:3px 0}
.note-card{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px;padding:18px 22px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-size:14px}
.note-card strong{color:var(--fg);font-weight:600;margin-right:6px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fact{padding:20px 22px 22px;border-radius:16px;background:var(--card);box-shadow:var(--card-edge)}
.fact p{color:var(--muted);font-size:14px;line-height:22px;margin:6px 0 0}
@media (max-width:860px){.cards,.cards.three,.facts{grid-template-columns:minmax(0,1fr)}.visual{height:260px}}
@media (min-width:861px) and (max-width:1000px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* rows: hairline lists (pains, fixes, FAQ) */
.rows{margin:0;padding:0;list-style:none}
.rows li{padding:16px 0;border-bottom:1px solid var(--line)}
.rows li:first-child{padding-top:0}
.rows strong{display:block;font-weight:600;font-size:15px}
.rows span{display:block;color:var(--muted);font-size:14px;line-height:22px;margin-top:3px}
.fix .was{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--faint)}
.quote{margin:0 0 28px;font:500 22px/1.45 var(--display);letter-spacing:-.015em;text-wrap:pretty}
.quote span{color:var(--muted)}
.sig{display:flex;align-items:center;gap:10px;margin:0 0 32px;color:var(--muted);font-size:13px}
.sig .face{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--tint-2);color:var(--fg);font-weight:600;font-size:12px}

/* keyboard legend */
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:6px;background:var(--kbd);box-shadow:var(--kbd-edge);color:var(--kbd-fg);font:11px/14px var(--mono)}
.keys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin:0;padding:0;list-style:none}
.keys li{display:flex;align-items:center;gap:14px;padding:9px 0;color:var(--muted);font-size:14px}
.keys .combo{flex:none;display:flex;gap:4px;width:116px}
@media (max-width:640px){.keys{grid-template-columns:minmax(0,1fr)}}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:16px;background:var(--card);box-shadow:var(--card-edge)}
.plan.best{box-shadow:var(--card-edge),0 0 0 1px color-mix(in srgb,var(--blue) 45%,transparent),0 20px 60px -20px color-mix(in srgb,var(--blue) 35%,transparent)}
.plan .head{height:24px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.plan .tag{font-size:12px;font-weight:600;border-radius:999px;padding:3px 9px;background:var(--ours);color:#fff}
.amount{font:700 44px/1 var(--display);letter-spacing:-.035em}
.amount small{font:400 14px var(--sans);letter-spacing:0;color:var(--muted);margin-left:6px}
.amount s{font:400 14px var(--sans);letter-spacing:0;color:var(--faint);margin-left:4px}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;color:var(--muted);font-size:14px}
.plan li{display:flex;gap:9px}
.plan li:before{content:"";flex:none;width:14px;height:14px;margin-top:4px;background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.plan .buy{display:grid;gap:8px;margin-top:auto;padding-top:8px}
.plan .buy>*{width:100%}
.price-note{color:var(--muted);font-size:13px;margin:16px 0 0}
.msg{min-height:1.4em;margin:12px 0 0;color:var(--muted);font-size:14px}.msg.err{color:var(--red)}.msg:empty{min-height:0}
@media (max-width:640px){.plans{grid-template-columns:minmax(0,1fr)}}

/* FAQ */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child summary{padding-top:0}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;cursor:pointer;list-style:none;font-weight:500;font-size:15px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font:16px var(--mono);color:var(--muted);transition:rotate .3s var(--spring)}
.faq details[open] summary:after{rotate:45deg}
.faq details p{margin:-6px 0 18px;color:var(--muted);font-size:14px;line-height:22px;max-width:62ch}

/* code blocks with Copy */
.code-block{border-radius:14px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.code-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);color:var(--muted);font:12px var(--mono)}
.code-block pre,.code-block code.key{display:block;margin:0;padding:16px;font:600 clamp(14px,2.4vw,18px)/1.5 var(--mono);letter-spacing:.03em;word-break:break-all;user-select:all;color:var(--fg)}
.copy{min-width:54px;height:26px;padding:0 10px;border:0;border-radius:6px;background:var(--tint-2);color:var(--fg);font:12px var(--sans);cursor:pointer;transition:background .15s,scale .12s}
.copy:active{scale:.96}
.steps{margin:0;padding:6px 16px;list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:14px;align-items:baseline;padding:12px 0;font-size:14px;color:var(--muted)}
.steps li+li{border-top:1px solid var(--line)}
.steps li:before{content:counter(s);flex:none;font:11px var(--mono);color:var(--faint);width:12px}
.steps b{color:var(--fg);font-weight:600;margin-right:4px}
.steps .btn{margin-left:auto;flex:none}

.activate,.todo{list-style:none;counter-reset:s;margin:16px 0 0;padding:0 20px;border-radius:14px;background:var(--card);box-shadow:var(--card-edge)}
.activate li,.todo li{counter-increment:s;display:grid;grid-template-columns:26px 1fr;gap:2px 14px;padding:16px 0}
.todo li{grid-template-columns:26px 1fr auto;align-items:center}
.activate li+li,.todo li+li{border-top:1px solid var(--line)}
.activate li:before,.todo li:before{content:counter(s);grid-row:1/span 4;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--muted);font:12px var(--mono)}
.activate b,.todo strong{font-weight:600}
.activate span,.todo p{color:var(--muted);font-size:14px;margin:0}
.activate .btn,.activate .download{justify-self:start;margin-top:12px}
.activate .msg{grid-column:2}
.act .fine{color:var(--muted);font-size:14px;margin-top:20px}.act .fine a{color:var(--body)}
@media (max-width:520px){.todo li{grid-template-columns:26px 1fr}.todo li .btn,.todo li .download{grid-column:2;justify-self:start;margin-top:8px}}

/* cross-sell */
.cross{display:flex;align-items:center;gap:16px;max-width:560px;padding:18px 20px;border-radius:16px;background:var(--card);box-shadow:var(--card-edge);text-decoration:none;transition:translate .3s var(--ease)}
.cross:hover{translate:0 -2px}
.cross img{width:48px;height:48px}
.cross strong{display:block;font-weight:600}
.cross span{color:var(--muted);font-size:14px}

/* ---------- simple pages: legal, blog, keys, thanks ---------- */
.page{max-width:720px;margin:0 auto;padding:56px 24px 40px}
.page h1{font-size:44px;margin:12px 0 0}
.page .lede{max-width:none}
.eyebrow{margin:0;color:var(--muted);font-size:13px}
.eyebrow a{text-decoration:none}.eyebrow a:hover{color:var(--fg)}
.prose h2{font-size:20px;margin:40px 0 8px}
.prose p,.prose li{color:var(--body);line-height:1.7}
.prose strong{color:var(--fg)}
.prose a{text-decoration-color:var(--faint);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--fg)}
.post>p:not(.eyebrow):not(.lede):not(.sig),.post li{font-size:17px}
.post ul{padding-left:20px}.post li{margin:6px 0}
.post-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.post .sig{margin-top:40px}
.posts{list-style:none;padding:0;margin:32px 0 0}
.posts a{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none}
.posts li:first-child a{border-top:1px solid var(--line)}
.posts time{color:var(--muted);font-size:13px}
.posts strong{font:600 18px/1.3 var(--display);letter-spacing:-.015em;transition:color .15s}
.posts a:hover strong{color:var(--blue)}
.posts span{color:var(--muted);font-size:14px;line-height:22px}
.posts-head{font:600 13px var(--sans);color:var(--muted);margin:44px 0 0}
.posts-head+.posts{margin-top:12px}
.page .note{color:var(--muted);font-size:13px;margin-top:24px}
.key-area{margin-top:28px}
input[type=email]{flex:1 1 260px;max-width:400px;font:15px var(--sans);padding:12px 18px;border:0;border-radius:999px;background:var(--card);box-shadow:var(--card-edge);color:var(--fg)}
input[type=email]::placeholder{color:var(--faint)}
form.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
@media (max-width:640px){.page h1{font-size:34px}}

/* ---------- footer ---------- */
.footer{max-width:1080px;margin:0 auto;padding:32px 24px 48px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 24px;color:var(--muted);font-size:13px}
.footer .brand{font-size:14px;color:var(--fg)}
.footer .brand img{width:20px;height:20px}
.footer p{flex:1 1 400px;margin:0;line-height:20px}
.footer p a{color:inherit}
.footer nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.footer nav a{text-decoration:none}.footer nav a:hover{color:var(--fg)}

/* ---------- motion ---------- */
[data-reveal]{opacity:0;translate:0 18px;transition:opacity .7s var(--ease) var(--delay,0s),translate .7s var(--ease) var(--delay,0s)}
[data-reveal].in{opacity:1;translate:0}
@media (max-width:640px){
  .hero{padding-top:44px}h1{font-size:40px}.lede{font-size:16px;line-height:25px}
  .icons img{width:88px;height:88px}
  .section{padding:44px 16px}.page{padding-inline:16px}
  .note-card{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  [data-reveal]{opacity:1;translate:0}
}
/* SoundPost's problems, and the Inspired by credits on both app pages */
.section-lede{max-width:620px;margin:-12px 0 24px;color:var(--muted);font-size:15px;line-height:24px}
.facts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.facts.one{grid-template-columns:minmax(0,1fr)}
.fact .num{display:inline-grid;place-items:center;width:24px;height:24px;margin-bottom:10px;border-radius:50%;background:var(--ours);color:#fff;font-size:12px;font-weight:700}
.fact h3{text-wrap:balance}
.replaces{margin:24px 0 0;color:var(--muted);font-size:14px}
.replaces .link{text-decoration:underline;text-underline-offset:3px}
.credit h3 a{text-decoration:none}
.credit h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.credit .by{margin:2px 0 0;font-size:13px}
@media (max-width:860px){.facts.two{grid-template-columns:minmax(0,1fr)}}