/* lissenin.com: look 2, The Card Table (picked 2026-09-27), made to work from phone to desktop.
   Design source: design/looks-2026-09-26/src/l02.html on the design/looks branch. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/figtree-latin.woff2") format("woff2"); }
:root { --table: #ECEEE9; --paper: #FFFFFF; --ink: #1B1F23; --ink2: #4C535A; --rule: #CFD3CC; --blue: #008EB9; --field: rgba(27, 31, 35, .07); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; overflow-x: clip; margin: 0; font-family: "Figtree", "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: var(--table); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, p, figure { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 10px; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.if { width: 20px; height: 20px; fill: currentColor; flex: none; display: block; }
.if .ko { fill: none; stroke: var(--k, #fff); }

.page { max-width: 1280px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding: 34px 64px 30px; display: flex; flex-direction: column; }

/* header: ear and name, then language and contact */
/* above the hero: on a short laptop screen the cards start higher than the header as they are dealt */
.top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; }
.brand { display: flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 850; font-size: 24px; letter-spacing: -.02em; }
.brand .ear { width: 28.3px; height: 34px; color: var(--blue); flex: none; }
/* "by MethodKit" small to the right of the name, on its baseline, as Ola sketched it on the canvas (2026-09-28) */
.brand > span { white-space: nowrap; }
.brand .by { margin-left: 23px; font-size: 13px; font-weight: 400; letter-spacing: 0; }
.top-r { display: flex; align-items: center; gap: 12px; }
.langs { display: flex; height: 46px; padding: 4px; border-radius: 12px; background: linear-gradient(var(--field), var(--field)) var(--table); }   /* the tint on an opaque ground, so a card passing under it does not show through */
.langs a { display: grid; place-items: center; min-width: 44px; padding: 0 10px; border-radius: 9px; text-decoration: none; font-weight: 750; font-size: 14px; letter-spacing: .04em; color: var(--ink2); }
.langs a[aria-current] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(27, 31, 35, .08); }
.langs a:not([aria-current]):hover { color: var(--ink); }
.contact { --k: var(--paper); display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 12px; background: var(--paper); text-decoration: none; font-weight: 700; font-size: 15px; box-shadow: 0 1px 2px rgba(27, 31, 35, .08); }
.contact:hover { box-shadow: 0 2px 8px rgba(27, 31, 35, .14); }

/* first page */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 40px; align-items: center; margin-top: 44px; }
h1 { font-size: clamp(38px, 3.4vw + 24px, 68px); line-height: 1; font-weight: 900; letter-spacing: -.038em; text-wrap: balance; }
.hero h1 .b { color: var(--blue); }   /* after the first comma, as in the link-preview image */
.sub { font-size: clamp(17px, .4vw + 15px, 20px); line-height: 1.5; color: var(--ink2); margin-top: 26px; max-width: 31em; }
.aud { font-size: 16px; font-weight: 750; margin-top: 16px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.cta { display: inline-flex; align-items: center; gap: 12px; min-height: 62px; padding: 14px 26px; border-radius: 14px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 800; font-size: 18px; line-height: 1.2; box-shadow: 0 8px 20px rgba(27, 31, 35, .2); }
.cta:hover { background: #000; }
.cta-note { font-size: 14px; line-height: 1.45; color: var(--ink2); max-width: 28em; text-wrap: balance; }

/* the six cards, fanned; every size comes from the figure's own width. No empty band above the cards:
   the lifted front card rests at the top (8.93 - 6.07 = 2.86cqw), so the cards centre on the text. */
.fan-wrap { container-type: inline-size; width: 100%; max-width: 560px; justify-self: center; }
.fan { position: relative; width: 100%; aspect-ratio: 560 / 420; }
/* MethodKit card face: square art, corners and shadow in code (house rule for a 76 mm card) */
.mk { border-radius: 10.53%; box-shadow: calc(var(--s) * .0197) calc(var(--s) * .0188) calc(var(--s) * .1053) rgba(0, 0, 0, .7); }
.fan .mk { --s: 44.64cqw; position: absolute; left: 27.68cqw; top: 8.93cqw; width: var(--s); height: var(--s); transform-origin: 50% 135%;
  transform: translateY(var(--y, 0px)) rotate(var(--a, 0deg)); }
.fan .f1 { --a: -30deg; --i: 0; }
.fan .f2 { --a: -18deg; --i: 1; }
.fan .f3 { --a: -6deg; --i: 2; }
.fan .f4 { --a: 6deg; --i: 3; }
.fan .f5 { --a: 18deg; --i: 4; }
.fan .f6 { --y: -6.07cqw; --i: 5; }
/* on load the cards are dealt onto the pile, back to front (Ola, 2026-09-29: "Could the cards fall down into the
   pile when page is loaded. The drop should only be a few cm and not from nothing", then "go with 2" of five).
   Each card hangs a short way above its place from the first frame, never out of nothing, and falls with a tap;
   its shadow is soft and wide up high and tightens as it lands. The front card lands in its lifted place. The
   header stays above the cards where the drop starts higher than it (a 1280 x 800 laptop). */
.fan { --drop: 14cqw; }
@media (prefers-reduced-motion: no-preference) {
  .fan .mk { animation: fan-deal .38s cubic-bezier(.5, 0, .75, .4) calc(.15s + var(--i) * 85ms) backwards; }
  .fan-hit { animation: fan-wait 1s; }   /* no hover until the cards have landed, so a pointer already there does not snap them away */
}
@keyframes fan-wait { from, to { visibility: hidden; } }
@keyframes fan-deal { from { transform: translateY(calc(var(--y, 0px) - var(--drop))) rotate(var(--a, 0deg));
  box-shadow: calc(var(--s) * .05) calc(var(--s) * .13) calc(var(--s) * .24) rgba(0, 0, 0, .3); } }
/* hover the front card: all six cards swoosh off the screen to the right, up-right and down-right, and
   fall back into the pile when the mouse leaves (Ola, 2026-09-27). An invisible patch where the front card
   rests takes the hover, so it holds while the cards are away. Mouse only; nothing moves for reduced motion. */
.fan-hit { position: absolute; left: 27.68cqw; top: 2.86cqw; width: 44.64cqw; height: 44.64cqw; border-radius: 10.53%; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .fan .mk { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
  .fan .mk.f2 { transition-delay: .05s; }
  .fan .mk.f3 { transition-delay: .1s; }
  .fan .mk.f4 { transition-delay: .15s; }
  .fan .mk.f5 { transition-delay: .2s; }
  .fan .mk.f6 { transition-delay: .25s; }
  .fan:has(.fan-hit:hover) .mk { transition: transform .5s cubic-bezier(.5, 0, .75, 0); }
  .fan:has(.fan-hit:hover) .mk.f6 { transform: translate(112vw, -10vh) rotate(30deg); }
  .fan:has(.fan-hit:hover) .mk.f5 { transform: translate(110vw, -24vh) rotate(24deg); transition-delay: .04s; }
  .fan:has(.fan-hit:hover) .mk.f4 { transform: translate(120vw, -3vh) rotate(40deg); transition-delay: .08s; }
  .fan:has(.fan-hit:hover) .mk.f3 { transform: translate(115vw, 18vh) rotate(58deg); transition-delay: .12s; }
  .fan:has(.fan-hit:hover) .mk.f2 { transform: translate(125vw, -30vh) rotate(-4deg); transition-delay: .16s; }
  .fan:has(.fan-hit:hover) .mk.f1 { transform: translate(120vw, 28vh) rotate(80deg); transition-delay: .2s; }
}
.fan-wrap figcaption { margin-top: -4px; text-align: center; font-size: 15px; font-weight: 600; color: var(--ink2); }

/* what it is for: three use cases, each on a blue card */
.uses { margin-top: 58px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 30px 32px; background: var(--paper); border-radius: 22px; }
.use { display: flex; align-items: flex-start; gap: 18px; }
.use p { font-size: 16px; line-height: 1.45; color: var(--ink2); }
.use b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 18px; font-weight: 800; }
.face { --s: 64px; flex: none; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 10.53%; background: var(--blue); color: #fff; transform: rotate(-3deg);
  box-shadow: calc(var(--s) * .0197) calc(var(--s) * .0188) calc(var(--s) * .1053) rgba(0, 0, 0, .7); }
.use:nth-child(2) .face { transform: rotate(2deg); }
.use:nth-child(3) .face { transform: rotate(-1deg); }
.face .if { width: 32px; height: 32px; --k: var(--blue); }
.proof { margin-top: 24px; font-size: 15px; color: var(--ink2); }

/* text pages: privacy, not found */
.doc { max-width: 40em; margin-top: 56px; }
.doc h1 { font-size: clamp(34px, 2vw + 24px, 48px); }
.doc h2 { margin-top: 30px; font-size: 19px; font-weight: 800; }
.doc p { margin-top: 10px; font-size: 17px; line-height: 1.6; color: var(--ink2); }
.doc a { color: var(--ink); text-underline-offset: 3px; }

/* footer, with the ElevenLabs Grants badge as on the earlier lissenin.com */
.foot { margin-top: auto; padding-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-size: 13.5px; color: var(--ink2); }
.foot a { text-underline-offset: 3px; }
.grants { margin-left: auto; opacity: .6; transition: opacity .3s ease; }
.grants:hover, .grants:focus-visible { opacity: 1; }
.grants img { width: 112px; }   /* 30 % smaller than the 160 px of the earlier lissenin.com (Ola, 2026-10-01) */

/* Desktop: the whole first page on one screen (Ola, 2026-09-29: "I like to be able to see all in one
   page", on a 16" MacBook Pro in full screen, where it was 23 px too tall). The gaps, the heading and the
   fan follow the window's height: full size from 1040 px tall, tightest at 800 px. Below 800 px it stops
   shrinking and scrolls (Ola: "At some point scaling makes page become too small. Make that decision"):
   under that the heading and the fan lose their weight. Text sizes and the button never shrink.
   Each value is a straight line between its 800 px and 1040 px values: a + (b - a) * (100svh - 800px) / 240px.
   svh is the visible height at load: the same as vh on a desktop, smaller on an iPad with Safari's bars shown. */
@media (min-width: 1100px) {
  :root { --fan: clamp(500px, 25svh + 300px, 560px); }
  .page:has(.hero) { padding-top: clamp(20px, 5.833svh - 26.67px, 34px); padding-bottom: clamp(16px, 5.833svh - 30.67px, 30px); container-type: inline-size; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, var(--fan)); margin-top: clamp(20px, 10svh - 60px, 44px); }
  .hero h1 { font-size: clamp(54px, min(3.4vw + 24px, 5.833svh + 7.33px), 68px); }
  .sub { margin-top: clamp(16px, 4.167svh - 17.33px, 26px); }
  .aud { margin-top: clamp(10px, 2.5svh - 10px, 16px); }
  .cta-row { margin-top: clamp(22px, 5svh - 18px, 34px); row-gap: clamp(10px, 1.667svh - 3.33px, 14px); }
  .fan-wrap { max-width: var(--fan); }
  .uses { margin-top: clamp(28px, 12.5svh - 72px, 58px); padding-block: clamp(22px, 3.333svh - 4.67px, 30px); }
  /* the proof line on one line in both languages (Ola, 2026-09-29): its size follows the page column (the
     container set on .page above), whose width cqw measures without the scrollbar. At 15 px it runs 76.5em in English and 77.8em in Swedish,
     so 78.5em fits both with a little slack; a longer text wraps instead of being cut off. */
  .proof { margin-top: clamp(14px, 4.167svh - 19.33px, 24px); font-size: min(15px, 100cqw / 78.5); }
  .page:has(.hero) .foot { padding-top: clamp(22px, 10.833svh - 64.67px, 48px); }
}
@media (max-width: 1099.98px) {
  .page { padding: 28px 40px 26px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 36px; }
  .fan-wrap { max-width: 460px; }
  .fan { --drop: 8.5cqw; }   /* under the text on one column: a smaller drop, so the top card never covers the note above */
  .uses { gap: 24px; padding: 28px; }
  .use { flex-direction: column; gap: 14px; }
}
@media (max-width: 699px) {
  .page { padding: 18px 16px 22px; }
  .brand { gap: 5px; font-size: 20px; }
  .brand .ear { width: 23.3px; height: 28px; }
  .brand .by { margin-left: 4px; font-size: 12px; }
  .top-r { gap: 8px; }
  .langs { height: 42px; }
  .langs a { min-width: 40px; padding: 0 8px; }
  .contact { height: 42px; }
  .hero { gap: 28px; margin-top: 28px; }
  .sub { margin-top: 18px; }
  .cta-row { margin-top: 26px; }
  .cta { width: 100%; justify-content: space-between; font-size: 17px; }
  .uses { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 44px; padding: 22px 20px; }
  .use { flex-direction: row; gap: 18px; }
  .doc { margin-top: 36px; }
  .foot { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 40px; }
  .grants { margin: 6px 0 0; }
}
@media (max-width: 519px) {
  .contact { width: 42px; padding: 0; justify-content: center; }
  .contact span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 359px) {
  /* too narrow for the name and "by MethodKit" side by side: stack them */
  .brand > span { display: flex; flex-direction: column; line-height: 1.05; }
  .brand .by { margin: 1px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .grants { transition: none; }
}

/* ---------- how it works (Ola, 2026-09-29, carried from the canvas https://claude.ai/artifact/26GvUtSxBKyUbggF8DbPL8) ----------
   On the left one grey frame is the player: the card (or the invite, Sam's notes, Anna's overview) dealt into a
   fixed area, then the voice graph with who speaks, the words, and one row with play, sound and a progress line.
   On the right the heading and four steps, the current one lit. Without JavaScript it shows its last frame;
   /js/how.js plays it. The voice graph keeps the talk form's colours: yellow while the guide speaks, green while
   it listens. */
.how { --listen: #00B94D; --speak: #B99A00; --h2: clamp(36px, 1.57vw + 31.9px, 52px); margin-top: 88px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "show head" "show steps"; grid-template-rows: auto 1fr; column-gap: 64px; align-items: start; }
.how-head { grid-area: head; }
.how-head h2 { font-size: var(--h2); line-height: 1; font-weight: 900; letter-spacing: -.035em; }   /* 38 at 390 wide, 52 at 1280, as on the canvas */
.how-lede { margin-top: 14px; font-size: 18px; line-height: 1.5; color: var(--ink2); }
.how-side { grid-area: steps; }
.how-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 22px; counter-reset: step; }
.how-steps li { position: relative; padding-left: 46px; opacity: .42; transition: opacity .4s ease; }
.how-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -1px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--field); display: grid; place-items: center; font-weight: 800; font-size: 14px; transition: background .4s ease, color .4s ease; }
.how-steps li.on { opacity: 1; }
.how-steps li.on::before { background: var(--ink); color: #fff; }
.how:not(.js) .how-steps li { opacity: 1; }
.how-steps b { display: block; font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.how-steps span { display: block; margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--ink2); max-width: 28em; text-wrap: pretty; }
.how-cta { margin-top: 34px; vertical-align: top; }   /* the first page's button, closing the section; top, so its line ends where it ends */

/* the frame. On desktop it is exactly as tall as the text beside it, from the top of the heading's capitals (.145 of
   its size in Figtree Black) to the foot of the button (Ola: "I want the gray box match the text to the right"). The
   card area takes what the voice line, the words and the controls leave, and the card and the papers size themselves
   to it (cqh; browsers without it get the smaller fixed sizes before each). Clipped, so the cards waiting at the side stay inside it: on a phone they would widen the page. */
.how-show { grid-area: show; align-self: stretch; margin-top: calc(var(--h2) * .145); display: flex; flex-direction: column;
  border-radius: 22px; background: #E3E6E0; padding: 28px 30px 26px; overflow: hidden; overflow: clip; }
.how-stage { flex: 1 1 0; min-height: 240px; container-type: size; display: grid; place-items: center; }
.how .st { grid-area: 1 / 1; opacity: 0; transform: translateX(64px) rotate(9deg) scale(.95);
  transition: transform .75s cubic-bezier(.16, 1, .3, 1), opacity .35s ease; }
.how .st.on { opacity: 1; transform: rotate(var(--r, -2deg)); }
.how .st.out { opacity: 0; transform: translateX(-48px) rotate(-7deg) scale(.95); }
.how .st-card { width: min(300px, 100%); width: min(300px, 100%, 88cqh); border-radius: 10.53%; box-shadow: 2px 3px 18px rgba(0, 0, 0, .35); }
.how .st-card[data-stage="card2"] { --r: 1.5deg; }
/* the papers in em of their own size, 15px where there is room, so a smaller card area shrinks them whole */
.how .st-paper { width: min(29.333em, 100%); box-sizing: border-box; background: var(--paper); border-radius: 14px; padding: 1.6em 1.7333em;
  box-shadow: 0 12px 30px rgba(27, 31, 35, .14); font-size: 13px; font-size: min(15px, 4.2cqh); line-height: 1.5; --r: -1deg; }
.how .st-paper .from { font-size: .8em; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink2); }
.how .st-paper .sub { margin-top: .21em; font-size: 1.2667em; line-height: 1.25; font-weight: 900; }
.how .st-invite p + p { margin-top: .6667em; }
.how .st-invite .link { color: var(--blue); font-weight: 800; }
.how .st-notes ul { margin: .8em 0 0; padding-left: 1.2em; }
.how .st-notes li { margin-bottom: .4em; }
.how .st-notes .ai { margin-top: .8333em; font-size: .8em; color: var(--ink2); }
.how .st-overview { --r: 1.5deg; }
.how .st-overview .count { margin-top: .1538em; font-size: .8667em; font-weight: 700; color: var(--ink2); }
.how .ov-list { list-style: none; margin: .8em 0 0; padding: 0; display: grid; gap: .5333em; }
.how .ov-list li { display: grid; grid-template-columns: 1fr auto; gap: .1429em .7143em; padding: .6429em .7857em; border-radius: .7143em; background: var(--table); font-size: .9333em; }
.how .ov-list li.new { background: #E3F1F6; }
.how .ov-list b { font-weight: 800; }
.how .ov-list li > span { color: var(--ink2); font-weight: 700; white-space: nowrap; }
.how .ov-list q { grid-column: 1 / -1; color: var(--ink2); font-size: .9286em; }

/* the voice graph with who speaks, and the words */
.how-voice { display: flex; align-items: center; gap: 10px; margin-top: 18px; min-height: 30px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.how-voice .bars { display: flex; align-items: center; gap: 4px; height: 30px; }
.how-voice .bars i { width: 5px; height: 6px; border-radius: 3px; background: var(--rule); transition: background .3s ease; }
.how-voice:not(.speaking):not(.listening) .bars { visibility: hidden; }
.how-voice.speaking .bars i { background: var(--speak); }
.how-voice.listening .bars i { background: var(--listen); }
.how-voice.speaking .bars i, .how-voice.listening .bars i { animation: how-bar 1s ease-in-out infinite alternate; }
.how:not(.playing) .how-voice .bars i { animation-play-state: paused; }   /* paused film, still graph */
.how-voice.speaking .bars i:nth-child(1), .how-voice.listening .bars i:nth-child(1) { height: 10px; animation-delay: -.2s; }
.how-voice.speaking .bars i:nth-child(2), .how-voice.listening .bars i:nth-child(2) { height: 18px; animation-delay: -.6s; }
.how-voice.speaking .bars i:nth-child(3), .how-voice.listening .bars i:nth-child(3) { height: 26px; animation-delay: -.1s; }
.how-voice.speaking .bars i:nth-child(4), .how-voice.listening .bars i:nth-child(4) { height: 30px; animation-delay: -.8s; }
.how-voice.speaking .bars i:nth-child(5), .how-voice.listening .bars i:nth-child(5) { height: 20px; animation-delay: -.35s; }
.how-voice.speaking .bars i:nth-child(6), .how-voice.listening .bars i:nth-child(6) { height: 14px; animation-delay: -.5s; }
.how-voice.speaking .bars i:nth-child(7), .how-voice.listening .bars i:nth-child(7) { height: 8px; animation-delay: -.25s; }
@keyframes how-bar { from { transform: scaleY(.4); } to { transform: scaleY(1); } }
.how-words { margin-top: 6px; min-height: 2.8em; font-size: 20px; line-height: 1.4; font-weight: 600; text-wrap: pretty; }

/* play, sound and one progress line */
.how-ctrl { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.how-ctrl[hidden] { display: none; }
.how-ctrl button { font: inherit; color: inherit; border: 0; cursor: pointer; }
.how-ctrl .tp-play { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; padding: 0; }
.tp-play svg { width: 18px; height: 18px; fill: currentColor; }
.tp-play .i-play { margin-left: 3px; }
.tp-play .i-pause, .how.playing .tp-play .i-play { display: none; }
.how.playing .tp-play .i-pause { display: block; }
.tp-sound { flex: none; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 99px; background: var(--field); font-weight: 800; font-size: 14px; }
.tp-sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tp-sound .i-sound, .tp-sound[aria-pressed="true"] .i-muted { display: none; }
.tp-sound[aria-pressed="true"] .i-sound { display: block; }
.how-ctrl .tp-sound[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tp-progress { flex: 1; height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.tp-progress i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

@media (max-width: 1099.98px) {
  .how { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "show" "steps"; grid-template-rows: auto; column-gap: 0; }
  .how-show { margin-top: 26px; max-width: 620px; }
  .how-stage { flex: none; height: 380px; }
}
/* the phone board of the canvas */
@media (max-width: 699px) {
  .how { margin-top: 64px; }
  .how-lede { margin-top: 12px; font-size: 17px; }
  .how-show { margin-top: 22px; padding: 18px 16px; }
  .how-stage { height: 300px; }
  .how .st-card { width: min(210px, 100%); box-shadow: 2px 3px 16px rgba(0, 0, 0, .35); }
  .how .st-paper { width: min(318px, 100% - 8px); padding: 16px; font-size: 13px; line-height: 1.45; }
  .how .st-invite { padding: 18px; font-size: 14px; line-height: 1.5; }
  .how .st-overview { line-height: 1.4; }
  .how .st-paper .from { font-size: 11px; }
  .how .st-paper .sub { font-size: 16px; }
  .how .st-invite p + p { margin-top: 8px; }
  .how .st-notes ul { margin-top: 8px; padding-left: 16px; }
  .how .st-notes li { margin-bottom: 4px; }
  .how .st-notes .ai { margin-top: 6px; font-size: 11px; }
  .how .st-overview .count { font-size: 12px; }
  .how .ov-list { margin-top: 10px; gap: 6px; }
  .how .ov-list li { padding: 7px 9px; border-radius: 9px; column-gap: 8px; font-size: inherit; }
  .how .ov-list q { display: none; }   /* the phone overview keeps the themes and counts */
  .how-voice { margin-top: 14px; font-size: 12px; }
  .how-words { font-size: 18px; min-height: 4.2em; }
  .how-ctrl { margin-top: 14px; gap: 10px; }
  .tp-sound { padding: 0 14px; }
  .how-steps { margin-top: 28px; gap: 18px; }
  .how-steps li { padding-left: 44px; }
  .how-steps b { font-size: 19px; }
  .how-cta { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .how .st, .how-steps li, .how-steps li::before, .how-voice .bars i { transition: none; }
  .how-voice .bars i { animation: none !important; }
}