/* wordojo.app: watch the app work (both sides) in the first screen, then a week with it, how it sits on
   a phone, the price in your currency, and how to get it.
   Builds on site.css (tokens, buttons, story, FAQ), cast.css (type, reveals, the guide), bubble.css
   (Bubble's moves) and screens.css (the phone screens). */

/* ---------- Hero: copy, the demo card, the download ---------- */
.xhero { background: var(--volt); padding: 30px 0 92px; overflow: hidden; }
.xh-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "copy demo" "cta demo"; column-gap: 56px; }
.xh-copy { grid-area: copy; align-self: end; }
.xh-demo { grid-area: demo; align-self: center; padding-top: 108px; }
.xh-cta { grid-area: cta; align-self: start; }
.xh-eyebrow { display: inline-block; background: var(--ink); color: var(--volt); font: 800 12px var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; }
.xhero h1 { font-size: clamp(60px, 8.4vw, 132px); margin: 18px 0 14px; }
.xhero .lede { font-size: clamp(17.5px, 1.5vw, 20.5px); max-width: 470px; color: #2B2721; }
.xh-cta .dlrow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.xh-cta .dlrow .btn { font-size: 17px; padding: 16px 22px; }
/* The download button beats twice, rests, beats again: a heartbeat, not a spin. */
.beat { animation: beat 2.8s ease-in-out 2.2s infinite; }
.beat:hover, .beat:active { animation: none; }
@keyframes beat { 0%, 50%, 100% { transform: scale(1); } 12% { transform: scale(1.045); } 24% { transform: scale(1); } 36% { transform: scale(1.03); } }

/* The demo card. Its colours follow the side it shows: Speak is the ink stage with volt, Write is
   paper with the red pen, as in the app. */
.dojo { position: relative; border-radius: 26px; padding: 14px 16px 14px; transition: background-color .45s ease, color .45s ease, box-shadow .45s ease; }
.dojo[data-side="say"] { background: #16140F; color: #F7F4EC; box-shadow: 0 0 0 2.5px #16140F, 9px 9px 0 rgba(22,20,15,.3); }
.dojo[data-side="write"] { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2.5px #16140F, 9px 9px 0 #16140F; }
.dojo-bubble { position: absolute; right: 22px; top: -118px; width: 98px; z-index: 2; }
.dojo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dojo-tabs { display: inline-flex; padding: 4px; border-radius: 999px; transition: background-color .45s ease, box-shadow .45s ease; }
.dojo[data-side="say"] .dojo-tabs { background: #2E2B25; }
.dojo[data-side="write"] .dojo-tabs { background: #fff; box-shadow: inset 0 0 0 1.5px #E6DDCF; }
.dojo-tabs button { border: 0; background: none; color: inherit; opacity: .72; font: 700 14.5px var(--body); padding: 8px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; transition: background-color .3s ease, color .3s ease, opacity .3s ease; }
.dojo-tabs button svg { width: 16px; height: 16px; }
.dojo[data-side="say"] .dojo-tabs [aria-selected="true"] { background: var(--volt); color: #16140F; opacity: 1; }
.dojo[data-side="write"] .dojo-tabs [aria-selected="true"] { background: var(--red); color: #fff; opacity: 1; }
.dojo-state { display: inline-flex; align-items: center; gap: 6px; font: 800 11.5px var(--body); letter-spacing: .06em; text-transform: uppercase; opacity: .75; white-space: nowrap; }
.dojo-state i { width: 8px; height: 8px; border-radius: 50%; background: #FF5A4D; animation: livedot 1.2s ease-in-out infinite; }
.dojo[data-mode="try"] .dojo-state i { background: #2E9E5B; animation: none; }
@keyframes livedot { 50% { opacity: .25; } }

.dojo-body { display: grid; margin-top: 12px; min-height: 238px; }
.dojo[data-mode="try"] .dojo-body { min-height: 0; display: block; }
.scene { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.dojo[data-mode="show"][data-side="say"] .scene-say, .dojo[data-mode="show"][data-side="write"] .scene-write { opacity: 1; visibility: visible; transition: opacity .35s ease .12s; }
.dojo[data-mode="try"] .scene { display: none; }

/* Say: a Mirror take catching its own fillers */
.sc-top { display: flex; align-items: center; gap: 10px; font: 600 13px var(--body); }
.sc-rec { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(210,53,42,.2); color: #FF8A7E; font-weight: 800; }
.sc-rec i { width: 7px; height: 7px; border-radius: 50%; background: #FF5A4D; animation: livedot 1s ease-in-out infinite; }
.sc-prompt { flex: 1; min-width: 0; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-clk { font: 800 22px/1 var(--display); font-stretch: 70%; color: var(--volt); font-variant-numeric: tabular-nums; }
.sc-wave { display: flex; align-items: center; gap: 3px; height: 42px; margin: 12px 0 8px; }
.sc-wave i { flex: 1; height: 100%; border-radius: 2px; background: var(--volt); transform: scaleY(.1); transition: transform .14s ease-out; }
.sc-words { min-height: 3em; font: 500 18px/1.55 var(--body); }
.sc-words span { display: inline-block; margin-right: .26em; animation: wordin .22s ease-out both; }
.sc-words .f { background: var(--volt); color: #16140F; border-radius: 6px; padding: 0 5px; font-weight: 800; background-image: linear-gradient(#D2352A, #D2352A); background-repeat: no-repeat; background-position: 0 56%; background-size: 0 2.5px; background-color: var(--volt); }
.sc-words .f.x { animation: wordin .22s ease-out both, strike .3s ease-out .35s forwards; }
@keyframes wordin { from { opacity: 0; transform: translateY(5px); } }
.sc-tally { display: flex; gap: 22px; margin-top: 8px; font-size: 13px; }
.sc-tally span { opacity: .82; }
.sc-tally b { display: block; font: 850 30px/1 var(--display); font-stretch: 70%; color: var(--volt); font-variant-numeric: tabular-nums; }
.sc-tally .f b { color: #FF8A7E; }
.sc-coach { margin-top: 10px; font: italic 500 16.5px/1.4 var(--serif); color: #E6DFD1; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.sc-coach.on { opacity: 1; transform: none; }

/* Write: the red pen on a padded note */
.sc-label { font: 800 11px var(--display); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.sc-draft { margin-top: 8px; min-height: 4.7em; font: 400 18px/1.55 var(--serif); color: #4A443A; }
.sc-draft del { text-decoration: none; color: #9E958A; background: linear-gradient(var(--red), var(--red)) no-repeat 0 58% / 0% 2.2px; }
.sc-draft ins { text-decoration: none; color: var(--red); font-style: italic; font-weight: 600; opacity: 0; margin-left: .2em; }
.scene-write.go del { animation: strike .32s ease-out var(--d) forwards; }
.scene-write.go ins { animation: fade .3s ease-out var(--d) forwards; }
.sc-sharp { margin-top: 8px; font: 500 27px/1.15 var(--serif); letter-spacing: -.01em; opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.sc-tally2 { margin-top: 8px; font-size: 14px; color: var(--mute); opacity: 0; transition: opacity .45s ease .15s; }
.sc-tally2 b { color: var(--red); }
.scene-write.done .sc-sharp, .scene-write.done .sc-tally2 { opacity: 1; transform: none; }

.dojo-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed rgba(247,244,236,.18); transition: border-color .45s ease; }
.dojo[data-side="write"] .dojo-foot { border-top-color: rgba(22,20,15,.16); }
.dojo-go { border: 0; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 14px; font: 800 15px var(--body); transition: background-color .45s ease, color .45s ease, box-shadow .45s ease, transform .12s ease; }
.dojo-go svg { width: 17px; height: 17px; }
.dojo[data-side="say"] .dojo-go { background: var(--volt); color: #16140F; box-shadow: 0 4px 0 #C7AE00; }
.dojo[data-side="write"] .dojo-go { background: var(--red); color: #fff; box-shadow: 0 4px 0 #8E1F17; }
.dojo-go:active { transform: translateY(3px); box-shadow: none; }
.dojo-foot small { font-size: 13px; opacity: .72; }

/* Your turn: type or say, inside the same card */
.dojo [hidden] { display: none !important; }
.dojo label { display: block; font: 600 13.5px var(--body); opacity: .85; margin: 4px 0 7px; }
.dojo textarea { width: 100%; min-height: 96px; resize: vertical; border-radius: 14px; padding: 12px 14px; font: 400 17px/1.45 var(--serif); }
.dojo[data-side="write"] textarea { border: 1.5px solid var(--stone); background: #fff; color: var(--ink); }
.dojo[data-side="write"] textarea:focus { outline: none; border-color: var(--ink); }
.dojo .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.dojo .row .btn { padding: 12px 18px; font-size: 15px; border-radius: 13px; }
.dojo[data-side="write"] .row .btn { background: var(--red); color: #fff; box-shadow: 0 4px 0 #8E1F17; }
.dojo .row small { font-size: 12.5px; opacity: .7; }
.say { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-top: 4px; }
.mic { width: 78px; height: 78px; border-radius: 50%; border: 0; background: var(--volt); color: #16140F; display: grid; place-items: center; box-shadow: 0 5px 0 #C7AE00; transition: background-color .2s ease, transform .12s ease, box-shadow .12s ease; }
.mic svg { width: 32px; height: 32px; }
.mic:active { transform: translateY(4px); box-shadow: 0 1px 0 #C7AE00; }
.say.live .mic { background: #FF5A4D; color: #fff; box-shadow: 0 5px 0 #8E1F17; }
.say .status { font: 600 15px/1.4 var(--body); }
.say .meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.say .clk { font: 800 22px/1 var(--display); font-stretch: 70%; color: var(--volt); font-variant-numeric: tabular-nums; }
/* While listening, five bars rise and fall. */
.lv { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; opacity: 0; transition: opacity .2s ease; }
.lv i { width: 4px; height: 100%; border-radius: 2px; background: var(--volt); transform: scaleY(.25); transform-origin: bottom; }
.say.live .lv { opacity: 1; }
.say.live .lv i { animation: lv .9s ease-in-out infinite; }
.say.live .lv i:nth-child(2) { animation-delay: -.2s; } .say.live .lv i:nth-child(3) { animation-delay: -.45s; } .say.live .lv i:nth-child(4) { animation-delay: -.1s; } .say.live .lv i:nth-child(5) { animation-delay: -.6s; }
@keyframes lv { 50% { transform: scaleY(1); } }
.heard { grid-column: 1 / -1; min-height: 1.4em; font: 400 17px/1.5 var(--serif); }
.heard span { opacity: .55; }
.dojo .meter { margin-top: 4px; background: #24221D; }
.dojo .fine-note { font-size: 12.5px; line-height: 1.45; opacity: .7; color: inherit; margin-top: 10px; }

/* The red pen's marks, and the seal for a rep: volt on Speak's side, red on Write's */
.rep-out { margin-top: 14px; border-top: 1.5px dashed rgba(247,244,236,.18); padding-top: 14px; }
.dojo[data-side="write"] .rep-out { border-top-color: rgba(22,20,15,.16); }
.rep-out .marked { font: 400 16.5px/1.6 var(--serif); opacity: .85; }
.rep-out del { text-decoration: none; opacity: .6; background: linear-gradient(#D2352A, #D2352A) no-repeat 0 58% / 0% 2.2px; }
.rep-out ins { text-decoration: none; color: #FF8A7E; font-style: italic; font-weight: 600; opacity: 0; margin-left: .22em; }
.dojo[data-side="write"] .rep-out ins { color: var(--red); }
.dojo.ran .rep-out del { animation: strike .32s ease-out var(--d) forwards; }
.dojo.ran .rep-out ins { animation: fade .3s ease-out var(--d) forwards; }
.rep-out .result { margin-top: 12px; }
.rep-out .result .eyebrow { font-size: 10.5px; opacity: .7; }
.rep-out [data-clean] { font: 500 24px/1.2 var(--serif); letter-spacing: -.01em; margin-top: 5px; }
.dojo.ran .rep-out [data-clean] { animation: up .5s ease-out var(--d) both; }
.rep-out [data-stats] { margin-top: 8px; font-size: 14px; line-height: 1.5; opacity: .8; }
.rep-out [data-stats] b { color: var(--volt); }
.dojo[data-side="write"] .rep-out [data-stats] b { color: var(--red); }
.rep-seal { display: none; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 14px; border-radius: 18px; padding: 12px 14px; background: #24221D; }
.dojo[data-side="write"] .rep-seal { background: var(--cream); }
.dojo.sealed .rep-seal { display: grid; }
.stamp { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; transform: rotate(-8deg); background: var(--volt); color: rgba(22,20,15,.28); box-shadow: 0 3px 0 #C7AE00; }
.stamp b { position: absolute; inset: 0; display: grid; place-items: center; color: #16140F; font: 850 13px var(--display); font-stretch: 110%; letter-spacing: .05em; text-transform: uppercase; }
.dojo[data-side="write"] .stamp { background: var(--red); color: rgba(255,255,255,.34); box-shadow: 0 3px 0 #8E1F17; }
.dojo[data-side="write"] .stamp b { color: #fff; }
.stamp .mark, .stamp .mark svg { width: 52px; height: 52px; }
.dojo.ran.sealed .stamp { animation: slam .6s cubic-bezier(.2, 1.4, .4, 1) var(--d, 0ms) both; }
@keyframes slam { from { opacity: 0; transform: scale(1.9) rotate(-26deg); } to { opacity: 1; transform: rotate(-8deg); } }
.rep-seal p { font-size: 14.5px; line-height: 1.45; }
.rep-seal a { font-weight: 800; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: 3px; }

@media (max-width: 960px) {
  .xh-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "demo" "cta"; }
  .xh-demo { padding-top: 70px; max-width: 580px; width: 100%; }
  .xh-cta .dlrow { margin-top: 26px; }
}
@media (max-width: 640px) {
  .xhero { padding: 18px 0 78px; }
  .xhero h1 { font-size: 56px; margin: 12px 0 8px; }
  .xhero .lede { font-size: 16.5px; }
  .xh-demo { padding-top: 66px; }
  .xh-cta .dlrow { margin-top: 22px; }
  .dojo { padding: 12px 13px 12px; box-shadow: 0 0 0 2.5px #16140F, 6px 6px 0 rgba(22,20,15,.3); }
  .dojo[data-side="write"] { box-shadow: 0 0 0 2.5px #16140F, 6px 6px 0 #16140F; }
  .dojo-bubble { width: 74px; top: -89px; right: 14px; }
  .dojo-tabs button { padding: 7px 11px; font-size: 14px; }
  .dojo-state { display: none; }
  .dojo-body { min-height: 212px; margin-top: 10px; }
  .dojo-foot { margin-top: 8px; padding-top: 10px; }
  .sc-wave { height: 36px; margin: 10px 0 6px; }
  .sc-words { font-size: 16.5px; }
  .sc-draft { font-size: 16.5px; }
  .sc-sharp { font-size: 23px; }
  .xh-cta .dlrow .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- The week: the phone follows the day you're reading ---------- */
.xstory { padding: 100px 0 40px; }
.xstory .shead h2 { font-size: clamp(48px, 6.4vw, 100px); }
.xstory .shead .answer { margin-top: 6px; }
.step .day { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.step .day b { font: 900 60px/.9 var(--display); font-stretch: 62%; text-transform: uppercase; letter-spacing: -.01em; }
.step .mode { display: inline-flex; align-items: center; gap: 6px; font: 800 11px var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--volt); }
.step .mode.w { background: var(--red); color: #fff; }
.step .mode.b { background: var(--volt); color: var(--ink); }
.step h3 { font-family: var(--display); font-stretch: 92%; font-weight: 850; text-transform: none; letter-spacing: -.03em; font-size: clamp(38px, 4.2vw, 60px); line-height: .98; margin: 12px 0 14px; }
.step p { font-size: 18px; color: #3A352D; max-width: 520px; }
.step-art { width: min(290px, 70%); height: auto; margin-top: 22px; opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .5s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.step.on .step-art { opacity: 1; transform: none; }
.story-frame .frame { filter: drop-shadow(0 22px 34px rgba(22,20,15,.2)); }
@media (max-width: 900px) {
  .xstory { padding-top: 70px; }
  .step-art { display: none; }
  .step .step-phone { margin: 6px auto 24px; }
  .step .day b { font-size: 48px; }
}

/* ---------- Friday comes either way: Bubble walks across ---------- */
.fomo { position: relative; background: var(--ink); color: #fff; padding: 120px 0 96px; overflow: hidden; text-align: center; }
.fomo h2 { font-size: clamp(50px, 7.6vw, 116px); }
.fomo p { max-width: 560px; margin: 18px auto 30px; color: #D9D2C3; font-size: 19px; }
.fomo .btn { font-size: 17px; padding: 17px 24px; }
.fomo-track { position: absolute; left: 0; right: 0; top: 22px; height: 80px; pointer-events: none; }
.fomo-walker { position: absolute; left: 0; top: 0; width: 64px; animation: across 18s linear infinite; }
@keyframes across { from { transform: translateX(-90px); } to { transform: translateX(calc(100vw + 30px)); } }

/* ---------- Plain numbers ---------- */
.numbers { background: #0F0E0B; color: #fff; padding: 46px 0; border-top: 1px solid var(--line); }
.numbers ul { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.numbers li { border-left: 1.5px solid var(--line); padding-left: 16px; font-size: 14px; color: #BDB6A8; }
.numbers b { display: block; font: 850 44px/1 var(--display); font-stretch: 70%; letter-spacing: -.01em; color: var(--volt); margin-bottom: 4px; }
@media (max-width: 860px) { .numbers ul { grid-template-columns: repeat(2, 1fr); row-gap: 26px; } .numbers li:last-child { grid-column: 1 / -1; } }

/* ---------- On your phone: the home screen, and the store listing ---------- */
.onphone { padding: 110px 0 90px; background: var(--cream); overflow: hidden; }
.onphone h2 { font-size: clamp(48px, 6vw, 88px); }
.onphone .shead .answer { margin-top: 6px; }
.onphone-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 46px; }
.onphone .cap { margin-top: 18px; font-size: 14.5px; color: var(--mute); max-width: 320px; }
.onphone .cap b { color: var(--ink); }

/* The home screen */
.phone-mock.homephone { --s: .78; }
.s-home { background: linear-gradient(165deg, #0B3E42 0%, #13666B 52%, #C8872B 118%); color: #fff; }
.s-home .clock { padding: 64px 26px 0; }
.s-home .clock b { display: block; font: 800 76px/1 var(--display); font-stretch: 70%; letter-spacing: -.01em; }
.s-home .clock span { font: 600 15px var(--body); opacity: .85; }
.s-home .widget { margin: 22px 16px 0; background: #323232; border-radius: 24px; padding: 14px 14px 12px; }
.s-home .widget .w1 { display: flex; align-items: center; justify-content: space-between; }
.s-home .widget .w1 b { display: inline-flex; align-items: center; gap: 7px; font: 800 14px var(--body); }
.s-home .widget .w1 b i { width: 18px; height: 18px; border-radius: 5px; background: var(--volt); color: var(--ink); display: grid; place-items: center; }
.s-home .widget .w1 b i svg { width: 14px; height: 14px; }
.s-home .chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; font: 800 12px var(--body); background: var(--volt); color: var(--ink); }
.s-home .chip svg { width: 13px; height: 13px; }
.s-home .chip.cu { background: #9A4F2E; color: #fff; }
.s-home .chip.gh { background: rgba(255,255,255,.1); color: #E6DFD1; }
.s-home .widget .line { margin-top: 8px; font: 600 13px var(--body); color: #E6DFD1; }
.s-home .widget .drop { margin-top: 10px; background: #3F3D3A; border: 1px solid #5A4F10; border-radius: 16px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.s-home .widget .drop small { display: block; font: 800 10px var(--display); font-stretch: 125%; letter-spacing: .14em; color: var(--volt); }
.s-home .widget .drop b { font: 700 14px var(--body); }
.s-home .widget .drop time { font: 800 20px var(--display); font-stretch: 70%; font-variant-numeric: tabular-nums; color: var(--volt); }
.s-home .widget .w3 { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.s-home .apps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 20px; padding: 26px 18px 0; }
.s-home .app { display: grid; justify-items: center; gap: 7px; font: 500 12.5px var(--body); color: #fff; background: none; border: 0; padding: 0; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.s-home .app .ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.9); color: #3A372F; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.s-home .app .ic svg { width: 30px; height: 30px; }
.s-home .app.me { cursor: pointer; }
.s-home .app.me .ic { background: var(--volt); color: var(--ink); }
.s-home .app.me .ic svg { width: 50px; height: 50px; }
.s-home .app.me:focus-visible { outline: 3px solid var(--volt); outline-offset: 4px; border-radius: 16px; }
.s-home .app.me[aria-expanded="true"] .ic { transform: scale(1.06); box-shadow: 0 0 0 3px rgba(255,255,255,.55), 0 10px 24px rgba(0,0,0,.3); }
.s-home .dock { position: absolute; left: 14px; right: 14px; bottom: 56px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 6px; border-radius: 30px; background: rgba(255,255,255,.18); }
.s-home .dock .app span { display: none; }
.s-home .search { position: absolute; left: 22px; right: 22px; bottom: 16px; height: 30px; border-radius: 15px; background: rgba(255,255,255,.9); }
/* Long press: the app's shortcuts */
.s-home .me-wrap { position: relative; display: grid; justify-items: center; }
.s-home .shortcuts { position: absolute; z-index: 4; left: 4px; bottom: calc(100% + 10px); width: 236px; display: block; background: #F4F1EC; color: var(--ink); border-radius: 22px; padding: 6px 8px; text-shadow: none; box-shadow: 0 16px 34px rgba(0,0,0,.35); transform-origin: 30px 100%; animation: popin .35s cubic-bezier(.34, 1.56, .64, 1); }
.s-home .shortcuts[hidden] { display: none; }
.s-home .shortcuts .sc { display: flex; align-items: center; gap: 12px; padding: 9px 6px; font: 600 14.5px var(--body); }
.s-home .shortcuts .sc + .sc { border-top: 1px solid #E3DDD2; }
.s-home .shortcuts i { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--volt); display: grid; place-items: center; flex: none; }
.s-home .shortcuts i svg { width: 16px; height: 16px; }
@keyframes popin { from { opacity: 0; transform: scale(.7); } }

/* The store listing */
.store { background: #fff; border-radius: 28px; padding: 24px; box-shadow: 0 0 0 1.5px var(--stone), 0 8px 0 var(--stone); max-width: 640px; }
.store .soon { display: inline-flex; align-items: center; gap: 8px; font: 800 12px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.store .top { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-top: 16px; }
.store .big-icon { width: 84px; height: 84px; border-radius: 20px; background: var(--volt); color: var(--ink); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(22,20,15,.18); }
.store .big-icon svg { width: 68px; height: 68px; }
.store h3 { font: 700 23px/1.2 var(--body); letter-spacing: -.01em; }
.store .dev { font: 700 14.5px var(--body); color: var(--teal); margin-top: 3px; }
.store .ads { font-size: 12.5px; color: var(--mute); margin-top: 2px; }
.store .stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; text-align: center; }
.store .stats div { padding: 0 6px; font-size: 12.5px; color: var(--mute); }
.store .stats div + div { border-left: 1px solid var(--stone); }
.store .stats b { display: block; font: 700 15px var(--body); color: var(--ink); margin-bottom: 2px; }
.store .install { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.store .install .pill { flex: 1; min-width: 180px; text-align: center; padding: 12px 18px; border-radius: 999px; background: var(--stone); color: #6E675C; font: 800 15px var(--body); }
.store .install a { font: 800 14.5px var(--body); text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.store .shots { display: flex; gap: 12px; overflow-x: auto; margin: 20px -24px 0; padding: 4px 24px 12px; scroll-snap-type: x mandatory; }
.store .shots .phone-mock { --s: .34; scroll-snap-align: start; }
.store .shots .phone-mock .scr { border-radius: 40px; }
.store h4 { font: 700 16px var(--body); margin-top: 16px; }
.store .about { font-size: 15px; color: #3A352D; margin-top: 4px; }
.store .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.store .tags span { font: 600 12.5px var(--body); padding: 6px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--stone); }
.store .safety { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: var(--paper); font-size: 14px; color: #3A352D; }
.store .safety svg { width: 20px; height: 20px; flex: none; color: #2E9E5B; margin-top: 1px; }
.store-note { margin-top: 14px; font-size: 13.5px; color: var(--mute); max-width: 640px; }
@media (max-width: 980px) {
  .onphone-grid { grid-template-columns: 1fr; gap: 44px; }
  .onphone-grid > div:first-child { justify-self: center; }
}
@media (max-width: 640px) {
  .onphone { padding: 80px 0 70px; }
  .phone-mock.homephone { --s: .7; }
  .store { padding: 18px; }
  .store .shots { margin: 18px -18px 0; padding: 4px 18px 12px; }
  .store .stats { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
  .store .stats div:nth-child(3) { border-left: 0; }
}

/* ---------- Get it: install, what it needs, what's new ---------- */
.getit { padding: 100px 0 90px; }
.getit h2 { font-size: clamp(48px, 6vw, 88px); }
.getit-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; margin-top: 40px; align-items: start; }
.getit .card { background: #fff; border-radius: 24px; padding: 24px 26px; box-shadow: 0 0 0 1.5px var(--stone), 0 6px 0 var(--stone); }
.getit .card h3 { font: 800 20px var(--body); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.getit .card h3 img { width: 34px; height: 34px; object-fit: contain; }
.getit .stack { display: grid; gap: 22px; }
.getit .sha { margin-top: 16px; font-size: 13px; color: var(--mute); }
.getit .sha code { word-break: break-all; }
.getit .tm { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--mute); }
.getit .getdl { margin-top: 20px; }
@media (max-width: 900px) { .getit-grid { grid-template-columns: 1fr; } .getit .card { padding: 20px; } }

/* ---------- Finale ---------- */
.appfinale2 { padding: 70px 0 110px; }
.appfinale2 img { width: min(820px, 100%); }
.appfinale2 .btn { font-size: 17px; padding: 18px 26px; }

/* ---------- Round 3 (2026-09-30): red downloads, curved edges, the library, the red Friday ---------- */

/* Download buttons: the header one is brand red; every other one turns red when you point at it. */
.cast-page .btn-red { background: var(--red); color: #fff; box-shadow: 0 5px 0 #8E1F17; }
.cast-page .btn-red:hover { background: #BE2D23; box-shadow: 0 7px 0 #8E1F17; }
.cast-page .btn-red:active { transform: translateY(4px); box-shadow: 0 1px 0 #8E1F17; }
.cast-page .nav .btn-red { box-shadow: 0 3px 0 #8E1F17; }
.cast-page .btn.dl:not(.btn-red):not(.fomo-btn):hover, .cast-page .btn.dl:not(.btn-red):not(.fomo-btn):focus-visible { background: var(--red); color: #fff; box-shadow: 0 7px 0 #8E1F17; }
.cast-page .btn.dl { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .15s ease; }

/* The claim's star, and the line that backs it */
.xhero h1 .star { font-size: .42em; vertical-align: super; line-height: 0; margin-left: .04em; color: var(--red); text-decoration: none; font-weight: 900; }
.xhero h1 .star:hover { text-decoration: underline; }
.xh-cta .footnote { margin-top: 10px; max-width: 470px; font-size: 12.5px; line-height: 1.5; color: #4A443A; }
.xh-cta .footnote a { color: var(--ink); font-weight: 700; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* Curved tops: where the colour changes, the next section rises in a soft wave, like a speech
   bubble's edge, instead of a straight line. The wave takes the section's own colour. */
.wavy { position: relative; }
.wavy::before, .cast-page .foot::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(26px, 4.2vw, 64px);
  background: inherit; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V44C160 8 360-2 560 20s380 58 580 42 250-44 300-40v58z'/%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V44C160 8 360-2 560 20s380 58 580 42 250-44 300-40v58z'/%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
}
.wavy:nth-of-type(even)::before { transform: scaleX(-1); }
.cast-page .foot { position: relative; }
.xstory { background: var(--paper); }
.pricing2, .finale.appfinale2 { background: var(--paper); }
.onphone, .fomo { overflow: visible; overflow-x: clip; }

/* The speaking library */
.learn { background: var(--cream); padding: 100px 0 90px; }
.learn h2 { font-size: clamp(48px, 6vw, 88px); }
.learn .shead .answer { margin-top: 6px; }
.learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.learn-card { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; background: #fff; border-radius: 28px; padding: 22px; box-shadow: 0 0 0 1.5px var(--stone), 0 8px 0 var(--stone); }
.learn-card .phone-mock { --s: .5; }
.learn-card .mode { display: inline-flex; font: 800 11px var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--volt); }
.learn-card h3 { font: 850 30px/1.02 var(--display); font-stretch: 92%; letter-spacing: -.02em; margin: 12px 0 8px; }
.learn-card p { font-size: 16px; color: #3A352D; }
.learn .credits { margin-top: 18px; font-size: 12.5px; color: var(--mute); }
@media (max-width: 1000px) { .learn-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .learn { padding: 76px 0 64px; }
  .learn-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 18px; }
  .learn-card .phone-mock { --s: .56; }
}

/* Friday comes either way: the brand red, dark highlights, a dark button that turns white */
.fomo { background: var(--red); }
.fomo h2 { color: #fff; }
.fomo .hl { background-image: linear-gradient(transparent 60%, var(--ink) 60%, var(--ink) 90%, transparent 90%); }
.fomo p { color: #FFE3DF; }
.cast-page .fomo .fomo-btn { background: var(--ink); color: #fff; box-shadow: 0 5px 0 #0A0907; }
.cast-page .fomo .fomo-btn:hover, .cast-page .fomo .fomo-btn:focus-visible { background: #fff; color: var(--ink); box-shadow: 0 7px 0 #0A0907; }

/* The store's screenshots: a slider with arrows and dots; swipe on a phone */
.slider { margin-top: 20px; }
.store .slider .shots { margin: 0 -24px; padding: 4px 24px 8px; scrollbar-width: none; scroll-behavior: smooth; }
.store .slider .shots::-webkit-scrollbar { display: none; }
.sl-ctl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.sl-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--stone); transition: background-color .15s ease, color .15s ease; }
.sl-btn:hover:not(:disabled) { background: var(--ink); color: #fff; }
.sl-btn:disabled { opacity: .35; cursor: default; }
.sl-btn svg { width: 18px; height: 18px; }
.sl-dots { display: flex; gap: 7px; }
.sl-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: var(--stone); transition: width .25s ease, background-color .25s ease; }
.sl-dots button[aria-current="true"] { width: 22px; background: var(--ink); }
@media (max-width: 640px) { .store .slider .shots { margin: 0 -18px; padding: 4px 18px 8px; } }

/* The download form */
.getapp { margin: auto; width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; border: 0; border-radius: 28px; padding: 26px 24px 22px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2.5px var(--ink), 10px 10px 0 var(--ink); overscroll-behavior: contain; }
.getapp::backdrop { background: rgba(22,20,15,.55); backdrop-filter: blur(3px); }
.getapp[open] { animation: gaup .35s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes gaup { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.ga-x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1.5px var(--stone); }
.ga-x svg { width: 18px; height: 18px; }
.ga-step[hidden] { display: none; }
.ga-bubble { display: block; width: 74px; margin: -8px 0 6px; }
.getapp .eyebrow { color: var(--red); font-size: 11px; }
.getapp h2 { font: 850 30px/1.02 var(--display); font-stretch: 92%; letter-spacing: -.02em; margin: 6px 0 8px; padding-right: 36px; }
.ga-why { font-size: 15px; color: #3A352D; }
.getapp form { display: grid; gap: 12px; margin-top: 16px; }
.getapp .fld { display: grid; gap: 6px; font: 700 14px var(--body); }
.getapp .fld em { font-style: normal; font-weight: 600; color: var(--mute); font-size: 12.5px; margin-left: 4px; }
.getapp input:not([type="checkbox"]) { width: 100%; font: 500 16.5px var(--body); padding: 13px 14px; border-radius: 14px; border: 0; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--stone); }
.getapp input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.getapp .row.dob { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
.ga-opt { display: grid; gap: 12px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--stone); }
.ga-opt input:not([type="checkbox"]) { background: var(--paper); }
.ga-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ga-chips button { border: 0; padding: 8px 12px; border-radius: 999px; font: 700 13.5px var(--body); background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--stone); }
.ga-chips button[aria-checked="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.ga-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #3A352D; cursor: pointer; }
.ga-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--red); flex: none; }
.ga-msg { min-height: 1.2em; font: 700 14px var(--body); color: var(--red); }
.ga-msg:empty { display: none; }
.getapp .ga-go { width: 100%; justify-content: center; font-size: 17px; padding: 16px; }
.ga-fine { font-size: 12.5px; color: var(--mute); text-align: center; }
.ga-fine a { color: var(--ink); }
.getapp .howto { margin: 16px 0 18px; }
.getapp .btn-soft { width: 100%; justify-content: center; }
.ga-qr { width: 200px; height: 200px; margin: 16px auto; padding: 12px; background: #fff; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--stone); }
.ga-qr svg { width: 100%; height: 100%; display: block; }
@media (max-width: 480px) { .getapp { padding: 22px 18px 18px; box-shadow: 0 0 0 2.5px var(--ink), 6px 6px 0 var(--ink); } .getapp h2 { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .getapp[open] { animation: none; } .store .slider .shots { scroll-behavior: auto; } }

@media (prefers-reduced-motion: reduce) {
  .beat, .say.live .lv i, .dojo-state i, .sc-rec i, .fomo-walker { animation: none; }
  .fomo-walker { transform: translateX(20px); }
  .say.live .lv i { transform: scaleY(.7); }
  .dojo.ran .rep-out del, .dojo.ran .rep-out ins, .dojo.ran .rep-out [data-clean], .dojo.ran.sealed .stamp,
  .scene-write.go del, .scene-write.go ins, .sc-words span { animation-duration: .01s; animation-delay: 0s; }
  .step-art { opacity: 1; transform: none; transition: none; }
  .s-home .shortcuts { animation: none; }
}