/* wordojo.app, the sections from the stories to the footer (land.js runs them). Yellow leads, with
   obsidian and red; cream, paper and the library's matte teal support. Each section has its own phone
   (under 700px), tablet (700 to 1099px) and desktop layout. Motion is transform and opacity only. */
:root { --obsidian: #16140F; --obs-2: #24221D; --soft-y: #FFF4A8; --shadow: 0 1px 0 rgba(22, 20, 15, .06), 0 24px 48px -30px rgba(22, 20, 15, .45); }

/* ---------- The header menu (phones and tablets) ---------- */
.nav-menu { display: none; align-items: center; gap: 6px; padding: 9px 13px; border: 1.5px solid currentColor; border-radius: 12px; background: transparent; color: inherit; font: 700 14px var(--body); }
.nav-menu svg { width: 18px; height: 18px; }
.navsheet { position: fixed; top: 70px; left: 12px; right: 12px; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px; border-radius: 22px; background: #FFFDF8; color: var(--obsidian); box-shadow: 0 30px 60px -20px rgba(22, 20, 15, .45), 0 0 0 1px rgba(22, 20, 15, .06); }
.navsheet[hidden] { display: none; }
.navsheet a { padding: 14px 14px; border-radius: 14px; font: 700 16px var(--body); text-decoration: none; }
.navsheet a:active, .navsheet a:hover { background: var(--soft-y); }
@media (max-width: 860px) { .nav-menu { display: inline-flex; } body.story-page .nav nav { gap: 10px; } }

/* ---------- Shared ---------- */
.s-head .s-lede { margin-top: 14px; }
/* The download button breathes: a thin ring leaves it and fades, the button swells a touch */
.pulse { position: relative; animation: breathe 2.4s ease-in-out infinite; }
.pulse::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid currentColor; opacity: 0; pointer-events: none; animation: ring 2.4s ease-out infinite; }
.btn-ink.pulse::after { border-color: var(--obsidian); }
@keyframes breathe { 50% { transform: scale(1.03); } }
@keyframes ring { 0% { opacity: .6; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.08, 1.45); } }

/* ---------- Stories like yours ---------- */
.stories { padding: 110px 0 120px; }
.st-head { max-width: 760px; }
.st-label { display: inline-block; margin-top: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(22, 20, 15, .08); font: 800 11.5px var(--body); letter-spacing: .08em; text-transform: uppercase; }
.st-flow { display: grid; grid-template-columns: repeat(12, 1fr); gap: 26px 24px; margin-top: 48px; align-items: start; }
.story { --r: 0deg; position: relative; grid-column: span 4; padding: 22px 22px 54px; border-radius: 30px; background: #fff; color: var(--obsidian); box-shadow: var(--shadow); cursor: pointer; transform: rotate(var(--r)); transition: transform .35s var(--ease-spring), box-shadow .35s; outline-offset: 4px; }
.story:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 1px 0 rgba(22, 20, 15, .06), 0 34px 60px -30px rgba(22, 20, 15, .5); }
.story:nth-child(1) { grid-column: 1 / 6; --r: -1.4deg; }
.story:nth-child(2) { grid-column: 6 / 10; --r: 1.2deg; margin-top: 50px; }
.story:nth-child(3) { grid-column: 10 / 13; --r: -.8deg; margin-top: 10px; }
.story:nth-child(4) { grid-column: 1 / 5; --r: 1deg; margin-top: -10px; }
.story:nth-child(5) { grid-column: 5 / 9; --r: -1.2deg; margin-top: 20px; }
.story:nth-child(6) { grid-column: 9 / 13; --r: .8deg; margin-top: -24px; }
.st-top { display: flex; align-items: center; gap: 14px; }
.st-av svg { width: 68px; height: 68px; }
.st-av .m-win { opacity: 0; transition: opacity .3s; }
.story.played .st-av .m-win { opacity: 1; }
.story.played .st-av .m-meh { opacity: 0; }
.st-who b { display: block; font: 800 18px var(--body); }
.st-tag { display: inline-block; margin-top: 4px; padding: 4px 10px; border-radius: 999px; font: 800 11.5px var(--body); letter-spacing: .06em; text-transform: uppercase; }
.s-say .st-tag { background: var(--volt); }
.s-write .st-tag { background: var(--red); color: #fff; }
.s-film .st-tag { background: var(--obsidian); color: var(--volt); }
.st-before, .st-after { margin-top: 16px; font: 500 20px/1.3 var(--serif); }
.st-before span, .st-after span { display: block; margin-bottom: 4px; font: 800 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #6E675C; }
.st-meter { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.st-meter b { min-width: 1.6ch; font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 64px; line-height: .85; color: var(--red); font-variant-numeric: tabular-nums; transition: color .3s; }
.st-meter span { font: 700 14px/1.3 var(--body); max-width: 140px; }
.story.played .st-meter b { color: var(--obsidian); }
.st-coach { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 18px; background: var(--soft-y); opacity: .75; filter: grayscale(1) blur(1.5px); transition: opacity .45s, filter .45s; }
.s-write .st-coach { background: #FFE5E0; }
.s-film .st-coach { background: #EFEAE0; }
.st-figs { display: flex; align-items: flex-end; gap: 2px; flex: none; }
.st-figs .fam { height: 58px; }
.st-coach p { font: 600 14.5px/1.4 var(--body); }
.story.play .st-coach { opacity: 1; filter: none; }
.st-after { opacity: .8; filter: blur(4px); transition: opacity .45s .1s, filter .45s .1s; }
.st-after { font-weight: 600; }
.story.played .st-after { opacity: 1; filter: none; }
.st-stamp { position: absolute; top: 20px; right: 18px; padding: 5px 11px; border: 3px solid var(--red); border-radius: 10px; color: var(--red); font-family: var(--display); font-stretch: 75%; font-weight: 900; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; opacity: 0; transform: rotate(-12deg) scale(1.8); transition: opacity .2s, transform .45s var(--ease-spring); }
.story.played .st-stamp { opacity: 1; transform: rotate(-12deg) scale(1); }
.st-tap { position: absolute; left: 22px; bottom: 18px; display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--body); opacity: .6; }
.st-tap::before { content: ""; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@media (max-width: 1099px) { .st-flow { grid-template-columns: 1fr 1fr; gap: 22px; } .story, .story:nth-child(n) { grid-column: auto; margin-top: 0; } .story:nth-child(even) { margin-top: 36px; } }
@media (max-width: 699px) {
  .stories { padding: 80px 0 80px; }
  .st-flow { grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
  .story:nth-child(n) { margin-top: 0; --r: -.6deg; }
  .story:nth-child(even) { --r: .6deg; }
  .story { padding: 18px 18px 50px; }
  .st-av svg { width: 58px; height: 58px; }
  .st-meter b { font-size: 54px; }
}

/* ---------- The coaches, at work ---------- */
.coach { cursor: pointer; outline-offset: 4px; }
.coach .stage { position: relative; }
.c-tap { position: absolute; top: 28px; right: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: var(--obsidian); color: #FFF7EE; font: 800 11px var(--body); letter-spacing: .06em; text-transform: uppercase; animation: tapnudge 2.6s ease-in-out infinite; }
.coach.open .c-tap { opacity: 0; }
@keyframes tapnudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-3px); } 90% { transform: none; } }
.c-demo { position: absolute; left: 10px; right: 10px; top: 10px; display: grid; gap: 6px; justify-items: start; opacity: 0; transform: translateY(-8px) scale(.96); transform-origin: top center; transition: opacity .3s, transform .4s var(--ease-spring); pointer-events: none; }
.coach.open .c-demo { opacity: 1; transform: none; }
.c-demo .cd-bub, .c-demo .cd-page, .c-demo .cd-quiz { max-width: 100%; padding: 9px 11px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -14px rgba(22, 20, 15, .5); font: 600 13px/1.4 var(--body); text-align: left; }
.cd-bub i { font-style: normal; border-radius: 4px; background-image: linear-gradient(var(--red), var(--red)); background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 2px; }
.coach.ran .cd-bub i { color: var(--red); background-size: 100% 2px; transition: background-size .3s, color .3s; }
.coach.ran .cd-bub i:nth-of-type(1) { transition-delay: .5s; } .coach.ran .cd-bub i:nth-of-type(2) { transition-delay: 1s; } .coach.ran .cd-bub i:nth-of-type(3) { transition-delay: 1.5s; }
.cd-page s { text-decoration: none; background-image: linear-gradient(var(--red), var(--red)); background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 2px; }
.coach.ran .cd-page s { color: #8A8378; background-size: 100% 2px; transition: background-size .3s, color .3s; }
.coach.ran .cd-page s:nth-of-type(2) { transition-delay: .4s; } .coach.ran .cd-page s:nth-of-type(3) { transition-delay: .8s; } .coach.ran .cd-page s:nth-of-type(4) { transition-delay: 1.2s; } .coach.ran .cd-page s:nth-of-type(1) { transition-delay: .1s; }
.cd-count { padding: 4px 9px; border-radius: 999px; background: var(--obsidian); color: var(--volt); font: 800 12px var(--body); }
.cd-tip { padding: 6px 10px; border-radius: 12px 12px 12px 4px; background: var(--volt); color: var(--obsidian); font: 700 12.5px/1.3 var(--body); opacity: 0; transform: translateY(6px); }
.coach.ran .cd-tip { opacity: 1; transform: none; transition: opacity .3s 1.9s, transform .3s 1.9s; }
.cd-quiz b { display: block; margin-bottom: 6px; }
.cd-quiz span { display: block; margin-top: 4px; padding: 5px 8px; border-radius: 9px; background: #F4F0E8; }
.coach.ran .cd-quiz .good { background: var(--volt); transition: background-color .3s 1.4s; }
.cd-map { display: flex; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -14px rgba(22, 20, 15, .5); }
.cd-map i { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--obsidian); background: #fff; }
.cd-map i.done { background: var(--red); }
.coach.ran .cd-map i.next { animation: seal .5s var(--ease-spring) .9s forwards; }
@keyframes seal { 0% { transform: scale(1); } 50% { transform: scale(1.5); background: var(--red); } 100% { transform: scale(1); background: var(--red); } }
@media (max-width: 560px) {
  .coach.open { grid-column: 1 / -1; grid-template-rows: 210px auto; }
  .coach.open .stage .fam { height: 150px; }
  .c-tap { top: 16px; right: 16px; font-size: 10px; padding: 4px 8px; }
  .c-demo { left: 8px; right: 8px; top: 8px; }
}

/* ---------- Thirty seconds in the app: chapters around the phone ---------- */
.filmsec { padding: 110px 0 90px; }
.film-head { max-width: 760px; margin: 0 auto; text-align: center; }
.film-head .s-lede { margin-left: auto; margin-right: auto; }
.film-orbit { display: grid; grid-template-columns: 1fr 340px 1fr; gap: 44px; align-items: center; margin-top: 44px; }
.ch-col { display: grid; gap: 16px; }
.ch-col:first-child { justify-items: end; }
.ch-chip { position: relative; display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 4px 14px; width: 100%; max-width: 310px; padding: 14px 16px 12px; border: 0; border-radius: 24px; background: #fff; color: var(--obsidian); text-align: left; box-shadow: var(--shadow); transition: transform .3s var(--ease-spring), background-color .3s, color .3s; }
.ch-chip:hover { transform: translateY(-3px); }
.ch-ic { grid-row: span 2; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: var(--soft-y); transition: background-color .3s; }
.ch-ic svg { width: 26px; height: 26px; }
.ch-t b { display: block; font: 800 16px var(--body); }
.ch-t small { display: block; margin-top: 2px; font: 500 13px var(--body); opacity: .65; }
.ch-chip .bar { grid-column: 2; height: 4px; border-radius: 2px; background: rgba(22, 20, 15, .1); overflow: hidden; }
.ch-chip .bar i { display: block; height: 100%; width: 0; background: var(--obsidian); }
.ch-chip.on { background: var(--obsidian); color: #FFF7EE; transform: scale(1.04); }
.ch-chip.on .ch-ic { background: var(--volt); color: var(--obsidian); }
.ch-chip.on .bar { background: rgba(255, 247, 238, .18); }
.ch-chip.on .bar i { background: var(--volt); animation: chbar var(--dur, 5s) linear forwards; }
.filmsec.paused .ch-chip.on .bar i { animation-play-state: paused; }
.ch-col:first-child .ch-chip::after, .ch-col:last-child .ch-chip::after { content: ""; position: absolute; top: 50%; width: 44px; border-top: 2px dashed rgba(22, 20, 15, .25); }
.ch-col:first-child .ch-chip::after { right: -44px; }
.ch-col:last-child .ch-chip::after { left: -44px; }
.film-note { margin-top: 28px; text-align: center; font-size: 13px; opacity: .6; }
@media (max-width: 1099px) {
  .film-orbit { grid-template-columns: 1fr 1fr; grid-template-areas: "phone phone" "l r"; gap: 28px 18px; }
  .film-stage { grid-area: phone; justify-self: center; }
  .ch-col:first-child { grid-area: l; justify-items: stretch; } .ch-col:last-child { grid-area: r; }
  .ch-chip { max-width: none; }
  .ch-col .ch-chip::after { display: none; }
}
@media (max-width: 699px) {
  .filmsec { padding: 80px 0 70px; }
  .film-orbit { grid-template-columns: repeat(3, 1fr); grid-template-areas: "phone phone phone"; gap: 10px; margin-top: 28px; }
  .ch-col { display: contents; }
  .ch-chip { grid-template-columns: 1fr; justify-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 18px; text-align: center; }
  .ch-ic { grid-row: auto; width: 42px; height: 42px; border-radius: 14px; }
  .ch-ic svg { width: 22px; height: 22px; }
  .ch-t b { font-size: 12.5px; }
  .ch-t small { display: none; }
  .ch-chip .bar { grid-column: 1; width: 80%; }
  .ch-chip.on { transform: none; }
}

/* ---------- Your first week ---------- */
.week3 { padding: 110px 0 100px; }
.wk { display: grid; gap: 18px; margin-top: 40px; }
.wk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.wk-day { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 6px 18px; border: 0; border-radius: 20px; background: #fff; color: var(--obsidian); box-shadow: var(--shadow); transition: transform .3s var(--ease-spring), background-color .3s, color .3s; }
.wk-day:hover { transform: translateY(-3px); }
.wk-day .dd { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.wk-day .di { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; }
.wk-day .di svg { width: 22px; height: 22px; }
.wk-day .di .two { display: flex; gap: 2px; } .wk-day .di .two svg { width: 16px; height: 16px; }
.wk-day.speak .di { background: var(--volt); }
.wk-day.write .di { background: #FFE0DB; color: var(--red); }
.wk-day.both .di { background: #DCEAE7; color: var(--teal); }
.wk-day .dt { font: 700 13.5px var(--body); }
.wk-day .dp { position: absolute; left: 16px; right: 16px; bottom: 7px; height: 3px; border-radius: 2px; overflow: hidden; }
.wk-day .dp::after { content: ""; display: block; height: 100%; width: 0; background: var(--volt); }
.wk-day[aria-selected="true"] { background: var(--obsidian); color: #FFF7EE; transform: translateY(-4px); }
.wk-day[aria-selected="true"] .dd { opacity: .8; }
.wk:not(.held) .wk-day[aria-selected="true"] .dp::after { animation: chbar 3.6s linear forwards; }
.wk-day.past { opacity: .7; }
.wk-card { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 400px; border-radius: 34px; background: #fff; box-shadow: var(--shadow); overflow: hidden; touch-action: pan-y; }
.wk-scene { position: relative; background: var(--soft-y); }
.wk-copy { align-self: center; padding: 40px 44px; }
.wk-side { display: inline-block; padding: 5px 11px; border-radius: 999px; font: 800 11.5px var(--body); letter-spacing: .08em; text-transform: uppercase; }
.wk-side.speak { background: var(--volt); }
.wk-side.write { background: var(--red); color: #fff; }
.wk-side.both { background: var(--teal); color: #fff; }
.wk-copy h3 { margin-top: 14px; font: 500 clamp(30px, 3.4vw, 46px)/1.05 var(--serif); letter-spacing: -.02em; }
.wk-copy p { margin-top: 12px; font-size: 17.5px; line-height: 1.5; color: #3A352D; max-width: 380px; }
.wk-sc { position: relative; display: grid; place-items: center; height: 100%; min-height: 400px; padding: 28px 28px 28px; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .5s var(--ease-out); }
.wk-sc.go { opacity: 1; transform: none; }
.wk-fig { position: absolute; right: 18px; bottom: 0; height: 46%; }
/* Day scenes */
.sc-map { position: relative; width: 82%; height: 220px; }
.sc-map i { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--obsidian); background: #fff; transform: scale(.4); opacity: 0; }
.sc-map i::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--red); transform: scale(0); }
.sc-map .s1 { left: 0; top: 150px; } .sc-map .s2 { left: 17%; top: 92px; } .sc-map .s3 { left: 36%; top: 130px; } .sc-map .s4 { left: 55%; top: 60px; } .sc-map .s5 { left: 72%; top: 104px; } .sc-map .s6 { left: 88%; top: 30px; }
.go .sc-map i { animation: pop .45s var(--ease-spring) forwards; }
.go .sc-map i:nth-child(2) { animation-delay: .12s; } .go .sc-map i:nth-child(3) { animation-delay: .24s; } .go .sc-map i:nth-child(4) { animation-delay: .36s; } .go .sc-map i:nth-child(5) { animation-delay: .48s; } .go .sc-map i:nth-child(6) { animation-delay: .6s; }
.go .sc-map i:nth-child(-n+3)::after { animation: pop .4s var(--ease-spring) forwards; }
.go .sc-map i:nth-child(1)::after { animation-delay: 1s; } .go .sc-map i:nth-child(2)::after { animation-delay: 1.4s; } .go .sc-map i:nth-child(3)::after { animation-delay: 1.8s; }
@keyframes pop { to { transform: scale(1); opacity: 1; } }
.sc-mirror { width: min(300px, 80%); padding: 18px; border-radius: 24px; background: var(--obsidian); color: #FFF7EE; box-shadow: 0 30px 50px -28px rgba(22, 20, 15, .7); }
.sc-mirror .mw { display: flex; align-items: center; gap: 3px; height: 60px; }
.sc-mirror .mw i { flex: 1; height: 100%; border-radius: 3px; background: var(--volt); transform: scaleY(.2); }
.go .sc-mirror .mw i { animation: wv .9s ease-in-out infinite; }
.go .sc-mirror .mw i:nth-child(3n) { animation-duration: 1.2s; } .go .sc-mirror .mw i:nth-child(4n) { animation-delay: -.4s; } .go .sc-mirror .mw i:nth-child(5n) { animation-duration: .7s; }
.sc-mirror .mstats { display: flex; gap: 22px; margin-top: 14px; }
.sc-mirror .mstats span { display: grid; font: 600 12px var(--body); opacity: .85; }
.sc-mirror .mstats b { font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 40px; line-height: 1; color: var(--volt); font-variant-numeric: tabular-nums; }
.sc-mirror .mstats span:first-child b { color: #FF6B5E; }
.mtip { margin-top: 12px; padding: 8px 12px; border-radius: 12px; background: var(--volt); color: var(--obsidian); font: 700 14px var(--body); opacity: 0; }
.go .mtip { animation: fadeup .4s 1.6s forwards; }
@keyframes fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sc-room { display: grid; gap: 10px; width: min(340px, 82%); }
.sc-room .role { justify-self: start; padding: 5px 11px; border-radius: 999px; background: var(--obsidian); color: var(--volt); font: 800 12px var(--body); letter-spacing: .06em; text-transform: uppercase; }
.sc-room p { padding: 12px 14px; border-radius: 18px; font: 600 15px/1.35 var(--body); box-shadow: 0 10px 24px -16px rgba(22, 20, 15, .5); opacity: 0; }
.sc-room .them { justify-self: start; background: #fff; border-bottom-left-radius: 4px; }
.sc-room .me { justify-self: end; background: var(--obsidian); color: #FFF7EE; border-bottom-right-radius: 4px; }
.go .sc-room .them { animation: fadeup .4s .3s forwards; } .go .sc-room .me { animation: fadeup .4s 1.1s forwards; }
.sc-room .score { display: flex; gap: 10px; opacity: 0; }
.go .sc-room .score { animation: fadeup .4s 1.8s forwards; }
.sc-room .score span { padding: 6px 12px; border-radius: 12px; background: #fff; font: 700 13px var(--body); }
.sc-room .score span:last-child { background: var(--volt); }
.sc-room .score b { margin-left: 4px; font-size: 17px; }
.sc-pen { width: min(360px, 84%); padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 24px 40px -26px rgba(22, 20, 15, .5); }
.sc-pen p { font: 500 18px/1.45 var(--serif); }
.sc-pen s { text-decoration: none; background-image: linear-gradient(var(--red), var(--red)); background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 2.5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.go .sc-pen s { color: #8A8378; background-size: 100% 2.5px; transition: background-size .5s .5s, color .5s .5s; }
.go .sc-pen s:nth-of-type(2) { transition-delay: 1.1s; }
.sc-pen .wc { margin-top: 10px; font: 700 13px var(--body); }
.sc-pen .wc b { font-size: 22px; color: var(--red); font-variant-numeric: tabular-nums; }
.sc-pen .clean { margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: var(--soft-y); font-weight: 600; opacity: 0; }
.go .sc-pen .clean { animation: fadeup .4s 1.9s forwards; }
.sc-studio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(340px, 84%); }
.sc-studio > span { display: grid; place-items: center; height: 64px; border-radius: 16px; background: #fff; font: 800 15px var(--body); box-shadow: 0 10px 24px -16px rgba(22, 20, 15, .5); opacity: 0; transform: scale(.6); }
.go .sc-studio > span { animation: pop .4s var(--ease-spring) forwards; animation-delay: calc(var(--k) * .1s); }
.go .sc-studio > span:first-child { background: var(--red); color: #fff; }
.sc-studio .meters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sc-studio .meters i { font: 700 12px var(--body); font-style: normal; padding: 5px 9px; border-radius: 999px; background: #fff; opacity: 0; }
.sc-studio .meters i::before { content: "✓ "; color: var(--red); }
.go .sc-studio .meters i { animation: fadeup .3s forwards; } .go .sc-studio .meters i:nth-child(1) { animation-delay: 1s; } .go .sc-studio .meters i:nth-child(2) { animation-delay: 1.3s; } .go .sc-studio .meters i:nth-child(3) { animation-delay: 1.6s; }
.sc-lib { display: grid; gap: 14px; width: min(340px, 84%); }
.sc-lib .books { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.sc-lib .books i { flex: 1; border-radius: 6px 6px 3px 3px; border: 2.5px solid var(--obsidian); transform-origin: bottom; transform: scaleY(0); }
.sc-lib .books i:nth-child(1) { height: 80%; background: var(--red); } .sc-lib .books i:nth-child(2) { height: 100%; background: var(--volt); } .sc-lib .books i:nth-child(3) { height: 70%; background: var(--teal); } .sc-lib .books i:nth-child(4) { height: 92%; background: #fff; } .sc-lib .books i:nth-child(5) { height: 76%; background: #F28C28; } .sc-lib .books i:nth-child(6) { height: 98%; background: var(--obsidian); } .sc-lib .books i:nth-child(7) { height: 84%; background: #2F6FDB; }
.go .sc-lib .books i { animation: grow .5s var(--ease-spring) forwards; }
.go .sc-lib .books i:nth-child(2) { animation-delay: .08s; } .go .sc-lib .books i:nth-child(3) { animation-delay: .16s; } .go .sc-lib .books i:nth-child(4) { animation-delay: .24s; } .go .sc-lib .books i:nth-child(5) { animation-delay: .32s; } .go .sc-lib .books i:nth-child(6) { animation-delay: .4s; } .go .sc-lib .books i:nth-child(7) { animation-delay: .48s; }
@keyframes grow { to { transform: scaleY(1); } }
.sc-lib .line { padding: 10px 14px; border-radius: 14px; background: #fff; font: italic 500 17px var(--serif); }
.go .sc-lib .line { animation: hl 1s 1s forwards; }
@keyframes hl { to { background: var(--volt); } }
.sc-lib .play { display: flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: 14px; background: var(--obsidian); }
.sc-lib .play i { width: 0; height: 0; margin-right: 8px; border-left: 11px solid var(--volt); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.sc-lib .play b { flex: 1; height: 18px; border-radius: 2px; background: var(--volt); transform: scaleY(.3); }
.go .sc-lib .play b { animation: wv 1s ease-in-out 1.6s infinite; }
.go .sc-lib .play b:nth-child(2n) { animation-duration: .7s; } .go .sc-lib .play b:nth-child(3n) { animation-duration: 1.3s; }
.sc-belt { display: grid; gap: 18px; justify-items: center; width: 100%; }
.sc-belt .rack { display: grid; gap: 7px; width: min(300px, 80%); }
.sc-belt .rack i { height: 12px; border-radius: 4px; background: var(--c); border: 2px solid var(--obsidian); transform: translateX(-120%); opacity: 0; }
.go .sc-belt .rack i { animation: slidein .45s var(--ease-out) forwards; }
.go .sc-belt .rack i:nth-child(2) { animation-delay: .07s; } .go .sc-belt .rack i:nth-child(3) { animation-delay: .14s; } .go .sc-belt .rack i:nth-child(4) { animation-delay: .21s; } .go .sc-belt .rack i:nth-child(5) { animation-delay: .28s; } .go .sc-belt .rack i:nth-child(6) { animation-delay: .35s; } .go .sc-belt .rack i:nth-child(7) { animation-delay: .42s; } .go .sc-belt .rack i:nth-child(8) { animation-delay: .49s; }
@keyframes slidein { to { transform: none; opacity: 1; } }
.sc-belt .fam-row { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.sc-belt .fam-row .fam { height: 96px; }
.sc-belt .fam-row .fam[data-who="nib"] { height: 70px; } .sc-belt .fam-row .fam[data-who="babble"] { height: 58px; }
.wk[data-side="write"] .wk-scene { background: #F3ECDF; }
.wk[data-side="both"] .wk-scene { background: #E3EEEC; }
@media (max-width: 1099px) { .wk-card { grid-template-columns: 1fr 1fr; } .wk-copy { padding: 30px; } }
@media (max-width: 699px) {
  .week3 { padding: 80px 0 70px; }
  .wk { margin-top: 26px; gap: 12px; }
  .wk-days { gap: 5px; }
  .wk-day { padding: 9px 2px 12px; border-radius: 14px; gap: 4px; }
  .wk-day .dd { font-size: 10px; letter-spacing: .06em; }
  .wk-day .di { width: 32px; height: 32px; border-radius: 10px; }
  .wk-day .di svg { width: 18px; height: 18px; } .wk-day .di .two svg { width: 12px; height: 12px; }
  .wk-day .dt { display: none; }
  .wk-day .dp { left: 8px; right: 8px; bottom: 5px; }
  .wk-card { grid-template-columns: 1fr; border-radius: 26px; }
  .wk-sc { min-height: 300px; padding: 22px 18px 30px; }
  .wk-copy { padding: 22px 22px 26px; }
  .wk-copy h3 { font-size: 30px; }
  .wk-copy p { font-size: 16px; }
  .wk-fig { height: 40%; right: 10px; }
  .sc-map { width: 88%; height: 190px; } .sc-map i { width: 36px; height: 36px; } .sc-map i::after { inset: 7px; }
  .sc-map .s1 { top: 130px; } .sc-map .s3 { top: 112px; } .sc-map .s5 { top: 90px; }
}

/* ---------- Monday you, Friday you ---------- */
.compare { padding: 110px 0 100px; }
.cmp { margin-top: 34px; }
.cmp-tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); }
.cmp-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border: 0; border-radius: 999px; background: transparent; font: 700 15px var(--body); }
.cmp-tabs button svg { width: 17px; height: 17px; }
.cmp-tabs button[aria-selected="true"] { background: var(--obsidian); color: var(--volt); }
.cmp-days { display: none; }
.cmp-box { --pos: 50%; position: relative; height: 440px; margin-top: 16px; border-radius: 34px; overflow: hidden; box-shadow: var(--shadow); touch-action: pan-y; }
.cmp-pane { position: absolute; inset: 0; display: grid; align-content: start; padding: 44px 48px; }
.cmp-pane > :not(.cp-fig) { width: 44%; position: relative; z-index: 1; }
.cmp-pane.mon { background: #E9E2D4; color: #3A352D; justify-items: start; }
.cmp-pane.fri { background: var(--volt); color: var(--obsidian); justify-items: end; text-align: right; clip-path: inset(0 0 0 var(--pos)); }
.cp-k { display: inline-block; width: auto !important; padding: 5px 11px; border-radius: 999px; background: rgba(22, 20, 15, .12); font: 800 12px var(--body); letter-spacing: .1em; text-transform: uppercase; }
.fri .cp-k { background: var(--obsidian); color: var(--volt); }
.cp-txt { margin-top: 14px; font: 500 clamp(20px, 2.1vw, 27px)/1.35 var(--serif); }
.mon .cp-txt i { font-style: normal; color: var(--red); background: linear-gradient(var(--red), var(--red)) no-repeat 0 58% / 100% 2px; }
.fri .cp-txt { font-weight: 600; }
.cp-stats { display: flex; gap: 22px; margin-top: 16px; }
.fri .cp-stats { justify-content: flex-end; }
.cp-stats span { display: grid; font: 700 12.5px var(--body); opacity: .8; }
.cp-stats b { font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.mon .cp-stats b { color: var(--red); }
.cp-fig { position: absolute; bottom: 0; height: 32%; z-index: 0; }
.mon .cp-fig { left: 48px; }
.fri .cp-fig { right: 48px; }
.cmp-line { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 3px; margin-left: -1.5px; background: var(--obsidian); pointer-events: none; }
.cmp-knob { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--obsidian); color: var(--volt); box-shadow: 0 10px 24px -10px rgba(22, 20, 15, .6); }
.cmp-knob svg { width: 26px; height: 26px; }
.cmp-range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp-range:focus-visible + * , .cmp-box:focus-within .cmp-knob { outline: 3px solid var(--red); outline-offset: 3px; }
.cmp-box.glide .fri { transition: clip-path .6s var(--ease-out); }
.cmp-box.glide .cmp-line { transition: left .6s var(--ease-out); }
.cmp-fine { margin-top: 14px; font-size: 13px; opacity: .65; }
@media (max-width: 699px) {
  .compare { padding: 80px 0 70px; }
  .cmp-tabs { display: flex; width: 100%; } .cmp-tabs button { flex: 1; justify-content: center; padding: 10px 8px; font-size: 14px; }
  .cmp-days { display: flex; gap: 4px; margin-top: 10px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); }
  .cmp-days button { flex: 1; padding: 10px; border: 0; border-radius: 999px; background: transparent; font: 800 14px var(--body); }
  .cmp-days button[aria-pressed="true"] { background: var(--volt); }
  .cmp-box { height: 400px; border-radius: 26px; }
  .cmp-pane { padding: 26px 22px; align-content: start; }
  .cmp-pane > :not(.cp-fig) { width: 100%; }
  .cmp-pane.fri { justify-items: start; text-align: left; }
  .fri .cp-stats { justify-content: flex-start; }
  .cp-fig, .mon .cp-fig, .fri .cp-fig { left: auto; right: 14px; height: 34%; }
  .cmp-line, .cmp-range { display: none; }
  .cmp-box .fri { transition: clip-path .7s var(--ease-out); }
}

/* ---------- The greats: the app's real Theatre and Learn screens (screens.js), playing ---------- */
body.story-page .learn { padding: 110px 0 100px; }
.gp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 940px; margin: 48px auto 0; justify-items: center; }
@media (min-width: 1100px) { .gp-real .phone-mock { --s: .8; } }
.gp { margin: 0; text-align: center; }
.gp figcaption { margin-top: 26px; font-size: 15px; opacity: .85; max-width: 320px; margin-left: auto; margin-right: auto; }
.gp figcaption b { display: block; margin-bottom: 2px; font: 800 18px var(--body); color: var(--volt); }
.gp-real .phone-mock { --s: .72; margin: 0 auto; }
.gp-real .scr { box-shadow: 0 0 0 11px #07211F, 0 0 0 12.5px #1D3B38, 0 50px 90px -30px rgba(0, 0, 0, .7); }
.gx-finger { position: absolute; left: 0; top: 0; z-index: 20; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255, 255, 255, .35); border: 3px solid #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); opacity: 0; transform: translate(calc(var(--fx, 200px) + 90px), calc(var(--fy, 400px) + 260px)); pointer-events: none; }
.gx-player, .gx-sheet { position: absolute; z-index: 19; left: 14px; right: 14px; bottom: 18px; pointer-events: none; }
.gx-player { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 24px; background: var(--volt); color: var(--obsidian); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7); transform: translateY(150%); }
.gx-pp { display: flex; gap: 4px; flex: none; } .gx-pp i { width: 5px; height: 18px; border-radius: 2px; background: var(--obsidian); }
.gx-t { display: grid; flex: none; text-align: left; } .gx-t b { font: 800 14px var(--body); } .gx-t small { font: 600 12px var(--body); opacity: .7; }
.gx-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 26px; } .gx-wave i { flex: 1; height: 100%; border-radius: 2px; background: var(--obsidian); transform: scaleY(.3); }
.gx-clock { flex: none; font: 800 14px var(--body); font-variant-numeric: tabular-nums; }
.gx-sheet { left: 0; right: 0; bottom: 0; display: grid; gap: 8px; padding: 24px 24px 34px; border-radius: 30px 30px 48px 48px; background: var(--obsidian); color: #FFF7EE; text-align: left; transform: translateY(105%); }
.gx-sheet small { font: 800 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--volt); }
.gx-sheet b { font: 850 30px/.95 var(--display); font-stretch: 70%; text-transform: uppercase; }
.gx-by { font: 600 14px var(--body); opacity: .7; }
.gx-prog { height: 6px; margin-top: 6px; border-radius: 3px; background: rgba(255, 247, 238, .2); overflow: hidden; } .gx-prog i { display: block; height: 100%; background: var(--volt); transform: scaleX(.04); transform-origin: left; }
.gx-tags { display: flex; gap: 8px; } .gx-tags i { padding: 5px 11px; border-radius: 999px; background: var(--volt); color: var(--obsidian); font: 800 12px var(--body); font-style: normal; }
/* One nine-second loop: the finger comes in and taps, the line lights and its notes pop, the player rises */
.go .gx-finger { animation: gx-finger 9s infinite; }
.go .g-theatre .gx-player { animation: gx-up 9s infinite; }
.go .g-learn .gx-sheet { animation: gx-up2 9s infinite; }
.go .gx-wave i { animation: wv .8s ease-in-out infinite; }
.go .gx-wave i:nth-child(2n) { animation-duration: 1.1s; } .go .gx-wave i:nth-child(3n) { animation-duration: .6s; } .go .gx-wave i:nth-child(5n) { animation-delay: -.3s; }
.go .gx-prog i { animation: gx-prog 9s linear infinite; }
.go .s-theatre .ln.gx-hit { animation: gx-line 9s infinite; }
.go .s-theatre .ln.gx-hit .np span { animation: gx-pop 9s infinite; }
.go .s-theatre .ln.gx-hit .np span + span { animation-name: gx-pop2; }
.go .s-learn .pc.gx-hit { animation: gx-press 9s infinite; }
@keyframes gx-finger { 0%, 4% { opacity: 0; transform: translate(calc(var(--fx) + 90px), calc(var(--fy) + 260px)); } 12% { opacity: 1; transform: translate(var(--fx), var(--fy)); } 15% { transform: translate(var(--fx), var(--fy)) scale(.78); } 18% { opacity: 1; transform: translate(var(--fx), var(--fy)) scale(1); } 25%, 100% { opacity: 0; transform: translate(var(--fx), var(--fy)); } }
@keyframes gx-line { 0%, 15% { background: rgba(255, 224, 1, .1); } 18%, 92% { background: rgba(255, 224, 1, .32); } 100% { background: rgba(255, 224, 1, .1); } }
@keyframes gx-pop { 0%, 20% { transform: scale(.6); opacity: .3; } 25%, 92% { transform: none; opacity: 1; } 100% { transform: scale(.6); opacity: .3; } }
@keyframes gx-pop2 { 0%, 26% { transform: scale(.6); opacity: .3; } 31%, 92% { transform: none; opacity: 1; } 100% { transform: scale(.6); opacity: .3; } }
@keyframes gx-press { 0%, 14% { transform: none; } 16% { transform: scale(.93); } 19%, 100% { transform: none; } }
@keyframes gx-up { 0%, 30% { transform: translateY(150%); } 37%, 92% { transform: none; } 100% { transform: translateY(150%); } }
@keyframes gx-up2 { 0%, 22% { transform: translateY(105%); } 30%, 92% { transform: none; } 100% { transform: translateY(105%); } }
@keyframes gx-prog { 0%, 30% { transform: scaleX(.04); } 92% { transform: scaleX(.55); } 100% { transform: scaleX(.04); } }
@media (max-width: 860px) and (min-width: 700px) { .gp-real .phone-mock { --s: .64; } .gp-row { gap: 20px; } }
@media (max-width: 699px) { body.story-page .learn { padding: 80px 0 70px; } .gp-row { grid-template-columns: 1fr; gap: 56px; } .gp-real .phone-mock { --s: .7; } }
@media (prefers-reduced-motion: reduce) { .gx-finger { display: none; } .gx-player, .gx-sheet { transform: none; } }

/* ---------- Your big moment comes either way: a small planner (site/bigday.js, site/menu.mjs) ---------- */
body.story-page .eway { padding: 56px 0 64px; }
.eway-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 28px; }
.ew-line { font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: clamp(34px, 4.2vw, 60px); line-height: .9; text-transform: uppercase; max-width: 640px; margin: 0; }
.ew-line span { color: var(--volt); }
.ew-btn { flex: none; }
/* When is it? · What is it? · the reps that fit: one panel, the two questions side by side */
.ew-plan { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: end; gap: 22px 36px; margin-top: 28px; padding: 22px 26px 24px; border-radius: 26px; background: rgba(255, 247, 238, .1); border: 1px solid rgba(255, 247, 238, .22); }
.ew-q { min-width: 0; }
.ew-q-h { margin: 0 0 10px; font: 800 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.eway .when-chips { margin-top: 0; justify-content: flex-start; }
.ew-reps { justify-self: end; display: flex; align-items: center; gap: 12px; margin: 0; }
.ew-reps b { font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 76px; line-height: .8; color: var(--volt); font-variant-numeric: tabular-nums; }
.ew-reps span { font: 600 15.5px/1.35 var(--body); max-width: 210px; }
/* The "What is it?" menu: the button looks like a chosen chip; the list opens as a card under it */
.ew-menu { position: relative; }
.ew-menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 2px solid var(--paper); background: var(--paper); color: var(--ink); font: 700 15px var(--body); cursor: pointer; transition: transform .15s var(--ease-out), box-shadow .15s; box-shadow: 0 3px 0 rgba(22, 20, 15, .25); }
.ew-menu-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 rgba(22, 20, 15, .25); }
.ew-menu-btn:focus-visible { outline: 3px solid var(--volt); outline-offset: 3px; }
.ew-menu-btn .ew-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--volt); }
.ew-ico svg { width: 18px; height: 18px; }
.ew-chev { width: 18px; height: 18px; margin-left: 2px; transition: transform .2s var(--ease-out); }
.ew-menu-btn[aria-expanded="true"] .ew-chev { transform: rotate(180deg); }
.ew-menu-list { position: absolute; z-index: 20; left: 0; top: calc(100% + 10px); width: min(392px, calc(100vw - 32px)); margin: 0; padding: 8px; list-style: none; border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 60px rgba(22, 20, 15, .35), 0 2px 0 rgba(22, 20, 15, .08); transform-origin: 24px 0; animation: ew-pop .18s var(--ease-out); outline: none; }
.ew-menu-list[hidden] { display: none; }
.ew-menu-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 15px; cursor: pointer; }
.ew-menu-list li .ew-ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--cream, #F3ECDF); }
.ew-menu-list li .ew-ico svg { width: 20px; height: 20px; }
.ew-menu-list li.active { background: rgba(255, 224, 1, .32); }
.ew-menu-list li[aria-selected="true"] .ew-ico { background: var(--volt); }
.ew-opt { display: grid; gap: 2px; min-width: 0; }
.ew-opt b { font: 800 15.5px/1.2 var(--body); }
.ew-opt small { font: 500 13px/1.35 var(--body); color: var(--mute, #6E675C); }
.ew-tick { width: 20px; height: 20px; color: var(--red); opacity: 0; }
.ew-menu-list li[aria-selected="true"] .ew-tick { opacity: 1; }
.ew-menu-list:focus-visible li.active { box-shadow: inset 0 0 0 2px var(--ink); }
@keyframes ew-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@media (max-width: 1099px) {
  .ew-plan { grid-template-columns: auto minmax(0, 1fr); }
  .ew-reps { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 699px) {
  .eway-row { flex-direction: column; align-items: stretch; }
  .ew-btn { width: 100%; }
  .ew-plan { grid-template-columns: 1fr; padding: 18px 16px 20px; border-radius: 22px; }
  .eway .when-chips button { padding: 8px 12px; font-size: 14px; }
  .ew-menu-btn { width: 100%; }
  .ew-menu-btn .ew-chev { margin-left: auto; }
  .ew-menu-list { width: 100%; }
  .ew-reps b { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) { .ew-menu-list { animation: none; } .ew-menu-btn, .ew-chev { transition: none; } }

/* ---------- Pricing: a little lift ---------- */
.plan2 { transition: transform .3s var(--ease-spring), box-shadow .3s; }
.plan2:hover { transform: translateY(-6px); }

/* ---------- Two minutes to set up ---------- */
.setup { padding: 110px 0 100px; }
.steps3 { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; counter-reset: st; }
.step3 { position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px 22px 28px; border-radius: 30px; background: #fff; text-align: center; box-shadow: var(--shadow); counter-increment: st; }
.step3::before { content: counter(st); position: absolute; top: 18px; left: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--obsidian); color: var(--volt); font: 900 16px var(--body); }
.step3 > b { margin-top: 14px; font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 30px; line-height: 1; text-transform: uppercase; }
.step3 > span { font-size: 15.5px; color: #4A443A; }
.sp-phone { position: relative; display: grid; align-content: center; justify-items: center; gap: 12px; width: 176px; height: 228px; padding: 16px; border: 6px solid var(--obsidian); border-radius: 30px; background: #FBF7F0; overflow: hidden; }
.sp-file { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border-radius: 14px; background: #fff; text-align: left; }
.sp-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--volt); }
.sp-file b { display: block; font: 800 13px var(--body); }
.sp-file small { font-size: 11.5px; opacity: .6; }
.sp-bar { width: 100%; height: 8px; border-radius: 4px; background: #E6DFD1; overflow: hidden; }
.sp-bar i { display: block; height: 100%; background: var(--obsidian); transform: scaleX(0); transform-origin: left; }
.sp-done, .sp-ok { padding: 5px 10px; border-radius: 999px; background: var(--volt); font: 800 11.5px var(--body); opacity: 0; }
.sp-q { font: 700 13px/1.35 var(--body); text-align: center; }
.sp-toggle { position: relative; width: 52px; height: 30px; border-radius: 15px; background: #D9D2C4; }
.sp-toggle i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(22, 20, 15, .3); }
.sp-g { width: 100%; padding: 10px; border-radius: 12px; border: 2px solid var(--obsidian); background: #fff; font: 800 12.5px var(--body); text-align: center; }
.sp-or { font-size: 11px; opacity: .6; }
.sp-code { display: flex; gap: 6px; }
.sp-code i { display: grid; place-items: center; width: 26px; height: 32px; border-radius: 8px; background: #fff; border: 2px solid #D9D2C4; font: 800 15px var(--body); font-style: normal; color: transparent; }
.sp-hi { position: absolute; right: 6px; bottom: -4px; opacity: 0; }
.go .s1 .sp-bar i { animation: fillx 1.2s var(--ease-out) .3s forwards; }
.go .s1 .sp-done { animation: fadeup .3s 1.5s forwards; }
.go .s2 .sp-toggle { animation: tbg .3s 2.2s forwards; }
.go .s2 .sp-toggle i { animation: tknob .3s 2.2s forwards; }
.go .s2 .sp-ok { animation: fadeup .3s 2.5s forwards; }
.go .s3 .sp-code i { animation: code .2s forwards; }
.go .s3 .sp-code i:nth-child(1) { animation-delay: 3.1s; } .go .s3 .sp-code i:nth-child(2) { animation-delay: 3.3s; } .go .s3 .sp-code i:nth-child(3) { animation-delay: 3.5s; } .go .s3 .sp-code i:nth-child(4) { animation-delay: 3.7s; }
.go .s3 .sp-hi { animation: fadeup .4s 4s forwards; }
.go .step3 { animation: steplit 4.6s; }
.go .s2 { animation-delay: 1.6s; } .go .s3 { animation-delay: 2.9s; }
@keyframes fillx { to { transform: scaleX(1); } }
@keyframes tbg { to { background: #2E9E5B; } }
@keyframes tknob { to { transform: translateX(22px); } }
@keyframes code { to { color: var(--obsidian); border-color: var(--obsidian); } }
@keyframes steplit { 0%, 100% { box-shadow: var(--shadow); } 10%, 30% { box-shadow: 0 0 0 3px var(--obsidian), var(--shadow); } }
.setup-cta { display: flex; align-items: center; justify-content: center; gap: 14px 18px; flex-wrap: wrap; margin-top: 36px; }
.setup-cta .btn { font-size: 17px; padding: 17px 26px; }
.setup-after { font: 600 15px var(--body); opacity: .7; }
.needs { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.needs li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; background: #fff; font: 600 14px var(--body); box-shadow: 0 1px 0 rgba(22, 20, 15, .06); }
.needs svg { width: 18px; height: 18px; }
details.more { margin-top: 30px; border-radius: 26px; background: #fff; box-shadow: var(--shadow); }
details.more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 26px; font: 700 16px var(--body); cursor: pointer; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
details.more[open] > summary::after { transform: rotate(-135deg); }
.more-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; padding: 0 26px 26px; }
.more-grid .store-wrap { margin-top: 0; }
.more-side .card { box-shadow: none; border: 1px solid #ECE5D7; }
.more-side .tm { margin-top: 14px; font-size: 12px; opacity: .6; }
@media (max-width: 1099px) { .steps3 { gap: 14px; } .sp-phone { width: 150px; height: 210px; } .more-grid { grid-template-columns: 1fr; } }
@media (max-width: 699px) {
  .setup { padding: 80px 0 70px; }
  .steps3 { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .step3 { grid-template-columns: auto 1fr; grid-template-rows: auto auto; justify-items: start; align-items: center; column-gap: 16px; padding: 16px 18px 16px 16px; text-align: left; }
  .step3::before { top: 10px; left: 10px; width: 28px; height: 28px; font-size: 14px; z-index: 1; }
  .sp-phone { grid-row: span 2; width: 112px; height: 150px; padding: 10px; gap: 8px; border-width: 5px; border-radius: 22px; }
  .sp-file { padding: 6px; gap: 6px; } .sp-ic { width: 24px; height: 24px; } .sp-file b { font-size: 11px; } .sp-file small { font-size: 10px; }
  .sp-q { font-size: 11px; } .sp-g { font-size: 10.5px; padding: 7px; } .sp-code i { width: 18px; height: 24px; font-size: 12px; }
  .sp-hi { display: none; }
  .step3 > b { margin-top: 0; font-size: 26px; align-self: end; }
  .step3 > span { align-self: start; font-size: 14.5px; }
  .setup-cta .btn { width: 100%; }
  .needs { justify-content: flex-start; gap: 8px; } .needs li { padding: 8px 12px; font-size: 13px; }
  details.more > summary { padding: 18px 20px; font-size: 15px; } .more-grid { padding: 0 14px 18px; }
}

/* ---------- Privacy: three promises ---------- */
.promise2 { padding: 110px 0 100px; }
.pv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.pv { padding: 30px 26px; border-radius: 30px; background: rgba(247, 244, 236, .06); border: 1px solid rgba(247, 244, 236, .12); }
.pv-ic { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 24px; background: var(--volt); color: var(--obsidian); }
.pv-ic svg { width: 42px; height: 42px; }
.pv-slash { stroke-dasharray: 46; stroke-dashoffset: 46; }
.pv.in .pv-slash { animation: draw .6s .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.pv.in .pv-spark { transform-origin: 24px 22px; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: scale(.82) rotate(12deg); } }
.pv.in .pv-lock { animation: blink 1.6s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.pv b { display: block; margin-top: 20px; font: 800 21px/1.25 var(--body); }
.pv p { margin-top: 8px; font-size: 16px; opacity: .78; }
.promise2 .privlinks { margin-top: 28px; font-size: 15px; opacity: .85; }
.promise2 .privlinks a { color: var(--volt); }
@media (max-width: 860px) { .pv-grid { grid-template-columns: 1fr; gap: 12px; } .pv { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; padding: 20px; } .pv-ic { grid-row: span 2; width: 60px; height: 60px; border-radius: 18px; } .pv-ic svg { width: 32px; height: 32px; } .pv b { margin-top: 0; font-size: 18px; } .pv p { margin-top: 4px; font-size: 15px; } }
@media (max-width: 699px) { .promise2 { padding: 80px 0 70px; } }

/* ---------- Before you install (FAQ) ---------- */
body.story-page .faq2 { padding: 110px 0 100px; }
.faq2 .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.faq2 .faq-side { position: sticky; top: 100px; }
.faq2 .faq-fig { display: block; margin-top: 26px; }
.faq2 .faq-fig .fam { height: 130px !important; }
.faq-list details { margin-bottom: 10px; padding: 0 24px; border-radius: 22px; background: #fff; box-shadow: 0 1px 0 rgba(22, 20, 15, .06); border: 0; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 0; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary h3 { font: 700 19px/1.3 var(--body); margin: 0; }
.faq-list summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--soft-y); font: 700 20px var(--body); transition: transform .25s; }
.faq-list details[open] summary::after { transform: rotate(45deg); background: var(--volt); }
.faq-list details p { padding: 0 0 20px; font-size: 16.5px; line-height: 1.6; color: #3A352D; max-width: 640px; }
.faq-list details p a { font-weight: 700; color: var(--obsidian); text-decoration-color: var(--red); text-decoration-thickness: 2px; }
@media (max-width: 900px) { .faq2 .wrap { grid-template-columns: 1fr; gap: 24px; } .faq2 .faq-side { position: static; } .faq2 .faq-fig { display: none; } }
@media (max-width: 699px) { body.story-page .faq2 { padding: 80px 0 70px; } .faq-list details { padding: 0 18px; border-radius: 18px; } .faq-list summary { padding: 16px 0; } .faq-list summary h3 { font-size: 17px; } .faq-list details p { font-size: 15.5px; } }

/* ---------- The finale ---------- */
body.story-page .fin2 { padding: 100px 0 110px; text-align: center; }
.fin-art { position: relative; max-width: 780px; margin: 0 auto; }
.fin-art img { width: 100%; height: auto; animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px) rotate(-.6deg); } }
.confetti { position: absolute; inset: -6% 0 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -20px; left: var(--x); width: 10px; height: 16px; border-radius: 3px; background: var(--c); opacity: 0; animation: fall 4.6s linear infinite; animation-delay: var(--d); }
.confetti i:nth-child(1) { --x: 6%; --d: 0s; --c: #D2352A; } .confetti i:nth-child(2) { --x: 14%; --d: 1.2s; --c: #16140F; } .confetti i:nth-child(3) { --x: 22%; --d: 2.4s; --c: #fff; } .confetti i:nth-child(4) { --x: 30%; --d: .6s; --c: #0B3E42; }
.confetti i:nth-child(5) { --x: 38%; --d: 3.1s; --c: #D2352A; } .confetti i:nth-child(6) { --x: 46%; --d: 1.8s; --c: #fff; } .confetti i:nth-child(7) { --x: 54%; --d: .3s; --c: #16140F; } .confetti i:nth-child(8) { --x: 62%; --d: 2.8s; --c: #D2352A; }
.confetti i:nth-child(9) { --x: 70%; --d: 1.5s; --c: #0B3E42; } .confetti i:nth-child(10) { --x: 78%; --d: 3.6s; --c: #fff; } .confetti i:nth-child(11) { --x: 86%; --d: .9s; --c: #D2352A; } .confetti i:nth-child(12) { --x: 94%; --d: 2.1s; --c: #16140F; }
.confetti i:nth-child(13) { --x: 50%; --d: 4s; --c: #F28C28; } .confetti i:nth-child(14) { --x: 18%; --d: 3.4s; --c: #F28C28; }
@keyframes fall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(560px) rotate(540deg); } }
.z2h { list-style: none; display: flex; justify-content: center; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 30px auto 6px; }
.z2h li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.z2h li b { padding: 3px 9px; border-radius: 999px; background: var(--obsidian); color: var(--volt); font: 800 12px var(--body); }
.z2h li span { font: 500 18px var(--serif); }
.z2h li:nth-child(1) span { color: var(--red); }
.z2h li:not(:last-child)::after { content: "→"; margin-left: 8px; font: 700 18px var(--body); opacity: .5; }
.z2h li:last-child { background: var(--obsidian); color: #FFF7EE; } .z2h li:last-child b { background: var(--volt); color: var(--obsidian); }
.fin2 .s-title { margin-top: 26px; }
.fin-btn { margin-top: 26px; font-size: 18px; padding: 18px 30px; }
@media (max-width: 699px) {
  body.story-page .fin2 { padding: 70px 0 120px; }
  .z2h { flex-direction: column; align-items: stretch; }
  .z2h li { justify-content: space-between; }
  .z2h li:not(:last-child)::after { content: "↓"; }
  .fin-btn { width: 100%; }
}

/* ---------- Footer: the brand's obsidian ---------- */
body.story-page .foot { background: var(--obsidian); color: #BDB6A8; }
@media (max-width: 699px) {
  body.story-page .foot .cols { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  body.story-page .foot .cols > div:first-child { grid-column: 1 / -1; }
  body.story-page .foot .fine { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse, .fin-art img, .confetti i, .c-tap, .gp-wave i, .wave-bg i { animation: none !important; }
  .story, .ch-chip, .wk-day, .wk-sc, .st-coach, .st-after, .st-stamp { transition: none !important; }
  .confetti { display: none; }
}

/* ---------- The hero's picker, cycling: a thin timer beside the question ---------- */
.pk-timer { display: none; width: 54px; height: 3px; margin-left: 10px; vertical-align: middle; border-radius: 2px; background: color-mix(in srgb, currentColor 18%, transparent); overflow: hidden; }
.picker.rotating .pk-timer { display: inline-block; }
.pk-timer i { display: block; height: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; animation: fillx 3.6s linear forwards; }

/* ---------- The download form: make it yours (optional, one question at a time) ---------- */
.ga-about { margin-top: 18px; padding-top: 18px; border-top: 1px dashed #E6DFD1; }
.ga-about[hidden], .ga-about [hidden], .ga-thanks[hidden] { display: none !important; }
.ga-about.in { animation: fadeup .35s; }
.ga-about h3 { margin: 6px 0 12px; font: 800 20px/1.25 var(--body); }
.ab-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-chips button { padding: 9px 14px; border: 1.5px solid #D9D2C4; border-radius: 999px; background: #fff; font: 600 14.5px var(--body); transition: background-color .15s, color .15s, border-color .15s; }
.ab-chips button[aria-pressed="true"] { background: var(--obsidian); border-color: var(--obsidian); color: var(--volt); }
.ab-date { display: flex; gap: 8px; }
.ab-date input { width: 70px; padding: 12px; border: 1.5px solid #D9D2C4; border-radius: 12px; font: 600 16px var(--body); text-align: center; }
.ab-date input:last-child { width: 96px; }
.ab-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.ab-dots { display: flex; gap: 5px; margin-right: auto; }
.ab-dots i { width: 8px; height: 8px; border-radius: 4px; background: #E6DFD1; transition: width .25s; }
.ab-dots i.on { width: 20px; background: var(--obsidian); }
.ab-dots i.done { background: var(--red); }
.ab-skip { padding: 10px; border: 0; background: none; font: 700 14px var(--body); opacity: .6; }
.ab-next { padding: 11px 18px; font-size: 15px; }
.ga-thanks { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--soft-y); font-size: 16px; }
.ga-thanks .ga-bubble { width: 46px; flex: none; }

/* Headlines on the dark and teal sections take yellow, not red */
.on-dark .s-title em { color: var(--volt); }

/* ---------- Phone polish ---------- */
@media (max-width: 860px) { .guide { display: none !important; } }
@media (max-width: 480px) {
  body.story-page .nav .wrap { gap: 8px; }
  .nav-menu { width: 42px; height: 42px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .nav-menu svg { width: 20px; height: 20px; }
  body.story-page .nav .btn { padding: 10px 13px; font-size: 13.5px; }
}
/* A small phone: the header's pieces fit, Download whole and on one line (360px cut it off in English;
   Japanese wrapped). The Android robot goes first, then, below 340px, the wordmark (the ensō stays). */
.nav .btn { white-space: nowrap; }
@media (max-width: 380px) {
  body:is(.story-page, .intl) .nav :is(.wrap, nav) { gap: 6px; }
  body:is(.story-page, .intl) .nav .btn { padding: 10px 11px; font-size: 13px; }
  .nav .btn .droid { display: none; }
  .nav .wordmark { font-size: 26px; }
  .nav .langs summary { padding: 0 10px; }
  .nav .langs ul { position: fixed; top: 74px; inset-inline-end: 12px; }
}
@media (max-width: 340px) { .nav .wordmark { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* Try and download stay visible over the dark and teal sections too */
html[data-page="#16140F"] .thumbbar .btn-ink, html[data-page="#0B3E42"] .thumbbar .btn-ink { background: var(--volt); color: var(--obsidian); }
/* The film's phone, smaller on a phone */
@media (max-width: 699px) { .filmsec .film-phone { transform: scale(.82); transform-origin: top center; margin-bottom: -118px; } }
/* The setup steps' little phones, tidy at phone size */
@media (max-width: 699px) {
  .sp-file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52px; }
  .sp-file small { display: none; }
  .sp-done, .sp-ok { font-size: 10px; padding: 4px 8px; white-space: nowrap; }
  .sp-q { font-size: 10.5px; line-height: 1.3; }
  .sp-toggle { width: 44px; height: 26px; } .sp-toggle i { width: 20px; height: 20px; }
  @keyframes tknob { to { transform: translateX(18px); } }
  .sp-or { display: none; }
}
/* Tablet: the words in each half stay clear of the line; the greats sit side by side */
.cmp-pane > :not(.cp-fig) { width: min(44%, calc(50% - 72px)); }
@media (max-width: 699px) { .cmp-pane > :not(.cp-fig) { width: 100%; } }
/* Each half of the compare card is its own layer, so Monday's words never show through Friday */
.cmp-pane { isolation: isolate; }
.cmp-pane.fri { z-index: 1; }
/* Phone: the fillers float inside the stage, not over the headline */
@media (max-width: 699px) { .nh-stage { overflow: hidden; border-radius: 24px; } }
/* The stamp never sits on a name */
.st-top { padding-right: 78px; }
@media (max-width: 699px) { .st-top { padding-right: 84px; } }

/* ---------- Details: what's new and the checksum, tidy ---------- */
.more-side .card { padding: 22px 24px; border-radius: 22px; background: #fff; border: 1px solid #ECE5D7; }
.more-side .card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 800 19px var(--body); }
.more-side .card h3 img { width: 34px; height: 34px; object-fit: contain; }
.more-side .news { list-style: none; display: grid; gap: 8px; font-size: 15.5px; line-height: 1.45; }
.more-side .news li::before { content: "✦ "; color: var(--red); }
.more-side .sha { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--mute); }
.more-side .sha code { display: block; margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: #F6F2EA; font-size: 11.5px; word-break: break-all; }

/* ---------- Beta, small, under the wordmark ---------- */
.logo .wordmark { position: relative; }
.logo .beta { position: absolute; right: -2px; top: 100%; margin-top: -4px; padding: 2px 6px; border-radius: 999px; background: var(--red); color: #fff; font: 800 9.5px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.foot .logo .beta { background: var(--volt); color: var(--obsidian); }
/* The hero's first line names what Wordojo is (a small pill), then the big words */
.nh-title .nh-brand { display: flex; width: fit-content; text-wrap: balance; margin-bottom: 18px; font-stretch: normal; line-height: 1.2; letter-spacing: .1em; }
.nh-title { margin-top: 0; }
.st-head .s-title .star { font-size: .42em; vertical-align: super; line-height: 0; margin-left: .04em; color: var(--red); text-decoration: none; }

/* ---------- The try-it card: one-tap examples, the reasons for each cut, and the next step ---------- */
.ex-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.ex-chips button { padding: 7px 12px; border: 1.5px solid rgba(22, 20, 15, .18); border-radius: 999px; background: #fff; color: var(--obsidian); font: 700 13px var(--body); transition: background-color .15s, color .15s; }
.ex-chips button:hover { border-color: var(--obsidian); }
.ex-chips button[aria-pressed="true"] { background: var(--obsidian); border-color: var(--obsidian); color: var(--volt); }
.rep-why { list-style: none; display: grid; gap: 6px; margin-top: 12px; }
.rep-why[hidden] { display: none; }
.rep-why li { font-size: 13.5px; line-height: 1.4; opacity: 0; }
.dojo.ran .rep-why li { animation: fadeup .35s ease-out var(--d) forwards; }
.rep-why li b { margin-right: 4px; font-weight: 700; color: var(--red); }
.dojo[data-side="say"] .rep-why li b { color: #FF8A7E; }
.rep-seal .rep-next p { font-size: 14px; line-height: 1.45; }
.rep-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.rep-cta .btn { padding: 12px 18px; border-radius: 14px; font-size: 15px; }
.challenge-banner { margin-top: 18px; padding: 16px 18px; border-radius: 18px; background: var(--obsidian); color: #F7F4EC; }
.challenge-banner p { margin: 0 0 12px; font-size: 16px; line-height: 1.45; }
.challenge-banner p:last-child { margin: 0; }
.challenge-banner b { color: var(--volt); }
.challenge-banner .btn { padding: 11px 16px; border-radius: 14px; font-size: 15px; }
.challenge-banner .btn[hidden] { display: none; }
.rep-again { padding: 6px 2px; border: 0; background: none; color: inherit; font: 700 14px var(--body); text-decoration: underline; text-underline-offset: 3px; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .rep-why li { opacity: 1; animation: none !important; } }
.type-instead { display: inline-block; margin-top: 10px; padding: 4px 0; border: 0; background: none; color: inherit; font: 700 13.5px var(--body); text-decoration: underline; text-underline-offset: 3px; opacity: .85; }
/* In your turn, "Watch the demo" steps back so the next step leads; the words stay level with the card */
.dojo[data-mode="try"] .dojo-go { background: transparent !important; color: inherit !important; box-shadow: inset 0 0 0 1.5px currentColor !important; }
@media (min-width: 1100px) { .try-grid { align-items: start; } .try-copy { position: sticky; top: 140px; padding-top: 120px; } }

/* ---------- Speed: sections below the fold aren't laid out or painted until you scroll near them ---------- */
main > section:not(.nhero):not(.trysec) { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
/* ---------- Contrast and buttons (accessibility pass) ---------- */
.pk-q, .pk-g { opacity: 1; }
.nh-lede { opacity: 1; }
.st-tap { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; opacity: .85; }
button.c-tap { border: 0; cursor: pointer; }
.foot .foot-h { font-family: var(--display); font-stretch: 125%; font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 10px; }
@keyframes chbar { to { width: 100%; } }
/* Contrast: the story teaser stays readable through its blur; small print on yellow at full strength */
.st-after { opacity: 1; }
.film-note { opacity: 1; color: #4A443A; }

/* ---------- Languages: the globe menu in the header and the list in the footer (site-intl.mjs) ---------- */
.langs { position: relative; }
.langs summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--ink); font: 700 14px var(--body); cursor: pointer; list-style: none; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary svg { width: 18px; height: 18px; }
.langs ul { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 60; min-width: 190px; margin: 0; padding: 8px; list-style: none; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px rgba(22, 20, 15, .18); }
.langs li a { display: block; padding: 10px 12px; border-radius: 10px; font: 600 15px var(--body); color: var(--ink); text-decoration: none; }
.langs li a:hover, .langs li a:focus-visible { background: var(--cream); }
.langs li a[aria-current="page"] { background: var(--volt); }
.foot .langs-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.foot .langs-foot a { color: inherit; }
@media (max-width: 560px) { .langs summary span { display: none; } .langs summary { padding: 0 11px; } }
@media (max-width: 380px) { .nav .langs summary { min-height: 40px; padding: 0 9px; } }

/* ---------- The road Today lines up for your big day (site/road.mjs, drawn by site/bigday.js) ---------- */
.ew-road { margin-top: 30px; }
.ew-road-h { margin: 0; font: 800 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.road { display: flex; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.rd { flex: var(--days) 1 0; min-width: 138px; display: grid; align-content: start; gap: 4px; padding: 14px 16px 16px; border-radius: 18px; background: rgba(255, 247, 238, .12); animation: rd-in .45s var(--ease-out) both; }
.rd:nth-child(2) { animation-delay: .06s; } .rd:nth-child(3) { animation-delay: .12s; } .rd:nth-child(4) { animation-delay: .18s; } .rd:nth-child(5) { animation-delay: .24s; }
.rd::before { content: ""; height: 6px; margin-bottom: 8px; border-radius: 3px; background: rgba(255, 247, 238, .4); }
.rd.now::before { background: var(--volt); }
.rd b { font-family: var(--display); font-stretch: 75%; font-weight: 900; font-size: 22px; line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.rd-n { font: 700 13px var(--body); opacity: .8; }
.rd small { font: 500 14.5px/1.35 var(--body); }
.rd-day { flex: 0 0 180px; background: var(--volt); color: var(--ink); }
.rd-day::before { background: var(--ink); }
.ew-road-note { max-width: 660px; margin: 14px 0 0; font: 500 14.5px/1.45 var(--body); opacity: .9; }
@keyframes rd-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 860px) {
  .road { flex-direction: column; gap: 6px; }
  .rd, .rd-day { position: relative; flex: none; min-width: 0; grid-template-columns: 1fr auto; column-gap: 12px; padding: 12px 14px 12px 24px; }
  .rd::before { position: absolute; left: 10px; top: 12px; bottom: 12px; width: 5px; height: auto; margin: 0; }
  .rd b { font-size: 19px; } .rd-n { align-self: center; text-align: right; } .rd small { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .rd { animation: none; } }

/* ---------- You, then and now (the app's card on Today), under Monday you, Friday you ---------- */
.tn-show { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 28px 48px; align-items: center; margin-top: 48px; }
.tn-copy h3 { margin: 8px 0 12px; font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: clamp(34px, 4vw, 52px); line-height: .92; text-transform: uppercase; }
.tn-copy p { max-width: 520px; margin: 0; font: 500 17px/1.5 var(--body); }
.tn-demo { display: grid; gap: 10px; padding: 22px; border-radius: 28px; background: var(--obsidian); color: #F7F4EC; box-shadow: var(--shadow); }
.tn-ey { font: 800 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--volt); }
.tn-r { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--obs-2); }
.tn-r.now { box-shadow: inset 0 0 0 2px var(--volt); }
.tn-p { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--volt); color: var(--obsidian); }
.tn-p svg { width: 18px; height: 18px; margin-left: 2px; }
.tn-r b { display: block; font: 800 16px var(--body); }
.tn-r small { font: 500 13.5px var(--body); color: #BDB6A8; }
.tn-gap { margin: 2px 0 0; font: 500 13.5px var(--body); color: #BDB6A8; }
.tn-share { justify-self: start; padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(247, 244, 236, .4); font: 700 14px var(--body); }
.tn-fine { font: 500 12px var(--body); color: #9C9486; }
@media (max-width: 860px) { .tn-show { grid-template-columns: 1fr; margin-top: 34px; } .tn-demo { max-width: 420px; } }