/* generated by make_fonts.py: Inter (SIL OFL 1.1), subsets per script; a page only downloads the ranges its words use */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-400-cyrillic.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-400-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-600-cyrillic.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-600-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-700-cyrillic.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-700-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.5%; line-gap-override: 0%; }

/* Cantoza website: the Amethyst look of the program (dark violet canvas, lit panel edges, one accent, a slow aurora in the corner).
   One typeface: Inter, the program's own (self-hosted subsets, fonts.css). Tokens first. No screenshots anywhere: the pictures are drawn with CSS and SVG (art.py). */
:root {
  --canvas: #09070b;
  --side: #0e0b11;
  --panel: #1d1825;
  --panel-hi: #251e30;
  --raised: #3a2f49;
  --accent: #9d5cff;
  --accent-hi: #b98dff;
  --accent-ink: #150a24;
  --text: #e2dcef;
  --muted: #aaa4c2;
  --border: #4d3a6b;
  --trim: #5a3d8a;
  --pink: #ff5ad0;
  --line: rgba(157, 92, 255, .26);
  --radius: 16px;
  --sans: "Inter", "Inter Fallback", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; background: linear-gradient(180deg, var(--canvas), #0d0a12 45%, var(--canvas) 90%); color: var(--text); font: 400 17px/1.62 var(--sans); min-height: 100vh; overflow-x: hidden;
  font-feature-settings: "calt", "kern", "case"; font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
img, svg { max-width: 100%; }
a { color: var(--accent-hi); text-underline-offset: .2em; }
a:hover { color: #fff; }
h1, h2, h3 { line-height: 1.1; letter-spacing: -.022em; margin: 0; font-weight: 600; color: #f6f1ff; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.6vw, 4.1rem); letter-spacing: -.04em; font-weight: 600; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -.034em; }
h3 { font-size: 1.1rem; letter-spacing: -.012em; line-height: 1.25; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: .6rem; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: .6rem 1rem; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { left: .8rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 2rem, 70rem); margin-inline: auto; }

/* ---------- the aurora (the corner glow of the program): three soft colour fields that drift very slowly ---------- */
.aurora { position: absolute; inset: 0 0 auto 0; height: 980px; overflow: hidden; pointer-events: none; z-index: 0; contain: paint;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.aurora .a1 { width: 900px; height: 700px; left: -260px; top: -300px; background: radial-gradient(closest-side, rgba(157, 92, 255, .42), transparent); animation: drift1 34s ease-in-out infinite alternate; }
.aurora .a2 { width: 800px; height: 620px; right: -240px; top: -220px; background: radial-gradient(closest-side, rgba(255, 90, 208, .2), transparent); animation: drift2 41s ease-in-out infinite alternate; }
.aurora .a3 { width: 1000px; height: 520px; left: 18%; top: 230px; background: radial-gradient(closest-side, rgba(92, 110, 255, .2), transparent); animation: drift3 47s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate3d(140px, 70px, 0) scale(1.12); } }
@keyframes drift2 { to { transform: translate3d(-160px, 90px, 0) scale(1.1); } }
@keyframes drift3 { to { transform: translate3d(-110px, -50px, 0) scale(1.18); } }
main, .site-footer { position: relative; z-index: 1; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; isolation: isolate; }
/* the top bar is not a band of its own: a veil of the page colour with a soft blur behind the words, fading out downwards (no edge, no line, at any scroll position) */
.site-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 30px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 7, 11, .86), rgba(9, 7, 11, .55) 55%, rgba(9, 7, 11, 0));
  -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent); mask-image: linear-gradient(180deg, #000 50%, transparent); transition: opacity .3s; }

.bar { display: flex; align-items: center; gap: 1.2rem; min-height: 64px; }
.brand { display: inline-flex; flex: none; }
.brand img { display: block; height: 42px; width: auto; }
.nav { display: flex; gap: .2rem; margin-left: .6rem; }
.nav a { color: var(--muted); text-decoration: none; padding: .45rem .8rem; border-radius: 10px; font-size: .96rem; font-weight: 500; transition: background .2s, color .2s; }
.nav a:hover { color: #fff; background: rgba(157, 92, 255, .14); }
.nav a[aria-current="page"] { color: #fff; background: rgba(157, 92, 255, .22); }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; color: var(--muted); font-size: .92rem; padding: .45rem .7rem; border-radius: 10px; display: flex; align-items: center; gap: .4rem; border: 1px solid transparent; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { color: #fff; border-color: var(--line); background: rgba(157, 92, 255, .1); }
.lang summary svg { width: 1.05em; height: 1.05em; }
.lang ul { position: absolute; right: 0; top: calc(100% + .4rem); margin: 0; padding: .4rem; list-style: none; min-width: 13rem; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); max-height: 70vh; overflow: auto; }
.lang li a { display: block; padding: .5rem .8rem; border-radius: 9px; color: var(--text); text-decoration: none; font-size: .95rem; }
.lang li a:hover { background: rgba(157, 92, 255, .2); }
.lang li a[aria-current="true"] { color: var(--accent-hi); font-weight: 700; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); color: var(--text); }
.menu summary::-webkit-details-marker { display: none; }
.menu svg { width: 22px; height: 22px; }
.menu nav { position: absolute; right: 0; top: calc(100% + .4rem); min-width: 14rem; padding: .4rem; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .8); display: grid; }
.menu nav a { padding: .7rem .9rem; border-radius: 9px; color: var(--text); text-decoration: none; }
.menu nav a:hover, .menu nav a[aria-current="page"] { background: rgba(157, 92, 255, .2); }

/* ---------- the top bar of the beta site: logo with its Beta badge | a glass pill with the sections | language and the way to the form ---------- */
.bar3 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; min-height: 68px; }
.brand-cell { display: flex; align-items: center; gap: .65rem; justify-self: start; min-width: 0; }
.beta-badge { flex: none; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1; padding: .36em .7em .34em; border-radius: 999px; color: var(--accent-hi);
  background: linear-gradient(180deg, rgba(157, 92, 255, .22), rgba(157, 92, 255, .08)); border: 1px solid rgba(185, 141, 255, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.bar3 .bar-end { justify-self: end; margin-left: 0; }
.pill { position: relative; display: flex; align-items: center; gap: .1rem; padding: .28rem; border-radius: 999px; isolation: isolate;
  background: linear-gradient(180deg, rgba(40, 30, 62, .62), rgba(24, 17, 38, .5)); border: 1px solid rgba(157, 92, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 14px 34px -18px rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.pill a { position: relative; z-index: 1; padding: .45rem 1rem; border-radius: 999px; color: var(--muted); font-size: .92rem; font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
  text-decoration: none; transition: color .2s, background .2s; }
.pill a:hover { color: #fff; background: rgba(157, 92, 255, .12); }
.pill a.on { color: #fff; background: none; }
.pill .ind { position: absolute; z-index: 0; top: .28rem; bottom: .28rem; left: 0; width: var(--w, 0px); transform: translateX(var(--x, 0px)); border-radius: 999px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(157, 92, 255, .5), rgba(157, 92, 255, .24)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 18px -8px rgba(157, 92, 255, .95);
  transition: transform .4s cubic-bezier(.3, .8, .25, 1), width .4s cubic-bezier(.3, .8, .25, 1), opacity .25s; }
.pill .ind.show { opacity: 1; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font: inherit; font-weight: 700; font-size: 1rem; color: var(--accent-ink); text-decoration: none; border: 0; cursor: pointer;
  padding: .85em 1.5em; border-radius: 12px; background: linear-gradient(180deg, #bf97ff, #9d5cff); box-shadow: 0 10px 30px -10px rgba(157, 92, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .2s, box-shadow .2s, filter .2s; }
.btn:hover { color: var(--accent-ink); transform: translateY(-2px); box-shadow: 0 16px 38px -10px rgba(157, 92, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .5); filter: brightness(1.05); }
.btn:active { transform: none; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn.small { padding: .55em 1.05em; font-size: .92rem; border-radius: 10px; }
.btn.ghost { color: var(--text); background: rgba(157, 92, 255, .1); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.btn.ghost:hover { color: #fff; background: rgba(157, 92, 255, .2); border-color: var(--accent); }
.btn[disabled] { opacity: .7; cursor: progress; }

/* ---------- panels ---------- */
.panel { background: linear-gradient(180deg, var(--panel-hi), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 20px 50px -30px rgba(0, 0, 0, .9); }
.badge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .18em .55em; border-radius: 999px; color: var(--accent-ink);
  background: linear-gradient(180deg, #c9a6ff, #9d5cff); vertical-align: .12em; }
.eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-hi); margin-bottom: 1rem; }
.lede { color: var(--muted); font-size: 1.15rem; max-width: 40rem; }
section { position: relative; }
.glow::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 60% at 50% 45%, rgba(157, 92, 255, .16), transparent 72%); }
.section { padding: clamp(2.6rem, 6vw, 4.6rem) 0; }
.band { background: linear-gradient(180deg, rgba(14, 11, 17, 0), rgba(24, 17, 36, .7) 18%, rgba(24, 17, 36, .7) 82%, rgba(14, 11, 17, 0)); }
.head { text-align: center; max-width: 44rem; margin: 0 auto clamp(2rem, 5vw, 3.2rem); display: grid; gap: .9rem; }
.head .lede { margin-inline: auto; }

/* ---------- hero ---------- */
.hero { padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); }
.hero h1 { margin-bottom: 1.2rem; }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, #cfb0ff 10%, var(--accent) 50%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.facts { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; list-style: none; padding: 0; margin: 1.6rem 0 0; color: var(--muted); font-size: .92rem; }
.facts li { display: flex; align-items: center; gap: .45rem; }
.facts li::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.ver { margin-top: .7rem; font-size: .85rem; color: #8d86a8; }

/* ---------- feature cards ---------- */
.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); }
.card { padding: 1.5rem 1.4rem 1.6rem; display: grid; gap: .6rem; align-content: start; transition: transform .25s, border-color .25s, box-shadow .25s; }
.card:hover { transform: translateY(-3px); border-color: rgba(157, 92, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 26px 56px -28px rgba(157, 92, 255, .6); }
.card p { color: var(--muted); font-size: .98rem; }
.ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--accent-hi); margin-bottom: .3rem;
  background: linear-gradient(180deg, rgba(157, 92, 255, .3), rgba(157, 92, 255, .1)); border: 1px solid rgba(157, 92, 255, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.ic svg { width: 24px; height: 24px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; list-style: none; padding: 0; margin: 2.2rem auto 0; max-width: 56rem; }
.chips li { padding: .5em 1em; border-radius: 999px; border: 1px solid var(--line); background: rgba(157, 92, 255, .08); color: var(--text); font-size: .94rem; }
.more-h { text-align: center; margin-top: 3rem; color: var(--muted); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }


/* ---------- Free and Pro ---------- */
.plans { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; max-width: 60rem; margin-inline: auto; }
.plan { padding: 1.8rem 1.7rem; }
.plan.pro { border-color: rgba(157, 92, 255, .7); background: linear-gradient(180deg, #2a1f3b, var(--panel)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 70px -26px rgba(157, 92, 255, .8); }
.plan h3 { font-size: 1.5rem; display: flex; align-items: center; gap: .6rem; }
.plan .sub { color: var(--muted); margin: .4rem 0 1.2rem; font-size: .96rem; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.ticks li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .7rem; align-items: start; }
.ticks li::before { content: ""; width: 1.3rem; height: 1.3rem; margin-top: .15rem; border-radius: 50%; background: rgba(157, 92, 255, .25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a6ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat; }
.center { text-align: center; margin-top: 2rem; }

/* ---------- comparison table ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.compare th, .compare td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid rgba(157, 92, 255, .16); vertical-align: top; }
.compare thead th { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: rgba(14, 11, 17, .5); }
.compare tbody th { font-weight: 500; color: var(--text); width: 52%; }
.compare tr:last-child > * { border-bottom: 0; }
.compare td { width: 24%; color: var(--muted); font-size: .94rem; }
.compare td.on { color: var(--accent-hi); }
.compare .yes, .compare .no { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; }
.compare .yes { background: rgba(157, 92, 255, .28); color: var(--accent-hi); }
.compare .no { background: rgba(255, 255, 255, .06); color: #6f6885; }
.compare svg { width: 1rem; height: 1rem; }
.promises { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 1.4rem; }
.promises .panel { padding: 1.3rem 1.3rem 1.4rem; color: var(--muted); }
.promises .panel strong { display: block; color: #fff; margin-bottom: .3rem; font-size: 1.05rem; }

/* ---------- download ---------- */
.dl { display: grid; gap: 1.2rem; max-width: 46rem; margin-inline: auto; padding: clamp(1.6rem, 4vw, 2.4rem); text-align: center; justify-items: center; }
.dl .meta { color: var(--muted); }
.hash { font: .78rem/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #8d86a8; word-break: break-all; }
.hash b { display: block; font: 700 .72rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); max-width: 62rem; margin: 2.4rem auto 0; counter-reset: s; padding: 0; list-style: none; }
.steps li { padding: 1.3rem 1.3rem 1.4rem; counter-increment: s; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; margin-bottom: .8rem; font-weight: 700; color: var(--accent-ink); background: linear-gradient(180deg, #c9a6ff, #9d5cff); }
.steps p { color: var(--muted); margin-top: .3rem; font-size: .96rem; }
.good { max-width: 46rem; margin: 2.4rem auto 0; padding: 1.5rem 1.6rem; }
.good ul { margin: .8rem 0 0; padding-left: 1.2rem; color: var(--muted); display: grid; gap: .55rem; }

/* ---------- beta form ---------- */
.form-card { max-width: 38rem; margin-inline: auto; padding: clamp(1.4rem, 4vw, 2.2rem); }
form.beta { display: grid; gap: 1.1rem; }
form.beta label { display: grid; gap: .4rem; font-weight: 600; font-size: .95rem; }
form.beta .opt { font-weight: 400; color: #8d86a8; font-size: .85rem; margin-left: .35rem; }
form.beta input[type=email], form.beta select, form.beta textarea { font: inherit; font-weight: 400; color: var(--text); background: rgba(9, 7, 11, .6); border: 1px solid var(--border); border-radius: 12px; padding: .8em 1em; width: 100%;
  transition: border-color .2s, box-shadow .2s; }
form.beta textarea { min-height: 5.6rem; resize: vertical; }
form.beta input::placeholder, form.beta textarea::placeholder { color: #8d86a8; }
form.beta input:focus, form.beta select:focus, form.beta textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(157, 92, 255, .22); }
form.beta select option { background: #1d1825; }
.check { display: grid; grid-template-columns: 1.15rem 1fr; gap: .7rem; align-items: start; font-weight: 400; color: var(--muted); font-size: .9rem; margin-top: .2rem; }
form.beta .err { min-height: 0; }
form.beta .err:empty { margin-block: -.55rem; }
.check input { appearance: none; -webkit-appearance: none; width: 1.2rem; height: 1.2rem; margin: .2rem 0 0; border: 1.5px solid var(--border); border-radius: 6px; background: rgba(9, 7, 11, .6);
  display: grid; place-content: center; cursor: pointer; transition: background .2s, border-color .2s, box-shadow .2s; }
.check input::after { content: ""; width: .7rem; height: .7rem; transform: scale(0); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23150a24' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.check input:checked { background: linear-gradient(180deg, #c9a6ff, #9d5cff); border-color: #c9a6ff; box-shadow: 0 0 14px -2px rgba(157, 92, 255, .8); }
.check input:checked::after { transform: scale(1); }
.check input:hover { border-color: var(--accent-hi); }
.cf-turnstile:empty { display: none; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.err { color: #ff93b0; font-size: .92rem; min-height: 1.3em; }
.fine { text-align: center; color: #8d86a8; font-size: .86rem; margin-top: 1.1rem; }
.cf-turnstile { min-height: 0; }

/* ---------- the beta page (the site until the release): the form beside the pitch ---------- */
.beta-grid { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); }
.beta-grid .form-card { max-width: none; margin: 0; scroll-margin-top: 5.5rem; }
.form-card h2 { font-size: 1.5rem; }
.form-sub { color: var(--muted); margin: .3rem 0 1.3rem; font-size: .98rem; }
.form-card .fine { margin-top: 1rem; }
form.beta input[aria-invalid="true"] { border-color: #ff7aa0; box-shadow: 0 0 0 3px rgba(255, 122, 160, .2); }
form.beta .check input[aria-invalid="true"] { outline: 2px solid #ff7aa0; outline-offset: 2px; }
.err.on { min-height: 0; }
details.more { border: 1px solid var(--line); border-radius: 12px; background: rgba(9, 7, 11, .32); }
details.more summary { cursor: pointer; padding: .8em 1em; font-weight: 600; font-size: .95rem; list-style: none; display: flex; align-items: center; gap: .3rem; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: ""; margin-left: auto; width: .55rem; height: .55rem; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
details.more[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.more summary:hover { color: #fff; }
.more-body { display: grid; gap: 1.1rem; padding: .2rem 1em 1.1em; }
.narrow { width: min(100% - 2rem, 44rem); }
.faq { display: grid; gap: .8rem; }
.qa { padding: 0; }
.qa summary { cursor: pointer; padding: 1.05rem 1.3rem; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 1rem; color: #f4efff; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; margin-left: auto; flex: none; width: .6rem; height: .6rem; border: solid var(--accent-hi); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.qa[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.qa p { padding: 0 1.3rem 1.2rem; color: var(--muted); }

/* ---------- beta strip, thanks, 404 ---------- */
.strip { padding: clamp(1.8rem, 4vw, 2.6rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem 2rem;
  background: linear-gradient(110deg, rgba(157, 92, 255, .28), rgba(255, 90, 208, .1) 70%, rgba(29, 24, 37, .9)); }
.strip p { color: var(--muted); margin-top: .35rem; }
.solo { min-height: 56vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 1.1rem; padding: 3rem 0; }
.solo .big { font-size: clamp(4.5rem, 16vw, 9rem); font-weight: 700; line-height: 1; letter-spacing: -.05em; background: linear-gradient(120deg, var(--accent-hi), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- documents (contact, privacy, terms) ---------- */
.doc { max-width: 46rem; margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) 0 4rem; }
.doc h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); margin-bottom: .5rem; }
.doc h2 { font-size: 1.3rem; margin: 2.2rem 0 .6rem; }
.doc .updated { color: #8d86a8; font-size: .9rem; margin-bottom: 1.6rem; }
.doc p, .doc li { color: #cfc8e0; }
.doc p { margin: .7rem 0; }
.doc ul { padding-left: 1.2rem; display: grid; gap: .5rem; }

/* ---------- footer: ONE row (logo and copyright on the left, the links on the right), no tagline, the same on every page ---------- */
.site-footer { background: linear-gradient(180deg, rgba(14, 11, 17, 0), rgba(14, 11, 17, .78) 120px); padding: clamp(1.6rem, 4vw, 2.2rem) 0 calc(1.6rem + env(safe-area-inset-bottom)); margin-top: 2rem; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1100px, 92%); height: 1px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(157, 92, 255, .34), transparent); }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 2rem; }
.foot-id { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.foot-logo { display: inline-flex; flex: none; }
.foot-logo img { display: block; height: 34px; width: auto; }
.copy { color: #8d86a8; font-size: .86rem; white-space: nowrap; }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 .4rem; margin-right: -.75rem; }   /* (the last word lines up with the edge of the page; the hover shape reaches out a little) */
.foot-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .75rem; border-radius: 10px; color: var(--text); text-decoration: none; font-size: .92rem; font-weight: 500; transition: color .2s, background .2s; }
.foot-links a:hover { color: #fff; background: rgba(157, 92, 255, .14); }
.foot-note { color: #8d86a8; font-size: .8rem; margin-top: .5rem; text-align: right; }

/* ---------- small screens ---------- */
@media (max-width: 920px) {
  .beta-grid { grid-template-columns: minmax(0, 1fr); }
  .nav { display: none; }
  .menu { display: block; }
  .bar3 { grid-template-columns: 1fr auto; }
  .bar3 .pill { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; justify-items: center; }
  .hero-copy .lede { margin-inline: auto; }
  .cta-row, .facts { justify-content: center; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .brand { min-height: 44px; align-items: center; }
  .lang summary { min-height: 44px; }
  .btn.small { min-height: 44px; display: inline-flex; align-items: center; }
  .plans { grid-template-columns: 1fr; }
  .foot { flex-direction: column; justify-content: center; text-align: center; gap: .4rem; }
  .foot-id { flex-direction: column; gap: .35rem; }
  .foot-links { justify-content: center; margin-right: 0; }
  .foot-links a { min-height: 44px; padding: 0 .9rem; }
  .foot-note { text-align: center; }
  .btn.small.hide-s { display: none; }
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare tr { padding: .9rem 1rem; border-bottom: 1px solid rgba(157, 92, 255, .16); }
  .compare tr:last-child { border-bottom: 0; }
  .compare th, .compare td { padding: 0; border: 0; width: 100% !important; }
  .compare tbody th { color: #fff; font-weight: 600; margin-bottom: .35rem; }
  .compare td { display: flex; gap: .6rem; align-items: center; padding: .15rem 0; }
  .compare td::before { content: attr(data-label); min-width: 4.6rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #8d86a8; }
}
@media (max-width: 420px) {
  .btn.small { padding: .5em .8em; font-size: .88rem; }
  .brand img { height: 36px; }
  .bar { gap: .5rem; }
  .beta-badge { font-size: .6rem; padding: .34em .6em .32em; }
  .brand-cell { gap: .45rem; }
  .lang summary span { display: none; }
}

/* ---------- people who asked for less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora i { animation: none !important; }
  .card, .btn, .site-header, .pill .ind, .pill a { transition: none; }
}
@media print { .aurora, .site-header, .menu, .grain { display: none; } body { background: #fff; color: #000; } }

/* =====================================================================================================================================
   The beta page and the details that make the site feel made by hand: the entrance (the big logo written onto the page, the headline), a plain list of
   what Cantoza does, three steps, the questions, the quiet film grain, the soft light that follows the pointer, the reveals on scroll and the glossy
   3D check mark of the thank-you page. Everything that moves is transform or opacity; site.js pauses what is off screen (the .off class), skips the
   entrance when the page is scrolled (.intro-done) and tilts the check mark. build.py appends this file to site.css.
   ===================================================================================================================================== */
body.home .site-header:not(.scrolled)::before { opacity: 0; }
body.home .section { padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.brand { transition: opacity .35s; }
.brand img, .foot img, .foot-logo img, .reveal img { -webkit-user-drag: none; user-select: none; pointer-events: none; }

/* film grain: a faint, static noise over everything (it breaks up the gradients' banding and makes the dark feel like a surface) */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .055;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* reveals: what is below the first screen settles in once, as it is reached (without scripts everything is simply there) */
html.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--rd, 0) * 70ms); }
html.js .rv.in { opacity: 1; transform: none; }

.intro { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: center; justify-items: center; text-align: center;
  min-height: clamp(560px, 88svh, 820px); padding-top: clamp(1rem, 3vw, 2.2rem); }
.intro-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 96%); mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 96%); }   /* (the light dies out before the section ends: no cut-off edge) */
.intro-bg .beam { position: absolute; left: 50%; top: 38%; width: min(980px, 130vw); aspect-ratio: 1; margin: calc(min(980px, 130vw) / -2) 0 0 calc(min(980px, 130vw) / -2); border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(157, 92, 255, .22) 18%, transparent 32% 52%, rgba(185, 141, 255, .16) 66%, transparent 80%);
  -webkit-mask-image: radial-gradient(closest-side, transparent 28%, #000 52%, transparent 100%); mask-image: radial-gradient(closest-side, transparent 28%, #000 52%, transparent 100%);
  filter: blur(18px); animation: spin 60s linear infinite; will-change: transform; }
@keyframes spin { to { transform: rotate(360deg); } }
.dots i { position: absolute; bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: #d9c2ff; opacity: 0;
  box-shadow: 0 0 10px 2px rgba(157, 92, 255, .75); animation: rise var(--t) linear var(--d) infinite; }
@keyframes rise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: .9; } 75% { opacity: .45; } 100% { transform: translate3d(var(--x), -700px, 0); opacity: 0; } }
/* a soft light that follows the pointer over the first screen (only where there is a pointer; site.js moves it) */
.cursor-glow { position: absolute; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; opacity: 0; transition: opacity .5s;
  background: radial-gradient(closest-side, rgba(185, 141, 255, .2), rgba(157, 92, 255, .08) 55%, transparent); transform: translate3d(var(--gx, 50vw), var(--gy, 40vh), 0); will-change: transform; }
.intro.glow-on .cursor-glow { opacity: 1; }

.intro-in { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(1rem, 2.6vw, 1.7rem); padding-bottom: clamp(2rem, 6vw, 3.6rem); }
.headline { max-width: 17ch; margin: 0; font-size: clamp(2.3rem, 6.4vw, 4.4rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.03; color: #cfc6e6;
  text-wrap: balance; text-shadow: 0 2px 40px rgba(9, 7, 11, .85); animation: lift .9s cubic-bezier(.2, .7, .2, 1) .9s both; }
/* the key word: Amethyst gradient with one slow light passing through it on arrival, and a brush stroke drawn under it */
.headline em { position: relative; display: inline-block; white-space: nowrap; font-style: normal; font-weight: 700; padding: 0 .03em .04em; text-shadow: none; color: transparent;
  background: linear-gradient(100deg, #b98dff 0%, #9d5cff 30%, #b98dff 42%, #f6eeff 50%, #b98dff 58%, #9d5cff 70%, #cdb0ff 100%); background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; animation: shimmer 2.4s cubic-bezier(.35, .55, .25, 1) 1.25s both; }
@keyframes shimmer { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.headline em::after { content: ""; position: absolute; left: -.04em; right: -.04em; bottom: -.12em; height: .24em; pointer-events: none; clip-path: inset(0 100% 0 0);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23c9a6ff' stop-opacity='.15'/%3E%3Cstop offset='.18' stop-color='%23c9a6ff'/%3E%3Cstop offset='.62' stop-color='%239d5cff'/%3E%3Cstop offset='1' stop-color='%23b98dff' stop-opacity='.25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1 14.2C36 4.6 118 .6 199 6.4 132 6.2 54 10.4 1 14.2Z' fill='url(%23g)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: swash .85s cubic-bezier(.3, .7, .2, 1) 2.1s forwards; }
@keyframes swash { to { clip-path: inset(0 0 0 0); } }
@keyframes lift { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.intro-in .btn.big { animation: lift .9s cubic-bezier(.2, .7, .2, 1) 1.15s both; }
.btn.big { font-size: 1.06rem; padding: .95em 1.7em; border-radius: 14px; margin-top: .2rem; }

.reveal { position: relative; display: block; width: min(86vw, 547px, 62svh); aspect-ratio: 1094 / 641; -webkit-user-select: none; user-select: none; }
.reveal .logo { position: relative; z-index: 1; display: block; width: 100%; height: auto; animation: write 1.4s cubic-bezier(.3, .7, .25, 1) .1s both;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) - 16%), transparent var(--p)); mask-image: linear-gradient(90deg, #000 calc(var(--p) - 16%), transparent var(--p)); }
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 116%; }
/* the logo is written onto the page from left to right with a soft edge (a brighter, slightly blurred pen that settles into the real colors) */
@keyframes write { 0% { --p: 0%; filter: brightness(1.3) saturate(1.3) blur(3px); } 60% { filter: brightness(1.15) saturate(1.15) blur(0); } 100% { --p: 116%; filter: none; } }
.reveal::before { content: ""; position: absolute; inset: -34% -22%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(157, 92, 255, .5), rgba(157, 92, 255, .14) 55%, transparent 74%); animation: breathe 6.5s ease-in-out infinite; will-change: transform, opacity; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.07); opacity: .6; } }
.reveal .shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
  -webkit-mask: url(../logo-547.webp) center / 100% 100% no-repeat; mask: url(../logo-547.webp) center / 100% 100% no-repeat; }
.reveal .shine::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%; transform: translateX(-130%) skewX(-14deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent); animation: sweep 8.5s ease-in-out 1.6s infinite; will-change: transform; }
@keyframes sweep { 0% { transform: translateX(-130%) skewX(-14deg); } 24%, 100% { transform: translateX(380%) skewX(-14deg); } }
.intro-done .reveal .logo { animation: none; }
/* with scripts: the entrance waits until the picture is loaded (site.js adds .logo-ready), so it never pops in half way */
html.js:not(.logo-ready) .reveal .logo { animation-play-state: paused; }
.hero-art { display: block; }
.hero-art .reveal { width: min(100%, 547px); margin-inline: auto; }

.join { position: relative; z-index: 3; overflow-x: clip; padding: 0 0 clamp(1.6rem, 4vw, 2.8rem); margin-top: clamp(-5rem, -6vw, -2rem); }
.join::before { content: ""; position: absolute; left: 50%; top: -6rem; width: min(1100px, 100%); height: 34rem; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(157, 92, 255, .16), rgba(157, 92, 255, .05) 60%, transparent); }
/* the request form has no card around it: the fields stand on the same light as the first screen (a soft glow behind them), so there is no rectangle, no outline and no line
   between the first screen and the form */
.join .form-card { position: relative; margin: 0 auto; scroll-margin-top: 5.5rem; border: 0; border-radius: 0; box-shadow: none; background: none; padding-inline: 0; }
.join .form-card::before { content: ""; position: absolute; top: -3rem; bottom: -3rem; left: -1rem; right: -1rem; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(40, 30, 62, .6), rgba(26, 18, 44, .28) 60%, transparent); }
@media (min-width: 700px) { .join .form-card::before { left: -7rem; right: -7rem; } }
.join .form-card > h2, .join .form-card > .form-sub, .join .form-card > .fine { text-align: center; }
[data-live].off *, [data-live].off *::before, [data-live].off *::after { animation-play-state: paused !important; }

/* ---------- what Cantoza does: a plain list, two columns, hairlines, one small icon each ---------- */
.does { list-style: none; margin: 0 auto; padding: 0; max-width: 62rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.6rem, 5vw, 4rem); }
.does li { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1.35rem 0; border-top: 1px solid rgba(157, 92, 255, .2); }
.does li:nth-last-child(-n+2) { border-bottom: 1px solid rgba(157, 92, 255, .2); }
.does li:nth-child(odd):last-child { grid-column: 1 / -1; }
.does .ic { margin: 0; width: 2.9rem; height: 2.9rem; transition: background .25s, border-color .25s, transform .25s, box-shadow .25s; }
.does .ic svg { width: 1.45rem; height: 1.45rem; }
.does h3 { font-size: 1.12rem; margin-bottom: .25rem; transition: color .2s; }
.does p { color: var(--muted); font-size: .98rem; line-height: 1.55; }
.does li:hover .ic { transform: translateY(-2px); border-color: rgba(185, 141, 255, .8); background: linear-gradient(180deg, rgba(157, 92, 255, .5), rgba(157, 92, 255, .2)); box-shadow: 0 10px 26px -10px rgba(157, 92, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .2); }
.does li:hover h3 { color: #fff; }

/* ---------- three steps and the questions ---------- */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; list-style: none; margin: 0; padding: 0; counter-reset: s; position: relative; }
.how li { position: relative; counter-increment: s; padding-top: 3.4rem; text-align: center; }
.how li::before { content: counter(s); position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  font-weight: 700; font-feature-settings: "tnum"; color: var(--accent-ink); background: linear-gradient(180deg, #c9a6ff, #9d5cff); box-shadow: 0 0 28px rgba(157, 92, 255, .6); z-index: 1; }
.how li::after { content: ""; position: absolute; top: 1.3rem; left: calc(50% + 1.8rem); right: calc(-50% + 1.8rem - 1.4rem); height: 2px; background: linear-gradient(90deg, rgba(157, 92, 255, .55), rgba(157, 92, 255, .1)); }
.how li:last-child::after { display: none; }
.how p { color: var(--muted); margin-top: .35rem; font-size: .97rem; text-wrap: balance; max-width: 18rem; margin-inline: auto; }

/* ---------- the thank-you page: a glossy 3D check mark (art.py draws it; site.js tilts it with the pointer) ---------- */
.thanks h1 { font-size: clamp(2rem, 4.6vw, 3rem); }
.badge3d { width: min(250px, 64vw); aspect-ratio: 260 / 270; perspective: 900px; margin-bottom: .2rem; }
.tilt { width: 100%; height: 100%; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .22s ease-out; transform-style: preserve-3d; }
.check3d { display: block; width: 100%; height: 100%; overflow: visible; }
.check3d .glow { animation: fadein 1.1s .1s both, breathe 5.5s 1.3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.check3d .ground, .check3d .ground2 { animation: fadein 1s .25s both; }
@keyframes fadein { from { opacity: 0; } }
.check3d .disc { transform-box: fill-box; transform-origin: center; animation: pop .75s cubic-bezier(.2, 1.45, .4, 1) both; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
.check3d .spec { translate: calc(var(--px, 0) * -9px) calc(var(--py, 0) * -9px); transition: translate .22s ease-out; }
.check3d .tick { transform-box: fill-box; transform-origin: center; translate: calc(var(--px, 0) * 5px) calc(var(--py, 0) * 5px); animation: tickpop .6s cubic-bezier(.3, 1.8, .5, 1) 1.1s both; }
@keyframes tickpop { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } }
.check3d .t { stroke-dasharray: 1 1; animation: draw .55s cubic-bezier(.55, .1, .25, 1) .6s both; }
.check3d .t3 { animation-delay: .66s; }
@keyframes draw { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.check3d .pulse { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ring 1.5s ease-out 1.15s 2; }
@keyframes ring { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.5); opacity: 0; } }
.check3d .sweep { transform: translateX(-120px) skewX(-18deg); animation: gleam 6s ease-in-out 1.7s infinite; }
@keyframes gleam { 0% { transform: translateX(-120px) skewX(-18deg); } 22%, 100% { transform: translateX(330px) skewX(-18deg); } }
.check3d .sp { transform-box: fill-box; transform-origin: center; opacity: 0; animation: spark 1.7s ease-out calc(1.2s + var(--i) * .16s) both; }
@keyframes spark { 0% { transform: scale(0) rotate(0); opacity: 0; } 30% { transform: scale(1.2) rotate(40deg); opacity: 1; } 100% { transform: scale(.3) rotate(90deg); opacity: 0; } }

@media (max-width: 900px) { .does { grid-template-columns: 1fr; } .does li:nth-last-child(-n+2) { border-bottom: 0; } .does li:last-child { border-bottom: 1px solid rgba(157, 92, 255, .2); } }
@media (max-width: 640px) {
  .how { grid-template-columns: 1fr; gap: 1.6rem; }
  .how li::after { display: none; }
  .intro { min-height: 0; padding-top: 1.4rem; }
  .reveal { width: min(86vw, 420px, 62svh); }
  .cursor-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal .logo, .reveal::before, .reveal .shine::after, .intro-bg .beam, .dots i, .headline, .headline em, .headline em::after, .intro-in .btn.big, .check3d * { animation: none !important; }
  .headline em::after { clip-path: none; }
  .reveal::before { opacity: .7; }
  .dots, .cursor-glow { display: none; }
  .check3d .t, .check3d .disc, .check3d .glow, .check3d .ground, .check3d .ground2 { opacity: 1; stroke-dashoffset: 0; transform: none; }
  .check3d .pulse, .check3d .sp, .check3d .sweep { opacity: 0; }
  html.js .rv { opacity: 1; transform: none; transition: none; }
  .tilt, .check3d .spec, .check3d .tick, .does .ic { transition: none; }
}
@media print {
  body::after, .intro-bg, .join::before, .join .form-card::before, .cursor-glow, .dots, .reveal::before, .reveal .shine, .skip { display: none !important; }
  html.js .rv { opacity: 1 !important; transform: none !important; }
  .reveal .logo { -webkit-mask-image: none; mask-image: none; animation: none; }
  .headline, h1, h2, h3, p, li, summary, label { color: #000 !important; text-shadow: none !important; }
  .panel, .qa { background: #fff !important; border-color: #888 !important; box-shadow: none !important; }
  .btn { background: #fff !important; color: #000 !important; border: 1px solid #000; box-shadow: none !important; }
}