/* wordojo.app's "Why now" (#why): a four-beat film you scroll through, then the 3-tap speaker-type
   quiz. Markup: scripts/site-why.mjs. Behaviour: site/whynow.js.
   The film's plain styles are its end state (what no-JS and reduced motion show). Each beat's start
   state lives under .wf.is-live, which whynow.js sets only when motion is allowed. */
.why2 { position: relative; background: #16140F; color: #F7F4EC; }
.why2 [hidden] { display: none !important; } /* the banner, the Try button and the panels set their own display */
.why2 .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.why2 .fam { --fam-ink: #F7F4EC; }
.why2 .btn-soft { background: rgba(22, 20, 15, .08); color: #16140F; box-shadow: none; }
.why2 .btn svg { width: 20px; height: 20px; }
html[data-why-on] .thumbbar { transform: translateY(150%); visibility: hidden; transition: transform .45s, visibility 0s .45s; }

/* The stage: full screen, held in place while four screens of scroll pass under it. */
.wf { position: relative; }
.wf.is-live .wf-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.wf-steps { display: none; }
.wf.is-live .wf-steps { display: block; margin-top: -100vh; margin-top: -100svh; }
.wf-steps i { display: block; height: 100vh; height: 100svh; }
.wf-wrap { position: relative; padding-top: 110px; padding-bottom: 40px; }
.wf.is-live .wf-wrap { height: 100%; display: grid; grid-template-rows: auto 1fr; padding-top: 96px; }
.wf-eye { color: var(--volt); }
.wf-rail { position: absolute; inset-inline-end: var(--gut); top: 50%; transform: translateY(-50%); display: none; gap: 14px; margin: 0; padding: 0; list-style: none; z-index: 3; }
.wf.is-live .wf-rail { display: grid; }
.wf-rail button { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 40px; background: none; border: 0; padding: 4px 0; color: inherit; font: 700 12px var(--body); letter-spacing: .06em; text-transform: uppercase; opacity: .6; cursor: pointer; transition: opacity .3s; }
.wf-rail button::after { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; transition: background-color .3s, border-color .3s, transform .3s; }
.wf-rail button:hover, .wf-rail button[aria-current="step"] { opacity: 1; }
.wf-rail button[aria-current="step"]::after { background: var(--volt); border-color: var(--volt); transform: scale(1.35); }
.wf-rail button:focus-visible { outline: 2px solid var(--volt); outline-offset: 4px; }

.wf-beats { position: relative; }
.wf-beat { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 56px; padding: 56px 0; }
.wf-beat:nth-child(even) .wf-art { order: 2; }
.wf.is-live .wf-beat { position: absolute; inset: 0; padding: 0; padding-inline-end: calc(var(--gut) + 150px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.wf.is-live .wf-beat.is-on { opacity: 1; visibility: visible; transition: opacity .35s; }
.wf-art { position: relative; display: grid; place-items: center; min-height: 380px; }
.wf-line { margin: 0; font-family: var(--display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(40px, min(6.2vw, 10.5vh), 100px); font-size: clamp(40px, min(6.2vw, 10.5svh), 100px); line-height: .9; letter-spacing: -.01em; }
.wf-line .bl-a, .wf-line .bl-b { display: block; }
:lang(ja) .wf-line { word-break: auto-phrase; } /* no one-character orphans */
/* The page skips layout for offscreen sections (land.css); the film measures its lines at load, and
   its sticky stage needs real layout. */
#why { content-visibility: visible; }
.wf-probe { position: absolute; top: 0; inset-inline-start: 0; visibility: hidden; pointer-events: none; }
.wf-probe span { display: block; }
.wf-line .bl-b { font-style: normal; color: var(--volt); }
.wf-beat.is-go .bl-a, .wf-beat.is-go .bl-b { animation: blin .35s var(--ease-out, ease-out) both; }
.wf-beat.is-go .bl-b { animation: blin .35s var(--ease-out, ease-out) both, punch .5s cubic-bezier(.3, 1.6, .5, 1) var(--punch, 2.4s); }
@keyframes blin { from { opacity: 0; transform: translateY(16px); } }
@keyframes punch { 40% { transform: scale(1.06) rotate(-1deg); } }
/* The family: drawn into [data-fig] slots by story.js (English) and intl.js (languages); the slot sets the size. */
.wf-fig { position: absolute; z-index: 2; height: clamp(150px, 22vh, 220px); pointer-events: none; }
.wf-fig .fam { height: 100% !important; width: auto; }
.wf-fact { grid-column: 1 / -1; order: 3; margin: 0; font-size: 14px; opacity: .72; }
.wf.is-live .wf-fact { position: absolute; inset-inline-start: 0; bottom: 0; }
.wf-fact .star { color: var(--volt); text-decoration: none; font-weight: 900; margin-inline-start: 2px; }

/* Beat 1: a paragraph typed in two seconds, its AI tells lit up red. */
.b1 { --punch: 2.6s; }
.wf-doc { width: min(100%, 540px); padding: 22px 24px 26px; border-radius: 26px; background: #24211B; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.wf-doc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.wf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(247, 244, 236, .1); font: 700 13px var(--body); }
.wf-chip svg { width: 16px; height: 16px; color: var(--volt); }
.wf-clock { font-family: var(--display); font-stretch: 80%; font-weight: 800; font-size: 26px; color: var(--volt); font-variant-numeric: tabular-nums; }
.wf-text { margin: 0; min-height: 6.4em; font: 500 clamp(17px, 1.55vw, 21px)/1.55 var(--body); color: #D9D2C3; }
.wf-text .wf-caret { display: inline-block; width: 2px; height: 1.1em; margin-inline-start: 1px; background: var(--volt); vertical-align: -.15em; animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.wf-tell { color: #FFB3A8; border-radius: 4px; padding: 0 2px; background: linear-gradient(rgba(210, 53, 42, .3), rgba(210, 53, 42, .3)) no-repeat 0 0 / 100% 100%, linear-gradient(#D2352A, #D2352A) no-repeat 0 100% / 100% 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wf.is-live .wf-beat.is-go .wf-tell { animation: sweep .35s ease-out both; animation-delay: calc(var(--i) * .22s); }
@keyframes sweep { from { background-size: 0 100%, 0 2px; } }
.b1 .wf-fig { inset-inline-end: -4%; top: -6%; }

/* Beat 2: on the laptop, Tab finishes your sentence. Then the meeting: Scribble asks, the table turns
   to you, your Tab finds nothing to accept, and what comes out has its fillers lit. The scene is laid
   out in percentages of itself, so a phone sees the same picture, smaller; type grows with it where
   container units are known (cqw, after a plain fallback). */
.b2 { --punch: 3.6s; }
@keyframes wfpop { to { opacity: 1; transform: none; } }
.wf-room { container-type: inline-size; display: grid; gap: 12px; width: min(100%, 540px); }
.wf-screen { display: flex; align-items: center; gap: 16px; gap: 4cqw; padding: 3.4% 4%; border-radius: 20px; background: #24211B; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .7); }
.wf-field { flex: 1; margin: 0; font: 500 14px/1.45 var(--body); font: 500 max(13px, 3.3cqw)/1.45 var(--body); color: #D9D2C3; }
.wf-ghost { color: #F7F4EC; background: linear-gradient(var(--volt), var(--volt)) no-repeat 0 100% / 100% 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wf.is-live .wf-ghost { opacity: 0; background-size: 0 2px; }
.wf.is-live .wf-beat.is-go .wf-ghost { animation: ghost .9s linear .1s forwards; }
@keyframes ghost { 30%, 70% { opacity: .38; background-size: 0 2px; } to { opacity: 1; background-size: 100% 2px; } }
.wf-key { position: relative; flex: none; display: grid; place-items: center; width: 52px; width: max(46px, 11cqw); height: 38px; height: max(34px, 8cqw); border-radius: 10px; background: #F7F4EC; color: #16140F; font: 800 13px var(--body); font: 800 max(12px, 2.8cqw) var(--body); box-shadow: 0 4px 0 #B9B2A2; }
.wf-ok { position: absolute; top: -9px; inset-inline-end: -9px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--volt); color: #16140F; }
.wf-ok svg { width: 14px; height: 14px; stroke-width: 3; }
.wf.is-live .wf-ok { opacity: 0; transform: scale(.4); }
.wf.is-live .wf-beat.is-go .wf-key-ok { animation: press .25s ease-out .7s; }
.wf.is-live .wf-beat.is-go .wf-ok { animation: wfpop .3s cubic-bezier(.3, 1.6, .5, 1) .85s forwards; }
@keyframes press { 40% { transform: translateY(3px); } }
.wf.is-live .wf-beat.is-go .wf-screen { animation: dim .4s ease-out 1.05s forwards; }
@keyframes dim { to { opacity: .6; } }
/* The table: 100 wide by 54 high; its pieces in percentages of that box. */
.wf-table { position: relative; aspect-ratio: 100 / 54; border-radius: 22px; background: #1F1C17; overflow: hidden; }
.wf.is-live .wf-table { opacity: 0; transform: translateY(14px); }
.wf.is-live .wf-beat.is-go .wf-table { animation: wfpop .4s ease-out 1.05s forwards; }
.wf-board { position: absolute; top: 9.3%; inset-inline-end: 5%; width: 20%; height: 22%; border-radius: 6px; background: #2C2821; border: 2px solid rgba(247, 244, 236, .1); }
.wf-board svg { display: block; width: 100%; height: 100%; }
.wf-board path { fill: none; stroke: var(--volt); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wf-seat { position: absolute; z-index: 1; bottom: 11.1%; transform-origin: 50% 100%; --dir: 1; }
.wf-seat .fam { height: 100% !important; width: auto; }
.wf-seat.s1 { inset-inline-start: 5%; height: 66.7%; --lx: 9px; }
.wf-seat.s2 { inset-inline-start: 44%; height: 51.9%; --lx: -9px; }
.wf-seat.s3 { inset-inline-start: 76%; height: 33.3%; bottom: 14.8%; --lx: -5px; }
html[dir="rtl"] .wf-seat { --dir: -1; }
/* Eyes on you (the end state); while the film runs they start on Scribble, then turn, still blinking. */
.wf-seat .fm-eye { translate: 0 2px; }
.wf.is-live .wf-seat .fm-eye { translate: calc(var(--lx) * var(--dir)) -2px; }
.wf.is-live .wf-beat.is-go .wf-seat .fm-eye { animation: fm-blink 3.8s infinite, look .25s ease-out calc(1.8s + var(--i) * .12s) forwards; }
@keyframes look { to { translate: 0 2px; } }
.wf.is-live .wf-beat.is-go .wf-seat { animation: jolt .35s ease-out calc(1.8s + var(--i) * .12s); }
@keyframes jolt { 40% { transform: translateY(-5%) scale(1.03); } }
.wf-desk { position: absolute; z-index: 2; left: -2%; right: -2%; bottom: 0; height: 18.5%; background: #3A342B; clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
.wf-desk::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(247, 244, 236, .16); }
/* Scribble's question, above Scribble, its tail pointing down at the one asking. */
.wf-ask { position: absolute; z-index: 3; top: 4%; inset-inline-start: 20%; max-width: 48%; margin: 0; padding: 2.2% 3%; border-radius: 16px; background: #F7F4EC; color: #16140F; font: 700 12px/1.3 var(--body); font: 700 max(12px, 3cqw)/1.3 var(--body); transform-origin: 10% 100%; }
.wf-ask::after { content: ""; position: absolute; top: 100%; inset-inline-start: 12%; width: 14px; height: 12px; margin-top: -1px; background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%); }
html[dir="rtl"] .wf-ask { transform-origin: 90% 100%; }
html[dir="rtl"] .wf-ask::after { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wf.is-live .wf-ask { opacity: 0; transform: scale(.5); }
.wf.is-live .wf-beat.is-go .wf-ask { animation: wfpop .3s cubic-bezier(.3, 1.6, .5, 1) 1.35s forwards; }
.wf-me { display: flex; align-items: center; gap: 14px; gap: 3.5cqw; }
.wf-no { flex: none; display: grid; justify-items: center; gap: 10px; }
.wf-none { max-width: 124px; max-width: max(96px, 30cqw); padding: 3px 9px; border-radius: 10px; background: var(--red); color: #fff; font: 800 11px/1.2 var(--body); font: 800 max(10px, 2.2cqw)/1.2 var(--body); text-align: center; }
.wf.is-live .wf-key-no { opacity: 0; transform: translateY(40%); }
.wf.is-live .wf-beat.is-go .wf-key-no { animation: wfpop .25s ease-out 2.15s forwards, shake .45s ease-in-out 2.45s; }
@keyframes shake { 0% { transform: translateY(3px); } 25% { transform: translateX(-12%); } 50% { transform: translateX(10%); } 75% { transform: translateX(-6%); } }
.wf.is-live .wf-none { opacity: 0; transform: scale(.5); }
.wf.is-live .wf-beat.is-go .wf-none { animation: wfpop .3s cubic-bezier(.3, 1.6, .5, 1) 2.5s forwards; }
.wf-said { flex: 1; margin: 0; padding: 2.6% 3.4%; border-radius: 18px; border-end-start-radius: 4px; background: #F7F4EC; color: #16140F; box-shadow: 0 0 0 3px var(--volt); font: 700 15px/1.4 var(--body); font: 700 max(13px, 3.5cqw)/1.4 var(--body); }
.wf.is-live .wf-said { opacity: 0; transform: translateY(12px); }
.wf.is-live .wf-beat.is-go .wf-said { animation: wfpop .3s ease-out 2.75s forwards; }
.wf-um { color: #B3261E; font-weight: 800; white-space: nowrap; border-radius: 4px; padding: 0 2px; background: linear-gradient(rgba(210, 53, 42, .2), rgba(210, 53, 42, .2)) no-repeat 0 0 / 100% 100%, linear-gradient(#D2352A, #D2352A) no-repeat 0 100% / 100% 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wf.is-live .wf-um { background-size: 0 100%, 0 3px; }
.wf.is-live .wf-beat.is-go .wf-um { animation: lit .3s ease-out forwards; animation-delay: calc(2.95s + var(--i) * .2s); }
@keyframes lit { to { background-size: 100% 100%, 100% 3px; } }

/* Beat 3: six posts that sound the same stack up and fade; one in your own voice rises out. */
.b3 { --punch: 2.8s; }
.wf-feed { --row: 62px; --dx: 9px; --dy: 11px; position: relative; width: min(100%, 460px); height: 400px; }
.wf-post { position: absolute; left: 0; right: calc(5 * var(--dx)); top: 0; display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; padding: 14px 16px; border-radius: 18px; background: #2A2620; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8); opacity: .7; transform: translate(calc(var(--i) * var(--dx)), calc(var(--i) * var(--dy))) rotate(calc((var(--i) - 2.5) * 1.3deg)); }
.wf-post .wf-av { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; background: #4A453B; }
.wf-post p { margin: 0; font: 600 14px/1.35 var(--body); color: #CFC8B8; }
.wf-post .wf-bars i { display: block; height: 7px; margin-top: 6px; border-radius: 4px; background: #4A453B; }
.wf-post .wf-bars i + i { width: 60%; }
.wf-post.wf-you { top: 128px; left: 6%; right: 0; z-index: 2; opacity: 1; transform: rotate(-2deg); background: var(--volt); box-shadow: 0 26px 44px -18px rgba(0, 0, 0, .85); }
.wf-post.wf-you p { color: #16140F; font-size: 16px; }
.wf-post.wf-you .wf-av { background: #16140F; }
.wf.is-live .wf-post { opacity: 0; transform: translateY(calc(var(--i) * var(--row) + 24px)); }
.wf.is-live .wf-beat.is-go .wf-post { animation: feedin .35s ease-out forwards, stack .6s cubic-bezier(.6, 0, .2, 1) forwards; animation-delay: calc(var(--i) * .14s), 1.5s; }
@keyframes feedin { to { opacity: 1; transform: translateY(calc(var(--i) * var(--row))); } }
@keyframes stack { from { opacity: 1; transform: translateY(calc(var(--i) * var(--row))); } to { opacity: .7; transform: translate(calc(var(--i) * var(--dx)), calc(var(--i) * var(--dy))) rotate(calc((var(--i) - 2.5) * 1.3deg)); } }
.wf.is-live .wf-post.wf-you { opacity: 0; transform: translateY(60px) rotate(-2deg) scale(.9); }
.wf.is-live .wf-beat.is-go .wf-post.wf-you { animation: rise .55s cubic-bezier(.3, 1.4, .5, 1) 2.2s forwards; }
@keyframes rise { to { opacity: 1; transform: rotate(-2deg); } }
.b3 .wf-fig { inset-inline-start: 4%; top: 225px; }

/* Beat 4: the red pen crosses out the padding, and the word count drops. */
.b4 { --punch: 2.9s; }
.wf-draft { width: min(100%, 540px); padding: 26px 28px; border-radius: 26px; background: #FBF7F0; color: #16140F; transform: rotate(-1.2deg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.wf-draft p { margin: 0; font: 500 clamp(17px, 1.5vw, 21px)/1.6 var(--serif); }
.wf-draft s { text-decoration: none; opacity: .5; background: linear-gradient(var(--red), var(--red)) no-repeat 0 60% / 100% 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wf.is-live .wf-draft s { opacity: 1; background-size: 0 3px; }
.wf.is-live .wf-beat.is-go .wf-draft s { animation: cut .4s ease-out forwards; animation-delay: calc(.5s + var(--i) * .45s); }
@keyframes cut { to { background-size: 100% 3px; opacity: .5; } }
.wf-draft .wf-count { margin-top: 16px; font: 800 17px var(--body); }
.wf-draft .wf-count b { font-family: var(--display); font-stretch: 80%; font-size: 30px; }
.wf-draft .wf-count .wf-after { color: var(--red); }
.b4 .wf-fig { inset-inline-end: -8%; bottom: -10%; }

/* The quiz: one screen per question, big picture-cards for answers, the result in place. */
.quiz { position: relative; display: grid; align-content: center; min-height: 100vh; min-height: 100svh; padding-top: 104px; padding-bottom: 140px; }
.qz-panel[hidden] { display: none; }
/* A long word (Tamil) wraps instead of widening the panel past a phone. */
.qz-panel { min-width: 0; }
:is(.qz-big, .qz-ask, .qz-you) { overflow-wrap: break-word; }
.qz-panel.is-in { animation: qzin .35s var(--ease-out, ease-out) both; }
@keyframes qzin { from { opacity: 0; transform: translateY(16px); } }
.qz-big { margin: 0; max-width: 1040px; font-family: var(--display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(46px, 6.2vw, 100px); line-height: .9; }
/* Question 1 opens the quiz: the line, then the six types taking turns to say their tell. */
.qz-lead { font-size: clamp(40px, 4.8vw, 76px); }
.qz-line { margin: 24px 0 26px; }
.qz-q1 .qz-ask { font-size: clamp(30px, 3.4vw, 52px); }
@media (min-width: 761px) { .qz-q1 .qz-a { min-height: 156px; } }
.qz-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; font: 800 13px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--volt); }
.qz-taps { padding: 4px 10px; border-radius: 999px; background: rgba(247, 244, 236, .1); color: #F7F4EC; letter-spacing: .04em; }
.qz-row { position: relative; }
.qz-line.is-live .qz-row { padding-top: var(--room, 92px); }
.qz-tell { display: none; position: absolute; bottom: calc(100% - var(--room, 92px) + 12px); left: 0; width: max-content; max-width: min(100%, 380px); margin: 0; padding: 10px 16px 12px; border-radius: 18px; background: var(--volt); color: #16140F; font: 700 17px/1.3 var(--body); transform-origin: var(--tail, 50%) 100%; }
.qz-line.is-live .qz-tell { display: block; }
.qz-tell b { display: block; margin-bottom: 2px; font: 800 11px var(--body); letter-spacing: .1em; text-transform: uppercase; }
.qz-tell::after { content: ""; position: absolute; top: calc(100% - 1px); left: var(--tail, 50%); width: 18px; height: 11px; translate: -50% 0; background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.qz-tell.is-in { animation: tellin .3s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes tellin { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.qz-six { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(4px, 1.2vw, 14px); margin: 14px 0 0; padding: 0; list-style: none; }
.qz-line.is-live .qz-six { margin-top: 0; }
.qz-who { display: grid; justify-items: center; align-content: start; gap: 6px; width: 100%; height: 100%; padding: 10px 6px 12px; border: 0; border-radius: 22px; background: rgba(247, 244, 236, .05); color: inherit; font: inherit; cursor: pointer; transition: background-color .25s; }
.qz-who img { display: block; width: 100%; max-width: 112px; height: auto; aspect-ratio: 1; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), opacity .25s; }
.qz-name { font: 700 13px/1.2 var(--body); text-align: center; opacity: .8; }
.qz-says { font: 500 13px/1.35 var(--body); text-align: center; opacity: .7; }
.qz-line.is-live .qz-says { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qz-line.is-live .qz-who:not(.is-on) img { opacity: .55; }
.qz-who:hover img { opacity: 1; }
.qz-who.is-on { background: rgba(255, 224, 1, .12); }
.qz-who.is-on img { transform: translateY(-6px) scale(1.06); }
.qz-line.is-turning .qz-who.is-on img { animation: speak 1.3s ease-in-out infinite; }
@keyframes speak { 50% { transform: translateY(-11px) scale(1.06); } }
.qz-who.is-on .qz-name { color: var(--volt); opacity: 1; }
.qz-who:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }
.qz-nojs { margin-top: 14px; opacity: .7; }
.qz-top { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.qz-back { background: none; border: 0; padding: 8px 0; color: inherit; font: 700 15px var(--body); opacity: .7; cursor: pointer; }
.qz-back:hover { opacity: 1; }
.qz-of { font: 700 12px var(--body); letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.qz-dots { display: flex; gap: 6px; margin-inline-start: auto; }
.qz-dots i { width: 28px; height: 6px; border-radius: 3px; background: rgba(247, 244, 236, .18); }
.qz-dots i.is-on { background: var(--volt); }
.qz-ask { margin: 0 0 26px; max-width: 900px; font-family: var(--display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(36px, 4.8vw, 72px); line-height: .92; outline: none; }
.qz-answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.qz-a { display: grid; align-content: space-between; justify-items: start; gap: 16px; overflow-wrap: anywhere; min-height: 172px; padding: 20px; border-radius: 24px; border: 2px solid rgba(247, 244, 236, .16); background: rgba(247, 244, 236, .05); color: inherit; font: 700 18px/1.3 var(--body); text-align: start; cursor: pointer; transition: transform .2s cubic-bezier(.3, 1.5, .5, 1), border-color .2s, background-color .2s, opacity .2s; }
.qz-a:hover { border-color: var(--volt); transform: translateY(-4px); }
.qz-a:focus-visible { outline: 3px solid var(--volt); outline-offset: 3px; }
.qz-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--volt); color: #16140F; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.qz-ic svg { width: 36px; height: 36px; }
.qz-a:hover .qz-ic { transform: rotate(-8deg) scale(1.06); }
.qz-a.picked { background: var(--volt); border-color: var(--volt); color: #16140F; transform: scale(1.03); }
.qz-a.picked .qz-ic { background: #16140F; color: var(--volt); transform: rotate(8deg) scale(1.1); }
.qz-answers.chose .qz-a:not(.picked) { opacity: .3; }
.qz-friend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; padding: 14px 18px; border-radius: 20px; background: rgba(247, 244, 236, .08); font: 700 18px var(--body); }
.qz-friend em { font-style: normal; color: var(--volt); }
.qz-card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: center; padding: 38px; border-radius: 34px; background: var(--volt); color: #16140F; }
.qz-pic { position: relative; padding: 18px; border-radius: 28px; background: #FBF7F0; }
.qz-pic img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.qz-res.is-in .qz-pic img { animation: artin .6s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes artin { from { opacity: 0; transform: scale(.7) rotate(-6deg); } }
.qz-you { margin: 0; font-family: var(--display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 5vw, 78px); line-height: .9; outline: none; }
.qz-you em { font-style: normal; color: var(--red); }
.qz-d { margin: 14px 0 0; font: 800 21px/1.3 var(--body); }
.qz-l { margin: 8px 0 0; font: 500 italic 19px/1.4 var(--serif); }
.qz-weekh { margin: 24px 0 10px; font: 800 12px var(--body); letter-spacing: .12em; text-transform: uppercase; }
.qz-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.qz-days li { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 18px; background: #16140F; color: #F7F4EC; }
.qz-res.is-in .qz-days li { animation: qzin .4s both; animation-delay: calc(.25s + var(--i) * .12s); }
.qz-dn { font: 800 11px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--volt); }
.qz-days svg { width: 26px; height: 26px; color: var(--volt); }
.qz-days b { font: 700 14px/1.3 var(--body); }
.qz-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.qz-res .btn-volt { background: #16140F; color: var(--volt); box-shadow: 0 4px 0 #000; }
.qz-sheet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.qz-sheet[hidden] { display: none; }
.qz-sheet a, .qz-sheet button { padding: 10px 14px; border: 0; border-radius: 12px; background: #16140F; color: #F7F4EC; font: 700 14px var(--body); text-decoration: none; cursor: pointer; }
.qz-copied { font: 700 14px var(--body); word-break: break-all; }
.qz-retake { display: inline-block; margin-top: 14px; padding: 6px 0; background: none; border: 0; color: inherit; font: 700 14px var(--body); text-decoration: underline; cursor: pointer; }
@media (max-width: 760px) {
  .quiz { min-height: 0; padding-top: 84px; padding-bottom: 56px; }
  .qz-line { margin: 22px 0 26px; }
  .qz-six { gap: 4px; }
  .qz-who { padding: 6px 2px 8px; border-radius: 14px; }
  .qz-line.is-live .qz-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .qz-line:not(.is-live) .qz-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qz-tell { font-size: 15px; }
  .qz-ask { margin-bottom: 18px; }
  .qz-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .qz-a { min-height: 124px; padding: 14px; gap: 10px; border-radius: 20px; font-size: 15px; }
  .qz-ic { width: 46px; height: 46px; border-radius: 15px; } .qz-ic svg { width: 26px; height: 26px; }
  .qz-card { grid-template-columns: 96px minmax(0, 1fr); gap: 10px 14px; padding: 18px; border-radius: 26px; }
  .qz-body { display: contents; }
  .qz-pic { padding: 6px; border-radius: 18px; }
  .qz-pic img { max-width: 100%; }
  .qz-you { font-size: clamp(28px, 8.4vw, 38px); }
  .qz-d, .qz-l, .qz-weekh, .qz-days, .qz-acts, .qz-sheet, .qz-retake { grid-column: 1 / -1; }
  .qz-d { order: 2; margin: 2px 0 0; font-size: 17px; }
  .qz-l { order: 3; margin: 0; font-size: 16px; }
  .qz-acts { order: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; }
  .qz-acts .btn { padding: 13px 10px; font-size: 15px; }
  .qz-acts .btn-volt { grid-column: 1 / -1; }
  .qz-acts:has([data-qz-try][hidden]) [data-qz-share], .qz-acts:has([data-qz-share][hidden]) [data-qz-try] { grid-column: 1 / -1; }
  .qz-sheet { order: 5; margin: 0; }
  .qz-weekh { order: 6; margin: 8px 0 0; }
  .qz-days { order: 7; grid-template-columns: 1fr; gap: 6px; }
  .qz-days li { grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; padding: 9px 12px; }
  .qz-retake { order: 8; margin: 0; justify-self: start; }
}

/* Other scripts (the language pages): no condensed capitals or tight spacing, and room for their marks,
   as intl.css does for its own headings. */
html:not(:lang(en)):not(:lang(es)) :is(.wf-line, .qz-big, .qz-ask, .qz-you) { font-stretch: 100%; text-transform: none; letter-spacing: 0; line-height: 1.25; }
html:not(:lang(en)):not(:lang(es)) .wf-line { font-size: clamp(30px, min(4.6vw, 8vh), 72px); }
html:not(:lang(en)):not(:lang(es)) .wf-line { font-size: clamp(30px, min(4.6vw, 8svh), 72px); }
html:not(:lang(en)):not(:lang(es)) :is(.qz-kick, .qz-taps, .qz-tell b) { letter-spacing: 0; text-transform: none; }
:is(html:lang(ta), html:lang(zh), html:lang(ja)) .qz-big { font-size: clamp(32px, 4.4vw, 64px); }
:is(html:lang(ta), html:lang(zh), html:lang(ja)) :is(.qz-ask, .qz-you) { font-size: clamp(28px, 3.6vw, 52px); }

@media (max-width: 1099px) {
  .wf.is-live .wf-beat { padding-inline-end: 0; }
  .wf.is-live .wf-rail { inset-inline-end: auto; inset-inline-start: var(--gut); top: auto; bottom: 26px; transform: none; display: flex; gap: 10px; }
  .wf-rail button { font-size: 0; gap: 0; min-width: 40px; justify-content: center; }
}
@media (max-width: 760px) {
  .wf.is-live .wf-wrap { padding-top: 78px; padding-bottom: 70px; }
  .wf-beat { grid-template-columns: 1fr; gap: 18px; padding: 36px 0; }
  .wf-beat:nth-child(even) .wf-art { order: 0; }
  .wf.is-live .wf-beat { align-content: center; }
  .wf-art { min-height: 0; }
  .wf-line { font-size: clamp(40px, 11.5vw, 60px); }
  html:not(:lang(en)):not(:lang(es)) .wf-line { font-size: clamp(26px, 8vw, 40px); }
  .wf-doc, .wf-room, .wf-draft { width: 100%; }
  .wf-doc { padding: 16px 18px 18px; } .wf-text { min-height: 7.2em; font-size: 16px; } .wf-clock { font-size: 22px; }
  .wf-feed { --row: 40px; --dx: 6px; --dy: 17px; height: 270px; } .wf-post.wf-you { top: 128px; } .wf-post { padding: 10px 12px; grid-template-columns: 30px 1fr; } .wf-post .wf-av { width: 30px; height: 30px; } .wf-post p { font-size: 12.5px; }
  .wf-fig, .b1 .wf-fig, .b3 .wf-fig, .b4 .wf-fig { height: 80px; top: -70px; bottom: auto; inset-inline-start: auto; inset-inline-end: 4px; }
  .wf.is-live .wf-fact { bottom: -6px; font-size: 12px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .wf-fig { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .why2 *, .why2 *::before, .why2 *::after { animation: none !important; transition: none !important; }
}