/* ==========================================================================
   home2.css - the English landing page, light design (October 2026).

   Loaded only by pages built from tools/landing/template-v2.html, on top of
   site2.css. The translated pages still on the previous design use home.css.
   The example animations' keyframes depend on the words, so the build writes
   those into the page itself; everything else is here.
   ========================================================================== */

body.lp2 { background: #FFFFFF; }

.band { padding: 112px 0; }
.band.alt { background: var(--band); }
.band.mint { background: var(--mint-pale); }
.shead { text-align: center; max-width: 780px; margin: 0 auto; }
.shead h2, .h2 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  margin: 14px 0 14px;
}
.lead { color: var(--ink-muted); font-size: 18px; line-height: 1.55; text-wrap: balance; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta-row .btn { min-height: 52px; padding: 0 26px; font-size: 16.5px; }
.btn-ghost .ic { width: 16px; height: 16px; }
.add { color: var(--sprout); font-weight: 700; background: rgba(43, 197, 132, .16); border-radius: 3px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 7px;
  padding: 4px 7px;
  color: var(--sprout);
  background: var(--wash);
  white-space: nowrap;
}
.badge.beta { color: #9A4A06; background: #FDF3E3; }
@media (max-width: 640px) {
  .band { padding: 72px 0; }
  .wrap { padding: 0 16px; }
  .lead { font-size: 16.5px; }
}

/* ---------------------------------------------------------- small parts */
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; display: inline-block; vertical-align: -.14em; }
.pill { display: inline-flex; align-items: center; gap: .55em; height: 2.15em; padding: 0 .9em; border-radius: 999px; background: #17201C; color: #fff; font-size: .78em; font-weight: 500; white-space: nowrap; box-shadow: 0 .6em 1.4em -.6em rgba(0, 0, 0, .5); }
.pill .pdot { width: .55em; height: .55em; border-radius: 50%; background: #35D28E; box-shadow: 0 0 0 .22em rgba(53, 210, 142, .22); flex: none; }
.bars { display: inline-flex; align-items: center; gap: .2em; height: 1.05em; }
.bars i { display: block; width: .2em; height: 100%; border-radius: 1em; background: rgba(255, 255, 255, .92); animation: bar 1.1s ease-in-out infinite; }
.bars i:nth-child(2) { animation-delay: -.3s; } .bars i:nth-child(3) { animation-delay: -.6s; } .bars i:nth-child(4) { animation-delay: -.15s; } .bars i:nth-child(5) { animation-delay: -.45s; } .bars i:nth-child(6) { animation-delay: -.8s; }
@keyframes bar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes blink { 50% { opacity: 0; } }
.chip { display: inline-flex; align-items: center; gap: .4em; padding: .38em .7em; border-radius: 999px; background: #fff; border: 1px solid #E1E8E4; font-size: .68em; font-weight: 500; color: #33463D; white-space: nowrap; }
.dots { display: flex; gap: 6px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.dots i:nth-child(2) { background: #FEBC2E; }
.dots i:nth-child(3) { background: #28C840; }

/* ------------------------------------------------- hero: seven tools */
.lp-hero { padding: 72px 0 0; overflow: hidden; }
.hero-c { text-align: center; max-width: 880px; margin: 0 auto; }
.lp-hero h1 {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -.03em;
  margin: 18px 0 20px;
}
.lp-hero h1 .hl { color: var(--sprout); background: linear-gradient(transparent 62%, #CFF1E0 62%, #CFF1E0 92%, transparent 92%); }
.hero-c .lead { margin: 0 auto; max-width: 560px; font-size: 19.5px; }
.hero-c .cta-row { justify-content: center; }
.hero-c .fine { margin-top: 14px; }
/* The line under the button: a Mac visitor gets the friendlier sentence. */
.lp-on-mac { display: none; }
html.mac .lp-on-mac { display: inline; }
html.mac .lp-any-os { display: none; }

.dk { position: relative; max-width: 1040px; margin: 56px auto 0; background: #EFF4F1; border: 1px solid #E1E9E4; border-radius: 30px; overflow: hidden; padding-bottom: 26px; }
.dk-bar { height: 34px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 18px; background: rgba(255, 255, 255, .75); border-bottom: 1px solid #E1E9E4; }
.dk-bar i { width: 16px; height: 6px; border-radius: 3px; background: #D3DDD8; }
.dk-mb { width: 26px; height: 22px; border-radius: 6px; background: #DDF3E8; display: flex; align-items: center; justify-content: center; }
.dk-mb img { width: 16px; height: 16px; border-radius: 4px; }
.dk-win { width: calc(100% - 32px); max-width: 620px; margin: 34px auto 0; background: #fff; border: 1px solid #E1E8E4; border-radius: 18px; box-shadow: 0 2px 4px rgba(16, 53, 42, .04), 0 40px 70px -40px rgba(16, 53, 42, .45); overflow: hidden; min-height: 372px; }
.dk-wbar { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid #EEF1EF; }
.dk-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #33463D; }
.dk-ni { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.dk-body { padding: 24px 0 28px; font-size: 21px; }
.dk-dock { display: flex; justify-content: center; gap: 10px; width: max-content; max-width: calc(100% - 24px); margin: 30px auto 0; padding: 10px 12px; background: rgba(255, 255, 255, .85); border: 1px solid #E1E9E4; border-radius: 24px; box-shadow: 0 22px 40px -26px rgba(16, 53, 42, .45); }
.dk-it { position: relative; width: 58px; height: 58px; border-radius: 16px; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 25px; cursor: pointer; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.dk-it:hover { transform: translateY(-3px); }
.dk-it.on { transform: translateY(-8px) scale(1.12); box-shadow: 0 14px 24px -14px rgba(16, 53, 42, .55); }
.dk-tip, .dk-dot { display: none; }
.dk-it.on .dk-tip { display: block; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-family: 'Instrument Sans', sans-serif; font-size: 12px; font-weight: 600; white-space: nowrap; padding: 5px 9px; border-radius: 8px; pointer-events: none; }
.dk-it.on .dk-dot { display: block; position: absolute; bottom: -11px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ink); }
@media (max-width: 700px) {
  .lp-hero { padding-top: 48px; }
  .dk { margin-top: 40px; border-radius: 22px; }
  .dk-win { margin-top: 20px; min-height: 0; }
  .dk-body { font-size: 12.5px; padding: 16px 0 18px; }
  .dk-dock { gap: 5px; padding: 8px; }
  .dk-it { width: 38px; height: 38px; border-radius: 11px; font-size: 17px; }
  .dk-it.on { transform: translateY(-5px) scale(1.1); }
  .dk-it.on .dk-tip { font-size: 11px; }
}

/* The language strip; js/languages-ui.js fills #langTrack. */
.marquee { margin-top: 72px; border-top: 1px solid #EEF1EF; padding: 22px 0 26px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lang-track { display: flex; gap: 10px; width: max-content; animation: mq 70s linear infinite; }
.lang-track:hover { animation-play-state: paused; }
.lang-chip { display: inline-flex; align-items: baseline; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--band); border: 1px solid #EEF1EF; white-space: nowrap; line-height: 40px; }
.lang-chip .n { font-size: 15.5px; font-weight: 500; color: #33463D; }
.lang-chip .e { font-size: 12.5px; color: var(--ink-muted); }
@keyframes mq { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ how */
.hw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.hw-card { background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 18px 18px 26px; min-width: 0; }
.hw-vis { position: relative; height: 190px; border-radius: 18px; background: var(--band); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hw-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; margin: 22px 8px 0 6px; }
.hw-card h3 { display: inline; font-size: 21px; letter-spacing: -.01em; line-height: 1.25; }
.apps { position: absolute; top: 22px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; }
.apps span { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.hw-fld { position: absolute; left: 28px; right: 28px; bottom: 30px; height: 50px; background: #fff; border: 1.5px solid #DCE3DF; border-radius: 12px; animation: fldOn 6s infinite; }
@keyframes fldOn { 0%, 30% { border-color: #DCE3DF; box-shadow: none; } 36%, 92% { border-color: #2BC584; box-shadow: 0 0 0 4px rgba(43, 197, 132, .18); } 100% { border-color: #DCE3DF; } }
.hw-fld .cr { position: absolute; left: 16px; top: 14px; width: 2px; height: 20px; background: var(--ink); opacity: 0; animation: crOn 6s infinite; }
@keyframes crOn { 0%, 34% { opacity: 0; } 36%, 46% { opacity: 1; } 47%, 56% { opacity: 0; } 57%, 66% { opacity: 1; } 67%, 76% { opacity: 0; } 77%, 90% { opacity: 1; } 92%, 100% { opacity: 0; } }
.ptr { position: absolute; left: 0; top: 0; width: 22px; height: 22px; animation: ptr 6s infinite; }
.ptr .ic { width: 100%; height: 100%; fill: var(--ink); stroke: #fff; stroke-width: 1.5; }
@keyframes ptr { 0% { transform: translate(250px, 40px); opacity: 0; } 8% { opacity: 1; } 30%, 40% { transform: translate(150px, 140px); opacity: 1; } 48%, 100% { transform: translate(150px, 140px); opacity: 0; } }
.kcap { display: flex; flex-direction: column; justify-content: space-between; width: 104px; height: 84px; border-radius: 16px; background: #fff; border: 1px solid #DCE3DF; box-shadow: 0 6px 0 #DCE3DF, 0 18px 30px -18px rgba(16, 53, 42, .4); padding: 12px 14px; animation: keyP 6s infinite; }
.kcap b { font-size: 22px; font-weight: 500; align-self: flex-end; line-height: 1; }
.kcap small { font-size: 13px; color: var(--ink-muted); align-self: flex-end; }
@keyframes keyP { 0%, 14%, 26%, 100% { transform: none; box-shadow: 0 6px 0 #DCE3DF, 0 18px 30px -18px rgba(16, 53, 42, .4); } 18%, 22% { transform: translateY(5px); box-shadow: 0 1px 0 #DCE3DF, 0 8px 16px -12px rgba(16, 53, 42, .4); } }
.hw-pill { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); animation: hwPill 6s infinite; }
@keyframes hwPill { 0%, 20% { opacity: 0; } 26%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
.pst { position: absolute; left: 24px; right: 24px; top: 44px; background: #fff; border: 1.5px solid #2BC584; border-radius: 12px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; box-shadow: 0 0 0 4px rgba(43, 197, 132, .15); }
.pst span { display: block; clip-path: inset(0 100% 0 0); animation: pstIn 6s infinite; }
@keyframes pstIn { 0%, 20% { clip-path: inset(0 100% 0 0); } 34%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.done { position: absolute; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: #fff; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; animation: doneIn 6s infinite; }
.done .ic { color: #35D28E; }
@keyframes doneIn { 0%, 36% { opacity: 0; transform: translateY(6px); } 42%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@media (max-width: 900px) { .hw { grid-template-columns: minmax(0, 1fr); } .hw-card { max-width: 520px; margin: 0 auto; width: 100%; } }

/* ---------------------------------------------------------------- video */
.video-frame { position: relative; max-width: 980px; margin: 48px auto 0; border-radius: 28px; overflow: hidden; background: #E7F2EB; aspect-ratio: 16 / 9; box-shadow: 0 50px 90px -50px rgba(16, 53, 42, .5); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.video-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #E7F2EB; display: block; cursor: pointer; }
.video-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play-btn { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .5); transition: transform .18s ease; }
.video-play-btn .ic { fill: currentColor; margin-left: 5px; }
.video-play-btn::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); animation: ring 2.4s ease-out infinite; }
@keyframes ring { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.video-play:hover .video-play-btn, .video-play:focus-visible .video-play-btn { transform: scale(1.06); }
@media (max-width: 640px) { .video-frame { border-radius: 18px; margin-top: 32px; } .video-play-btn { width: 68px; height: 68px; margin: -34px 0 0 -34px; font-size: 22px; } }

/* ----------------------------------------------------------- examples */
.ctabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 44px 0 0; }
.ctab { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1.5px solid #E2E6E4; background: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; min-height: 48px; }
.ctab .ci { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.ctab .cl { color: #1E2B26; }
.ctab small { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin-left: 2px; }
.ctab.on { border-color: currentColor; }
.ex-panels { margin-top: 22px; }
.mcard { position: relative; background: #fff; border: 1px solid #E6EAE8; border-radius: 30px; padding: 30px 44px 26px; min-height: 430px; box-shadow: 0 1px 2px rgba(20, 30, 25, .04), 0 30px 60px -40px rgba(20, 30, 25, .35); }
.mplay { display: flex; flex-direction: column; min-height: 374px; }
.mtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mtop .mode { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-radius: 8px; padding: 6px 10px; }
.cnts { display: flex; gap: 8px; flex-wrap: wrap; }
.cnt { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; border-radius: 999px; padding: 6px 12px; animation: cntIn .45s cubic-bezier(.3, 1.4, .5, 1) both; }
.cnt.red { color: #B42318; background: #FDECEA; }
.cnt.grn { color: var(--sprout); background: var(--wash); }
@keyframes cntIn { from { opacity: 0; transform: scale(.7); } }
.lab { display: grid; margin: 26px 0 10px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.lab > span { grid-area: 1 / 1; }
.lab .l1 { opacity: 0; animation: labOut .35s both; }
.lab .l2 { color: var(--sprout); animation: labIn .35s both; }
.lab.es { margin-top: 18px; }
.lab.es .l2 { color: #9A4A06; }
@keyframes labOut { from { opacity: 1; } }
@keyframes labIn { from { opacity: 0; } }
.legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; margin-top: 26px; font-size: 14px; color: var(--ink-muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.k-cut { font-style: normal; color: #B42318; background: #FDECEA; border-radius: 4px; padding: 0 6px; text-decoration: line-through; text-decoration-thickness: 2px; }
.k-add { font-style: normal; color: var(--sprout); font-weight: 700; background: rgba(43, 197, 132, .2); border-radius: 4px; padding: 0 6px; }
.legend .ic { color: var(--sprout); font-size: 16px; }
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: auto 0 0; padding: 22px 0 0; border-top: 1px solid #EEF1EF; margin-top: 30px; }
.steps .st { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); animation: stOn .4s both; }
@keyframes stOn { from { opacity: .4; } }
.steps .sti { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; background: #2BC584; color: #04150E; animation: stI .4s both; }
@keyframes stI { from { background: #EEF1EF; color: var(--ink-muted); } }
.askrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; animation: askIn .45s both; }
@keyframes askIn { from { opacity: 0; transform: translateY(6px); } }
.askrow .pill { font-size: 14px; }
.askq { background: #F1EDFB; color: #3B1E7A; border-radius: 14px 14px 14px 4px; padding: 8px 14px; font-size: 17px; font-weight: 500; }
.askg { font-size: 14px; color: var(--ink-muted); }
@media (max-width: 760px) { .mcard { padding: 22px 18px; } .askq { font-size: 15px; } }

/* One sentence cleaning itself up. The words are flex items so a word can
   collapse to nothing; the per-word keyframes (cOut*, cOutK*, sOut*) are
   written into the page by the build, sized to each word. */
.mx { display: flex; flex-wrap: wrap; align-items: baseline; font-size: 30px; line-height: 1.5; color: var(--ink); animation: mxIn .5s ease-out both, mxInk .6s both; }
@keyframes mxIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes mxInk { from { color: #5B6B63; } }
.mx .t { display: inline-block; white-space: pre; margin-right: .28em; }
.mx .c { overflow: hidden; max-width: 0; margin-right: 0; padding: 0; opacity: 0; color: #B42318; border-radius: .25em; background-color: #FDECEA; background-image: linear-gradient(#B42318, #B42318); background-repeat: no-repeat; background-position: 0 56%; background-size: 100% .07em; animation-duration: .35s, .45s; animation-timing-function: ease-out, ease-out; animation-fill-mode: both, both; }
@keyframes cMark { from { color: #5B6B63; background-color: rgba(253, 236, 234, 0); background-size: 0 .07em; } }
@keyframes cMarkK { from { color: #0F2A22; background-color: rgba(253, 236, 234, 0); background-size: 0 .07em; } }
.mx .s { display: inline-flex; align-items: baseline; }
.mx .so { display: inline-block; overflow: hidden; white-space: pre; max-width: 0; opacity: 0; animation-duration: .35s; animation-timing-function: ease-in; animation-fill-mode: both; }
.mx .sn { display: inline-block; white-space: pre; border-radius: .2em; animation: sIn .55s ease-out both; }
@keyframes sIn { 0% { max-width: 0; opacity: 0; background: rgba(43, 197, 132, .35); } 60% { opacity: 1; } 100% { max-width: 12em; background: rgba(43, 197, 132, 0); } }
.mx .sn code { font-family: 'JetBrains Mono', monospace; font-size: .82em; background: #F1EDFB; color: #6D28D9; border-radius: .2em; padding: 0 .2em; }
.mx .ad { margin-left: -.28em; color: var(--sprout); font-weight: 700; overflow: hidden; background: rgba(43, 197, 132, .16); border-radius: .15em; animation: aIn .45s ease-out both; }
.mx .ad.n { margin-left: 0; padding: 0 .12em; animation-name: aInN; }
@keyframes aIn { from { max-width: 0; opacity: 0; background: rgba(43, 197, 132, .6); } to { max-width: 12em; } }
@keyframes aInN { from { max-width: 0; opacity: 0; margin-right: 0; padding: 0; background: rgba(43, 197, 132, .6); } to { max-width: 12em; } }
.mx .br { flex-basis: 100%; width: 0; height: 0; animation: brIn .01s backwards; }
@keyframes brIn { from { flex-basis: 0; } to { flex-basis: 0; } }
.mx.en { animation: mxIn .5s ease-out both, enDim .6s ease-out both; font-size: 19px; opacity: .6; color: #5B6B63; }
@keyframes enDim { from { font-size: 30px; opacity: 1; color: #0F2A22; } }
.mx.sela { animation: mxIn .5s ease-out both, selOff .5s both; border-radius: .15em; color: var(--ink); }
@keyframes selOff { from { background-color: #D6E6FF; box-shadow: 0 0 0 .18em #D6E6FF; } }
.mx2 { font-size: 30px; line-height: 1.5; color: var(--ink); }
.mx2 .w2 { display: inline-block; animation: w2In .4s ease-out both; }
@keyframes w2In { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
@media (max-width: 760px) {
  .mx, .mx2 { font-size: 21px; }
  .mx.en { font-size: 15px; }
  @keyframes enDim { from { font-size: 21px; opacity: 1; } }
}

/* ---------------------------------------------------------- calculator */
.sp { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.sp-l .lead { max-width: 440px; }
.calc { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 28px; box-shadow: 0 40px 80px -56px rgba(16, 53, 42, .45); }
.calc-in { display: flex; gap: 12px; flex-wrap: wrap; }
.calc-in label { flex: 1 1 180px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.calc-in .box { display: flex; align-items: center; gap: 6px; height: 50px; border: 1.5px solid #DCE3DF; border-radius: 12px; padding: 0 14px; background: #fff; }
.calc-in .box:focus-within { border-color: #2BC584; box-shadow: 0 0 0 4px rgba(43, 197, 132, .18); }
.calc-in input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 18px; font-weight: 600; color: var(--ink); background: transparent; }
.calc-in .u { font-size: 14px; color: var(--ink-muted); font-weight: 500; }
.race { margin: 26px 0 8px; display: flex; flex-direction: column; gap: 16px; }
.rrow { display: grid; grid-template-columns: 34px 78px minmax(0, 1fr) 70px; align-items: center; gap: 12px; }
.rrow .ri { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.rrow .rl { font-size: 14.5px; font-weight: 600; color: var(--ink-soft); }
.rbar { height: 14px; border-radius: 14px; background: #EEF1EF; overflow: hidden; }
.rbar i { display: block; height: 100%; border-radius: 14px; transform-origin: left; transition: width .3s ease; animation: grow 1.4s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes grow { from { transform: scaleX(0); } }
.rrow b { font-size: 17px; text-align: right; }
.saved { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.saved div { border-radius: 18px; padding: 16px 18px; background: var(--wash); }
.saved div.m { background: var(--mint-pale); border: 1px solid #D3E4D9; }
.saved span { display: block; font-size: 13.5px; color: var(--ink-soft); font-weight: 600; }
.saved b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 38px; line-height: 1.05; color: var(--sprout); margin-top: 4px; }
.week { margin: 16px 0 0; font-size: 15px; color: var(--ink-soft); }
.week b { color: var(--ink); }
@media (max-width: 960px) { .sp { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .rrow { grid-template-columns: 34px minmax(0, 1fr) 64px; }
  .rrow .rl { display: none; }
  .calc { padding: 20px; }
  .saved b { font-size: 29px; }
}

/* ---------------------------------------------------------------- modes */
.md { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 52px; }
.md-card { background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.md-h { display: flex; align-items: center; gap: 12px; }
.md-h .mi { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.md-h h3 { font-size: 22px; }
.md-card p { font-size: 15.5px; line-height: 1.5; color: var(--ink-muted); }
.md-out { margin-top: auto; border-radius: 16px; padding: 14px 16px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.md-out .tg { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.md-out code { font-family: 'JetBrains Mono', monospace; font-size: .86em; background: #fff; border-radius: 5px; padding: 1px 5px; }
@media (max-width: 900px) { .md { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------- translation */
.tr { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.trv { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 26px; box-shadow: 0 40px 80px -56px rgba(16, 53, 42, .45); }
.lchips { display: flex; flex-wrap: wrap; gap: 8px; }
.lchip { position: relative; display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid #E6EAE8; font-size: 15px; font-weight: 600; color: #33463D; background: #fff; }
.lchip i { position: absolute; inset: -1.5px; border-radius: 999px; border: 1.5px solid #9A4A06; background: #FDF3E3; opacity: 0; }
.lchip span { position: relative; }
.saybox { position: relative; margin-top: 20px; min-height: 178px; }
.say1 { position: absolute; inset: 0; opacity: 0; }
.say1 .lb, .pastebox .lb { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; }
.say1 p { background: var(--band); border-radius: 18px 18px 18px 6px; padding: 14px 16px; font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
.say1 p s { text-decoration: line-through; text-decoration-color: #B42318; text-decoration-thickness: 2px; color: #B42318; }
.say1[dir="rtl"] p { border-radius: 18px 18px 6px 18px; }
.tr-arrow { display: flex; justify-content: center; color: #9A4A06; font-size: 22px; margin: 6px 0; }
.pastebox p { background: var(--wash); border-radius: 18px 18px 6px 18px; padding: 14px 16px; font-size: 17px; line-height: 1.6; }
.pastebox .lb { color: var(--sprout); }
@media (max-width: 960px) { .tr { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .saybox { min-height: 230px; } .say1 p { font-size: 16px; } }

/* ------------------------------------------------------------- ask lipo */
.ak { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.ak-tabs { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.ak-tab { position: relative; display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: 20px; padding: 16px 18px; font: inherit; color: var(--ink); cursor: pointer; overflow: hidden; }
.ak-tab .ti { width: 40px; height: 40px; border-radius: 12px; background: #F1EDFB; color: #6D28D9; display: flex; align-items: center; justify-content: center; font-size: 19px; flex: none; }
.ak-tab b { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ak-tab small { display: block; font-size: 14.5px; color: var(--ink-muted); margin-top: 3px; line-height: 1.45; }
.ak-tab.on { border-color: #6D28D9; box-shadow: 0 18px 40px -30px rgba(109, 40, 217, .5); }
.ak-tab.on .ti { background: #6D28D9; color: #fff; }
.ak-prog { display: none; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #6D28D9; transform-origin: left; }
.ak-tab.on .ak-prog { display: block; animation: prog 7s linear both; }
@keyframes prog { from { transform: scaleX(0); } }
.ak-stage { background: #fff; border: 1px solid var(--line); border-radius: 30px; padding: 36px 16px; min-height: 460px; display: flex; align-items: center; justify-content: center; box-shadow: 0 40px 80px -56px rgba(16, 53, 42, .45); }
.ak-panel { width: 100%; }
.ak-stage .scw { font-size: 22px; width: 100%; }
@media (max-width: 1100px) { .ak-stage .scw { font-size: 18px; } }
@media (max-width: 960px) { .ak { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .ak-stage { min-height: 0; padding: 24px 8px; } .ak-stage .scw { font-size: 12.5px; } }

/* ------------------------------------------------- more than dictation */
.mo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.tile { background: var(--band); border: 1px solid #EDF0EE; border-radius: 28px; padding: 18px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tile.s7 { grid-column: span 7; }
.tile.s5 { grid-column: span 5; }
.stagebox { background: #fff; border: 1px solid #EDF1EF; border-radius: 20px; padding: 22px 0; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 15px; }
.tile.s7 .stagebox { font-size: 18px; }
.tt { padding: 0 6px 6px; }
.th { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.th .tic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.th h3 { font-size: 21px; letter-spacing: -.01em; }
.tt p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 960px) { .tile.s7, .tile.s5 { grid-column: span 12; } .stagebox, .tile.s7 .stagebox { font-size: 15px; } }
@media (max-width: 640px) { .stagebox, .tile.s7 .stagebox { font-size: 12.5px; } }

/* -------------------------------------------------------------- pricing */
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 900px; margin: 52px auto 0; }
.tier { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 30px; padding: 30px; display: flex; flex-direction: column; }
.tier.hi { border: 2px solid #2BC584; box-shadow: 0 50px 90px -60px rgba(31, 169, 113, .7); }
.ribbon { position: absolute; top: -14px; left: 30px; display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.ribbon .ic { color: #35D28E; }
.tn { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 22px; }
.price { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 52px; letter-spacing: -.02em; margin: 10px 0 4px; }
.price small { font-family: 'Instrument Sans', sans-serif; font-size: 16px; font-weight: 500; color: var(--ink-muted); letter-spacing: 0; }
.tier ul { list-style: none; margin: 20px 0 26px; display: flex; flex-direction: column; gap: 12px; }
.tier li { display: flex; align-items: center; gap: 11px; font-size: 15.5px; }
.tier li .ck { width: 24px; height: 24px; border-radius: 50%; background: var(--wash); color: var(--sprout); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.tier li .ck .ic { stroke-width: 3; }
.tier .btn { margin-top: auto; width: 100%; min-height: 52px; }
.tnote { text-align: center; font-size: 13.5px; color: var(--ink-muted); margin-top: 12px; }
.tnote a { color: var(--sprout); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tip-glue { white-space: nowrap; }
.feat-tip-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 4px; padding: 0; border: 1px solid #DCE3DF; border-radius: 50%; background: #fff; color: var(--ink-muted); font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 11.5px; font-weight: 600; line-height: 1; cursor: help; vertical-align: middle; position: relative; top: -1px; }
.feat-tip-btn::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.feat-tip-btn:hover, .feat-tip-btn:focus-visible, .feat-tip-btn[aria-expanded="true"] { color: var(--ink); border-color: #2BC584; background: var(--wash); outline: none; }
.feat-tip-pop { position: fixed; z-index: 80; max-width: 320px; max-height: min(70vh, 420px); overflow-y: auto; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); color: var(--ink); font-size: 13.5px; line-height: 1.5; text-align: left; }
.feat-tip-pop[hidden] { display: none; }
.feat-tip-pop p + p { margin-top: 10px; }
@media (max-width: 760px) { .tiers { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ faq */
.fq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.fq-contact { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--sprout); font-weight: 600; }
.faq { display: flex; flex-direction: column; gap: 10px; }
.qa { border: 1px solid var(--line); border-radius: 20px; background: #fff; overflow: hidden; }
.qa.open { border-color: #C9E9D8; background: #FBFDFC; }
.qa > button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 64px; padding: 16px 20px; background: none; border: 0; font: inherit; font-size: 17px; font-weight: 600; text-align: left; color: var(--ink); cursor: pointer; }
.qa .plus { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--band); flex: none; transition: transform .2s, background .2s; }
.qa .plus::before, .qa .plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 2px; }
.qa .plus::before { width: 12px; height: 2px; margin: -1px 0 0 -6px; }
.qa .plus::after { width: 2px; height: 12px; margin: -6px 0 0 -1px; }
.qa.open .plus { transform: rotate(45deg); background: var(--wash); color: var(--sprout); }
.qa .ans { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.qa .ans p { padding: 0 20px; margin-bottom: 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.qa .ans p:last-child { padding-bottom: 8px; }
.faq-lang-link { background: none; border: none; padding: 0; font: inherit; color: var(--sprout); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 960px) { .fq { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* ------------------------------------------- final: one app, seven tools */
.fin { text-align: center; max-width: 720px; }
.fin-ic { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.fin-ic span { width: 56px; height: 56px; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 14px 26px -18px rgba(16, 53, 42, .5); animation: bob 3.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: none; } 50% { transform: translateY(-7px); } }
.fin .h2 { margin-top: 0; }
.fin .lead { margin: 0 auto; }
.fin .cta-row { justify-content: center; }
.fin .fine { margin-top: 14px; }
@media (max-width: 640px) { .fin-ic { gap: 8px; } .fin-ic span { width: 42px; height: 42px; font-size: 18px; border-radius: 13px; } }

/* ------------------------------------------------------- language modal */
body.modal-open { overflow: hidden; }
.lang-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.lang-modal[hidden] { display: none; }
.lang-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 42, 34, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lang-modal-panel { position: relative; width: min(720px, 100%); max-height: min(82vh, 760px); overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px 28px 24px; box-shadow: var(--shadow-lg); }
.lang-modal-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: none; border-radius: 10px; background: var(--band); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.lang-modal-close:hover { background: var(--wash); }
.lang-modal-panel h2 { font-size: 1.55rem; margin-bottom: 8px; padding-right: 40px; }
.lang-modal-sub { color: var(--ink-muted); font-size: .95rem; line-height: 1.5; margin-bottom: 22px; }
.lang-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.lang-modal-item { background: var(--band); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; }
.lang-modal-native { display: block; font-weight: 600; color: var(--ink); font-size: .98rem; line-height: 1.3; }
.lang-modal-label { display: block; margin-top: 3px; font-size: .8rem; color: var(--ink-muted); }
@media (max-width: 620px) {
  .lang-modal { padding: 16px; }
  .lang-modal-panel { padding: 22px 16px 16px; max-height: 88vh; }
  .lang-modal-close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .lang-modal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lang-modal-native { overflow-wrap: break-word; }
}

@media (prefers-reduced-motion: reduce) {
  .lang-track, .fin-ic span, .video-play-btn::before { animation: none; }
  .say1:first-child, .lchip:first-child i { animation: none; opacity: 1; }
  .mcard *, .mcard { animation: none !important; }
}


/* ==========================================================================
   The tool demos: CSS-only loops on a 24em x 13em stage, so one font-size
   scales a whole scene (hero dock, Ask Lipo, the tool tiles).
   ========================================================================== */
.sc,.sc *,.sc *::before,.sc *::after{box-sizing:border-box}
.sc{position:relative;width:24em;height:13em;margin:0 auto;color:#0F2A22;font-family:'Instrument Sans',system-ui,sans-serif;line-height:1.35;text-align:left}
.sc .a{position:absolute}
.sc .card{background:#fff;border:1px solid #E1E8E4;border-radius:.8em;box-shadow:0 .1em .25em rgba(16,53,42,.05),0 .9em 1.8em -1.1em rgba(16,53,42,.3)}
.sc .chrome{display:flex;gap:.3em;padding:.6em .7em .25em}
.sc .chrome i{width:.45em;height:.45em;border-radius:50%;background:#E4E9E6}
.sc .chrome i:nth-child(1){background:#FF5F57}.sc .chrome i:nth-child(2){background:#FEBC2E}.sc .chrome i:nth-child(3){background:#28C840}
.sc .bar{display:block;height:.45em;border-radius:1em;background:#E8EEEA;margin:.42em 0}
.sc .tag{display:block;font-family:'JetBrains Mono',monospace;font-size:.5em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#54685E;margin-bottom:.6em}
.sc .caret{display:inline-block;width:.09em;height:1.05em;background:#0F2A22;vertical-align:-.15em;margin-left:.08em;animation:blink 1s steps(1) infinite}

/* Ask Lipo */
.sc-ask .doc{padding:.85em 1em}
.sc-ask .stack{display:grid;font-size:.95em;line-height:1.45}
.sc-ask .stack>span{grid-area:1/1}
.sc-ask .sel{background-image:linear-gradient(#CFE2FF,#CFE2FF);background-repeat:no-repeat;background-size:0 100%;animation:askSel 7s infinite}
@keyframes askSel{0%,8%{background-size:0 100%}16%,93%{background-size:100% 100%}94%,100%{background-size:0 100%}}
.sc-ask .old{animation:askOld 7s infinite}
@keyframes askOld{0%,52%{opacity:1}57%,94%{opacity:0}100%{opacity:1}}
.sc-ask .new{opacity:0;animation:askNew 7s infinite}
.sc-ask .new span{border-radius:.2em;animation:askFlash 7s infinite}
@keyframes askNew{0%,56%{opacity:0;transform:translateY(.3em)}61%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes askFlash{0%,58%{background:rgba(43,197,132,0)}62%{background:rgba(43,197,132,.3)}80%,100%{background:rgba(43,197,132,0)}}
.sc-ask .ap{animation:askPill 7s infinite}
@keyframes askPill{0%,15%{opacity:0;transform:translateY(.4em)}20%,50%{opacity:1;transform:none}55%,100%{opacity:0;transform:translateY(.4em)}}
.sc-ask .say{background:#fff;border:1px solid #E1E8E4;border-radius:1em 1em 1em .3em;padding:.45em .8em;font-size:.85em;box-shadow:0 .6em 1.2em -.8em rgba(16,53,42,.3);animation:askSay 7s infinite}
@keyframes askSay{0%,25%{opacity:0;transform:scale(.9)}30%,50%{opacity:1;transform:none}55%,100%{opacity:0;transform:scale(.95)}}

/* Snippets */
.sc-sn .row{display:flex;align-items:center;gap:.5em}
.sc-sn .key{display:inline-flex;align-items:center;gap:.35em;background:#EAF7F0;color:#0E7A4A;border-radius:.45em;padding:.3em .55em;font-size:.78em;font-weight:600;white-space:nowrap}
.sc-sn .arr{color:#54685E}
.sc-sn .val{font-family:'JetBrains Mono',monospace;font-size:.74em;white-space:nowrap}
.sc-sn .spk{display:flex;align-items:center;gap:.6em;animation:snSpk 6.5s infinite}
.sc-sn .said{font-size:.8em;color:#54685E;white-space:nowrap}
@keyframes snSpk{0%{opacity:0;transform:translateY(.3em)}6%,42%{opacity:1;transform:none}47%,100%{opacity:0}}
.sc-sn .out{padding:.7em .9em;animation:snOut 6.5s infinite}
@keyframes snOut{0%,44%{opacity:0;transform:translateY(.4em)}49%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
.sc-sn .line{font-size:.92em}
.sc-sn .swap{display:inline-grid;vertical-align:bottom}
.sc-sn .swap>span{grid-area:1/1}
.sc-sn .k2{background:#EAF7F0;color:#0E7A4A;border-radius:.35em;padding:0 .3em;font-weight:600;animation:snK 6.5s infinite}
.sc-sn .v2{font-family:'JetBrains Mono',monospace;font-size:.92em;color:#0E7A4A;text-decoration:underline;text-underline-offset:.18em;border-radius:.3em;opacity:0;animation:snV 6.5s infinite}
@keyframes snK{0%,56%{opacity:1}61%,100%{opacity:0}}
@keyframes snV{0%,57%{opacity:0;background:rgba(43,197,132,0)}62%{opacity:1;background:rgba(43,197,132,.3)}80%,100%{opacity:1;background:rgba(43,197,132,0)}}

/* Screenshots */
.sc-ss .win{overflow:hidden}
.sc-ss .pg{padding:.25em .8em}
.sc-ss .pic{height:2.4em;border-radius:.45em;background:#EAF7F0;margin:.45em 0}
.sc-ss .sbtn{display:inline-block;margin-top:.3em;background:#2BC584;color:#04150E;border-radius:.4em;padding:.25em .7em;font-size:.62em;font-weight:600}
.sc-ss .sel{border:.1em dashed #1FA971;background:rgba(43,197,132,.1);border-radius:.2em;transform-origin:0 0;animation:ssSel 7.5s infinite}
@keyframes ssSel{0%{opacity:0;transform:scale(0)}6%{opacity:1;transform:scale(.02)}30%{transform:scale(1)}47%{opacity:1;transform:scale(1);background:rgba(43,197,132,.1)}50%{background:rgba(255,255,255,.9)}54%,100%{opacity:0;transform:scale(1)}}
.sc-ss .cur{width:1.3em;height:1.3em;margin:-.65em 0 0 -.65em;color:#0F2A22;animation:ssCur 7.5s infinite}
.sc-ss .cur .ic{width:100%;height:100%}
@keyframes ssCur{0%{opacity:0;transform:none}6%{opacity:1;transform:none}30%,46%{opacity:1;transform:translate(9em,3.8em)}52%,100%{opacity:0;transform:translate(9em,3.8em)}}
.sc-ss .tools{display:flex;flex-direction:column;gap:.3em;padding:.35em;background:#fff;border:1px solid #E1E8E4;border-radius:.7em;box-shadow:0 .6em 1.2em -.8em rgba(16,53,42,.3);animation:ssTools 7.5s infinite}
.sc-ss .tools span{width:1.9em;height:1.9em;border-radius:.5em;display:flex;align-items:center;justify-content:center;color:#33463D}
.sc-ss .tools span:first-child{background:#EAF7F0;color:#0E7A4A}
@keyframes ssTools{0%,30%{opacity:.35}34%,90%{opacity:1}96%,100%{opacity:.35}}
.sc-ss .fly{border:.1em solid #2BC584;background:#EAF7F0;border-radius:.3em;transform-origin:0 0;opacity:0;animation:ssFly 7.5s infinite}
@keyframes ssFly{0%,50%{opacity:0;transform:none}52%{opacity:1;transform:none}64%{opacity:1;transform:translate(13em,6em) scale(.34)}65%,100%{opacity:0;transform:translate(13em,6em) scale(.34)}}
.sc-ss .msg{display:flex;align-items:center;padding:0 .8em}
.sc-ss .msg .tx{font-size:.8em}
.sc-ss .thumb{position:absolute;left:17.3em;top:.75em;width:3.06em;height:1.29em;border:.1em solid #2BC584;background:#EAF7F0;border-radius:.25em;opacity:0;animation:ssThumb 7.5s infinite}
@keyframes ssThumb{0%,63%{opacity:0}65%,93%{opacity:1}98%,100%{opacity:0}}
.sc-ss .send{position:absolute;right:.7em;top:50%;margin-top:-.5em;color:#0E7A4A}

/* Visual Brief */
.sc-vb .scr{overflow:hidden}
.sc-vb .pg{padding:.2em .8em}
.sc-vb .blk{height:2.6em;border-radius:.45em;background:#EEF2F0;margin:.45em 0}
.sc-vb .rec{position:absolute;right:.6em;top:.45em;display:inline-flex;align-items:center;gap:.35em;font-family:'JetBrains Mono',monospace;font-size:.52em;font-weight:600;color:#B42318;background:#FDECEA;border-radius:999px;padding:.25em .6em;animation:vbRec 8s infinite}
.sc-vb .rec i{width:.65em;height:.65em;border-radius:50%;background:#E5484D;animation:blink 1s steps(1) infinite}
@keyframes vbRec{0%,48%{opacity:1}52%,96%{opacity:0}100%{opacity:1}}
.sc-vb .cur{position:absolute;left:0;top:0;width:1.1em;height:1.1em;animation:vbCur 8s infinite}
.sc-vb .cur .ic{width:100%;height:100%;fill:#0F2A22;stroke:#fff;stroke-width:1.5}
@keyframes vbCur{0%{transform:translate(2em,6.5em)}14%,22%{transform:translate(6.5em,3.6em)}36%,44%{transform:translate(9.5em,6.2em)}50%,100%{transform:translate(2em,6.5em)}}
.sc-vb .ring{position:absolute;left:0;top:0;width:1.6em;height:1.6em;margin:-.8em 0 0 -.8em;border-radius:50%;border:.12em solid #2BC584;opacity:0;animation:vbRing 8s infinite}
@keyframes vbRing{0%,14%{opacity:0;transform:translate(6.5em,3.6em) scale(.3)}16%{opacity:1}22%{opacity:0;transform:translate(6.5em,3.6em) scale(1.4)}23%,36%{opacity:0;transform:translate(9.5em,6.2em) scale(.3)}38%{opacity:1}44%,100%{opacity:0;transform:translate(9.5em,6.2em) scale(1.4)}}
.sc-vb .talk{animation:vbTalk 8s infinite}
.sc-vb .talk .mono{font-family:'JetBrains Mono',monospace;font-size:.9em;opacity:.8}
@keyframes vbTalk{0%{opacity:0}4%,46%{opacity:1}51%,100%{opacity:0}}
.sc-vb .arw{color:#1FA971;font-size:1.3em;animation:vbArw 8s infinite}
@keyframes vbArw{0%,47%{opacity:0;transform:translateX(-.4em)}52%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
.sc-vb .pr{padding:.75em;animation:vbPr 8s infinite}
@keyframes vbPr{0%,49%{opacity:0;transform:translateX(.5em)}54%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
.sc-vb .ph{display:flex;align-items:center;gap:.35em;font-size:.72em;font-weight:600;color:#0E7A4A;margin-bottom:.55em}
.sc-vb .fr{display:flex;gap:.3em;margin-bottom:.5em}
.sc-vb .fr i{flex:1;height:1.7em;border-radius:.3em;background:#EAF7F0;border:1px solid #CDEBDC;animation:vbPop 8s infinite both}
.sc-vb .fr i:nth-child(2){animation-delay:.25s}.sc-vb .fr i:nth-child(3){animation-delay:.5s}
@keyframes vbPop{0%,55%{opacity:0;transform:scale(.7)}60%,100%{opacity:1;transform:none}}
.sc-vb .ln{animation:vbLn 8s infinite}
@keyframes vbLn{0%,62%{opacity:0}68%,100%{opacity:1}}
.sc-vb .to{display:flex;flex-wrap:wrap;gap:.3em;margin-top:.55em;animation:vbTo 8s infinite}
.sc-vb .to span{font-size:.56em;font-weight:600;border:1px solid #E1E8E4;border-radius:999px;padding:.25em .6em;color:#33463D}
@keyframes vbTo{0%,70%{opacity:0}76%,100%{opacity:1}}

/* Clipboard history */
.sc-cb .scr{left:0;top:0;width:24em;height:10.4em;border-radius:.8em;background:#F1F5F3;border:1px solid #E1E8E4;overflow:hidden}
.sc-cb .mb{height:1.3em;background:#E4EBE7}
.sc-cb .notch{left:9.5em;top:0;width:5em;height:1.3em;background:#0B0D0C;border-radius:0 0 .7em .7em;overflow:hidden;animation:cbNotch 7s infinite}
@keyframes cbNotch{0%,16%{left:9.5em;width:5em;height:1.3em;border-radius:0 0 .7em .7em}28%,82%{left:4em;width:16em;height:8.9em;border-radius:0 0 1.2em 1.2em}94%,100%{left:9.5em;width:5em;height:1.3em;border-radius:0 0 .7em .7em}}
.sc-cb .list{padding:1.6em .8em .6em;display:flex;flex-direction:column;gap:.45em;animation:cbList 7s infinite}
@keyframes cbList{0%,27%{opacity:0}33%,80%{opacity:1}85%,100%{opacity:0}}
.sc-cb .it{display:flex;align-items:center;gap:.55em;background:#1C211F;border-radius:.55em;padding:.45em .6em;color:#F2F6F4;font-size:.72em;white-space:nowrap;animation:cbIt 7s infinite both}
.sc-cb .it:nth-child(2){animation-delay:.15s}.sc-cb .it:nth-child(3){animation-delay:.3s}
@keyframes cbIt{0%,28%{opacity:0;transform:translateY(-.4em)}34%,100%{opacity:1;transform:none}}
.sc-cb .ii{width:1.7em;height:1.7em;border-radius:.4em;background:#2A322E;color:#35D28E;display:flex;align-items:center;justify-content:center;flex:none}
.sc-cb .img{width:2.3em;height:1.7em;border-radius:.35em;background:#2BC584;flex:none}
.sc-cb .cur{left:12em;top:7.5em;width:1.1em;height:1.1em;animation:cbCur 7s infinite}
.sc-cb .cur .ic{width:100%;height:100%;fill:#0F2A22;stroke:#fff;stroke-width:1.5}
@keyframes cbCur{0%,4%{opacity:0;transform:none}8%{opacity:1;transform:none}20%,84%{opacity:1;transform:translate(0,-6.6em)}92%{opacity:0;transform:translate(0,-6.6em)}100%{opacity:0;transform:none}}

@media (prefers-reduced-motion: reduce){
  .sc,.sc *{animation:none!important}
  .sc-ask .old,.sc-sn .k2,.sc-ss .fly,.sc-ss .cur,.sc-vb .ring{opacity:0}
  .sc-ask .new,.sc-sn .v2,.sc-ss .thumb{opacity:1}
}

/* Dictation and Translation (hero dock only) */
.sc .add{color:#0E7A4A;font-weight:700;background:rgba(43,197,132,.16);border-radius:.15em}
.sc-dk .dkf{padding:.75em .9em}
.sc-dk .dkt{font-size:.92em;line-height:1.45}
.sc-dk .dko{animation:dkO 7s infinite}
@keyframes dkO{0%,55%{opacity:0}60%,93%{opacity:1}98%,100%{opacity:0}}
.sc-dk .dks{font-size:.82em;line-height:1.45;color:#3D4F47;background:#fff;border:1px solid #E1E8E4;border-radius:1em 1em 1em .3em;padding:.5em .8em;box-shadow:0 .6em 1.2em -.8em rgba(16,53,42,.3);animation:dkS 7s infinite}
@keyframes dkS{0%,3%{opacity:0;transform:translateY(.3em)}8%,50%{opacity:1;transform:none}55%,100%{opacity:0}}
.sc-dk .dks s{text-decoration:none;background-image:linear-gradient(#B42318,#B42318);background-repeat:no-repeat;background-position:0 56%;background-size:0 2px;animation:dkX 7s infinite}
@keyframes dkX{0%,24%{background-size:0 2px;color:#3D4F47}30%,100%{background-size:100% 2px;color:#B42318}}
.sc-dk .dkp{animation:dkP 7s infinite}
@keyframes dkP{0%,2%{opacity:0}6%,50%{opacity:1}55%,100%{opacity:0}}
.sc-tl .tlc{display:flex;align-items:center;gap:.5em;font-size:1.1em}
.sc-tl .tla{color:#9A4A06}
.sc-tl .tlp{animation:tlP 8s infinite}
@keyframes tlP{0%,2%{opacity:0}6%,48%{opacity:1}53%,100%{opacity:0}}
.sc-tl .tls{font-size:.86em;line-height:1.5;color:#3D4F47;background:#fff;border:1px solid #E1E8E4;border-radius:1em 1em 1em .3em;padding:.45em .8em;box-shadow:0 .6em 1.2em -.8em rgba(16,53,42,.3);animation:tlS 8s infinite}
.sc-tl .tls s{text-decoration:line-through;text-decoration-color:#B42318;text-decoration-thickness:2px;color:#B42318}
@keyframes tlS{0%,6%{opacity:0;transform:translateY(.3em)}11%,48%{opacity:1;transform:none}53%,100%{opacity:0}}
.sc-tl .tlo{padding:.75em .9em;animation:tlO 8s infinite}
.sc-tl .tlt{font-size:.92em;line-height:1.45}
@keyframes tlO{0%,52%{opacity:0;transform:translateY(.4em)}58%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.sc-dk .dks,.sc-dk .dkp,.sc-tl .tlp,.sc-tl .tls{opacity:0}}

/* reply scene */
.sc-rp{height:15em}
.sc-rp .ml{padding:.75em .9em;overflow:hidden}
.sc-rp .fr{display:flex;align-items:center;gap:.55em;margin-bottom:.4em}
.sc-rp .av{width:2.1em;height:2.1em;border-radius:50%;background:#FCEBF3;color:#BE185D;font-size:.68em;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.sc-rp .nm{display:block;font-size:.8em;font-weight:600}
.sc-rp .sb{display:block;font-size:.68em;color:#5B6B63}
.sc-rp .rd{margin-left:auto;font-size:.58em;animation:rpRd 10s infinite}
.sc-rp .rd .ic{color:#6D28D9}
@keyframes rpRd{0%,14%{opacity:0}19%,94%{opacity:1}98%,100%{opacity:0}}
.sc-rp .scan{position:absolute;left:0;right:0;top:0;height:1.4em;background:linear-gradient(rgba(109,40,217,0),rgba(109,40,217,.14));border-bottom:2px solid #8B5CF6;animation:rpScan 10s infinite}
@keyframes rpScan{0%{transform:translateY(-1.6em);opacity:0}3%{opacity:1}18%{transform:translateY(5em);opacity:1}21%,100%{transform:translateY(5em);opacity:0}}
.sc-rp .bx{padding:.7em .9em}
.sc-rp .out{font-size:.78em;line-height:1.45}
.sc-rp .out span{display:block;animation:rpLn 10s infinite both}
.sc-rp .out span:nth-child(2){animation-delay:.35s}.sc-rp .out span:nth-child(3){animation-delay:.7s}.sc-rp .out span:nth-child(4){animation-delay:.9s}
@keyframes rpLn{0%,58%{opacity:0;transform:translateY(.3em)}62%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
.sc-rp .gap{height:.55em}
.sc-rp .snd{position:absolute;right:.7em;bottom:.6em;display:inline-flex;align-items:center;gap:.35em;font-size:.62em;font-weight:600;color:#5B6B63;border:1px solid #E1E8E4;border-radius:.6em;padding:.35em .7em}
.sc-rp .rp{animation:rpPill 10s infinite}
@keyframes rpPill{0%,20%{opacity:0;transform:translateY(.4em)}24%,54%{opacity:1;transform:none}58%,100%{opacity:0}}
.sc-rp .say{max-width:20em;background:#fff;border:1px solid #E1E8E4;border-radius:1em 1em 1em .3em;padding:.45em .8em;font-size:.8em;line-height:1.35;box-shadow:0 .6em 1.2em -.8em rgba(16,53,42,.3);animation:rpSay 10s infinite}
@keyframes rpSay{0%,28%{opacity:0;transform:scale(.92)}33%,54%{opacity:1;transform:none}58%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.sc-rp .out span{opacity:1}.sc-rp .scan{opacity:0}}