/* ════════════════════════════════════════════════════════════════════
   Homepage v2, everything after the hero (src/_includes/home-story.njk).
   The visual language continues the hero: black stage, ASCII glyphs, the
   app's stage colours (Helpers/DesignSystem.swift) and its edge glow.
     hears      → recording red     255,69,59
     remembers  → transcribing blue  90,200,250
     acts       → ready green        52,199,89
   Scenes are sized in em from a container-relative font size, so one layout
   scales from a phone to a wide screen. Motion runs only after
   home-v2-story.js adds .story-js; without it every scene shows its last frame.
   ════════════════════════════════════════════════════════════════════ */

.mw-story {
  --mw-ink: #f2f2f2; --mw-mid: #a3a3a3; --mw-dim: #6f6f6f;
  --mw-line: rgba(255,255,255,0.08); --mw-card: #0d0d0d;
  --red: 255,69,59; --blue: 90,200,250; --green: 52,199,89;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  position: relative;
}
.mw-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mw-story svg path, .mw-story svg rect, .mw-story svg circle { vector-effect: non-scaling-stroke; }

/* ─── section rhythm (main.css caps every <section>; ours set their own) ─── */
section.mw-s, aside.mw-s { max-width: 1240px; margin: 0 auto; padding: clamp(4.5rem, 10vh, 8.5rem) clamp(1.25rem, 4vw, 3rem); }
.mw-head { max-width: 40rem; }
.mw-head--center { text-align: center; max-width: 52rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.mw-head--center .mw-lead { margin-inline: auto; }

.mw-eye {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 1.3rem;
  font: 600 12px/1 var(--font-heading); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.78);
}
.mw-eye i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--st)); box-shadow: 0 0 10px rgba(var(--st),0.9), 0 0 24px rgba(var(--st),0.45); flex-shrink: 0; }
.mw-h2 {
  font-family: var(--font-heading); font-weight: 600; color: var(--mw-ink);
  font-size: clamp(2rem, 3.5vw, 3.35rem); line-height: 1.04; letter-spacing: -0.028em; text-wrap: balance;
}
.mw-lead { margin-top: 1.25rem; max-width: 34rem; color: var(--mw-mid); font-size: clamp(1.02rem, 1.15vw, 1.14rem); line-height: 1.65; text-wrap: pretty; }

/* ─── chapter: text beside a live scene ─── */
.ch__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ch--flip .ch__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ch--flip .ch__text { order: 2; }
.ch__list { list-style: none; margin-top: 2rem; display: grid; gap: 1.15rem; }
.ch__list li { padding-left: 1.1rem; border-left: 1px solid rgba(var(--st),0.4); }
.ch__list h3, .ch__feats h3 { font: 500 1.02rem/1.35 var(--font-heading); color: var(--mw-ink); letter-spacing: -0.005em; }
.ch__list p, .ch__feats p { margin-top: 0.3rem; color: var(--mw-mid); font-size: 0.95rem; line-height: 1.55; }
.mw-story h3 a { color: inherit; text-decoration: none; background: linear-gradient(rgba(var(--st),0.7), rgba(var(--st),0.7)) 0 100% / 0 1px no-repeat; transition: background-size 0.35s var(--ease-out); }
.mw-story h3 a::after { content: ' →'; opacity: 0; display: inline-block; transform: translateX(-4px); transition: opacity 0.3s, transform 0.3s var(--ease-out); }
.mw-story h3 a:hover { background-size: 100% 1px; }
.mw-story h3 a:hover::after { opacity: 0.8; transform: none; }
.ch__proof {
  display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.9rem; padding: 0.5rem 0.95rem;
  border: 1px solid var(--mw-line); border-radius: 9999px; font-size: 0.85rem; color: rgba(255,255,255,0.7);
}
.ch__proof a { color: inherit; text-decoration: none; }
.ch__proof a:hover { color: #fff; }
.ch__proof svg { width: 14px; height: 14px; fill: none; stroke: rgb(var(--st)); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ch__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.9rem; }
.ch__chips li { padding: 0.5rem 0.9rem; border-radius: 9999px; border: 1px solid rgba(var(--st),0.3); background: rgba(var(--st),0.06); font-size: 0.86rem; color: #dcdcdc; }

/* six small feature cards under the dictation chapter, each with a one-shot micro animation */
.ch__feats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.ch__feats li {
  padding: 1.35rem 1.35rem 1.45rem; border-radius: 18px; border: 1px solid var(--mw-line);
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.008));
  transition: border-color 0.4s, background 0.4s;
}
.ch__feats li:hover { border-color: rgba(var(--st),0.35); background: linear-gradient(180deg, rgba(var(--st),0.05), rgba(255,255,255,0.01)); }
.mini { position: relative; display: block; height: 1.9rem; margin-bottom: 0.95rem; overflow: hidden; font: 500 0.92rem/1.9rem var(--mono); color: rgba(255,255,255,0.86); white-space: nowrap; }
.mini--swap > span, .mini--select > span { position: absolute; left: 0; top: 0; }
.mini--swap > span:first-child, .mini--select > span:first-child { opacity: 0; }             /* the final state shows without JS */
.mini--swap > span:last-child, .mini--select > span:last-child { color: rgb(var(--st)); }
.mini--select > span:first-child { background: rgba(var(--blue),0.28); border-radius: 3px; padding: 0 2px; margin-left: -2px; }
.mini--num { font: 600 1.7rem/1.9rem var(--font-heading); color: rgb(var(--st)); text-shadow: 0 0 18px rgba(var(--st),0.45); }
.mini--eq { display: flex; align-items: center; gap: 4px; }
.mini--eq b { display: block; width: 4px; height: 100%; border-radius: 2px; background: rgb(var(--st)); transform: scaleY(0.25); transform-origin: 50% 50%; }
.mini--eq b:nth-child(2n) { transform: scaleY(0.55); } .mini--eq b:nth-child(3n) { transform: scaleY(0.8); }
.story-js .mini.is-play.mini--swap > span:first-child, .story-js .mini.is-play.mini--select > span:first-child { animation: mini-a 4.2s var(--ease-out) both; }
.story-js .mini.is-play.mini--swap > span:last-child,  .story-js .mini.is-play.mini--select > span:last-child  { animation: mini-b 4.2s var(--ease-out) both; }
.story-js .mini.is-play.mini--eq b { animation: mini-eq 0.7s ease-in-out 6 alternate both; }
.story-js .mini.is-play.mini--eq b:nth-child(2n) { animation-duration: 0.55s; } .story-js .mini.is-play.mini--eq b:nth-child(3n) { animation-duration: 0.85s; }
@keyframes mini-a { 0%, 40% { opacity: 1; transform: none; filter: none; } 55%, 100% { opacity: 0; transform: translateY(-8px); filter: blur(4px); } }
@keyframes mini-b { 0%, 42% { opacity: 0; transform: translateY(8px); filter: blur(4px); } 58%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes mini-eq { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }

/* ─── the scene frame: a dark glass panel whose edge glows in the stage colour ─── */
.sc { --sc: 255,255,255; position: relative; margin: 0; }
.sc__frame {
  --glow: 0;
  position: relative; overflow: hidden; isolation: isolate; container-type: inline-size;
  aspect-ratio: 16 / 12.2; border-radius: 22px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(var(--sc),0.06), rgba(0,0,0,0) 62%), #0b0b0b;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
}
.sc__frame::after {       /* the app's Edge Glow, one more time */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 1.5px rgba(var(--sc),0.75), inset 0 0 20px 2px rgba(var(--sc),0.45), inset 0 0 70px 8px rgba(var(--sc),0.14);
  opacity: var(--glow);
}
.sc--wide .sc__frame { aspect-ratio: 16 / 5.6; }
.sc__cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.sc__stage { position: absolute; inset: 0; z-index: 1; font-size: clamp(11.5px, 2.25cqw, 15.5px); color: var(--mw-ink); }
.sc__stage svg path, .sc__stage svg circle, .sc__stage svg rect { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.au__node svg path, .au__node svg rect { stroke-width: 1.4; }
.sc__pause {
  position: absolute; top: 12px; right: 12px; z-index: 4; display: none; place-items: center;
  width: 28px; height: 28px; padding: 0; cursor: pointer; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(10,10,10,0.6); color: rgba(255,255,255,0.55);
  opacity: 0; transition: opacity 0.3s, color 0.2s, border-color 0.2s;
}
.story-js .sc__pause { display: grid; }
.sc:hover .sc__pause, .sc__pause:focus-visible, .sc__pause[aria-pressed="true"] { opacity: 1; }
.sc__pause:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.sc__pause:focus-visible { outline: 2px solid rgb(var(--green)); outline-offset: 2px; }
.sc__pause svg { width: 10px; height: 10px; fill: currentColor; }
.sc__pause .i-play { display: none; }
.sc__pause[aria-pressed="true"] .i-play { display: block; }
.sc__pause[aria-pressed="true"] .i-pause { display: none; }

/* pieces of UI the scenes reuse */
.win-bar { display: flex; align-items: center; gap: 0.42em; padding: 0.72em 0.9em; border-bottom: 1px solid rgba(255,255,255,0.06); }
.win-bar span { width: 0.62em; height: 0.62em; border-radius: 50%; background: rgba(255,255,255,0.16); }
.win-bar em { margin-left: 0.55em; font: normal 500 0.78em/1 var(--font-heading); color: rgba(255,255,255,0.5); }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: rgb(var(--sc)); border-radius: 1px; }
.story-js .sc.is-playing .caret { animation: caret 1.05s steps(2, jump-none) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* the app's recording pill, stage by stage */
.pill {
  --st: 52,199,89;
  display: inline-flex; align-items: center; gap: 0.7em; padding: 0.55em 1.05em; border-radius: 99em;
  background: rgba(8,8,8,0.72); border: 1px solid rgba(255,255,255,0.1);
  font: 600 0.74em/1 var(--font-heading); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.86);
}
.pill__dot { width: 0.7em; height: 0.7em; border-radius: 50%; background: rgb(var(--st)); box-shadow: 0 0 0.9em rgba(var(--st),0.9); flex-shrink: 0; }
.pill__bars { display: inline-flex; align-items: center; gap: 0.22em; height: 1.1em; width: 0; overflow: hidden; }
.pill__bars b { display: block; width: 0.22em; height: 100%; border-radius: 0.1em; background: rgb(var(--st)); transform: scaleY(0.3); flex-shrink: 0; }
.pill__label { position: relative; display: inline-block; min-width: 8.2em; }
.pill__label > span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.pill__label > span:first-child { position: relative; }

/* ─── HOW IT WORKS ─── */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; padding: 0 2.2em; }
.how__zone { position: relative; height: 100%; display: grid; place-items: center; }
.how__wave { width: 86%; height: 46%; }
.how__card {
  display: flex; flex-direction: column; gap: 0.35em; min-width: 12.5em; padding: 1em 1.2em; border-radius: 0.95em;
  background: rgba(16,16,16,0.94); border: 1px solid rgba(var(--blue),0.45); box-shadow: 0 0 2.4em rgba(var(--blue),0.14), 0 1em 2em rgba(0,0,0,0.4);
}
.how__k { display: inline-flex; align-items: center; gap: 0.5em; font: 600 0.68em/1 var(--font-heading); letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--blue)); }
.how__k i { width: 0.55em; height: 0.55em; border-radius: 50%; background: rgb(var(--blue)); box-shadow: 0 0 0.7em rgba(var(--blue),0.9); }
.how__t { font: 600 1.15em/1.2 var(--font-heading); color: #fff; }
.how__s { font-size: 0.82em; color: rgba(255,255,255,0.6); }
.how__task { display: inline-flex; align-items: center; gap: 0.7em; padding: 0.85em 1.05em; border-radius: 0.8em; background: #131313; border: 1px solid rgba(var(--green),0.4); font-size: 1em; color: #eee; white-space: nowrap; }
.how__box { display: grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 0.35em; background: rgb(var(--green)); color: #042a10; flex-shrink: 0; }
.how__box svg { width: 0.85em; height: 0.85em; }
.how-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); margin-top: 2.4rem; }
.how-steps li { padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,0.09); }
.how-steps__n { display: inline-block; margin-bottom: 0.7rem; font: 600 0.78rem/1 var(--font-heading); letter-spacing: 0.16em; color: rgb(var(--st)); text-shadow: 0 0 14px rgba(var(--st),0.5); }
.how-steps h3 { font: 600 1.2rem/1.3 var(--font-heading); color: var(--mw-ink); }
.how-steps p { margin-top: 0.4rem; color: var(--mw-mid); font-size: 0.97rem; line-height: 1.6; }
@container (max-width: 560px) {
  .how { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); padding: 1.2em 1.5em; }
  .how__wave { width: 92%; height: 64%; }
}

/* ─── WORDS: speech gathers into a clean sentence ─── */
.wd { display: flex; flex-direction: column; justify-content: center; gap: 1.5em; padding: 2.1em 2.3em; }
.wd .pill { align-self: center; }
.wd__heard { display: flex; flex-direction: column; gap: 0.5em; min-height: 3.6em; }
.wd__k { font: 600 0.68em/1 var(--font-heading); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.58); }
.wd__raw { font: 400 1.04em/1.5 var(--mono); color: rgba(255,255,255,0.6); }
.wd__raw s { text-decoration: line-through; text-decoration-color: rgba(var(--red),0.9); text-decoration-thickness: 1.5px; color: rgb(var(--red)); }
.wd__win { border-radius: 0.95em; overflow: hidden; background: #141414; border: 1px solid rgba(255,255,255,0.09); box-shadow: 0 1.2em 2.6em rgba(0,0,0,0.45); }
.wd__field { position: relative; display: flex; align-items: center; min-height: 3.7em; padding: 0.9em 1.1em; font: 400 1.14em/1.4 Inter, -apple-system, sans-serif; color: #f4f4f4; }
.wd__ok { display: grid; place-items: center; width: 1.55em; height: 1.55em; margin-left: auto; border-radius: 50%; background: rgba(var(--green),0.16); color: rgb(var(--green)); flex-shrink: 0; }
.wd__ok svg { width: 0.9em; height: 0.9em; }
.wd .caret { display: none; }

/* ─── MEETINGS: two tracks, a transcript, a hint, a summary ─── */
.mt { display: flex; flex-direction: column; gap: 1em; padding: 1.5em 1.7em; }
.mt__top { display: flex; align-items: center; justify-content: space-between; gap: 1em; font: 600 0.7em/1 var(--font-heading); letter-spacing: 0.14em; text-transform: uppercase; }
.mt__rec { display: inline-flex; align-items: center; gap: 0.6em; color: rgba(255,255,255,0.8); }
.mt__rec i { width: 0.7em; height: 0.7em; border-radius: 50%; background: rgb(var(--red)); box-shadow: 0 0 0.9em rgba(var(--red),0.9); }
.mt__bot { padding: 0.5em 0.8em; border-radius: 99em; color: rgb(var(--green)); border: 1px solid rgba(var(--green),0.4); background: rgba(var(--green),0.07); }
.mt__lanes { display: grid; gap: 0.55em; }
.mt__lane { position: relative; height: 2.9em; border-radius: 0.6em; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05); }
.mt__lane span { position: absolute; left: 0.75em; top: 0.35em; font: 600 0.62em/1 var(--font-heading); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.mt__tx { display: flex; flex-direction: column; gap: 0.5em; font: 400 0.93em/1.45 Inter, sans-serif; color: rgba(255,255,255,0.85); }
.mt__tx b { display: inline-block; min-width: 3.6em; margin-right: 0.5em; font: 600 0.7em/1 var(--font-heading); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.42); }
.mt__hint {
  position: absolute; right: 1.3em; top: 35%; width: 42%; padding: 0.8em 0.95em; border-radius: 0.85em; z-index: 2;
  background: rgba(18,18,18,0.95); border: 1px solid rgba(var(--blue),0.45); box-shadow: 0 0.8em 2em rgba(0,0,0,0.55), 0 0 1.6em rgba(var(--blue),0.14);
  font: 400 0.82em/1.42 Inter, sans-serif; color: #ececec;
}
.mt__hint span { display: block; margin-bottom: 0.45em; font: 600 0.78em/1 var(--font-heading); letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--blue)); }
.mt__sum {
  position: absolute; left: 1.3em; right: 1.3em; bottom: 1.3em; z-index: 2; padding: 0.95em 1.1em; border-radius: 0.9em;
  background: rgba(15,15,15,0.97); border: 1px solid rgba(var(--green),0.35); box-shadow: 0 -1em 2.6em rgba(0,0,0,0.6);
  font: 400 0.88em/1.5 Inter, sans-serif; color: #e8e8e8;
}
.mt__sum p + p { margin-top: 0.3em; }
.mt__k { font: 600 0.72em/1 var(--font-heading) !important; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 0.55em; }
.mt__sum b { margin-right: 0.6em; font: 600 0.72em/1 var(--font-heading); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--green)); }

/* ─── SCREEN: a hint about what you are writing ─── */
.sn__win { position: absolute; left: 6%; top: 8%; width: 66%; height: 62%; border-radius: 0.95em; overflow: hidden; background: #131313; border: 1px solid rgba(255,255,255,0.09); box-shadow: 0 1.2em 2.8em rgba(0,0,0,0.5); }
.sn__body { padding: 1em 1.2em; font: 400 0.98em/1.5 Inter, sans-serif; color: #e8e8e8; }
.sn__row { padding: 0.35em 0; border-bottom: 1px solid rgba(255,255,255,0.05); color: #dcdcdc; }
.sn__row b { display: inline-block; min-width: 5em; font: 500 0.82em/1 var(--font-heading); color: rgba(255,255,255,0.42); }
.sn__text { margin-top: 0.8em; }
.sn__scan { position: absolute; left: 0; right: 0; top: 0; height: 2.6em; opacity: 0; background: linear-gradient(180deg, rgba(var(--sc),0), rgba(var(--sc),0.16) 50%, rgba(var(--sc),0)); }
.sn__hint {
  position: absolute; right: 5%; top: 36%; width: 45%; padding: 1em 1.1em; border-radius: 0.95em; z-index: 2;
  background: rgba(17,17,17,0.96); border: 1px solid rgba(var(--sc),0.45); box-shadow: 0 1em 2.6em rgba(0,0,0,0.6), 0 0 2em rgba(var(--sc),0.14);
}
.sn__hk { display: inline-flex; align-items: center; gap: 0.5em; font: 600 0.66em/1 var(--font-heading); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.sn__hk i { width: 0.55em; height: 0.55em; border-radius: 50%; background: rgb(var(--sc)); box-shadow: 0 0 0.7em rgba(var(--sc),0.9); }
.sn__ht { margin-top: 0.6em; font: 500 0.98em/1.4 var(--font-heading); color: #fff; }
.sn__hs { margin-top: 0.35em; font-size: 0.76em; color: rgba(255,255,255,0.5); }
.sn__btn { display: inline-block; margin-top: 0.8em; padding: 0.45em 0.9em; border-radius: 99em; font: 600 0.74em/1 var(--font-heading); color: #04220d; background: rgb(var(--green)); }
.sn__toast {
  position: absolute; left: 6%; bottom: 8%; display: inline-flex; align-items: center; gap: 0.55em; padding: 0.6em 0.95em; border-radius: 99em; z-index: 2;
  background: rgba(var(--green),0.12); border: 1px solid rgba(var(--green),0.4); color: #d9f6e1; font-size: 0.82em;
}
.sn__toast svg { width: 0.95em; height: 0.95em; color: rgb(var(--green)); }
.sn .caret { background: rgba(255,255,255,0.85); }

/* ─── REMEMBERS: a question, a field of memories, an answer with its sources ─── */
.rm { display: flex; flex-direction: column; gap: 1em; padding: 1.5em 1.7em; }
.rm__ask { display: flex; align-items: center; gap: 0.7em; padding: 0.8em 1.05em; border-radius: 99em; background: #141414; border: 1px solid rgba(255,255,255,0.11); font: 400 1em/1.3 Inter, sans-serif; color: #f0f0f0; }
.rm__ask svg { width: 1.05em; height: 1.05em; flex-shrink: 0; color: rgba(255,255,255,0.5); }
.rm__field { flex: 1; min-height: 4em; }
.rm__ans { padding: 1em 1.15em; border-radius: 0.95em; background: rgba(15,15,15,0.96); border: 1px solid rgba(var(--sc),0.4); box-shadow: 0 0 2.2em rgba(var(--sc),0.1); }
.rm__a { font: 500 1.06em/1.4 var(--font-heading); color: #fff; }
.rm__src { display: flex; flex-wrap: wrap; gap: 0.45em; margin-top: 0.7em; }
.rm__src span { padding: 0.35em 0.75em; border-radius: 99em; font-size: 0.72em; color: rgb(var(--sc)); background: rgba(var(--sc),0.1); border: 1px solid rgba(var(--sc),0.32); }

/* ─── TASKS: a promise becomes a task and closes itself ─── */
.tk { display: flex; flex-direction: column; justify-content: center; gap: 0.85em; padding: 1.5em 1.7em; }
.tk__say { display: inline-flex; align-self: flex-start; align-items: center; gap: 0.55em; padding: 0.55em 0.9em; border-radius: 0.85em 0.85em 0.85em 0.2em; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); font: italic 400 0.92em/1.3 Inter, sans-serif; color: rgba(255,255,255,0.86); }
.tk__say i { width: 0.6em; height: 0.6em; border-radius: 50%; background: rgb(var(--red)); box-shadow: 0 0 0.7em rgba(var(--red),0.8); flex-shrink: 0; }
.tk__list { list-style: none; display: flex; flex-direction: column; gap: 0.5em; margin-top: 0.3em; }
.tk__list li { display: flex; align-items: center; gap: 0.75em; padding: 0.72em 0.9em; border-radius: 0.75em; background: #131313; border: 1px solid rgba(255,255,255,0.07); font: 400 0.95em/1.2 Inter, sans-serif; color: #e6e6e6; }
.tk__box { display: grid; place-items: center; width: 1.15em; height: 1.15em; border-radius: 0.35em; border: 1.5px solid rgba(255,255,255,0.3); flex-shrink: 0; color: #042a10; }
.tk__box svg { width: 0.8em; height: 0.8em; }
.tk__new { position: relative; z-index: 2; border-color: rgba(var(--green),0.4) !important; }
.tk__new .tk__box { background: rgb(var(--green)); border-color: rgb(var(--green)); }
.tk__t { background: linear-gradient(currentColor, currentColor) 0 55% / 0 1px no-repeat; }
.tk__new .tk__t { background-size: 100% 1px; color: rgba(255,255,255,0.55); }
.tk__day { position: relative; align-self: flex-end; margin-top: 0.2em; min-width: 11em; padding: 0.85em 1em; border-radius: 0.9em; z-index: 2; background: rgba(15,15,15,0.96); border: 1px solid rgba(var(--green),0.38); box-shadow: 0 0 2em rgba(var(--green),0.1); font-size: 0.82em; color: #e2e2e2; }
.tk__k { font: 600 0.8em/1 var(--font-heading); letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--green)); margin-bottom: 0.5em; }
.tk__n b { font: 600 1.2em/1 var(--font-heading); color: #fff; }
.tk__r { margin-top: 0.3em; color: rgba(255,255,255,0.55); }

/* ─── AUTOMATION: one hub, six tools ─── */
.au__hub { position: absolute; left: 50%; top: 46%; width: 8.4em; height: 8.4em; margin: -4.2em 0 0 -4.2em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5em; border-radius: 50%; background: radial-gradient(circle, rgba(var(--sc),0.12), rgba(10,10,10,0.95) 70%); border: 1px solid rgba(var(--sc),0.45); box-shadow: 0 0 3em rgba(var(--sc),0.16); font: 600 0.78em/1 var(--font-heading); color: #fff; }
.au__hub img { width: 3.4em; height: 3.4em; border-radius: 0.8em; }
.au__node { position: absolute; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.55em 0.85em; border-radius: 99em; background: #141414; border: 1px solid rgba(255,255,255,0.1); font: 500 0.82em/1 var(--font-heading); color: #e8e8e8; white-space: nowrap; }
.au__node img, .au__node svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.au__node img { filter: grayscale(1) brightness(1.6); opacity: 0.9; }
.au__node svg { color: rgba(255,255,255,0.8); }
.au__node[data-n="0"] { left: 7%; top: 10%; }
.au__node[data-n="1"] { right: 7%; top: 10%; }
.au__node[data-n="2"] { right: 3%; top: 42%; }
.au__node[data-n="3"] { right: 9%; top: 72%; }
.au__node[data-n="4"] { left: 9%; top: 72%; }
.au__node[data-n="5"] { left: 3%; top: 42%; }
.au__cap { position: absolute; left: 10%; right: 10%; bottom: 5%; text-align: center; font: 500 0.84em/1.3 var(--font-heading); color: rgb(var(--sc)); opacity: 0; }
.au__cap[data-cap="0"] { opacity: 1; }

/* ─── PRIVACY: the Mac is the boundary ─── */
.pv__mac { position: absolute; left: 6%; top: 12%; width: 54%; bottom: 14%; border-radius: 1.1em; border: 1px dashed rgba(255,255,255,0.22); background: rgba(255,255,255,0.015); }
.pv__label { position: absolute; left: 1em; top: 0.9em; font: 600 0.7em/1 var(--font-heading); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.pv__gate { position: absolute; left: 60%; top: 50%; width: 14%; margin-top: -2.2em; display: flex; flex-direction: column; align-items: center; gap: 0.55em; text-align: center; font: 500 0.78em/1.25 var(--font-heading); color: rgba(255,255,255,0.66); }
.pv__switch { position: relative; width: 3.4em; height: 1.9em; border-radius: 99em; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); }
.pv__switch i { position: absolute; left: 0.2em; top: 0.2em; width: 1.4em; height: 1.4em; border-radius: 50%; background: #d9d9d9; }
.pv__cloud { position: absolute; right: 5%; top: 50%; width: 18%; margin-top: -2.6em; display: flex; flex-direction: column; align-items: center; gap: 0.5em; text-align: center; font: 500 0.8em/1.25 var(--font-heading); color: rgba(255,255,255,0.66); }
.pv__cloud svg { width: 3.4em; height: 2.3em; color: rgba(255,255,255,0.5); }
.pv__cloud svg path { stroke-width: 1.4; }
.pv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.pv-col { padding: 1.5rem 1.6rem; border-radius: 18px; border: 1px solid var(--mw-line); background: var(--mw-card); }
.pv-col h3 { font: 600 0.78rem/1 var(--font-heading); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 1rem; }
.pv-col ul { list-style: none; display: grid; gap: 0.75rem; }
.pv-col li { position: relative; padding-left: 1.35rem; color: #d6d6d6; font-size: 0.97rem; line-height: 1.55; }
.pv-col li::before { content: ''; position: absolute; left: 0; top: 0.58em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgb(var(--green)); box-shadow: 0 0 10px rgba(var(--green),0.6); }
.pv-col + .pv-col li::before { background: rgb(var(--blue)); box-shadow: 0 0 10px rgba(var(--blue),0.6); }
.pv-code { margin-top: 1.6rem; text-align: center; color: var(--mw-mid); }
.pv-code a { color: #fff; text-underline-offset: 3px; }

/* ─── COMPARE ─── */
.cmp { overflow-x: auto; border-radius: 20px; border: 1px solid var(--mw-line); background: #0c0c0c; }
.cmp:focus-visible { outline: 2px solid rgb(var(--green)); outline-offset: 3px; }
.cmp table { width: 100%; min-width: 640px; border-collapse: collapse; }
.cmp th, .cmp td { padding: 1.05rem 1.1rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.92rem; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th { font: 600 0.72rem/1.25 var(--font-heading); letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.55); padding-top: 1.3rem; }
.cmp tbody th { text-align: left; font-weight: 400; color: #dedede; width: 34%; }
.cmp .cmp__us { background: rgba(var(--green),0.06); color: #fff; }
.cmp thead .cmp__us { color: #fff; box-shadow: inset 0 2px 0 rgb(var(--green)); }
.cmp td { color: rgba(255,255,255,0.6); }
.cmp td::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 0.55em; border-radius: 50%; vertical-align: 0.08em; }
.cmp td.y { color: #f2f2f2; } .cmp td.y::before { background: rgb(var(--green)); box-shadow: 0 0 8px rgba(var(--green),0.7); }
.cmp td.p::before { background: rgba(255,255,255,0.55); }
.cmp td.n { color: rgba(255,255,255,0.35); } .cmp td.n::before { background: rgba(255,255,255,0.18); }
.story-js .cmp tbody tr { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); transition-delay: calc(var(--r, 0) * 110ms + 150ms); }
.story-js .cmp.is-in tbody tr { opacity: 1; transform: none; }
.cmp-note { margin-top: 1.2rem; color: var(--mw-dim); font-size: 0.82rem; line-height: 1.6; text-align: center; max-width: 52rem; margin-inline: auto; }
.cmp-links { margin-top: 0.9rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.2rem; color: var(--mw-mid); font-size: 0.9rem; }
.cmp-links a { color: #e6e6e6; text-underline-offset: 3px; }

/* ─── OPEN SOURCE: every release on a timeline ─── */
.os { max-width: 900px; margin: 0 auto; }
.os__num { text-align: center; font: 500 clamp(1.1rem, 1.8vw, 1.45rem)/1.3 var(--font-heading); color: var(--mw-mid); }
.os__count { display: inline-block; min-width: 1.4em; font: 600 2.2em/1 var(--font-heading); color: #fff; vertical-align: -0.15em; text-shadow: 0 0 30px rgba(255,255,255,0.25); }
.os__track { position: relative; height: 4.2rem; margin: 2.2rem 0 0.7rem; border-bottom: 1px solid rgba(255,255,255,0.14); }
.os__track i { position: absolute; left: calc(var(--x) * 1%); bottom: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: rgba(255,255,255,0.88); box-shadow: 0 0 10px rgba(255,255,255,0.45); }
.os__track i:nth-child(odd) { bottom: 8px; } .os__track i:nth-child(3n) { bottom: 21px; }
.os__latest { position: absolute; right: calc(100% - var(--x) * 1%); top: -0.6rem; padding: 0.3rem 0.6rem; border-radius: 99px; font: 600 0.72rem/1 var(--font-heading); color: #04220d; background: rgb(var(--green)); white-space: nowrap; }
.os__axis { display: flex; justify-content: space-between; color: var(--mw-dim); font-size: 0.8rem; }
.os-cta { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2.6rem; }
.os-by { color: var(--mw-mid); font-size: 0.92rem; }
.os-by a { color: #e8e8e8; text-underline-offset: 3px; }

/* ─── PRICING ─── */
.pr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 900px; margin: 0 auto; }
.pr__card { display: flex; flex-direction: column; gap: 1.1rem; padding: 2rem 2rem 2.1rem; border-radius: 22px; border: 1px solid var(--mw-line); background: var(--mw-card); }
.pr__card h3 { font: 600 0.8rem/1 var(--font-heading); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.pr__price { color: var(--mw-mid); font-size: 0.95rem; }
.pr__price b { font: 600 2.7rem/1 var(--font-heading); color: #fff; letter-spacing: -0.02em; margin-right: 0.2rem; }
.pr__price span { display: block; margin-top: 0.4rem; }
.pr__card ul { list-style: none; display: grid; gap: 0.75rem; margin-bottom: 0.4rem; }
.pr__card li { position: relative; padding-left: 1.35rem; color: #d4d4d4; font-size: 0.96rem; line-height: 1.55; }
.pr__card li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: rgba(255,255,255,0.55); }
.pr__card .hv-dl { margin-top: auto; align-self: flex-start; }
.pr__card--pro { border-color: rgba(var(--blue),0.35); background: radial-gradient(120% 80% at 100% 0%, rgba(var(--blue),0.08), rgba(0,0,0,0) 60%), var(--mw-card); box-shadow: 0 30px 80px rgba(var(--blue),0.05); }
.pr__card--pro li::before { background: rgb(var(--blue)); box-shadow: 0 0 10px rgba(var(--blue),0.6); }
.pr__btn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 54px; padding: 0 1.7rem; border-radius: 9999px; text-decoration: none; font: 600 0.95rem/1 var(--font-heading); color: #fff; border: 1px solid rgba(var(--blue),0.5); background: rgba(var(--blue),0.12); transition: background 0.3s, transform 0.3s var(--ease-out); }
.pr__btn:hover { background: rgba(var(--blue),0.22); transform: translateY(-2px); }

/* ─── FAQ ─── */
:root { interpolate-size: allow-keywords; }
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--mw-line); }
.faq details { border-bottom: 1px solid var(--mw-line); }
.faq summary { position: relative; padding: 1.35rem 2.6rem 1.35rem 0; list-style: none; cursor: pointer; font: 500 1.05rem/1.4 var(--font-heading); color: #ececec; transition: color 0.25s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0.3rem; top: 50%; margin-top: -0.75rem; font: 300 1.5rem/1.5rem Inter, sans-serif; color: rgba(255,255,255,0.5); transition: transform 0.35s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: #fff; }
.faq summary:focus-visible { outline: 2px solid rgb(var(--green)); outline-offset: 4px; border-radius: 4px; }
.faq details::details-content { height: 0; overflow: clip; transition: height 0.4s var(--ease-out), content-visibility 0.4s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq details p { padding: 0 0 1.4rem; max-width: 44rem; color: var(--mw-mid); line-height: 1.7; }

/* ─── the two download strips inside the story ─── */
.cta-strip { padding-block: clamp(1rem, 3vh, 2rem) !important; }
.cta-strip__in {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; max-width: 860px; margin: 0 auto;
  padding: 0.65rem 0.65rem 0.65rem 2rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 24px 60px rgba(0,0,0,0.4);
}
.cta-strip p { font: 500 1.08rem/1.4 var(--font-heading); color: #e2e2e2; }

/* ─── FINAL: back to the first screen ─── */
section.fin-s { padding-top: clamp(3rem, 6vh, 5rem); }
.fin { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: min(72vh, 660px); padding: 5rem 1.5rem; border-radius: 28px; border: 1px solid rgba(255,255,255,0.08); background: #0a0a0a; text-align: center; }
.fin__cv { z-index: -2; }
.fin__glow { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1.5px rgba(var(--green),0.75), inset 0 0 22px 2px rgba(var(--green),0.5), inset 0 0 90px 10px rgba(var(--green),0.16); }
.fin__inner { display: flex; flex-direction: column; align-items: center; }
.fin__title { margin-top: 1.4rem; max-width: 15ch; font-family: 'Somerun', var(--font-heading), sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 1.04; color: #f2f2f2; text-wrap: balance; text-shadow: 0 0 60px rgba(255,255,255,0.08); }
.fin .hv-cta { margin-top: 2.2rem; }

/* ─── the sub-line as a floating table of contents ─── */
.st-bar {
  position: fixed; left: 50%; bottom: 18px; z-index: 90; width: max-content; max-width: min(94vw, 860px);
  padding: 0.72rem 1.35rem; border-radius: 9999px; transform: translate(-50%, 150%); opacity: 0; pointer-events: none;
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 12px 40px rgba(0,0,0,0.5);
  transition: transform 0.6s var(--ease-out), opacity 0.45s ease;
}
.st-bar.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.st-bar__line { font: 400 0.9rem/1.35 Inter, sans-serif; color: rgba(255,255,255,0.45); text-align: center; }
.st-bar a { --c: 255,255,255; color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.35s, text-shadow 0.35s; white-space: nowrap; }
.st-bar a[data-ch="words"], .st-bar a[data-ch="meetings"], .st-bar a[data-ch="screen"] { --c: var(--red); }
.st-bar a[data-ch="remembers"] { --c: var(--blue); }
.st-bar a[data-ch="tasks"], .st-bar a[data-ch="automation"] { --c: var(--green); }
.st-bar a.is-seen { color: rgba(255,255,255,0.88); }
.st-bar a.is-active { color: rgb(var(--c)); text-shadow: 0 0 14px rgba(var(--c),0.65); }
.st-bar a:focus-visible { outline: 2px solid rgb(var(--c)); outline-offset: 3px; border-radius: 3px; }
.st-bar__mob { display: none; }

/* ─── reveal on scroll ─── */
.story-js .rv { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.story-js .mw-head.rv, .story-js .ch__text.rv { filter: blur(6px); transition-property: opacity, transform, filter; }
.story-js .rv.is-in { opacity: 1; transform: none; filter: none; }

/* ─── narrow screens ─── */
@media (max-width: 900px) {
  .ch__grid, .ch--flip .ch__grid { grid-template-columns: 1fr; }
  .ch--flip .ch__text { order: 0; }
  .sc__frame { aspect-ratio: 4 / 4.4; }
  .sc--wide .sc__frame { aspect-ratio: 4 / 5.2; }
  .ch__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-steps { grid-template-columns: 1fr; }
  .pr, .pv-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  section.mw-s, aside.mw-s { padding: 4.2rem 1.1rem; }
  .ch__feats { grid-template-columns: 1fr; }
  .st-bar { bottom: 12px; padding: 0.6rem 1rem; }
  .st-bar__line { display: none; }
  .st-bar__mob { display: flex; align-items: center; gap: 0.7rem; font: 600 0.72rem/1 var(--font-heading); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
  .st-bar__mob i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: background 0.3s, box-shadow 0.3s; }
  .st-bar__mob i.is-seen { background: rgba(255,255,255,0.6); }
  .st-bar__mob i.is-active { background: rgb(var(--c)); box-shadow: 0 0 10px rgba(var(--c),0.8); }
  .st-bar__mob span { margin-left: 0.3rem; min-width: 9.5em; }
  .fin { min-height: 520px; padding: 4rem 1.1rem; border-radius: 22px; }
  .fin .hv-cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .fin .hv-cta > a { justify-content: center; }
  .cta-strip__in { flex-direction: column; text-align: center; border-radius: 22px; padding: 1.5rem 1.2rem 1.2rem; }
  /* on a phone each row is the capability on its own line, then the four answers under the
     column heads; explicit ARIA roles keep it a table for screen readers */
  .cmp table, .cmp thead, .cmp tbody { display: block; min-width: 0; }
  .cmp tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cmp tbody tr { border-top: 1px solid rgba(255,255,255,0.06); }
  .cmp th, .cmp td { border-bottom: 0; padding: 0.55rem 0.25rem 0.95rem; font-size: 0.76rem; line-height: 1.3; }
  .cmp thead th:first-child { display: none; }
  .cmp thead th { font-size: 0.56rem; letter-spacing: 0.08em; padding: 1rem 0.2rem 0.8rem; }
  .cmp tbody th { grid-column: 1 / -1; width: auto; padding: 0.95rem 1rem 0.35rem; font-size: 0.9rem; }
  .cmp td::before { display: block; margin: 0 auto 0.35em; }
  .cta-strip .hv-dl { width: 100%; max-width: 320px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .story-js .rv, .story-js .cmp tbody tr { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .story-js .mini.is-play > span, .story-js .mini.is-play b { animation: none !important; }
  .story-js .sc.is-playing .caret { animation: none; }
  .st-bar { transition: none; }
  .faq details::details-content { transition: none; }
}