/* Superflow site. The app's own slate and aqua, Windows' own Segoe UI Variable. No external requests.
   Direction: the product performs (working fragments of the real interface, true size). */
:root {
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --ink-950: #0b1220; --ink-900: #111a2b; --ink-800: #1a2436; --ink-700: #26324a;
  --slate-600: #4a5670; --slate-300: #b6bdcb; --slate-200: #d9dee7; --slate-100: #ebeef3; --slate-50: #f5f7fa;
  --aqua-300: #5eead4; --aqua-400: #2dd4bf; --aqua-700: #0b7d73;
  --bad: #b42318;
  /* five type steps */
  --s-small: 14px; --s-body: 17px; --s-lead: clamp(20px, 1.2vw + 14px, 26px);
  --s-mid: clamp(28px, 2vw + 12px, 40px); --s-head: clamp(32px, 3.2vw + 12px, 58px); --s-big: clamp(56px, 9vw, 150px);
  --m: clamp(16px, 4vw, 48px);       /* the one outer margin */
  --gap: clamp(72px, 10vw, 160px);   /* between sections */
  --r: 0;                            /* one corner: square */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M3 12h17M13 5l7 7-7 7'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: var(--s-body)/1.55 var(--font); color: var(--ink-950); background: var(--ink-950); -webkit-font-smoothing: antialiased; }
a { color: var(--aqua-700); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
::selection { background: var(--aqua-300); color: var(--ink-950); }
html { caret-color: var(--aqua-700); scrollbar-color: var(--slate-600) var(--ink-950); }
td, .fig, .days b { font-variant-numeric: tabular-nums; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--aqua-400); outline-offset: 2px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: var(--m); top: 8px; background: #fff; padding: 8px 12px; z-index: 9; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--display); line-height: 1.02; letter-spacing: -0.035em; margin: 0; font-weight: 700; }
h1 { font-size: var(--s-head); }
h2 { font-size: var(--s-head); max-width: 20ch; }
h3 { font-size: var(--s-lead); letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0 0 1em; max-width: 62ch; }
.small, .small-dark { font-size: var(--s-small); } .small-dark { color: var(--slate-300); } .small-dark a { color: var(--aqua-300); }

/* page fields: each section is one flat field */
section { padding: var(--gap) var(--m); }
.hero, .feat-sec, .price-sec { background: var(--ink-950); color: #fff; }
.how-sec { background: var(--ink-900); color: #fff; }
.priv-sec, .faq-sec { background: var(--slate-50); color: var(--ink-950); }
.tut-sec, .cta { background: var(--aqua-400); color: var(--ink-950); }
section a { color: inherit; }
.hero a:not(.btn), .how-sec a:not(.btn), .feat-sec a:not(.btn), .price-sec a:not(.btn) { color: var(--aqua-300); }
.faq-sec a, .priv-sec a:not(.btn) { color: var(--aqua-700); }

/* top bar */
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 16px var(--m); background: var(--ink-950); color: #fff; }
.bar a { color: #fff; text-decoration: none; }
.brand { font: 700 22px var(--display); letter-spacing: -0.03em; }
.bar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; font-size: var(--s-small); }
.bar nav a:not(.btn):hover { color: var(--aqua-300); }

/* buttons: flat, square */
.btn { display: inline-block; font: 600 16px var(--font); background: var(--aqua-400); color: var(--ink-950) !important; border: 0; padding: 14px 22px; text-decoration: none; cursor: pointer; border-radius: var(--r); transition: transform .12s ease, background .12s ease; }
.btn:hover { background: var(--aqua-300); } .btn:active { transform: translateY(1px); }
.bar .btn.small-btn { padding: 8px 14px; font-size: var(--s-small); }
.btn.dark { background: var(--ink-950); color: #fff !important; } .btn.dark:hover { background: var(--ink-700); }
.btn.ghost-dark { background: var(--ink-700); color: #fff !important; } .btn.ghost-dark:hover { background: var(--slate-600); }
.btn.ghost { background: var(--slate-200); } .btn.ghost:hover { background: var(--slate-300); }
.btn.danger { background: var(--bad); color: #fff !important; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 16px; }

/* keycaps */
kbd { font: 600 14px var(--font); background: var(--ink-700); color: #fff; padding: 3px 9px; border-radius: 4px; }
.keys { display: inline-flex; gap: 6px; }
.keys.big kbd { font-size: var(--s-lead); padding: 10px 22px; }

/* hero: short headline, the working fragment at true size */
.hero { padding-top: clamp(40px, 6vw, 96px); }
.hero h1 { font-size: clamp(38px, 6.3vw, 96px); line-height: .98; letter-spacing: -0.04em; max-width: none; }
.hero h1 .h1-sub { display: block; color: var(--aqua-400); }
.hero-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 6vw, 96px); align-items: start; margin-top: clamp(28px, 4vw, 56px); }
.lede { font: 400 var(--s-lead)/1.3 var(--display); letter-spacing: -0.01em; margin-top: 24px; max-width: 28ch; }
.hero .lede { margin-top: 0; }
.stage { background: var(--ink-900); padding: clamp(16px, 2.4vw, 32px); display: grid; gap: 16px; }
.desk { background: var(--ink-700); padding: clamp(18px, 3vw, 40px); display: grid; gap: 22px; min-height: clamp(300px, 27vw, 400px); align-content: start; }
.desk .pill { justify-self: center; transition: background .2s ease, transform .2s ease; }
.desk .pill.live { transform: scale(1.06); }
.desk .raw q { font-size: clamp(18px, 1.5vw, 22px); }
.stage .keyrow .key { height: clamp(46px, 4.4vw, 64px); }
.win { background: #fff; color: var(--ink-950); border-radius: 6px; overflow: hidden; }
.win-bar { background: var(--slate-100); color: var(--slate-600); font-size: var(--s-small); padding: 8px 14px; }
.win-text { margin: 0; padding: 18px 14px 40px; font: 400 22px/1.4 var(--font); min-height: 110px; max-width: none; }
.caret { display: inline-block; width: 2px; height: 1.05em; background: var(--ink-950); margin-left: 1px; vertical-align: text-bottom; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.pill { display: flex; align-items: center; gap: 12px; background: var(--ink-800); color: #fff; padding: 10px 16px; border-radius: 999px; width: max-content; font-size: var(--s-small); }
.pill.on, .pill.live { background: var(--aqua-400); color: var(--ink-950); }
.wave { display: inline-flex; align-items: center; gap: 3px; height: 18px; } .wave i { width: 3px; height: 6px; background: currentColor; display: block; }
.live .wave i, .pill.on .wave i { animation: bar 0.9s ease-in-out infinite; } .wave i:nth-child(2) { animation-delay: .12s; } .wave i:nth-child(3) { animation-delay: .24s; } .wave i:nth-child(4) { animation-delay: .36s; } .wave i:nth-child(5) { animation-delay: .48s; }
@keyframes bar { 50% { height: 18px; } }
.raw { margin: 0; color: var(--slate-300); max-width: none; min-height: 3.2em; }
.raw span { display: block; font-size: var(--s-small); color: var(--aqua-300); margin-bottom: 2px; }
.raw q { quotes: none; font-size: 22px; line-height: 1.35; color: #fff; }
.demo-btn { width: 100%; touch-action: none; user-select: none; }
.demo-btn[hidden] { display: none; }
.demo-btn.live { background: var(--aqua-300); }
.stage-note { font-size: var(--s-small); color: var(--slate-300); margin: 0; }

/* keyboard: the keys the page is about, drawn at a readable size */
.keyrow { display: flex; gap: 8px; }
.key { flex: 1 1 0; min-width: 0; height: 58px; display: grid; place-items: center; background: var(--ink-800); color: var(--slate-300); font: 600 15px var(--font); border-radius: 8px; border-bottom: 5px solid #070b14; transition: transform .12s ease, background .12s ease, color .12s ease, border-width .12s ease; }
.key.space { flex-grow: 3.4; }
.key.caps { flex-grow: 2.4; white-space: nowrap; }
.key.hot { background: var(--ink-700); color: #fff; }
.key.down { background: var(--aqua-400); color: var(--ink-950); border-bottom-width: 2px; transform: translateY(3px); }

/* how it works: three pictures in a row, then where your words go */
.how-steps { list-style: none; padding: 0; margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.how-steps li { min-width: 0; }
.how-steps h3 { font-size: var(--s-mid); margin-top: 28px; }
.how-steps > li > p { font-size: var(--s-body); margin-top: 12px; max-width: 40ch; color: var(--slate-200); }
.how-pic { background: var(--ink-950); height: clamp(220px, 19vw, 280px); padding: clamp(20px, 2.4vw, 32px); display: grid; align-content: center; gap: 20px; overflow: hidden; }
.pic-keys .pill { justify-self: center; }
.pic-keys .hot { animation: press 3.2s ease-in-out infinite; }
.pic-keys .pill { animation: listen 3.2s ease-in-out infinite; }
@keyframes press { 0%, 12%, 78%, 100% { background: var(--ink-700); color: #fff; border-bottom-width: 5px; transform: none; } 18%, 72% { background: var(--aqua-400); color: var(--ink-950); border-bottom-width: 2px; transform: translateY(3px); } }
@keyframes listen { 0%, 14%, 80%, 100% { opacity: .25; transform: translateY(6px); } 20%, 74% { opacity: 1; transform: none; } }
.mic { width: 64px; height: 64px; border-radius: 50%; background: var(--aqua-400); position: relative; display: block; }
.mic::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--aqua-400); opacity: .35; animation: ring 1.8s ease-out infinite; }
.mic i { position: absolute; left: 25px; top: 15px; width: 14px; height: 24px; border-radius: 7px; background: var(--ink-950); }
.mic i::after { content: ""; position: absolute; left: 5px; top: 26px; width: 4px; height: 8px; background: var(--ink-950); }
@keyframes ring { from { transform: scale(1); opacity: .45; } to { transform: scale(1.9); opacity: 0; } }
.pic-talk .raw q { animation: words 4s ease-in-out infinite; display: inline-block; }
@keyframes words { 0% { opacity: 0; transform: translateY(8px); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.pic-paste .win-text { min-height: 0; padding-bottom: 28px; }

.flow { margin: clamp(48px, 6vw, 88px) 0 0; display: grid; grid-template-columns: 9fr 3fr; gap: 8px; }
.flow-pc { background: var(--ink-950); padding: clamp(20px, 2.4vw, 32px); }
.flow-tag { font: 700 var(--s-lead)/1.1 var(--display); letter-spacing: -0.02em; color: var(--aqua-300); margin: 0 0 20px; }
.flow-line { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.flow-line li { background: var(--ink-800); padding: 18px 20px; font: 600 20px/1.2 var(--display); position: relative; min-height: 104px; animation: lit 4.8s ease-in-out infinite; }
.flow-line li:nth-child(2) { animation-delay: .6s; } .flow-line li:nth-child(3) { animation-delay: 1.2s; } .flow-line li:nth-child(4) { animation-delay: 1.8s; }
@keyframes lit { 0%, 30%, 100% { transform: none; } 12% { transform: translateY(-6px); } }
.flow-line li:not(:last-child)::after { content: ""; position: absolute; right: -32px; top: 50%; width: 24px; height: 24px; margin-top: -12px; color: var(--aqua-400); background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; }
.flow small { display: block; font: 400 var(--s-small)/1.35 var(--font); color: var(--slate-300); margin-top: 6px; }
.flow-main, .flow-end { background: var(--aqua-400) !important; color: var(--ink-950); }
.flow-main small, .flow-end small { color: var(--ink-700); }
.flow-cloud { margin: 0; max-width: none; background: var(--ink-800); color: var(--slate-200); padding: clamp(20px, 2.4vw, 32px); font: 600 20px/1.2 var(--display); }

/* features: pick a feature, see its screen (without script: each feature with its screen) */
.feats { list-style: none; padding: 0; margin: clamp(40px, 5vw, 64px) 0 0; display: grid; gap: clamp(40px, 5vw, 72px); }
.feat-item { display: grid; grid-template-columns: 4fr 8fr; gap: 0 clamp(24px, 5vw, 80px); align-items: start; }
.feat-item h3, .feat-item p { grid-column: 1; }
.feat-item h3 { margin-bottom: 12px; }
.feat-item p { margin: 0; color: var(--slate-200); max-width: 40ch; }
.feat-shot { grid-column: 2; grid-row: 1 / span 2; margin: 0; background: var(--ink-900); padding: clamp(8px, 1vw, 14px); }
.feat-shot img { display: block; width: 100%; height: auto; }
@media (min-width: 901px) {
  .feats.live { grid-template-columns: 4fr 8fr; gap: 0 clamp(24px, 5vw, 80px); align-items: start; grid-auto-rows: min-content; }
  .feats.live .feat-item { display: contents; }
  .feats.live h3 { grid-column: 1; margin: 0; padding: 14px 0 14px 20px; color: var(--slate-300); cursor: pointer; position: relative; transition: color .2s ease, transform .2s ease; }
  .feats.live h3:hover { color: #fff; transform: translateX(4px); }
  .feats.live h3::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink-800); transform: scaleX(0); transform-origin: left; }
  .feats.live .on h3 { color: #fff; }
  .feats.live .on h3::before { animation: fill 6s linear both; }
  .feats.live.held .on h3::before { animation: none; transform: none; }
  .feats.live h3 { z-index: 0; padding-right: 20px; }
  .feats.live p { grid-column: 1; display: none; padding: 0 0 18px 20px; }
  .feats.live .on p { display: block; animation: up .4s ease both; }
  .feats.live .feat-shot { grid-column: 2; grid-row: 1 / span 12; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .45s ease, transform .6s ease; pointer-events: none; }
  .feats.live .on .feat-shot { opacity: 1; transform: none; }
}
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.crop { height: var(--h); overflow: hidden; margin: 0 0 0 24px; background: var(--ink-950); }
.crop img { display: block; max-width: none; width: 1120px; height: auto; }
.foot-note { font-size: var(--s-small); color: var(--slate-300); margin: 16px 0 0; }
.soon { margin-top: 48px; background: var(--ink-900); padding: 20px 24px; max-width: none; color: var(--slate-300); }

/* tutorials list and prose fields */
.tut-sec .wide, .cta .small { font-size: var(--s-body); }
.tut-sec .wide { margin-top: 16px; }
.tut-list { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tut-list { gap: 4px clamp(24px, 4vw, 64px); }
.tut-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; color: var(--ink-950); text-decoration: none; padding: 16px 0; font: 600 var(--s-lead)/1.2 var(--display); letter-spacing: -0.015em; }
.tut-list a::after { content: ""; flex: none; width: .9em; height: .9em; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.tut-list a:hover::after, .tut-list a:focus-visible::after { transform: translateX(6px); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 96px); margin: 40px 0 0; font-size: var(--s-lead); line-height: 1.35; }
.cols p { font-size: inherit; } .cols .actions { margin: 0; align-self: start; }

/* faq: sticky heading, filled tiles */
.faq-sec { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 6vw, 96px); align-items: start; }
.faq-sec h2 { position: sticky; top: 24px; }
.faq details { background: var(--slate-100); margin-bottom: 8px; }
.faq summary { list-style: none; cursor: pointer; padding: 22px 24px; font: 600 22px/1.3 var(--display); display: flex; justify-content: space-between; gap: 16px; min-height: 72px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 400 var(--s-mid)/1 var(--font); }
.faq details[open] { background: var(--aqua-400); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 24px 22px; margin: 0; max-width: 56ch; }
.cta { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(24px, 6vw, 96px); align-items: end; }
.cta-shot { margin: 0; background: var(--ink-950); } .cta-shot img { display: block; width: 100%; height: auto; }
.cta h2 { max-width: none; }

/* footer: tiles */
.foot { background: var(--ink-950); color: var(--slate-300); padding: 8px var(--m) var(--m); }
.foot-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; }
.tile { background: var(--ink-900); padding: 24px; margin: 0; max-width: none; }
.tile-say { grid-column: 1 / 5; min-height: 220px; color: #fff; font-size: var(--s-lead); line-height: 1.3; display: flex; flex-direction: column; justify-content: space-between; } .tile-say .small { color: var(--slate-300); margin: 0; }
.tile-nav { grid-column: 5 / 9; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 6px 16px; } .tile-nav a { color: #fff; text-decoration: none; padding: 2px 0; } .tile-nav a:hover { color: var(--aqua-300); }
.tile-go { grid-column: 9 / 13; background: var(--aqua-400); color: var(--ink-950); text-decoration: none; font: 700 var(--s-lead)/1.1 var(--display); letter-spacing: -0.02em; display: flex; flex-direction: column; justify-content: space-between; min-height: 220px; transition: background .12s; } .tile-go:hover { background: var(--aqua-300); }
.tile-mark { grid-column: 1 / 13; font: 700 clamp(56px, 20vw, 380px)/.9 var(--display); letter-spacing: -0.04em; color: var(--aqua-400); overflow: hidden; white-space: nowrap; padding-bottom: 8px; }

/* inner pages and forms */
section.narrow { background: var(--slate-50); max-width: none; padding: clamp(40px, 7vw, 96px) var(--m) var(--gap); }
section.narrow > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.narrow h1 { font-size: var(--s-big); line-height: .95; margin-bottom: 24px; max-width: 780px; }
.narrow p, .narrow li { max-width: 66ch; }
.narrow h2 { font-size: var(--s-mid); max-width: 780px; margin-top: 48px; margin-bottom: 12px; letter-spacing: -0.025em; }
.narrow h3 { margin: 24px auto 8px; }
.plain { padding-left: 1.2em; } .plain li { margin-bottom: .5em; }
table { border-collapse: collapse; width: 100%; max-width: 62ch; } th, td { text-align: left; padding: 10px 12px; vertical-align: top; } th { background: var(--slate-100); } tr:nth-child(even) td { background: #fff; }
code { font: inherit; background: var(--slate-100); padding: 1px 5px; }
.field { display: block; margin: 0 0 18px; max-width: 420px; } .field span { display: block; font-size: var(--s-small); margin-bottom: 4px; }
input { width: 100%; font: 17px var(--font); padding: 12px; border: 2px solid var(--slate-300); background: #fff; color: var(--ink-950); border-radius: 0; }
input:focus { border-color: var(--aqua-700); }
.note { background: var(--slate-100); padding: 14px 16px; } .err { background: #fde8e6; color: var(--bad); padding: 12px 14px; font-weight: 600; } .ok { background: #d9f5ef; color: #07574f; padding: 12px 14px; font-weight: 600; }
.mail { background: #fff; padding: 12px 18px; margin: 18px auto; } .mail h2 { margin: 0 0 4px; font-size: 22px; } .mail a { word-break: break-all; }
.qr { margin: 20px 0 28px; } .qr svg { width: 240px; max-width: 100%; height: auto; background: #fff; }
#paypal-buttons { max-width: 420px; margin: 16px 0; }

/* pricing: plan names, one stage */
.plans { background: var(--ink-950); color: #fff; padding-top: clamp(40px, 6vw, 80px); }
.plans h1 { max-width: 14ch; }
.plan-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 6vw, 96px); margin-top: clamp(32px, 5vw, 64px); align-items: start; }
.plan-names { display: grid; gap: 4px; }
.plan-names a { display: block; color: var(--slate-300) !important; text-decoration: none; font: 700 var(--s-head)/1.05 var(--display); letter-spacing: -0.04em; padding-left: .5em; position: relative; }
.plan-names a[aria-current="true"] { color: #fff !important; }
.plan-names a[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: .42em; width: .3em; height: .3em; background: var(--aqua-400); border-radius: 50%; }
.plan-stage { background: var(--ink-900); padding: clamp(24px, 4vw, 48px); }
.js .plan-stage .plan { display: none; } .js .plan-stage .plan.on { display: block; animation: fadein .25s ease both; }
.plan + .plan { margin-top: 40px; } .js .plan + .plan { margin-top: 0; }
.fig { font: 700 var(--s-big)/.9 var(--display); letter-spacing: -0.04em; color: var(--aqua-400); margin: 0 0 8px; max-width: none; }
.fig small { font: 400 17px var(--display); letter-spacing: 0; color: var(--slate-300); margin-left: 10px; }
.plan ul { padding-left: 1.2em; } .plan li { margin-bottom: .45em; } .plan p { max-width: 48ch; }
.timeline { background: var(--slate-50); color: var(--ink-950); }
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 40px 0 0; list-style: none; padding: 0; }
.days li { background: var(--slate-100); padding: 20px 22px; } .days li:last-child { background: var(--aqua-400); }
.days b { display: block; font: 700 var(--s-mid)/1 var(--display); letter-spacing: -0.04em; margin-bottom: 8px; }
.days span { font-size: var(--s-body); display: block; max-width: 28ch; }
.buying { background: var(--slate-50); color: var(--ink-950); display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 6vw, 96px); align-items: start; }
.dl-big { background: var(--ink-950); color: #fff; padding-top: clamp(40px, 6vw, 80px); }
.dl-big .lede { max-width: 36ch; }

/* tutorials */
.tut-hero h1 { font-size: var(--s-big); line-height: .95; }
.tut-hero { background: var(--ink-950); color: #fff; padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.tut-hero .lede { max-width: 40ch; }
.tut-layout { background: var(--slate-50); color: var(--ink-950); display: grid; grid-template-columns: 3fr 9fr; gap: clamp(24px, 5vw, 80px); align-items: start; padding: clamp(32px, 5vw, 64px) var(--m) var(--gap); }
.toc { position: sticky; top: 16px; display: grid; gap: 2px; font-size: var(--s-body); }
.toc a { color: var(--ink-950); text-decoration: none; padding: 7px 12px; } .toc a:hover { background: var(--slate-100); } .toc a.on { background: var(--aqua-400); font-weight: 600; }
.guide { min-width: 0; }
.guide article { padding: 0 0 var(--gap); scroll-margin-top: 24px; }
.guide article:last-child { padding-bottom: 0; }
.guide h2 { font-size: var(--s-head); max-width: 18ch; margin-bottom: 16px; }
.guide h3 { margin: 32px 0 8px; font-size: 22px; letter-spacing: -0.01em; }
.guide p, .guide li { max-width: 66ch; }
.guide ol, .guide ul { padding-left: 1.3em; } .guide li { margin-bottom: .55em; }
.guide .lead { font: 400 var(--s-lead)/1.35 var(--display); max-width: 40ch; margin-bottom: 20px; }
.guide kbd { background: var(--slate-200); color: var(--ink-950); }
.shot { margin: 24px 0 0; background: var(--ink-950); } .shot img { display: block; width: 100%; height: auto; }
.shot figcaption { color: var(--slate-300); font-size: var(--s-small); padding: 10px 14px 12px; }
.warn { background: #fff3cd; color: #5c4400; padding: 14px 16px; max-width: 66ch; margin: 20px 0; }
.say { background: var(--slate-100); padding: 14px 16px; max-width: 66ch; margin: 20px 0; }
.guide .keys kbd { margin-right: 4px; }

@media (max-width: 900px) {
  .hero-grid, .cols, .faq-sec, .plan-grid, .tut-layout, .how-steps, .flow, .feat-item { grid-template-columns: 1fr; }
  .days, .cta, .buying { grid-template-columns: 1fr; }
  .feat-shot { grid-column: 1; grid-row: auto; margin-top: 20px; }
  .flow-line { grid-template-columns: 1fr 1fr; gap: 12px; } .flow-line li::after { display: none; }
  .tut-list { grid-template-columns: 1fr 1fr; }
  .how-steps p, .feat-item p, .guide p, .guide li { max-width: none; }
  .faq-sec h2 { position: static; }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: 4px 4px; } .toc a { background: var(--slate-100); }
  .tile-say, .tile-nav, .tile-go { grid-column: 1 / 13; min-height: 0; } .tile-go { min-height: 120px; }
  .bar nav { gap: 4px 14px; }
}
@media (max-width: 560px) { .tut-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .caret, .wave i, .pic-keys .hot, .pic-keys .pill, .mic::before, .pic-talk .raw q, .flow-line li { animation: none !important; } html { scroll-behavior: auto; } .btn { transition: none; } }

/* entrance: content rises once as it scrolls in; always visible without script or with reduced motion */
.js .rise { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--d, 0ms); }
.js .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rise { opacity: 1; transform: none; transition: none; } }

.dl-big .note { color: var(--ink-950); max-width: 62ch; } .dl-big .small { color: var(--slate-300); }

/* feature crops: true-size pieces of the app screens (inline styles are blocked by the CSP) */
.c-models { --h: 250px; } .c-models img { margin:-385px 0 0 -460px; }
.c-keys { --h: 220px; } .c-keys img { margin:-130px 0 0 -460px; }
.c-cleanup { --h: 200px; } .c-cleanup img { margin:-130px 0 0 -460px; }
.c-dict { --h: 230px; } .c-dict img { margin:-330px 0 0 -260px; }
.c-history { --h: 230px; } .c-history img { margin:-130px 0 0 -260px; }
.c-lic { --h: 170px; } .c-lic img { margin:-130px 0 0 -460px; }

/* feedback on controls */
.faq summary, .plan-names a { transition: transform .15s ease, background .15s ease; }
.plan-names a:hover { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) { .plan-names a:hover { transform: none; } }
.c-licfree { --h: 170px; } .c-licfree img { margin: -130px 0 0 -460px; }
.plan .crop { margin: 24px 0 0; max-width: 100%; } .plan-stage .actions { margin-top: 24px; }
.plan-grid > *, .hero-grid > *, .tut-layout > *, .cta > *, .buying > * { min-width: 0; }
.plan .crop { width: 100%; max-width: 640px; } .fig { margin-bottom: 24px; }
.js .rise { transition-duration: .9s; }

/* download and help: copy left, a real screen right; then rows of heading + answer */
.dl-big { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.dl-shot { margin: 0; background: var(--ink-900); } .dl-shot img { display: block; width: 100%; height: auto; } .dl-shot figcaption { color: var(--slate-300); font-size: var(--s-small); padding: 10px 14px 12px; }
.rows { background: var(--slate-50); color: var(--ink-950); padding-top: clamp(24px, 4vw, 56px); }
.row { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 6vw, 96px); padding: clamp(32px, 4vw, 56px) 0; align-items: start; }
.row h2 { font-size: var(--s-mid); max-width: 16ch; }
.row > div { min-width: 0; } .row .shot { max-width: 720px; }
.help-hero .lede a { color: var(--aqua-300); }
@media (max-width: 900px) { .dl-big, .row { grid-template-columns: 1fr; } }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; } .pair .crop { margin: 0; --h: 170px; max-width: 620px; }
.buying .crop { margin: 24px 0 0; max-width: 620px; }
@media (max-width: 900px) { .pair { grid-template-columns: 1fr; } }

h1, h2, h3 { text-wrap: balance; }

/* account pages: title on the dark field, the form on a white panel */
section.narrow.auth { background: var(--ink-950); color: #fff; display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
section.narrow.auth > * { max-width: none; margin: 0; }
.auth h1 { margin: 0; font-size: clamp(36px, 5.2vw, 72px); }
.auth-body { background: #fff; color: var(--ink-950); padding: clamp(24px, 4vw, 48px); }
.auth-body > *:first-child { margin-top: 0; } .auth-body h2:first-of-type { margin-top: 32px; }
.auth-body form { margin-bottom: 12px; } .auth-body .field, .auth-body .field input { max-width: 100%; }
.auth-body .note { margin: 20px 0; } .auth-body p.small { margin-top: 20px; }
@media (max-width: 800px) { section.narrow.auth { grid-template-columns: 1fr; } .auth-body { margin: 0 calc(var(--m) * -1); padding: 24px var(--m); } }
@media (max-width: 800px) { .plan-stage { margin: 0 calc(var(--m) * -1); padding: 24px var(--m); } }

/* home pricing: the licence screen the price buys, beside the terms */
.price-side { min-width: 0; }
.price-shot { margin: 0 0 4px; background: var(--ink-900); padding: clamp(8px, 1vw, 14px); }
.price-shot img { display: block; width: 100%; height: auto; }
.price-sec .cols { align-items: start; font-size: var(--s-body); line-height: 1.55; }
.price-sec .cols > p:first-child { font: 400 var(--s-lead)/1.4 var(--display); }
.price-side .actions { margin-top: 20px; }

/* features on a phone: the part of each screen that the feature is about, at true size */
@media (max-width: 900px) {
  .feat-shot { padding: 0; height: var(--h, 240px); overflow: hidden; }
  .feat-shot img { width: 1120px; max-width: none; }
  [data-crop="c-models"] { --h: 250px; } [data-crop="c-models"] img { margin: -385px 0 0 -460px; }
  [data-crop="c-keys"] { --h: 220px; } [data-crop="c-keys"] img { margin: -130px 0 0 -460px; }
  [data-crop="c-cleanup"] { --h: 200px; } [data-crop="c-cleanup"] img { margin: -130px 0 0 -460px; }
  [data-crop="c-dict"] { --h: 230px; } [data-crop="c-dict"] img { margin: -330px 0 0 -260px; }
  [data-crop="c-history"] { --h: 230px; } [data-crop="c-history"] img { margin: -130px 0 0 -260px; }
  [data-crop="c-lic"] { --h: 170px; } [data-crop="c-lic"] img { margin: -130px 0 0 -460px; }
}

/* account pages: the app's own home screen fills the column under the title (a picture only, no text in it) */
.auth h1::after { content: ""; display: block; margin-top: clamp(32px, 4vw, 56px); aspect-ratio: 1120 / 720; background: var(--ink-900) url("/static/app-home.png") center / 96% auto no-repeat; }
@media (max-width: 800px) { .auth h1::after { display: none; } }

/* 404: the hero's frame, with the main pages as the way out */
.lost-list { grid-template-columns: 1fr; margin: 0; }
.lost-list a { color: #fff; }
.lost { min-height: 70vh; }
.pair .crop { max-width: none; width: 100%; } .buying .plain { margin: 0; align-self: center; }
.tile-go .arrow { display: block; width: 32px; height: 32px; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .25s cubic-bezier(.16, 1, .3, 1); } .tile-go:hover .arrow { transform: translateX(8px); }