/* The page around the onboarding. Carried over from the level test's
   stylesheet: only the rules the onboarding leans on. */
:root { --on-sans:Inter,system-ui,sans-serif; --on-display:Manrope,sans-serif; font-family:var(--on-sans); color:#242126; background:#fff; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; font-family:var(--on-sans); font-size:16px; line-height:1.6; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; background:#fff; }
button, a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
a { color:inherit; }
h1, h2 { font-family:var(--on-display); font-weight:600; font-optical-sizing:auto; letter-spacing:-.045em; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid #cab0ed; outline-offset:5px; }
.on-noscript { max-width:420px; margin:18vh auto 0; padding:0 16px; text-align:center; color:#655b6d; }
.on-noscript a { color:#7429ff; }

/* One question at a time on a plain white page. No site chrome during onboarding.
   Laid out to Praktika's onboarding: a 522px heading over a 382px column of flat
   rows, no frame around it, one thin progress bar, a pill Continue at the foot. */
body.onboarding-open { height:100dvh; min-height:0; overflow:hidden; background:#fff; }
body.onboarding-open > :not(#stage) { display:none !important; }
body.onboarding-open #stage { display:block; width:100%; max-width:none; height:100dvh; min-height:0; margin:0; padding:20px 28px 28px; flex:none; }
#onboarding { width:100%; max-width:640px; height:100%; min-height:0; margin:auto; display:flex; flex-direction:column; color:#0d0d0d; }
.on-frame { display:flex; flex-direction:column; gap:16px; flex:1; min-height:0; padding:0; }
#onboarding button, #onboarding input { -webkit-tap-highlight-color:transparent; }
#onboarding button:focus-visible, #onboarding input:focus-visible { outline:3px solid #c9b3ff; outline-offset:3px; }
#onboarding h2:focus { outline:none; }
.on-navigation { display:flex; align-items:center; gap:16px; height:44px; flex:none; }
#on-close { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border:0; background:transparent; color:#0d0d0d; font-size:24px; border-radius:50%; }
#on-close:hover { background:#f7f6fa; }
/* One segment per chapter, so finishing one is visibly finishing something. */
.on-progress { display:flex; gap:8px; height:8px; flex:1; max-width:320px; margin:0 auto; }
.on-segment { flex:1; border-radius:99px; background:#ececf0; overflow:hidden; }
.on-segment > b { display:block; height:100%; width:0; border-radius:inherit; background:#7429ff; transition:width .55s cubic-bezier(.22,1,.36,1),background .35s; }
.on-segment[data-state=done] > b { background:#16a34a; }
#on-step-label { min-width:66px; color:#8f8a96; font-size:12px; font-weight:500; text-align:end; }
.on-layout { display:flex; flex-direction:column; gap:12px; min-height:0; flex:1; }
/* On question screens the heading stands on its own, centred over the column.
   The companion only appears in the note screens' illustration band. */
.on-say { display:flex; align-items:center; gap:14px; flex:none; width:100%; max-width:522px; margin:0 auto; }
#onboarding:not([data-scene=reassurance]) .on-say { margin-top:24px; }
#onboarding:not([data-scene=reassurance]) .on-scene { display:none; }
.on-scene { position:relative; flex:none; width:clamp(76px,10.5vw,102px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 46%,#eaf1ff 0%,#f6f3fd 52%,transparent 71%); }
.on-bubble { flex:1 1 auto; min-width:0; padding:0; text-align:center; }
.on-bubble:empty { display:none; }
#onboarding .on-bubble h2 { font:500 clamp(24px,2.4vw,32px)/1.15 var(--on-display); letter-spacing:-.02em; margin:0; text-align:center; text-wrap:balance; }
/* The note screens keep the wide illustration band instead of a balloon. */
#onboarding[data-scene=reassurance] .on-say { display:block; max-width:none; }
#onboarding[data-scene=reassurance] .on-scene { width:100%; aspect-ratio:auto; height:clamp(150px,25vh,232px); overflow:hidden; border-radius:20px; background:radial-gradient(ellipse at 0% 0%,#e1f3fe 0%,transparent 47%),radial-gradient(ellipse at 115% 48%,#e3e7fa 0%,transparent 50%),radial-gradient(ellipse at 20% 120%,#fceee6 0%,transparent 46%),#fdfdfa; }
/* The comparison chart reads better on plain white than on the wash. */
#onboarding[data-scene=reassurance][data-figure=ascent] .on-scene { background:#fff; }
#onboarding[data-scene=reassurance][data-figure=ascent] .trust-figure { inset:2%; width:96%; height:96%; }
#onboarding[data-scene=reassurance][data-figure=ascent] .on-scene { height:clamp(230px,36vh,330px); }
#on-art { position:absolute; inset:0; display:grid; place-items:center; }
.on-panel { display:flex; flex-direction:column; flex:1; min-height:0; min-width:0; width:100%; max-width:382px; margin:0 auto; padding:24px 0 4px; }
.on-content { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#e2dce9 transparent; padding:2px 0 14px; }
#onboarding h2 { font:500 clamp(24px,2.4vw,32px)/1.15 var(--on-display); letter-spacing:-.02em; margin:0 auto 24px; text-wrap:balance; text-align:center; }
.on-choices { display:grid; gap:8px; margin-bottom:14px; }
.on-choices button { display:flex; gap:14px; align-items:center; text-align:start; width:100%; min-height:64px; padding:14px 16px; background:#fff; border:1.5px solid #e6e2ec; border-radius:20px; box-shadow:none; color:#0d0d0d; font-size:16px; font-weight:500; line-height:1.3; transition:background .15s,border-color .15s,box-shadow .15s; }
.on-choices button:hover:enabled { background:#faf9fc; border-color:#cfc7dc; }
.on-choices button[aria-pressed=true] { background:#f1e9ff; border-color:#7429ff; box-shadow:inset 0 0 0 .5px #7429ff; }
.on-choices button:disabled { cursor:default; }
.on-choice-tag { margin-inline-start:auto; flex:none; font-size:12.5px; font-weight:500; color:#8c8398; white-space:nowrap; }
.on-choice-check { margin-inline-start:auto; color:#7429ff; opacity:0; font-size:15px; flex:none; }
.on-choices button:has(.on-choice-tag) .on-choice-check { margin-inline-start:14px; }
.on-choices button[aria-pressed=true] .on-choice-check { opacity:1; }
/* Job fields: two columns so ten of them fit without scrolling. */
.on-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.on-grid button { min-height:56px; padding:12px 16px; text-align:start; background:#fff; border:1.5px solid #e6e2ec; border-radius:20px; box-shadow:none; color:#0d0d0d; font:500 15px/1.3 var(--on-sans); transition:background .15s,border-color .15s,box-shadow .15s; }
.on-grid button:hover:enabled { background:#faf9fc; border-color:#cfc7dc; }
.on-grid button[aria-pressed=true] { background:#f1e9ff; border-color:#7429ff; box-shadow:inset 0 0 0 .5px #7429ff; }
@media (max-width:460px) { .on-grid { grid-template-columns:1fr; } }
/* The fork in the road. Its own file, transparent, and it draws its roads out
   when it loads, so the band gives it room and keeps out of its way. */
#onboarding[data-scene=reassurance][data-figure=crossroads] .on-scene { background:transparent; height:clamp(206px,33vh,302px); }
#onboarding[data-scene=reassurance][data-figure=crossroads] .trust-figure { inset:0; margin:0; width:100%; height:100%; }
/* What the reason screen will actually build around. The rule used to be
   invisible; now the screen says it. */
.on-covers { display:flex; align-items:flex-start; gap:8px; margin:14px 2px 0; padding:11px 13px;
  border-radius:12px; background:#f3faf5; color:#41694f; font:400 13px/1.55 var(--on-sans); }
.on-covers > span { flex:none; color:#4a9460; font-size:12px; line-height:1.7; }
/* The sentence after the tick wraps; only the tick keeps its size. */
.on-covers > span:last-child { flex:1 1 auto; min-width:0; }
.on-covers-empty { background:#f6f4fa; color:#7b7286; }
/* The level check: twenty words to run an eye over, so a tapped one fills
   solid rather than tinting. Nothing here is right or wrong. */
#onboarding[data-layout=words] .on-chips { gap:10px; }
#onboarding[data-layout=words] .on-chips button { padding:12px 18px; font-size:15px; }
#onboarding[data-layout=words] .on-chips button[aria-pressed=true] { background:#7429ff; box-shadow:none; color:#fff; }
.on-unsure-glyph { border-radius:50%; }
/* Interests: many small picks, so they wrap instead of stacking. */
.on-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.on-chips button { padding:12px 18px; border:1.5px solid #e6e2ec; border-radius:999px; background:#fff; box-shadow:none; font:500 15px/1.3 var(--on-sans); color:#0d0d0d; transition:background .15s,border-color .15s,box-shadow .15s; }
.on-chips button:hover:enabled { background:#faf9fc; border-color:#cfc7dc; }
.on-chips button[aria-pressed=true] { background:#f1e9ff; border-color:#7429ff; box-shadow:inset 0 0 0 .5px #7429ff; }
.on-custom-answer { display:flex; align-items:center; gap:14px; min-height:64px; padding:12px 16px; border:1.5px solid #e6e2ec; border-radius:20px; background:#fff; transition:border-color .15s; }
.on-custom-answer > span:first-child { display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:10px; background:#f7f6fa; color:#8f8a96; font-size:21px; }
.on-custom-answer:focus-within { border-color:#7429ff; }
#on-answer { display:block; flex:1; min-width:0; height:36px; padding:0; border:0; background:transparent; color:#0d0d0d; font:500 15px/1.5 var(--on-sans); }
#on-answer::placeholder { color:#a197a8; }
#onboarding #on-answer:focus-visible { outline:0; }
/* The three setup screens: one question, a grid of drawn tiles. */
.on-tiles { display:grid; grid-template-columns:1fr; gap:8px; }
.on-tiles button { position:relative; display:flex; align-items:center; gap:14px; text-align:start; min-height:64px; padding:14px 16px; background:#fff; border:1.5px solid #e6e2ec; border-radius:20px; box-shadow:none; color:#0d0d0d; font:500 16px/1.3 var(--on-sans); transition:background .15s,border-color .15s,box-shadow .15s; }
.on-tiles button:hover:enabled { background:#faf9fc; border-color:#cfc7dc; }
.on-tiles button[aria-pressed=true] { background:#f1e9ff; border-color:#7429ff; box-shadow:inset 0 0 0 .5px #7429ff; }
.on-tiles button:disabled { background:#faf9fc; border-color:#eeebf2; color:#a9a3b1; }
.on-tiles button:disabled .on-flag, .on-tiles button:disabled .on-glyph { filter:grayscale(1); opacity:.5; }
.on-tile-label { flex:1 1 auto; min-width:0; }
.on-tile-check { flex:none; color:#7429ff; font-size:15px; opacity:0; }
.on-tiles button[aria-pressed=true] .on-tile-check { opacity:1; }
.on-tile-note { flex:none; padding:3px 8px; border-radius:999px; background:#fff; color:#8f8a96; font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.on-flag { flex:none; width:32px; height:32px; border-radius:50%; display:block; }
.on-bubble .on-hint { margin:8px 0 0; font-size:14px; line-height:1.5; color:#8c8398; }
.on-glyph { flex:none; width:36px; height:36px; display:block; }
/* Emoji options. Sized like the drawn glyphs were, so the rows do not move;
   a disabled tile greys them the same way. */
.on-emoji { display:grid; place-items:center; font:26px/1 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; text-align:center; }
.on-flag.on-emoji { font-size:28px; }
.on-controls { flex:none; padding:14px 0 0; background:#fff; }
.on-control-row { display:flex; align-items:center; justify-content:flex-end; gap:12px; min-height:28px; margin-bottom:12px; }
#on-status { font-size:11px; color:#857b8c; line-height:1.4; }
.on-controls > #on-status { margin:10px 0 0; text-align:center; }
.on-continue { display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; border:0; border-radius:999px; padding:0 24px; background:#7429ff; color:#fff; box-shadow:none; font:500 16px/1.5 var(--on-sans); transition:background .15s; }
.on-continue:hover:enabled { background:#6a22ee; }
.on-continue:active:enabled { background:#5f1dd6; }
.on-continue:disabled { background:#ebe8f1; color:#a9a3b1; cursor:default; }
#on-error { font-size:12px; line-height:1.5; color:#b42318; margin:10px 0 0; }
#on-error:empty, #on-status:empty { display:none; }
.on-loading { text-align:center; color:#968b9e; font-size:14px; margin-top:40px; }
/* One illustration and one thought between answers. Diagrams show a process,
   not measured learning gains or a comparison with another product. */
/* Centred, but with auto margins rather than align-items: a child taller than
   the box would otherwise overflow off the top, where scrolling cannot reach. */
/* The note screens read as a paragraph, so they take the heading's width;
   the Continue keeps the column's. */
#onboarding[data-scene=reassurance] .on-panel { max-width:522px; padding-top:12px; }
#onboarding[data-scene=reassurance] .on-controls { width:100%; max-width:382px; margin:0 auto; }
#onboarding[data-scene=reassurance] .on-content { display:flex; }
#onboarding[data-scene=reassurance] .on-content > * { margin-block:auto; }
.on-reassurance { width:100%; text-align:center; padding:20px 0; }
.on-echo { display:inline-flex; align-items:center; gap:7px; max-width:100%; margin:0 auto 18px; padding:6px 13px; border-radius:99px; background:#f3faf5; color:#4a7359; font-size:12px; font-weight:500; line-height:1.4; }
.on-echo > span { color:#4a9460; font-size:11px; }
#onboarding .on-reassurance h2 { margin-bottom:24px; }
.on-reassurance > p { max-width:410px; margin:0 auto; color:#655b6d; font:400 17px/1.8 var(--on-sans); text-wrap:pretty; }
/* The closing screen counts what the plan opens up, so it drops the band. */
#onboarding[data-scene=reassurance][data-figure=stats] .on-say { display:none; }
/* Four things the plan has, one card each, in the same outlined row the
   questions use. The emoji sits in a tinted disc that the data colours. */
.on-stats { display:grid; gap:8px; margin:24px auto 0; max-width:382px; text-align:start; }
.on-stat { display:flex; align-items:center; gap:14px; padding:12px 16px; min-height:72px; border:1.5px solid #e6e2ec; border-radius:20px; background:#fff; }
.on-stat-icon { display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; font:26px/1 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }
.on-stat-icon img { display:block; }
.on-stat-text { display:flex; flex-direction:column; flex:1 1 auto; gap:3px; min-width:0; }
.on-stat-value { font:500 17px/1.25 var(--on-display); letter-spacing:-.02em; color:#0d0d0d; text-wrap:balance; }
.on-stat-label { font-size:13.5px; line-height:1.45; color:#6b6572; text-wrap:pretty; }
.on-source { display:inline-block; max-width:360px; margin:28px auto 0; color:#7b7183; font-size:11px; line-height:1.7; text-underline-offset:4px; text-decoration-color:#d4cbdc; }
.on-source:hover { color:#6636a1; text-decoration-color:currentColor; }
.on-source:focus-visible { outline:3px solid #b99ae5; outline-offset:5px; border-radius:3px; }
.trust-figure { position:absolute; inset:5%; width:90%; height:90%; overflow:visible; }
img.trust-figure { pointer-events:none; border:0; object-fit:contain; }
/* The band itself takes the file's 21:10 frame, so the scene runs the full
   width of the card with nothing beside it. */
#onboarding[data-scene=reassurance][data-figure=journey] .on-scene { height:auto; aspect-ratio:168/100; background:transparent; border-radius:20px; overflow:hidden; }
/* A quarter taller than the file's own 21:10 frame; the scene scales to
   fill it and the spare width is cropped, which the sky can spare. */
#onboarding[data-scene=reassurance][data-figure=journey] .trust-figure { inset:0; margin:0; width:100%; height:100%; transform:scale(1.25); }
.trust-figure text { font-family:var(--on-sans); fill:#53465f; }
.science-brand { font-size:24px; font-weight:600; letter-spacing:-1.1px; fill:#242126; }
.science-line, .science-link, .science-ribbon, .science-under { fill:none; stroke:url(#science-stroke); stroke-linecap:round; stroke-dasharray:1; animation:science-trace 1.5s cubic-bezier(.22,1,.36,1) var(--delay,0ms) both; }
.science-link { stroke-width:1.4; opacity:.5; }
.science-ribbon { stroke-width:10; }
.science-under { stroke-width:2; opacity:.25; }
.science-reveal { transform-box:fill-box; transform-origin:center; animation:science-appear .9s cubic-bezier(.22,1,.36,1) var(--delay,0ms) both; }
@keyframes science-trace { from { stroke-dashoffset:1; opacity:0; } to { stroke-dashoffset:0; } }
@keyframes science-appear { from { opacity:0; transform:translateY(7px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } }
.on-control-note { font-size:11px; color:#938798; margin:0 0 12px; text-align:center; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
/* A line under the question, for the ones that need to say what they are for. */
.on-bubble .on-sub { margin:8px auto 0; max-width:420px; font-size:14px; line-height:1.5; color:#5f5a66; }
#onboarding .on-reassurance .on-sub { margin-top:0; }
/* The three statements. Wider rows, no icon column competing with the mark. */
#onboarding[data-layout=verdict] .on-choices button { min-height:58px; }
#onboarding[data-layout=verdict] .on-bubble h2 { font-size:clamp(18px,1.7vw,23px); line-height:1.35; }
.on-verdict-glyph { border-radius:50%; }
/* The secondary way out of a screen that also has a primary one. */
.on-ghost { display:block; width:100%; margin-top:8px; padding:12px; border:0; border-radius:999px; background:transparent; color:#7b7286; font:500 13px/1.4 var(--on-sans); }
.on-ghost:hover { background:#f6f4fa; color:#4a4350; }
/* The build screen: a count, a heading, and the four things being done. */
.on-build { width:100%; text-align:center; padding:12px 0; }
.on-build-meter { display:flex; align-items:center; gap:13px; max-width:420px; margin:0 auto 26px; }
.on-build-track { flex:1; height:7px; border-radius:99px; background:#ece8f2; overflow:hidden; }
.on-build-track > b { display:block; height:100%; width:0; border-radius:inherit; background:#7429ff; transition:width .35s linear; }
#on-build-count { flex:none; min-width:40px; text-align:end; font:600 13px/1 'IBM Plex Mono',ui-monospace,monospace;
  color:#7429ff; font-variant-numeric:tabular-nums; }
#onboarding .on-build h2 { margin-bottom:18px; }
#onboarding .on-gate h2 { margin-bottom:12px; }
/* No card behind the rows: the four things being done are the content, and a
   tinted panel behind them only competed with the count above. */
.on-build-steps { list-style:none; margin:0 auto; padding:0; max-width:420px; text-align:start; }
.on-build-steps li { display:flex; align-items:center; gap:13px; padding:14px 2px; border-bottom:1px dashed #e2dcec; font:500 15.5px/1.35 var(--on-sans); color:#39303f; }
.on-build-steps li:last-child { border-bottom:0; }
.on-build-mark { flex:none; width:19px; height:19px; border-radius:50%; border:2px solid #d8d1e2; background-color:#fff; background-position:center; background-size:11px; background-repeat:no-repeat; transition:background-color .3s,border-color .3s; }
.on-build-steps li[data-state=done] .on-build-mark { border-color:#16a34a; background-color:#16a34a; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.on-build-steps li em { margin-inline-start:auto; flex:none; font-style:normal; font:600 12.5px/1 var(--on-mono,'IBM Plex Mono',ui-monospace,monospace);
  letter-spacing:.08em; text-transform:uppercase; color:#8c8398; background:#f3f1f6; border-radius:99px; padding:6px 10px; }
.on-build-steps li[data-state=done] em { color:#0f7a3a; background:#dcfce7; }
.on-build.is-ready > p { max-width:410px; margin:0 auto; color:#6b6572; font:400 15px/1.6 var(--on-sans); }
#onboarding[data-scene=reassurance][data-figure=build] .on-scene,
#onboarding[data-scene=reassurance][data-figure=gate] .on-scene { height:clamp(112px,17vh,164px); }
/* The plant covers the band, which crops the level pills drawn along the foot
   of its artboard. The band takes the artboard's own ground so the edges meet. */
#onboarding[data-scene=reassurance][data-figure=plant] .on-scene { height:clamp(210px,32vh,290px); background:#fff; }
/* Cropped to the top 68% of a square artboard, which is the plant and its
   shadow; the level pills along the foot fall outside. The filter keys the
   artboard's own ground out, so the plant stands on the card. */
.on-plant { position:absolute; top:0; left:50%; transform:translateX(-50%);
  height:100%; width:auto; aspect-ratio:100/68; max-width:100%; display:block;
  filter:url(#on-drop-ground); }
/* The address screen. Asked once, and declining it costs nothing. */
.on-gate { width:100%; max-width:420px; margin:0 auto; text-align:center; padding:12px 0; }
.on-gate > p { color:#655b6d; font:400 15px/1.7 var(--on-sans); margin:0 0 18px; }
.on-field { display:block; }
#on-email { width:100%; min-height:56px; padding:14px 16px; border:1.5px solid #e6e2ec; border-radius:20px; background:#fff; font:500 15px/1.4 var(--on-sans); color:#0d0d0d; }
#on-email:focus { border-color:#7429ff; outline:none; }
.on-gate-note { margin:12px 0 0; font-size:11.5px; line-height:1.6; color:#9a90a4; }
/* The launch offer: one line, in the accent colour, above the form. */
#onboarding .on-gate > p.on-offer { color:#7429ff; font:600 15px/1.5 var(--on-sans); margin:0 0 18px; }
#onboarding .on-done > p.on-offer { color:#7429ff; font-weight:600; margin-top:14px; }
@media (min-width:761px) and (max-height:730px) {
  body.onboarding-open #stage { padding-top:12px; padding-bottom:18px; }
  .on-frame { gap:10px; }
  #onboarding:not([data-scene=reassurance]) .on-say { margin-top:16px; }
  .on-panel { padding-top:14px; }
  #onboarding h2, #onboarding .on-bubble h2 { font-size:26px; }
  .on-choices button, .on-tiles button { min-height:58px; padding:10px 16px; }
  .on-custom-answer { min-height:58px; padding:8px 16px; }
}
@media (max-width:760px) {
  body.onboarding-open #stage { padding:12px 14px max(14px,env(safe-area-inset-bottom)); }
  .on-frame { gap:8px; }
  .on-navigation { gap:8px; height:40px; }
  #on-close { width:40px; height:40px; }
  .on-layout { gap:8px; }
  .on-say { gap:10px; max-width:none; }
  #onboarding:not([data-scene=reassurance]) .on-say { margin-top:16px; }
  .on-scene { width:66px; }
  #onboarding .on-bubble h2 { font-size:24px; }
  #onboarding[data-scene=reassurance] .on-scene { width:100%; height:clamp(150px,25dvh,210px); border-radius:16px; }
  .on-panel { max-width:none; padding:16px 0 4px; }
  .on-content { padding:2px 0 12px; }
  #onboarding h2 { font-size:24px; margin-bottom:20px; }
  .on-choices { margin-bottom:13px; }
  .on-choices button { min-height:60px; padding:12px 16px; gap:12px; font-size:15px; }
  .on-custom-answer { min-height:60px; padding:10px 16px; gap:12px; }
  #on-answer { font-size:15px; }
  .on-controls { padding:8px 0 0; }
  .on-control-row { margin-bottom:8px; }
  .on-continue { min-height:50px; }
  #on-status { font-size:10px; }
  .on-reassurance { padding:6px 0; }
  #onboarding .on-reassurance h2 { font-size:23px; margin-bottom:16px; }
  .on-reassurance > p { max-width:370px; font-size:14px; line-height:1.75; }
  .on-source { margin-top:18px; font-size:10px; }
}
@media (max-width:760px) and (max-height:700px) {
  .on-scene { width:56px; }
}
@media (prefers-reduced-motion:reduce) {
  #onboarding *, #onboarding *::before, #onboarding *::after { animation:none !important; transition:none !important; }
}


/* A question with no options is a single field: the answer is the whole screen,
   so the pencil affordance of the usual "something else" box would undersell it. */
[data-layout="text"] .on-choices{display:none}
[data-layout="text"] .on-custom-answer{margin-top:4px;padding:0 16px;min-height:60px;border-radius:20px;background:#fff}
[data-layout="text"] .on-custom-answer span[aria-hidden]{display:none}
[data-layout="text"] .on-custom-answer input{font-size:18px;font-weight:600}
[data-layout="text"] .on-custom-answer:focus-within{border-color:#7429ff}


/* ── The waitlist ending ─────────────────────────────────────────────────────
   One screen for a name and an address, then one to say it worked. Built from
   the address screen's parts, so it reads as the same flow. */
.on-signup { display:grid; gap:10px; margin:0 0 4px; text-align:start; }
.on-signup .on-field-label { display:block; margin:0 0 6px; margin-inline-start:4px; font:500 13px/1.4 var(--on-sans); color:#5f5a66; }
.on-signup input { width:100%; min-height:56px; padding:14px 16px; border:1.5px solid #e6e2ec; border-radius:20px; background:#fff; font:500 15px/1.4 var(--on-sans); color:#0d0d0d; }
.on-signup input:focus { border-color:#7429ff; outline:none; }
.on-signup input[aria-invalid=true] { border-color:#d92d20; }
.on-field-error { margin:6px 0 0; margin-inline-start:4px; font-size:12px; line-height:1.5; color:#b42318; }
.on-field-error:empty { display:none; }
/* The honeypot. Off screen rather than display:none, which some bots skip. */
/* Off-screen without an offset: a negative left widens the page by 10000px in RTL. */
.on-trap { position:absolute; inset-inline-start:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.on-done { width:100%; text-align:center; padding:20px 0; }
.on-done > p { max-width:410px; margin:0 auto; color:#655b6d; font:400 17px/1.8 var(--on-sans); text-wrap:pretty; }
.on-home { display:flex; align-items:center; justify-content:center; text-decoration:none; }
@media (max-width:760px) {
  .on-done > p { font-size:14px; line-height:1.75; }
}


/* ── Languages ───────────────────────────────────────────────────────────────
   Latin text keeps Inter and Manrope; a script they do not cover falls through
   to a Noto family, which onboarding.js loads only for that language. */
:root[lang=ar] { --on-sans:Inter,'Noto Sans Arabic',system-ui,sans-serif; --on-display:Manrope,'Noto Sans Arabic',sans-serif; }
:root[lang=hi] { --on-sans:Inter,'Noto Sans Devanagari',system-ui,sans-serif; --on-display:Manrope,'Noto Sans Devanagari',sans-serif; }
:root[lang=ja] { --on-sans:Inter,'Noto Sans JP',system-ui,sans-serif; --on-display:Manrope,'Noto Sans JP',sans-serif; }
:root[lang=ko] { --on-sans:Inter,'Noto Sans KR',system-ui,sans-serif; --on-display:Manrope,'Noto Sans KR',sans-serif; }
:root[lang=th] { --on-sans:Inter,'Noto Sans Thai',system-ui,sans-serif; --on-display:Manrope,'Noto Sans Thai',sans-serif; }
/* Scripts that join their letters or stack marks break when tracked out or
   squeezed vertically, and have no capitals to shout in. */
:root:is([lang=ar],[lang=hi],[lang=th]) :is(h1,h2,.on-stat-value,.science-brand,.on-build-steps li em,.on-tile-note,#on-build-count) { letter-spacing:0; text-transform:none; }
:root:is([lang=ar],[lang=hi],[lang=th]) #onboarding .on-bubble h2, :root:is([lang=ar],[lang=hi],[lang=th]) #onboarding h2 { line-height:1.4; }
:root:is([lang=ar],[lang=hi],[lang=th]) .on-reassurance > p, :root:is([lang=ar],[lang=hi],[lang=th]) .on-done > p { line-height:1.95; }
:root:is([lang=ja],[lang=ko],[lang=zh]) #onboarding h2 { letter-spacing:0; line-height:1.35; }
:root:is([lang=ja],[lang=ko]) .on-tile-note, :root:is([lang=ja],[lang=ko]) .on-build-steps li em { letter-spacing:0; }
/* The small badges are tiny in scripts with fine detail. */
:root:is([lang=ar],[lang=hi],[lang=th],[lang=ja],[lang=ko]) .on-tile-note { font-size:12px; }
:root:is([lang=ar],[lang=hi],[lang=th],[lang=ja],[lang=ko]) #on-step-label { font-size:13px; }
/* Japanese and Thai have no spaces to break lines at: let them break anywhere sensible. */
:root:is([lang=ja],[lang=th]) #onboarding { line-break:strict; word-break:normal; overflow-wrap:anywhere; }

/* Right-to-left: the back arrow points the other way; the sample words, the
   email address and the numbers stay left-to-right where they are written so. */
:root[dir=rtl] #on-close > span { display:inline-block; transform:scaleX(-1); }
#on-email, .on-chips button[lang=en] { direction:ltr; }
/* Drawn figures are laid out in a fixed coordinate space: anchors and mirrored text must not flip with the page. */
.trust-figure { direction:ltr; }
#on-email { text-align:start; }

/* The language switch: a globe and the code in the bar, and a short list of
   names in each language's own script. */
.on-lang { position:relative; flex:none; }
#on-lang-button { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 10px; border:0; border-radius:999px; background:transparent; color:#8f8a96; font:600 12px/1 var(--on-sans); letter-spacing:.04em; }
#on-lang-button:hover { background:#f7f6fa; color:#4a4350; }
#on-lang-button[aria-expanded=true] { background:#f1e9ff; color:#5f1dd6; }
#on-lang-menu { position:absolute; inset-inline-end:0; top:calc(100% + 6px); z-index:20; width:max-content; min-width:184px; max-height:min(80dvh,520px); overflow:auto; margin:0; padding:6px; list-style:none; background:#fff; border:1.5px solid #e6e2ec; border-radius:18px; box-shadow:0 12px 32px #2a1f4a1f; }
#on-lang-menu button { display:block; width:100%; padding:10px 12px; border:0; border-radius:12px; background:transparent; color:#0d0d0d; text-align:start; font:500 15px/1.3 var(--on-sans); letter-spacing:0; }
#on-lang-menu button:hover { background:#faf9fc; }
#on-lang-menu button[aria-current=true] { background:#f1e9ff; color:#5f1dd6; }
@media (max-width:760px) { #on-lang-button { height:32px; padding:0 8px; } #on-step-label { min-width:0; } }

/* The path cards drifting past, on the note after setup, the signup and the ending. */
#onboarding[data-scene=reassurance][data-figure=cards] .on-scene { height:clamp(200px,32vh,280px); background:radial-gradient(ellipse at 50% 60%,#efe6ff 0%,transparent 62%),#fdfcff; }
.on-rail { position:absolute; inset:0; display:flex; align-items:center; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.on-rail-track { display:flex; gap:14px; width:max-content; animation:on-drift 36s linear infinite; }
.on-rail-track img { display:block; width:clamp(112px,25vw,146px); aspect-ratio:1; object-fit:cover; border-radius:20px;
  box-shadow:0 12px 26px -12px rgba(55,36,110,.35),0 0 0 1px rgba(23,18,29,.05); }
.on-rail-track img:nth-child(odd) { transform:translateY(-10px); }
.on-rail-track img:nth-child(even) { transform:translateY(10px); }
[dir=rtl] .on-rail-track { animation-direction:reverse; }
@keyframes on-drift { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .on-rail-track { animation:none; } }
/* The note after setup says more, and says it bigger. */
#onboarding[data-figure=cards] .on-reassurance > p { font-size:19px; line-height:1.6; color:#3d3446; }
#onboarding[data-figure=cards] .on-reassurance > p.on-path-line { margin-bottom:12px; color:#7429ff; font-weight:600; }
@media (max-width:760px) { #onboarding[data-figure=cards] .on-reassurance > p { font-size:17px; } }
/* Group headings on the interests screen. */
.on-group { margin:22px 0 10px; font:600 15px/1.3 var(--on-sans); color:#3d3446; }
.on-group:first-child { margin-top:4px; }
#onboarding[data-figure=cards] .on-source { margin-top:14px; font-size:13px; }

/* Chapter three's replies: the logo, Felix on a call, a calendar, the levels. */
#onboarding[data-scene=reassurance]:is([data-figure=logo],[data-figure=call],[data-figure=calendar],[data-figure=levels]) .on-scene { height:clamp(210px,34vh,300px); }
#onboarding[data-figure=logo] .on-scene { background:radial-gradient(circle at 50% 55%,#efe6ff 0%,transparent 60%),#fdfcff; }
.trust-logo { width:clamp(120px,22vh,176px); height:auto; filter:drop-shadow(0 18px 30px rgba(116,41,255,.25)); }
#onboarding[data-figure=call] .on-scene { background:#fff; }
.trust-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; border-radius:20px; }
#onboarding:is([data-figure=calendar],[data-figure=levels]) .on-scene { background:radial-gradient(ellipse at 50% 60%,#efe6ff 0%,transparent 65%),#fdfcff; }
#onboarding:is([data-figure=logo],[data-figure=call],[data-figure=calendar],[data-figure=levels]) .on-reassurance > p { font-size:18px; line-height:1.6; }


/* The plans screen, on a night sky: a page of its own that scrolls. The whole
   frame scrolls (not the content box), so the back arrow and the language
   button, which sit over the night band, scroll away with it. Everything is
   under pwin-; no inline styles anywhere, the page's CSP does not allow them. */
body.onboarding-open:has(#onboarding[data-scene=paywall]) #stage { padding:0; }
#onboarding[data-scene=paywall] { max-width:none; }
#onboarding[data-scene=paywall] .on-say, #onboarding[data-scene=paywall] .on-progress { visibility:hidden; }
#onboarding[data-scene=paywall] .on-say, #onboarding[data-scene=paywall] .on-controls { display:none; }
#onboarding[data-scene=paywall] .on-frame { position:relative; gap:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#e2dce9 transparent; }
#onboarding[data-scene=paywall] :is(.on-layout,.on-panel) { flex:none; min-height:auto; gap:0; }
#onboarding[data-scene=paywall] .on-panel { max-width:none; padding:0; }
#onboarding[data-scene=paywall] .on-content { flex:none; overflow:visible; padding:0; }
/* The navigation floats over the night band, level with the wordmark. */
#onboarding[data-scene=paywall] .on-navigation { position:absolute; z-index:6; top:calc(var(--pwin-banner,40px) + 20px); inset-inline:0; width:auto; max-width:1080px; height:44px; margin:0 auto; padding:0 24px; pointer-events:none; }
#onboarding[data-scene=paywall] .on-navigation > * { pointer-events:auto; }
#onboarding[data-scene=paywall] #on-close, #onboarding[data-scene=paywall] #on-lang-button { border:1px solid #ffffff38; background:#ffffff10; color:#fff; }
#onboarding[data-scene=paywall] #on-close { width:40px; height:40px; }
#onboarding[data-scene=paywall] #on-lang-button { height:40px; padding:0 14px; font-size:13px; }
#onboarding[data-scene=paywall] :is(#on-close,#on-lang-button):hover { background:#ffffff20; color:#fff; }
#onboarding[data-scene=paywall] :is(#on-close,#on-lang-button):focus-visible { outline:2px solid #fff; outline-offset:2px; }
#onboarding[data-scene=paywall] #on-lang-button[aria-expanded=true] { background:#ffffff26; color:#fff; }

.pwin { --pw-ink:#0d0d0d; --pw-body:#242126; --pw-muted:#6d6377; --pw-muted2:#8f8a96; --pw-hair:#ece8f1; --pw-border:#e6e2ec; --pw-purple:#7429ff;
  width:100%; text-align:start; color:var(--pw-body); font:400 16px/1.55 var(--on-sans); overflow-wrap:normal; line-break:auto; word-break:normal; }
.pwin[lang=en] { --on-sans:Inter,system-ui,sans-serif; --on-display:Manrope,sans-serif; }
.pwin[lang=hi] { --on-sans:Inter,'Noto Sans Devanagari',system-ui,sans-serif; --on-display:Manrope,'Noto Sans Devanagari',sans-serif; }
#onboarding .pwin[lang=hi] * { letter-spacing:0; }
.pwin :is(p,h3,h4) { margin:0; }
.pwin :is(h3,h4) { font-family:var(--on-display); font-weight:600; color:var(--pw-ink); text-wrap:balance; }
.pwin s { color:var(--pw-muted2); text-decoration-thickness:1.5px; }
.pwin-wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
.pwin :focus-visible { outline:3px solid #c9b3ff; outline-offset:3px; }

/* The mint banner, flush at the top. */
.pwin-offer { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:40px; padding:6px 16px; background:#d6fbdf; color:#000; font:600 14px/1.3 var(--on-sans); text-align:center; }
.pwin-offer svg { flex:none; width:17px; height:17px; }
.pwin-short { display:none; }

/* The night: a navy sky, a quiet meteor shower, one white cloud edge. */
.pwin-night { position:relative; z-index:0; overflow:hidden; background:#141c45; }
.pwin-sky { position:absolute; z-index:-1; inset:0; pointer-events:none; }
.pwin-sky svg { position:absolute; left:0; top:0; width:100%; height:100%; }
.pwin-clouds { position:relative; display:block; width:max(100%,1300px); height:auto; margin:-4px 0 -1px 50%; transform:translateX(-50%); pointer-events:none; }
.pwin-meteors { position:absolute; z-index:-1; pointer-events:none; top:0; left:50%; transform:translateX(-50%); }
.pwin-meteors-d { width:1440px; height:340px; }
.pwin-meteors-m { display:none; width:390px; height:300px; }
.pwin-meteors-s { display:none; width:390px; height:220px; }
.pwin-shoot { display:none; }
@media (prefers-reduced-motion:no-preference) {
  .pwin-drift { animation:pwin-drift 36s ease-in-out infinite alternate; }
  @keyframes pwin-drift { from { transform:translateX(-5px); } to { transform:translateX(6px); } }
  .pwin-shoot { display:block; }
  .pwin-pro { animation:pwin-shine 6s linear infinite; }
  @keyframes pwin-shine { from { background-position:0% 50%; } to { background-position:240% 50%; } }
}
.pwin-page { position:relative; z-index:1; }
.pwin-top { display:flex; align-items:center; justify-content:center; height:44px; margin-top:20px; }
.pwin-brand { display:flex; align-items:center; gap:8px; color:#fff; }
.pwin-brand img { display:block; width:31px; height:30px; flex:none; }
.pwin-brand-word { display:flex; align-items:baseline; gap:7px; }
.pwin-brand-name { font:700 22px/1 var(--on-display); letter-spacing:-.02em; color:#fff; }
.pwin-pro { display:inline-block; font:800 22px/1 var(--on-display); letter-spacing:.04em; text-transform:uppercase; color:#87b8ff;
  background:linear-gradient(105deg,#73fff3 5%,#87b8ff 28%,#d49cff 51%,#ff8edb 74%,#73fff3 95%); background-size:240% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@supports not ((background-clip:text) or (-webkit-background-clip:text)) { .pwin-pro { background:none; -webkit-text-fill-color:#87b8ff; } }
.pwin-hero { text-align:center; padding:28px 0 0; }
#onboarding .pwin-hero h2 { max-width:860px; margin:0 auto; color:#fff; font:600 48px/1.1 var(--on-display); letter-spacing:-.045em; text-wrap:balance; }
.pwin-sub { max-width:640px; margin:14px auto 0 !important; color:#ffffffb8; font-size:18px; line-height:1.55; text-wrap:balance; }

/* Plans, the call to action and the list of what is included. */
.pwin-plans { padding-top:2px; }
.pwin-grid { display:grid; grid-template-columns:480px 1fr; grid-template-areas:"plans list" "cta list"; grid-template-rows:auto 1fr; column-gap:52px; align-items:start; }
.pwin-cards { grid-area:plans; }
.pwin-cta-block { grid-area:cta; margin-top:20px; }
.pwin-incl { grid-area:list; }
.pwin-plan { position:relative; display:block; width:100%; text-align:start; border-radius:24px; border:1.5px solid var(--pw-border); background:#fff; overflow:hidden; cursor:pointer; transition:border-color .25s,box-shadow .25s; }
.pwin-plan + .pwin-plan { margin-top:14px; }
.pwin-plan:hover { border-color:#cfc7dc; }
.pwin-plan[aria-checked=true], .pwin-plan[aria-checked=true]:hover { border-color:var(--pw-purple); box-shadow:0 0 0 .5px var(--pw-purple); background:linear-gradient(180deg,#f7f2ff 0,#fff 200px); }
.pwin-fold { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .38s cubic-bezier(.3,.7,.2,1),opacity .2s ease; }
.pwin-fold > * { display:block; overflow:hidden; min-height:0; }
.pwin-plan[aria-checked=true] .pwin-fold { grid-template-rows:1fr; opacity:1; transition:grid-template-rows .38s cubic-bezier(.3,.7,.2,1),opacity .3s ease .08s; }
.pwin-ribbon { display:block; padding:8px 0; background:var(--pw-purple); color:#fff; font:600 13px/1.3 var(--on-sans); text-align:center; }
.pwin-pin { display:block; padding:20px 24px; transition:padding .38s cubic-bezier(.3,.7,.2,1); }
.pwin-plan[aria-checked=true] .pwin-pin { padding:24px 28px 26px; }
.pwin-head { display:flex; align-items:center; gap:12px; }
.pwin-radio { flex:none; width:24px; height:24px; border-radius:50%; border:1.5px solid #cfc7dc; background:#fff; transition:background-color .2s,border-color .2s; }
.pwin-plan[aria-checked=true] .pwin-radio, .pwin-hs-card[aria-checked=true] .pwin-radio { border-color:var(--pw-purple); background:var(--pw-purple) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="m7 12.5 3.2 3.2L17 9" fill="none" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') center/18px no-repeat; }
.pwin-name { font:600 20px/1.2 var(--on-display); color:var(--pw-ink); letter-spacing:-.02em; }
.pwin-right { display:grid; justify-items:end; align-items:center; margin-inline-start:auto; }
.pwin-right > * { grid-area:1/1; transition:opacity .25s ease; }
.pwin-off { padding:4px 9px; border-radius:8px; border:1.5px solid var(--pw-purple); color:#5f1dd6; font:700 11.5px/1.2 var(--on-sans); letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; opacity:0; transition:opacity .2s ease,background-color .2s,color .2s; }
.pwin-plan[aria-checked=true] .pwin-off { background:var(--pw-purple); color:#fff; opacity:1; }
.pwin-mini { display:flex; align-items:baseline; gap:6px; font:500 14.5px/1 var(--on-sans); color:var(--pw-muted); white-space:nowrap; }
.pwin-mini b { font:600 17px/1 var(--on-display); color:var(--pw-ink); letter-spacing:-.01em; }
.pwin-plan[aria-checked=true] .pwin-mini { opacity:0; }
.pwin-plan:not([aria-checked=true]) .pwin-mini { transition-delay:.15s; }
.pwin-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin:20px 0 8px; }
.pwin-price s { width:100%; color:#a9a3b1; font:500 15px/1.2 var(--on-sans); }
.pwin-price b { font:700 48px/1 var(--on-display); letter-spacing:-.045em; color:var(--pw-ink); }
.pwin-price small { color:var(--pw-muted2); font:500 15px/1 var(--on-sans); }
.pwin-total { display:block; color:#4a4350; font:500 15px/1.45 var(--on-sans); }
.pwin-total s { color:#a9a3b1; }
.pwin-saving { display:block; margin-top:6px; color:#15803d; font-weight:600; }
.pwin-support { display:flex; align-items:center; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid #efecf3; font:500 14.5px/1.35 var(--on-sans); color:var(--pw-body); }
.pwin-support svg { flex:none; }
.pwin-cta { display:flex; align-items:center; justify-content:center; width:100%; height:56px; min-height:0; padding:0 24px; border-radius:999px; background:var(--pw-purple); color:#fff; font:600 17px/1 var(--on-sans); letter-spacing:-.005em; transition:background .2s,transform .1s; }
.pwin-cta:hover { background:#6a1ff2; }
.pwin-cta:active { transform:scale(.99); }
.pwin-fine { margin-top:12px !important; text-align:center; font-size:13.5px; line-height:1.5; color:var(--pw-muted2); text-wrap:balance; }
.pwin-incl ul { display:flex; flex-direction:column; gap:26px; margin:0; padding:0; list-style:none; }
.pwin-incl li { display:grid; grid-template-columns:20px 1fr; gap:14px; align-items:start; transition:opacity .2s; }
.pwin-incl li svg { margin-top:3px; }
.pwin-t { font:400 17px/1.45 var(--on-sans); color:#3a3540; letter-spacing:-.005em; }
.pwin-t b { font-weight:600; color:var(--pw-ink); }
.pwin-only { display:inline-block; margin-inline-start:6px; padding:3px 7px; border:1px solid var(--pw-border); border-radius:99px; color:var(--pw-muted); font:600 11px/1 var(--on-sans); vertical-align:2px; white-space:nowrap; }
.pwin[data-chosen=weekly] .pwin-yo { opacity:.45; }

/* Sections. */
.pwin-sec { padding-top:112px; }
.pwin-sec-head { max-width:640px; margin:0 auto; text-align:center; }
.pwin-sec-head h3 { font-size:40px; line-height:1.1; letter-spacing:-.04em; }
.pwin-sec-head p { margin-top:12px; color:var(--pw-muted); font-size:17px; }
.pwin-sec.pwin-inside { padding-top:120px; }
.pwin-inside .pwin-sec-head h3 { font-size:38px; }
.pwin-inside .pwin-sec-head p { margin-top:14px; line-height:1.55; }
.pwin-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; margin-top:52px; }
.pwin-grp { display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; padding:32px 30px 12px; border:1px solid var(--pw-border); border-radius:24px; background:#fff; }
.pwin-g-head { padding-bottom:24px; }
.pwin-grp h4 { font:700 21px/1.25 var(--on-display); letter-spacing:-.025em; }
.pwin-g-list { display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; margin:0; padding:0; list-style:none; }
.pwin-g-list li { display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:16px; align-items:start; padding:22px 0; border-top:1px solid var(--pw-hair); }
.pwin-grp:nth-child(1) { --c1:#a347f0; --c2:#7429ff; --c3:#4338ca; }
.pwin-grp:nth-child(2) { --c1:#f5a00b; --c2:#f26a12; --c3:#e5484d; }
.pwin-grp:nth-child(3) { --c1:#22a447; --c2:#0d9488; --c3:#166534; }
.pwin-g-list li:nth-child(1) { --c:var(--c1); }
.pwin-g-list li:nth-child(2) { --c:var(--c2); }
.pwin-g-list li:nth-child(3) { --c:var(--c3); }
.pwin-ic { display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:14px; background:var(--c); color:#fff; }
.pwin-ic svg { width:26px; height:26px; }
.pwin-ko { fill:var(--c); }
.pwin-g-t { margin-top:2px; font:600 15.5px/1.3 var(--on-sans); color:var(--pw-ink); letter-spacing:-.005em; }
.pwin-g-d { margin-top:6px; font-size:14.5px; line-height:1.55; color:var(--pw-muted); }
.pwin-tag { display:inline-block; margin-inline-start:6px; padding:3px 7px; border:1px solid var(--pw-border); border-radius:99px; color:var(--pw-muted); font:600 10.5px/1 var(--on-sans); letter-spacing:0; vertical-align:2px; white-space:nowrap; }

/* How the waitlist works. */
.pwin-how-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:80px; align-items:center; padding:64px; border:1px solid var(--pw-border); border-radius:28px; background:#fff; }
.pwin-how-left h3 { font-size:34px; line-height:1.12; letter-spacing:-.04em; }
.pwin-how-left > p { margin-top:14px; color:var(--pw-muted); font-size:17px; line-height:1.55; text-wrap:balance; }
.pwin-tl { margin:40px 0 0; padding:0; list-style:none; }
.pwin-tl li { position:relative; display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:18px; padding-bottom:32px; }
.pwin-tl li:last-child { padding-bottom:0; }
.pwin-tl li:not(:last-child)::before { content:""; position:absolute; inset-inline-start:17px; top:36px; bottom:0; width:2px; background:var(--pw-border); }
.pwin-tl li:first-child::before { background:var(--pw-purple); }
.pwin-tl li:nth-child(2)::before { background:linear-gradient(var(--pw-purple),var(--pw-border)); }
.pwin-node { position:relative; z-index:1; display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--pw-border); border-radius:99px; background:#fff; color:var(--pw-purple); }
.pwin-node svg { width:18px; height:18px; }
.pwin-node.pwin-on { background:var(--pw-purple); border-color:var(--pw-purple); color:#fff; }
.pwin-tl-t { margin-top:7px; font:600 17px/1.3 var(--on-display); color:var(--pw-ink); letter-spacing:-.015em; }
.pwin-tl-d { margin-top:5px; font-size:15px; line-height:1.55; color:var(--pw-muted); }
.pwin-hs { display:grid; gap:12px; }
.pwin-hs-card { display:block; width:100%; padding:22px 24px; border:1.5px solid var(--pw-border); border-radius:20px; background:#f7f6fa; text-align:start; cursor:pointer; transition:border-color .2s; }
.pwin-hs-card:hover { border-color:#cfc7dc; }
.pwin-hs-card[aria-checked=true] { border-color:var(--pw-purple); }
.pwin-hs-card:not([aria-checked=true]) { display:none; }
.pwin-hs.pwin-open .pwin-hs-card:not([aria-checked=true]) { display:block; animation:pwin-in .28s ease both; }
@keyframes pwin-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.pwin-hs-top { display:flex; align-items:center; gap:10px; }
.pwin-hs-card .pwin-radio { width:22px; height:22px; }
.pwin-hs-name { font:600 15px/1.2 var(--on-display); color:var(--pw-ink); letter-spacing:-.01em; }
.pwin-hs-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px; margin-top:12px; }
.pwin-hs-price { display:flex; align-items:baseline; gap:6px; }
.pwin-hs-price b { font:700 32px/1 var(--on-display); letter-spacing:-.04em; color:var(--pw-ink); }
.pwin-hs-price small { font:500 14.5px/1 var(--on-sans); color:var(--pw-muted2); }
.pwin-hs-total { font:500 14px/1.3 var(--on-sans); color:#4a4350; }
.pwin-hs-total s { color:#a9a3b1; }
.pwin-hs-off { display:flex; align-items:center; gap:6px; margin-top:12px; color:#15803d; font:600 13.5px/1.3 var(--on-sans); }
.pwin-hs-off svg { flex:none; width:16px; height:16px; }
.pwin-hs-toggle { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:2px; padding:8px 0; border:0; background:none; color:#5f1dd6; font:600 13.5px/1 var(--on-sans); }
.pwin-hs-toggle svg { width:16px; height:16px; transition:transform .3s cubic-bezier(.3,.7,.2,1); }
.pwin-hs-toggle[aria-expanded=true] svg { transform:rotate(180deg); }
.pwin-hs-toggle:hover span { text-decoration:underline; text-decoration-color:#c9b3ff; text-underline-offset:3px; }
.pwin-how-cta { margin-top:24px; }

/* Questions. */
.pwin-faq { max-width:720px; margin:44px auto 0; border-top:1px solid var(--pw-hair); }
.pwin-faq details { border-bottom:1px solid var(--pw-hair); }
.pwin-faq summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 4px; cursor:pointer; list-style:none; font:600 17px/1.35 var(--on-display); color:var(--pw-ink); letter-spacing:-.01em; }
.pwin-faq summary::-webkit-details-marker { display:none; }
.pwin-pl { display:grid; place-items:center; flex:none; width:28px; height:28px; border:1px solid var(--pw-border); border-radius:99px; transition:transform .25s; }
.pwin-faq details[open] .pwin-pl { transform:rotate(45deg); }
.pwin-faq details p { max-width:620px; padding:0 4px 24px; color:var(--pw-muted); font-size:15.5px; }
.pwin-foot { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:72px !important; padding-bottom:8px; color:var(--pw-muted2); font:600 14px/1 var(--on-display); }
.pwin-foot img { display:block; width:22px; height:21px; opacity:.6; }

/* The sticky bar: shows once the first button has scrolled away. */
.pwin-bar { position:sticky; bottom:0; z-index:20; margin-top:-1px; background:#fff; border-top:1px solid var(--pw-hair); transform:translateY(110%); visibility:hidden; transition:transform .3s ease,visibility 0s linear .3s; }
.pwin-bar.pwin-bar-on { transform:none; visibility:visible; transition:transform .3s ease; }
.pwin-bar-in { display:flex; align-items:center; gap:16px; height:80px; }
.pwin-bar-name { font:600 15px/1.2 var(--on-display); color:var(--pw-ink); }
.pwin-bar-sub { margin-top:2px; font-size:13px; color:var(--pw-muted); }
.pwin-bar .pwin-cta { width:auto; height:52px; margin-inline-start:auto; padding:0 28px; flex:none; font-size:16px; white-space:nowrap; }

@media (prefers-reduced-motion:reduce) {
  .pwin-plan, .pwin-fold, .pwin-plan[aria-checked=true] .pwin-fold, .pwin-pin, .pwin-right > *, .pwin-radio, .pwin-bar, .pwin-hs-toggle svg { transition:none; }
  .pwin-hs.pwin-open .pwin-hs-card:not([aria-checked=true]) { animation:none; }
}
@media (max-width:960px) {
  .pwin-groups { grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .pwin-grp, .pwin-g-list { display:block; }
  .pwin-how-card { grid-template-columns:1fr; row-gap:44px; max-width:560px; margin:0 auto; padding:48px 40px; }
}
@media (max-width:860px) {
  .pwin-grid { grid-template-columns:1fr; grid-template-areas:"plans" "cta" "list"; grid-template-rows:none; max-width:520px; margin:0 auto; }
  .pwin-incl { margin-top:40px; }
  .pwin-incl ul { gap:16px; }
}
@media (max-width:600px) {
  .pwin-wrap { padding:0 16px; }
  #onboarding[data-scene=paywall] .on-navigation { padding:0 16px; top:calc(var(--pwin-banner,40px) + 16px); }
  .pwin-top { margin-top:16px; }
  .pwin-hero { padding:18px 0 0; }
  .pwin-clouds { margin-top:6px; }
  .pwin-plans { padding-top:0; }
  .pwin-meteors-d { display:none; }
  .pwin-meteors-m { display:block; }
  .pwin-brand-name, .pwin-pro { font-size:21px; }
  .pwin-brand img { width:29px; height:28px; }
  #onboarding .pwin-hero h2 { font-size:34px; line-height:1.1; }
  .pwin-sub { margin-top:12px !important; font-size:16.5px; }
  .pwin-offer { padding:6px 12px; font-size:13px; gap:7px; }
  .pwin-offer svg { width:16px; height:16px; }
  .pwin-pin { padding:18px 20px; }
  .pwin-plan[aria-checked=true] .pwin-pin { padding:22px 20px; }
  .pwin-name { font-size:19px; }
  .pwin-price b { font-size:44px; }
  .pwin-total { font-size:14.5px; }
  .pwin-support { font-size:14px; }
  .pwin-mini { font-size:14px; }
  .pwin-incl ul { gap:14px; }
  .pwin-t { font-size:15.5px; }
  .pwin-incl li { gap:12px; }
  .pwin-incl li svg { margin-top:2px; }
  .pwin-sec { padding-top:88px; }
  .pwin-sec-head h3, .pwin-inside .pwin-sec-head h3 { font-size:30px; }
  .pwin-sec-head p { font-size:16px; }
  .pwin-groups { margin-top:36px; gap:16px; }
  .pwin-grp { padding:28px 22px 8px; border-radius:22px; }
  .pwin-grp h4 { font-size:20px; }
  .pwin-g-head { padding-bottom:18px; }
  .pwin-g-list li { padding:20px 0; column-gap:14px; }
  .pwin-how-card { padding:36px 22px 28px; row-gap:36px; border-radius:24px; }
  .pwin-how-left h3 { font-size:27px; }
  .pwin-how-left > p { margin-top:12px; font-size:16px; }
  .pwin-tl { margin-top:30px; }
  .pwin-tl li { column-gap:14px; padding-bottom:28px; }
  .pwin-tl-t { font-size:16.5px; }
  .pwin-hs-card { padding:18px; }
  .pwin-hs-price b { font-size:28px; }
  .pwin-how-cta .pwin-cta { font-size:16px; }
  .pwin-faq { margin-top:32px; }
  .pwin-faq summary { padding:22px 2px; font-size:16px; }
  .pwin-bar-in { height:72px; gap:12px; }
  .pwin-bar .pwin-cta { height:48px; padding:0 20px; font-size:15px; }
  .pwin-bar-name { font-size:14px; }
  .pwin-bar-sub { font-size:12.5px; }
}
@media (max-width:480px) {
  .pwin-long { display:none; }
  .pwin-short { display:inline; }
  .pwin-offer { min-height:32px; padding:4px 12px; gap:6px; white-space:nowrap; }
  .pwin-offer svg { width:15px; height:15px; }
  .pwin-top { height:36px; margin-top:10px; }
  #onboarding[data-scene=paywall] .on-navigation { top:calc(var(--pwin-banner,32px) + 10px); height:36px; }
  #onboarding[data-scene=paywall] #on-close { width:36px; height:36px; }
  #onboarding[data-scene=paywall] #on-lang-button { height:36px; padding:0 12px; font-size:12.5px; }
  .pwin-brand { gap:6px; }
  .pwin-brand img { width:24px; height:23px; }
  .pwin-brand-word { gap:5px; }
  .pwin-brand-name, .pwin-pro { font-size:18px; }
  .pwin-hero { padding:10px 0 0; }
  #onboarding .pwin-hero h2 { font-size:29px; line-height:1.12; }
  .pwin-sub { max-width:320px; margin-top:8px !important; font-size:14.5px; line-height:1.4; }
  .pwin-clouds { width:max(100%,780px); margin-top:0; }
  .pwin-meteors-m { display:none; }
  .pwin-meteors-s { display:block; }
  .pwin-plans { padding-top:6px; }
  .pwin-ribbon { padding:6px 0; font-size:12.5px; line-height:1.4; }
  .pwin-pin { padding:15px 18px; }
  .pwin-plan[aria-checked=true] .pwin-pin { padding:16px 18px; }
  .pwin-plan + .pwin-plan { margin-top:10px; }
  .pwin-name { font-size:18px; }
  .pwin-price { margin:12px 0 4px; }
  .pwin-price s { width:auto; font-size:14px; }
  .pwin-price b { font-size:40px; }
  .pwin-total { font-size:14px; line-height:1.4; }
  .pwin-saving { margin-top:2px; }
  .pwin-support { margin-top:12px; padding-top:12px; font-size:13.5px; }
  .pwin-cta-block { margin-top:14px; }
  .pwin-cta { height:52px; font-size:16px; }
  .pwin-fine { margin-top:10px !important; font-size:12.5px; }
  .pwin-incl { margin-top:28px; }
}
@media (max-width:480px) { .pwin-clouds .pwin-rim { stroke-width:15; } }