/* State landing · the page's shapes and motion (2026-10-07 and 08, tidied 2026-10-08)
   Loaded after styles.css. What it holds: the four advantage covers as circle, arch, circle, square (html[data-cover="e"]);
   the product screens as illustrations made of the builder's own pieces with their shapes, entry and pointer springs
   (html[data-shot="m"], illo.js); the hero photo in the arch (html[data-hshape="b"]); the class assistant section with
   the phone (#live, assist.js); the thicker band, the wide covers row, the smaller wordmark. The three html attributes
   are set once in index.html; the options tried on the way (other shapes, swirls, strokes, grain) are in git history. */
html[data-shot] .shot { position: relative; overflow: visible; background: none; box-shadow: none; border-radius: 0; isolation: isolate; }
html[data-shot] .shot img { position: relative; z-index: 1; border-radius: 18px; box-shadow: 0 0 0 1px var(--rule), 0 40px 70px -36px rgba(59,33,64,.45); background: var(--card); }
html[data-shot] .shot::before { content: ''; position: absolute; z-index: 0; pointer-events: none; background: var(--shape, var(--butter)); }
.feature:nth-child(1) { --shape: var(--butter); } .feature:nth-child(2) { --shape: var(--rose); } .feature:nth-child(3) { --shape: var(--mint); }
html[data-shot] .feature { gap: 80px; }
html[data-shot] .inside__rows { gap: 140px; }

/* F · capsule: the screen set in a pill of colour with room around it, like a lozenge */

@media (max-width: 760px) {
  html[data-shot] .feature { gap: 40px; }
  html[data-shot] .inside__rows { gap: 96px; }
  
}

/* ---------- the three advantage covers in shapes (Olga, 2026-10-07: "make these interesting shapes") ----------
   html[data-cover]: a all clovers, b all arches, c all flowers, d a mix (arch, flower, clover), e a mix (circle, arch,
   circle). The cover's wash, grain and title stay; only its outline changes. Titles get more side room where the shape
   narrows. */
html[data-cover] .card__cover { border-radius: 0; }
html[data-cover] .card__cover .h3 { max-width: 76%; }

html[data-cover="e"] .adv .card:nth-child(2) .card__cover { border-radius: 999px 999px 22px 22px; }
 html[data-cover="e"] .adv .card:nth-child(2) .card__cover .h3 { margin-top: 18%; }
/* "this shape is weird" (the first pebble ran past its frame and came out flat on the left): three clean ones,
   html[data-purple] = pebble (default, redrawn inside the frame) | squircle | circle */

html[data-cover="e"] .adv .card:nth-child(1) .card__cover, html[data-cover="e"] .adv .card:nth-child(3) .card__cover { border-radius: 50%; }
html[data-cover="e"] .adv .card:nth-child(1) .card__cover .h3, html[data-cover="e"] .adv .card:nth-child(3) .card__cover .h3 { max-width: 68%; }
/* on narrow screens the covers turn wide (16:9, then 4:3); shapes need them square again */
@media (max-width: 1100px) { html[data-cover] .card__cover { aspect-ratio: 1 / 1; max-width: 520px; margin: 0 auto; } }

/* ---------- the finale: the hero's wash behind the waitlist, the wordmark and the footer ---------- */
.finale { position: relative; isolation: isolate; }
.finale__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; pointer-events: none;
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 22%); mask: linear-gradient(to bottom, transparent 0, #000 22%); }

/* ---------- covers, round four (Olga, 2026-10-07: "pick best suited shapes" from her two reference sheets, "try better
   combination of colours"): F = a sun badge, a cloud, stacked pebbles; the third cover turns butter (periwinkle, rose,
   butter are the hero's own colours; mint was the odd one out). All three keep the title inside the shape. ---------- */

.card__cover--ideas[data-colour="butter"] { background: #FCD98F; }

/* ---------- the plum band, thicker ("needs to be thicker", 2026-10-07) ---------- */
.band { padding-top: 76px; padding-bottom: 76px; }
@media (max-width: 760px) { .band { padding-top: 60px; padding-bottom: 60px; } }

/* ---------- four covers (Olga, 2026-10-07: "create 4 shapes and 4 features, add number four in a happier colour, maybe
   yellow", then "make shapes in a wider content block"): a fourth card, the free class, as a butter sun badge; the row
   runs wider than the page's text column so four shapes keep their size ---------- */
#features > .adv { max-width: 1440px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.card__cover--free { background: #F9D178; }

.adv .card:nth-child(4) .card__proof li { --chip: #FDE7B0; }
#features .card__cover .h3 { font-size: clamp(26px, 2.2vw, 34px); }
@media (max-width: 1100px) { #features > .adv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; } }
@media (max-width: 760px) { #features > .adv { grid-template-columns: minmax(0, 1fr); } }

/* ---------- covers E is the set (Olga, 2026-10-07: "lets use these shapes"): circle, arch, circle, and the fourth square ---------- */
html[data-cover="e"] .adv .card:nth-child(4) .card__cover { border-radius: 0; }

/* ---------- screens M (Olga, 2026-10-07: "for screens create illustrations from interface elements instead of screens"):
   each screenshot becomes a little scene of the builder's own pieces, loose like stickers on a shape in the row's colour,
   each piece bobbing gently. The words and numbers are the real ones from the builder screens. ---------- */
.illo { display: none; }
html[data-shot="m"] .shot { width: 100%; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
html[data-shot="m"] .shot img, html[data-shot="m"] .shot::before { display: none; }
html[data-shot="m"] .illo { display: block; position: relative; aspect-ratio: 16 / 11; font-family: var(--sans); color: var(--ink); }
html[data-shot="m"] .inside__rows { gap: 150px; }
.illo__shape { position: absolute; z-index: 0; }
.illo--start .illo__shape { left: 16%; top: 2%; width: 66%; aspect-ratio: 1; border-radius: 0; background: linear-gradient(135deg, #FCE1A0, #F6C455); transform: rotate(-5deg); }
.illo--shape .illo__shape { left: 16%; top: 0; width: 62%; height: 96%; border-radius: 999px 999px 0 0; background: linear-gradient(135deg, #F8C3D9, #EC93BA); }
.illo--speak .illo__shape { left: 16%; top: -2%; width: 68%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #B3E3C4, #7FC99D); }
.ui { position: absolute; z-index: 1; background: var(--card); border-radius: 18px; box-shadow: 0 22px 44px -22px rgba(59,33,64,.38), 0 0 0 1px rgba(59,33,64,.06); animation: uibob var(--ub, 7s) ease-in-out var(--ud, 0s) infinite alternate; }
@keyframes uibob { from { translate: 0 0; } to { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .ui { animation: none; } }
.ui small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ui b { font-family: var(--serif); font-weight: 400; }
.ui svg { display: inline-block; }
.ui-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 999px; background: var(--page); box-shadow: inset 0 0 0 1px var(--rule); font-size: 12px; white-space: nowrap; }
.ui-chip svg, .ui-select svg { width: 12px; height: 12px; }
.ui-play { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--plum); flex: none; }
.ui-play::after { content: ''; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--page); margin-left: 3px; }

/* start */
.ui-pills { display: flex; gap: 6px; padding: 10px; border-radius: 999px; --ub: 6s; }
.ui-pills span { padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ui-pills span.on { background: var(--plum); color: var(--page); box-shadow: none; }
.ui-select { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.ui-card { display: grid; gap: 6px; padding: 16px 18px 18px; }
.ui-card b { font-size: 24px; line-height: 1.05; }
.ui-card span { font-size: 12px; color: var(--body); }
.ui-hill { width: 100%; height: 36px; margin: 6px 0 2px; }
.ui-scratch { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.ui-scratch i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--page); font-style: normal; font-size: 20px; color: var(--plum); }
.ui-scratch b { font-size: 20px; }
.illo--start .p1 { left: 2%; top: 6%; transform: rotate(-4deg); --ud: -1s; }
.illo--start .p2 { left: 0; top: 30%; width: 44%; transform: rotate(2deg); --ub: 8s; --ud: -3s; }
.illo--start .p3 { left: 46%; top: 10%; width: 40%; transform: rotate(4deg); --ub: 9s; }
.illo--start .p4 { left: 20%; top: 50%; width: 40%; transform: rotate(-3deg); --ud: -2s; }
.illo--start .p5 { left: 58%; top: 70%; width: 40%; transform: rotate(3deg); --ub: 6.5s; --ud: -4s; }

/* shape */
.ui-land { padding: 16px 18px 12px; }
.ui-land__top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ui-land > svg { display: block; width: 100%; height: auto; overflow: visible; }
.ui-dots circle { fill: var(--card); stroke: var(--plum); stroke-width: 2.5; }
.ui-dots circle.on { fill: var(--plum); }
.ui-names text { font: 500 15px var(--sans); fill: var(--ink); text-anchor: middle; }
.ui-lane { margin-top: 6px; padding: 7px 12px; border-radius: 10px; background: var(--page); box-shadow: inset 0 0 0 1px var(--rule); font: 500 11px/1 var(--mono); letter-spacing: .06em; }
.ui-part { display: grid; gap: 8px; padding: 16px 18px; }
.ui-part b { display: flex; align-items: center; gap: 8px; font-size: 26px; line-height: 1; }
.ui-part b i { width: 10px; height: 10px; border-radius: 50%; background: #E0668A; }
.ui-select--sm { padding: 9px 12px; font-size: 12px; box-shadow: inset 0 0 0 1px var(--rule); }
.ui-step { display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--mono); }
.ui-step em { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule); font-style: normal; }
.ui-btn { padding: 13px 20px; border-radius: 999px; background: var(--plum); color: var(--page); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ui-time { padding: 8px 12px; border-radius: 999px; background: var(--ink); color: var(--page); font: 500 12px/1 var(--mono); }
.illo--shape .q1 { left: 0; top: 24%; width: 72%; transform: rotate(-2deg); --ub: 9s; }
.illo--shape .q2 { right: 0; top: 2%; width: 31%; transform: rotate(4deg); --ud: -2s; }
.illo--shape .q3 { right: 4%; bottom: 8%; transform: rotate(-5deg); --ub: 6s; --ud: -1s; }
.illo--shape .q4 { left: 36%; top: 15%; transform: rotate(6deg); --ub: 5.5s; --ud: -3s; }

/* speak */
.ui-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 999px; }
.ui-bar b { font-family: var(--mono); font-weight: 500; font-size: 16px; }
.ui-bar__line { position: relative; flex: 1; height: 6px; min-width: 60px; border-radius: 3px; background: linear-gradient(90deg, #8FD1A8, #B9B6F5 40%, #F3A6C6 60%, #B9B6F5); }
.ui-bar__line i { position: absolute; left: 22%; top: -6px; width: 3px; height: 18px; border-radius: 2px; background: var(--ink); }
.ui-bar small { white-space: nowrap; }
.ui-script { padding: 18px 20px 12px; }
.ui-script__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ui-script__head b { font-size: 26px; }
.ui-script__head .ui-chip { margin-left: auto; font-family: var(--mono); font-size: 11px; }
.ui-script p { display: flex; gap: 14px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 14px; color: var(--body); }
.ui-script p time { font: 500 12px/1.6 var(--mono); color: var(--muted); }
.ui-script p.on { color: var(--ink); font-weight: 500; }
.ui-script p.on time { color: var(--plum); }
.ui-voice { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ui-voice i { width: 9px; height: 9px; border-radius: 50%; background: #E0668A; animation: pulse 2.4s ease-in-out infinite; }
.ui-cue { padding: 14px 20px; border-radius: 999px; background: var(--plum); color: var(--page); font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ui-cue b { font-family: var(--serif); font-size: 22px; letter-spacing: 0; vertical-align: -2px; }
.illo--speak .r1 { left: 0; top: 4%; width: 78%; transform: rotate(-2deg); --ub: 8s; }
.illo--speak .r2 { left: 12%; top: 24%; width: 74%; transform: rotate(1.5deg); --ub: 10s; --ud: -2s; }
.illo--speak .r3 { right: 0; top: 18%; transform: rotate(5deg); --ub: 6s; --ud: -1s; }
.illo--speak .r4 { left: 2%; bottom: 4%; transform: rotate(-5deg); --ub: 7s; --ud: -3s; }

/* phones: the scene keeps its desktop layout at 640px and shrinks as one picture, so no piece is squeezed or cut */
@media (max-width: 760px) {
  html[data-shot="m"] .shot { overflow: visible; }
  html[data-shot="m"] .illo { width: 640px; zoom: .8; margin: 0 auto; }
}
@media (max-width: 560px) { html[data-shot="m"] .illo { zoom: .6; } }
@media (max-width: 440px) { html[data-shot="m"] .illo { zoom: .5; } }
@media (max-width: 360px) { html[data-shot="m"] .illo { zoom: .44; } }

/* ---------- M, second composition (Olga, 2026-10-07: "too many small pieces, work on composition"): two or three pieces per
   scene, one large main piece and one or two smaller ones overlapping it; the little hills drawn as smooth curves ---------- */
.ui-card { gap: 8px; padding: 22px 26px 24px; border-radius: 24px; }
.ui-card small { font-size: 11px; }
.ui-card b { font-size: 36px; }
.ui-card span { font-size: 15px; }
.ui-hill { height: 70px; margin: 14px 0 6px; }
.ui-card--back { box-shadow: 0 16px 34px -20px rgba(59,33,64,.3), 0 0 0 1px rgba(59,33,64,.06); }
.illo--start .illo__shape { left: 18%; top: 4%; width: 64%; }
.illo--start .p4 { left: 44%; top: 4%; width: 50%; transform: rotate(5deg); --ub: 9s; --ud: -2s; }
.illo--start .p3 { left: 4%; top: 30%; width: 60%; z-index: 2; transform: rotate(-3deg); --ub: 8s; }
.illo--start .p1 { left: auto; right: 2%; top: auto; bottom: 8%; z-index: 3; transform: rotate(3deg); --ub: 6s; --ud: -1s; }
.illo--start .p1 span { padding: 10px 16px; font-size: 12px; }

.illo--shape .q1 { left: 0; top: 18%; width: 76%; padding: 20px 22px 14px; border-radius: 24px; }
.illo--shape .q2 { right: 0; top: 4%; width: 34%; padding: 20px 22px; border-radius: 22px; z-index: 2; }
.illo--shape .ui-part b { font-size: 30px; }
.illo--shape .ui-step { font-size: 13px; }

.illo--speak .illo__shape { left: 18%; top: 0; width: 64%; }
.illo--speak .r2 { left: 4%; top: 12%; width: 86%; padding: 24px 28px 14px; border-radius: 24px; transform: rotate(-1.5deg); }
.illo--speak .ui-script__head b { font-size: 34px; }
.illo--speak .ui-script p { font-size: 16px; padding: 12px 0; }
.illo--speak .ui-script p time { font-size: 13px; }
.illo--speak .r4 { left: auto; right: 2%; bottom: 6%; z-index: 2; padding: 16px 24px; font-size: 13px; transform: rotate(-4deg); }
.illo--speak .ui-cue b { font-size: 26px; }
.illo--start .p4 { left: 50%; top: 0; width: 46%; }
.illo--start .p3 { top: 40%; width: 58%; }

/* ---------- M, motion (Olga, 2026-10-07: "when the illustrations appear on scrolling, a subtle animation like the class
   player, and they should react to mouse movement"): illo.js adds .is-in when a scene scrolls into view; the shape grows in,
   then each piece rises 30px and fades in one after another, the way the class card arrives (.7s, ease out). After that each
   piece leans toward the pointer (--mx, --my), the front ones more. The gentle bob stays on the separate translate property. */
html[data-shot="m"] .illo .ui { transform: translate(var(--mx, 0px), calc(var(--my, 0px) + var(--ey, 0px))) rotate(var(--rot, 0deg)) scale(var(--sc, 1)); transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .7s cubic-bezier(.2,.8,.2,1); }
html[data-shot="m"] .illo .illo__shape { transform: translate(var(--mx, 0px), var(--my, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1)); transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .9s ease; }
html[data-shot="m"] .illo.is-ready:not(.is-in) .ui { opacity: 0; --ey: 30px; --sc: .98; }
html[data-shot="m"] .illo.is-ready:not(.is-in) .illo__shape { opacity: 0; --sc: .86; }
.illo--start .illo__shape { --rot: -5deg; }
.illo--start .p4 { --rot: 5deg; } .illo--start .p3 { --rot: -3deg; } .illo--start .p1 { --rot: 3deg; }
.illo--shape .q1 { --rot: -2deg; } .illo--shape .q2 { --rot: 4deg; }
.illo--speak .r2 { --rot: -1.5deg; } .illo--speak .r4 { --rot: -4deg; }
@media (prefers-reduced-motion: reduce) { html[data-shot="m"] .illo .ui, html[data-shot="m"] .illo .illo__shape { transition: none; } }
/* one piece of each kind per scene ("dont put same pieces in the illustration"): the second class card behind Start became
   the room choice */
.ui-room { display: grid; gap: 10px; padding: 20px 22px 22px; border-radius: 22px; }
.ui-room__pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 999px; background: var(--page); box-shadow: inset 0 0 0 1px var(--rule); font-size: 16px; font-weight: 500; }
.ui-room__pick svg { width: 14px; height: 14px; }
.illo--start .p4 { left: 46%; top: 6%; width: 48%; }

/* ---------- M, motion round two (Olga, 2026-10-08: "each illustration is moving separately, and each part reacts
   separately, like the mouse is making them move"): after the entry, illo.js runs a small spring per piece every frame
   (push away from the pointer when it is near, a tilt, its own stiffness and damping), so the CSS transition on transform
   steps aside (.is-live) and only the opacity keeps one ---------- */
html[data-shot="m"] .illo .ui, html[data-shot="m"] .illo .illo__shape { --tilt: 0deg; }
html[data-shot="m"] .illo .ui { transform: translate(var(--mx, 0px), calc(var(--my, 0px) + var(--ey, 0px))) rotate(calc(var(--rot, 0deg) + var(--tilt))) scale(var(--sc, 1)); }
html[data-shot="m"] .illo .illo__shape { transform: translate(var(--mx, 0px), var(--my, 0px)) rotate(calc(var(--rot, 0deg) + var(--tilt))) scale(var(--sc, 1)); }
html[data-shot="m"] .illo.is-live .ui, html[data-shot="m"] .illo.is-live .illo__shape { transition: opacity .7s ease; }

/* ---------- the hero photograph (Olga, 2026-10-08: "replace this with this photo, find the right position, maybe change
   the shape to look proportional"): the seated student in the eye mask and the State headphones, cropped from the face to
   the hands (assets/img/hm/seated-hero.jpg, 4:5, cut from seated-headphones.jpg). The clover grows taller to fit a
   standing picture: the same round petals, a longer middle (viewBox 100 x 125) ---------- */
.bloom { aspect-ratio: 4 / 5; width: min(100%, 440px); }
.bloom__photo { object-position: 50% 40%; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125'><circle cx='30' cy='30' r='29'/><circle cx='70' cy='30' r='29'/><circle cx='30' cy='95' r='29'/><circle cx='70' cy='95' r='29'/><rect x='24' y='24' width='52' height='77'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125'><circle cx='30' cy='30' r='29'/><circle cx='70' cy='30' r='29'/><circle cx='30' cy='95' r='29'/><circle cx='70' cy='95' r='29'/><rect x='24' y='24' width='52' height='77'/></svg>") center / 100% 100% no-repeat; }
@media (max-width: 1100px) { .bloom { width: min(100%, 340px); } }
@media (max-width: 760px) { .bloom { width: min(100%, 220px, 26vh); } }
@media (max-width: 760px) and (max-height: 700px) { .bloom { width: min(100%, 170px, 22vh); } }

/* the float, smaller too ("more subtle") */
@keyframes uibob { from { translate: 0 0; } to { translate: 0 -5px; } }

/* ---------- hero photo options (Olga, 2026-10-08: "offer different shapes and different zooms for the image"), review only:
   html[data-hshape] a tall clover with a soft waist (default) | b arch | c stacked pebbles | d capsule | e the square clover;
   html[data-hzoom] wide | medium (default) | close, three crops of seated-headphones.jpg (hero.js swaps the file) ---------- */

html[data-hshape="b"] .bloom__photo { -webkit-mask: none; mask: none; border-radius: 999px 999px 28px 28px; }

/* "put these elements a bit up" (2026-10-08): the filter pill and the breathe-in cue overlap their main cards */
.illo--start .p1 { bottom: 20%; }
.illo--speak .r4 { bottom: 26%; }

/* ---------- the class assistant on a phone (section #live, 2026-10-08, second layout: "a separate section, not one of the
   illustrations, a good place, the phone straight"): white, centred, after the builder; numbered badges on the screen
   match the three points under it ---------- */
.live > .live__stage, .live > .live__list { max-width: var(--w-wide); }
.live .section__head { margin-bottom: 40px; }
.live__stage { position: relative; display: grid; place-items: center; padding: 30px 0; }
.live__blob { position: absolute; width: min(620px, 92%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FBD3E2, #D9D5FA 55%, #CBEBD7); }
.phone { position: relative; z-index: 1; width: 310px; aspect-ratio: 9 / 19; border-radius: 44px; background: var(--plum); box-shadow: 0 50px 90px -40px rgba(59,33,64,.55); }   /* no darker frame around the screen (Olga, 2026-10-11) */
.phone__screen { position: relative; height: 100%; border-radius: 44px; overflow: hidden; padding: 26px 20px 26px; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--page);
  --core: #5B2E5E; --edge: #3B2140; background: radial-gradient(120% 100% at 50% 44%, var(--core) 0%, var(--edge) 64%); transition: background 6s ease; }   /* the field, as in the player's look G: deeper with the part's level (2026-10-12) */
.phone__screen[data-level="2"] { --core: #66357C; } .phone__screen[data-level="3"] { --core: #7A3F8A; --edge: #371C44; }
/* the small F (2026-10-11): the two switches and the length at the top, the cloud filling the screen, the cue and count on its
   middle, the spoken line, the bars of the parts, the times and the round play button */
.phone__top { position: relative; z-index: 1; width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 0; font: 500 8.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.phone__sw { display: inline-flex; align-items: center; gap: 6px; }
.phone__sw i { width: 22px; height: 13px; border-radius: 7px; border: 1.2px solid rgba(255,247,238,.55); position: relative; }
.phone__sw i::after { content: ''; position: absolute; top: 1.5px; left: 1.5px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,247,238,.6); transition: transform .25s, background .25s; }
.phone__sw.is-on i { background: var(--page); border-color: var(--page); }
.phone__sw.is-on i::after { transform: translateX(9px); background: var(--plum); }
.phone__len { margin-left: auto; opacity: .8; }
/* the header, as in the player: name · how, and what comes next, in one voice */
.phone__head { position: relative; z-index: 1; width: 100%; text-align: left; margin-top: 24px; font: 400 11.5px/1.45 var(--sans); color: var(--page); }
.phone__hl b { display: block; font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 22px; line-height: 1.1; margin-bottom: 3px; } .phone__hl span { display: block; opacity: .85; }   /* the name in the cue's voice, the rest on the next line */
.phone__hn { opacity: .55; margin-top: 2px; } .phone__hn b { font-weight: 500; }
.phone__cloud { position: absolute; left: 50%; top: 44%; width: 230%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: .9; }
.phone__count { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -63%); z-index: 1; display: grid; gap: 4px; width: max-content; }
.phone .phone__count small { font-family: var(--serif); font-style: normal; font-size: 17px; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--page); }   /* undoes .ui small, the page's generic small-caps rule */
.phone__count b { font-family: var(--serif); font-weight: 400; font-size: 96px; line-height: .9; min-height: .9em; text-shadow: 0 2px 24px rgba(59,33,64,.4); }
.phone__line { position: relative; z-index: 1; margin-top: auto; font-size: 12.5px; line-height: 1.45; max-width: 230px; min-height: 2.9em; }
.phone__nav { position: relative; z-index: 1; width: 100%; margin-top: 18px; height: 44px; touch-action: none; cursor: pointer; }   /* the landscape (look G, 2026-10-12), drawn by assist.js */
.phone__land { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.phone__land .lv-line { fill: none; stroke-width: 1.4; stroke-linejoin: round; }
.phone__land .lv-floor { stroke: rgba(255,247,238,.22); stroke-width: 1; }
.phone__land .lv-area { transition: opacity .6s; }
.phone__land .lv-ph line { stroke: var(--page); stroke-width: 1; } .phone__land .lv-ph rect { fill: var(--page); } .phone__land .lv-ph text { font: 500 6.5px var(--mono); fill: var(--plum-deep); }
.phone__controls { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 10px; }
.phone__time { font: 500 10px/1 var(--mono); opacity: .8; letter-spacing: .06em; }
.phone__time:last-child { justify-self: end; }
.phone__play { position: relative; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,247,238,.92); }
.phone__play::before { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--plum); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
  --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><rect x='3.5' y='2.5' width='4' height='13' rx='1.5'/><rect x='10.5' y='2.5' width='4' height='13' rx='1.5'/></svg>"); }
.phone__play.is-paused::before { margin-left: -6px; --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M4.35 3.4 L13.75 9 L4.35 14.6 Z' stroke='black' stroke-width='2.2' stroke-linejoin='round' fill='black'/></svg>"); }
.live__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 40px; }
.live__list li { display: grid; gap: 10px; align-content: start; justify-items: start; padding-top: 22px; border-top: 1.5px solid var(--rule); }
.live__list b { font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1.1; color: var(--ink); }
.live__list span:last-child { font-size: 16px; line-height: 1.55; color: var(--body); }
.live__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 500 13px/1 var(--mono); color: var(--ink); }
.live__n--1 { background: var(--peri-light); } .live__n--2 { background: var(--rose); } .live__n--3 { background: var(--mint); }
@media (max-width: 760px) {
  .phone { width: 270px; }
  .live__list { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 24px; }
  .live__list li { padding: 20px 0; }
}
@media (prefers-reduced-motion: reduce) { .phone__live i { animation: none; } }

/* the three points around the phone (Olga, 2026-10-08: "put these info around the phone, decide on the design"): each
   beside what it describes, 1 left by the breathing circle, 2 right by the cue, 3 left lower by "Next"; no connecting
   lines, the number colours link them; stacked under the phone on narrow screens */
.live__stage { grid-template-columns: minmax(0, 1fr) 310px minmax(0, 1fr); grid-template-rows: repeat(3, auto); column-gap: 64px; align-items: center; justify-items: stretch; }
.live__stage .phone { grid-column: 2; grid-row: 1 / 4; }
.live__blob { left: 50%; top: 50%; translate: -50% -50%; }
.live__stage .live__list { display: contents; }
.live__stage .live__list li { position: relative; z-index: 1; max-width: 300px; padding: 0; border: 0; gap: 8px; }
.live__stage .live__list li:nth-child(1) { grid-column: 1; grid-row: 1; justify-self: end; justify-items: end; text-align: right; align-self: end; }
.live__stage .live__list li:nth-child(2) { grid-column: 3; grid-row: 2; justify-self: start; }
.live__stage .live__list li:nth-child(3) { grid-column: 1; grid-row: 3; justify-self: end; justify-items: end; text-align: right; align-self: start; }
.live__stage .live__list b { font-size: 26px; }
@media (max-width: 1100px) {
  .live__stage { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 0; }
  .live__stage .phone { grid-column: 1; grid-row: 1; justify-self: center; margin-bottom: 40px; }
  .live__blob { top: 330px; }
  .live__stage .live__list li, .live__stage .live__list li:nth-child(1), .live__stage .live__list li:nth-child(2), .live__stage .live__list li:nth-child(3) {
    grid-column: 1; grid-row: auto; justify-self: stretch; justify-items: start; text-align: left; max-width: none; padding: 20px 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 760px) { .live__blob { top: 300px; } }

/* the points as cards with the illustrations' motion (Olga, 2026-10-08: "you need to be able to read the info around the
   phone, they need to be designed as cards on the backgrounds, and add animation similar to the illustrations"): white
   cards like the illustration pieces, a slight tilt each, rising in one after another, floating, each reacting to the
   pointer on its own (illo.js runs this stage too); the phone moves only a little */
.live__stage .ui { position: relative; }
.live__stage .live__card { z-index: 2; display: grid; gap: 8px; justify-items: start; text-align: left; max-width: 310px; padding: 20px 22px 22px; border-radius: 22px; background: var(--card); box-shadow: 0 24px 48px -24px rgba(59,33,64,.38), 0 0 0 1px rgba(59,33,64,.06); }
.live__stage .live__list li:nth-child(1), .live__stage .live__list li:nth-child(3) { justify-items: start; text-align: left; }
.live__stage .live__card b { font-size: 25px; }
.live__stage .live__card span:last-child { font-size: 15px; }
.live__stage .live__list li:nth-child(1) { --rot: -2deg; --ub: 7s; }
.live__stage .live__list li:nth-child(2) { --rot: 2deg; --ub: 8.5s; --ud: -2s; }
.live__stage .live__list li:nth-child(3) { --rot: -1.5deg; --ub: 6.5s; --ud: -1s; }
.live__stage .ui, .live__stage .illo__shape { transform: translate(var(--mx, 0px), calc(var(--my, 0px) + var(--ey, 0px))) rotate(calc(var(--rot, 0deg) + var(--tilt, 0deg))) scale(var(--sc, 1)); transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .7s cubic-bezier(.2,.8,.2,1); }
.live__stage.is-ready:not(.is-in) .ui { opacity: 0; --ey: 30px; --sc: .98; }
.live__stage.is-ready:not(.is-in) .illo__shape { opacity: 0; --sc: .86; }
.live__stage.is-live .ui, .live__stage.is-live .illo__shape { transition: opacity .7s ease; }
.live__stage .phone { animation: none; }
@media (max-width: 1100px) {
  .live__stage .live__card, .live__stage .live__list li:nth-child(1), .live__stage .live__list li:nth-child(2), .live__stage .live__list li:nth-child(3) {
    justify-self: center; width: 100%; max-width: 420px; padding: 20px 22px 22px; margin-bottom: 14px; border: 0; }
}
@media (prefers-reduced-motion: reduce) { .live__stage .ui, .live__stage .illo__shape { transition: none; } }
.live__stage .live__list li.live__card { padding: 22px 26px 24px; gap: 10px; }

/* the cards around the phone straight ("keep info around the phone more straight, no angles", 2026-10-08) */
.live__stage .live__list li:nth-child(1), .live__stage .live__list li:nth-child(2), .live__stage .live__list li:nth-child(3) { --rot: 0deg; }

/* the phone and its circle stay still: no rise on entry, only a fade; only the cards around it move ("only info around
   phone moves, keep the phone stable", 2026-10-08) */
.live__stage.is-ready:not(.is-in) .phone { --ey: 0px; --sc: 1; }
.live__stage.is-ready:not(.is-in) .live__blob { --sc: 1; }

/* the four cards as wide as the page, with room at the sides ("make this section wider, wide as page with some space on
   left and right", 2026-10-08) */
#features { padding-left: clamp(18px, 4vw, 72px); padding-right: clamp(18px, 4vw, 72px); }
#features > .adv { max-width: none; gap: clamp(24px, 2.6vw, 48px); }
#features .card__cover .h3 { font-size: clamp(26px, 2.3vw, 40px); }

/* the giant wordmark at the end, smaller ("make logo at the end smaller", 2026-10-08): about two thirds of its old width */
.bigmark { max-width: 820px; padding-top: 56px; }
@media (max-width: 760px) { .bigmark { max-width: 86%; } }

/* the circle behind the phone swirls (Olga, 2026-10-08: "add swirly animation behind the phone on the circle"): the hero's
   moving wash (twirl.js, tone swirl: rose, periwinkle, lilac, a touch of butter) inside the circle, bending under the
   pointer; the circle and the phone themselves stay still; the old gradient stays as the fallback without WebGL */
.live__blob { overflow: hidden; isolation: isolate; }

/* the covers' old SVG noise stays off (it was hidden by the grain file, removed in the tidy-up) */
.card__cover::before { display: none; }

/* more room between the wordmark and the menu under it (Olga, 2026-10-08: "space under logo, not under the menu on the
   bottom"); the space under the menu stays as it was */
.footer { padding-top: 80px; padding-bottom: 56px; }
@media (max-width: 760px) { .footer { padding-top: 48px; padding-bottom: 40px; } }

/* the save screen's link box, and the welcome-back screen (Save the class, 2026-10-08) */
.getlink { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: 100%; max-width: 560px; }
.getlink .input { height: 52px; font-size: 14px; box-shadow: inset 0 0 0 1.5px var(--rule); }
.getlink .btn { height: 52px; }
.backscreen .make { margin-top: 6px; }
@media (max-width: 760px) { .getlink { grid-template-columns: minmax(0, 1fr); } }

/* the class assistant's entry (assist.js): the phone and its circle wait, then hop in like the sentence's pills; the cards
   are driven by the scroll, so no CSS transition fights it */
.live__stage.is-waiting .phone, .live__stage.is-waiting .live__blob { opacity: 0; }
.live__stage.is-arriving .phone { animation: phonehop 1.1s cubic-bezier(.2,.8,.2,1) both; }
.live__stage.is-arriving .live__blob { animation: blobin 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes phonehop { from { opacity: 0; translate: 0 -36px; } to { opacity: 1; translate: 0 0; } }   /* a quiet slide down into place (Olga, 2026-10-11: no shake) */
@keyframes blobin { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
.live__stage.is-live .live__card { transition: none; }

/* while the class assistant section holds on wide screens: title, phone and cards on one screen */
.live.is-pinned { padding-top: 44px; padding-bottom: 28px; min-height: 100vh; min-height: 100svh; box-sizing: border-box; }
.live.is-pinned .section__head { margin-bottom: 4px; gap: 10px; }
.live.is-pinned .h2 { font-size: clamp(40px, 4.4vw, 64px); }
.live.is-pinned .live__stage { padding: 12px 0 0; }
.live.is-pinned .live__blob { width: min(560px, 80%); }

/* two rows instead of three, so the cards never stand taller than the phone: 1 top left, 2 right in the middle, 3 bottom left */
@media (min-width: 1101px) {
  .live__stage { grid-template-rows: repeat(2, auto); row-gap: 28px; }
  .live__stage .phone { grid-row: 1 / 3; }
  .live__stage .live__list li:nth-child(1) { grid-row: 1; align-self: end; }
  .live__stage .live__list li:nth-child(2) { grid-row: 1 / 3; align-self: center; }
  .live__stage .live__list li:nth-child(3) { grid-row: 2; align-self: start; }
}

/* the paused section without its small label (Olga, 2026-10-08: "we can lose this part, for a better space between the title
   and the phone"): title and phone centred on the screen together, the same air above the title and under the phone */
.live.is-pinned { display: flex; flex-direction: column; justify-content: center; padding-top: 32px; padding-bottom: 32px; }
.live.is-pinned .section__head { margin-bottom: 20px; }
.live.is-pinned .live__stage { padding: 20px 0 0; width: 100%; }

/* the small label is back; while the section holds it folds away (assist.js) and the title moves up */
.live__label { overflow: hidden; }
/* tighter while it holds, so the phone keeps its full size on laptop screens (Olga, 2026-10-08: "no need to make the phone smaller") */
.live.is-pinned { padding-top: 20px; padding-bottom: 16px; }
.live.is-pinned .section__head { margin-bottom: 12px; }
.live.is-pinned .live__stage { padding: 10px 0 0; }
/* the title higher while it holds (Olga, 2026-10-08: "title can go a bit higher, for better space between title and phone"):
   the title block sits near the top, and the rest of the screen goes to the phone, centred in it, the same air above and below */
.live.is-pinned { justify-content: flex-start; padding-top: 36px; }
.live.is-pinned .live__stage { flex: 1 1 auto; align-content: center; }

/* white air before and after the class assistant on wide screens (Olga, 2026-10-09: "more white space above the title and under the
   phone, but it should not affect the view when the phone is fixed"): bands outside the held section, so the held view stays as it is */
.live-air { display: none; }
@media (min-width: 1101px) { .live-air { display: block; height: 56px; background: var(--card); } }   /* assist.js sets the exact height */

/* the builder in a frame with its label on the edge (Olga, 2026-10-09: "a frame about it, saying try now for free in a label";
   the "free" tag on the button goes) */
.section--builder > .builder { max-width: calc(var(--w) + 128px); }   /* the inside keeps the width it had before the frame; the frame and its 64 px of air sit outside it (Olga, 2026-10-09: "like it was before plus border is the extra width") */
.section--builder .builder { position: relative; width: 100%; margin: 0 auto; box-sizing: border-box; border: 1.5px solid rgba(255,247,238,.3); border-radius: 48px; padding: 80px 64px 60px; }
.builder__tag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 14px 30px; border-radius: 999px; background: var(--plum); color: var(--page); border: 1.5px solid rgba(255,247,238,.3);   /* just a border, the section's own plum behind it so the frame line stops at the label, more room inside (Olga, 2026-10-09) */ font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 760px) { .section--builder .builder { border-radius: 30px; padding: 48px 18px 32px; } .builder__tag { font-size: 10px; padding: 11px 20px; } }

.section--builder .builder__action { margin-top: 10px; }   /* 10 px more above the button (Olga, 2026-10-09) */

/* How it works shows the new builder (Olga, 2026-10-19: "Update previews with the new builder design"): real crops of the v3 builder
   (assets/img/product/v3-*.jpg) float over each coloured shape, in place of the drawn cards of the old builder */
.ui-shot { position: absolute; z-index: 1; display: block; height: auto; border-radius: 18px; background: var(--card);
  box-shadow: 0 30px 60px -28px rgba(59,33,64,.45), 0 0 0 1px rgba(59,33,64,.06); animation: uibob 8s ease-in-out infinite; }
.ui-shot--start { left: 2%; top: 16%; width: 96%; }
.ui-shot--shape { left: 2%; top: 22%; width: 96%; }
.ui-shot--speak { left: 26%; top: 2%; width: 52%; }
@media (prefers-reduced-motion: reduce) { .ui-shot { animation: none; } }
html[data-shot="m"] .shot img.ui-shot { display: block; }   /* the older rule hides every img in .shot (the full screenshots) */

/* How it works as illustrations made of small pieces of the new builder (Olga, 2026-10-19: "new builder previews, should also be
   illustrations created from smaller pieces, not these huge pieces of builder"): small white cards in the v3 look, each floating gently */
.nb { position: absolute; z-index: 1; background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: 0 24px 46px -24px rgba(59,33,64,.45), 0 0 0 1px rgba(59,33,64,.05);
  font-family: var(--sans); color: var(--ink); animation: uibob 7s ease-in-out var(--ud, 0s) infinite alternate; }
.nb b { display: block; font: 400 26px/1 var(--serif); } .nb small { display: block; margin-top: 4px; font-size: 11.5px; color: rgba(59,33,64,.6); }
.nb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .nb-grid i { aspect-ratio: 1; border-radius: 9px; } .nb-grid i.on { outline: 2.5px solid var(--plum-deep); outline-offset: 2px; }
.nb-map small { margin-top: 10px; font: 400 15px/1.1 var(--serif); color: var(--ink); }
.nb-word b { font-size: 34px; } .nb-word svg { display: block; width: 100%; height: 44px; margin-top: 10px; }
.nb-file { display: flex; align-items: center; gap: 12px; } .nb-file b { font: 600 13px/1.2 var(--sans); } .nb-doc { flex: none; width: 30px; height: 38px; border-radius: 5px; background: #E6E3FB; box-shadow: inset 0 -10px 0 #B9B6F5; }
.nb-curve { padding: 16px 14px 10px; } .nb-curve svg { display: block; width: 100%; height: auto; overflow: visible; }
.nb-pills { display: flex; gap: 8px; padding: 10px; border-radius: 999px; }
.nb-play, .nb-save { padding: 10px 20px; border-radius: 999px; font: 600 13px/1 var(--sans); } .nb-play { background: var(--plum); color: #fff; } .nb-save { background: #F3EEF1; }
.nb-part b { font-size: 28px; } .nb-step { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; }
.nb-step em { font-style: normal; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(59,33,64,.2); }
.nb-lines p { display: grid; grid-template-columns: 44px 1fr; gap: 8px; margin: 10px 0 0; padding: 6px 8px; border-radius: 10px; font: 400 15px/1.25 var(--serif); }
.nb-lines time { font: 400 10.5px/1.6 var(--mono); color: rgba(59,33,64,.5); } .nb-lines p.on { background: #FBEAF1; }
.nb-voice { display: flex; align-items: center; gap: 10px; } .nb-voice b { font: 600 14px/1.1 var(--sans); } .nb-voice svg { width: 40px; height: 16px; margin-left: auto; }
.nb-ava { flex: none; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #F9CB6B, #F3A6C6); }
.nb-edit { padding: 10px 16px; border-radius: 999px; font: 600 12.5px/1 var(--sans); }
@media (max-width: 860px) { .nb { padding: 10px 12px; border-radius: 14px; } .nb b { font-size: 20px; } .nb-word b { font-size: 24px; } .nb-lines p { font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .nb { animation: none; } }
.ui.nb small { font: 400 11.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: rgba(59,33,64,.6); }
.ui.nb-map small { font: 400 15px/1.1 var(--serif); color: var(--ink); }