/* Screen Translator (/screen-translator). Loaded after site.css; every class here starts with t- / td-. */

/* ---------- hero ---------- */
.t-hero{padding:clamp(28px,5vw,64px) 0 0}
.t-hero-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:36px clamp(28px,5vw,64px);align-items:center}
.t-hero-txt{display:flex;flex-direction:column;gap:18px}
.t-h1{font-size:clamp(38px,5.2vw,62px);line-height:1.04;letter-spacing:-.04em}
.t-sub{font-size:clamp(18px,1.7vw,22px);line-height:1.5;color:var(--paper);font-weight:500;letter-spacing:-.01em;max-width:30em}
.t-keys{color:var(--mute);max-width:36em}
.t-hero-txt .cta{margin-top:4px}
.t-hero-txt .cta-note{margin-top:-6px}
@media (max-width:960px){.t-hero-in{grid-template-columns:1fr}}

/* ---------- sections ---------- */
.t-sec{padding-top:clamp(80px,10vw,128px)}
.t-sec p kbd,.t-hero p kbd{font-size:.82em}

.t-uses{margin-top:clamp(32px,4vw,44px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,44px) clamp(24px,4vw,48px)}
.t-use{display:flex;flex-direction:column;gap:10px}
.t-use h3{font-size:19px;margin-top:8px}
.t-use p{color:var(--mute);font-size:15.5px}
.t-ill{border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line);background:var(--bg-2);aspect-ratio:240/140}
.t-ill svg{width:100%;height:100%}
.ill-t{font-family:var(--sans)}
.ill-m{font-family:var(--mono)}
@media (max-width:760px){.t-uses{grid-template-columns:1fr}}

.t-why{margin-top:clamp(32px,4vw,44px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,4vw,48px);border-top:1px solid var(--line)}
.t-why>div{padding:22px 0}
.t-why h3{font-size:17px}
.t-why p{margin-top:8px;color:var(--mute);font-size:15px}
@media (max-width:900px){.t-why{grid-template-columns:1fr}.t-why>div{border-bottom:1px solid var(--line)}}

/* comparison table: a table on wide screens, one card per tool on phones */
.t-cmp-h{margin-top:clamp(48px,6vw,72px);font-size:22px}
.t-cmp-sub{margin-top:6px;color:var(--mute);font-size:15px}
.t-cmp-wrap{margin-top:18px;border-radius:16px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.t-cmp{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.55}
.t-cmp th,.t-cmp td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.t-cmp thead th{font-size:13px;font-weight:600;color:var(--mute-2);background:var(--bg-3)}
.t-cmp tbody th{font-weight:600;width:22%}
.t-cmp td{color:var(--mute)}
.t-cmp td b{color:var(--paper);font-weight:600}
.t-cmp tbody tr:last-child>*{border-bottom:0}
.t-cmp tr.me th{color:var(--amber)}
.t-cmp tr.me>*{background:rgba(255,181,71,.06)}
@media (max-width:760px){
  .t-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .t-cmp,.t-cmp tbody,.t-cmp tr,.t-cmp th,.t-cmp td{display:block;width:auto}
  .t-cmp tr{padding:6px 0;border-bottom:1px solid var(--line)}
  .t-cmp tbody tr:last-child{border-bottom:0}
  .t-cmp tbody th{width:auto;padding:12px 16px 4px;border:0;font-size:15.5px}
  .t-cmp td{border:0;padding:4px 16px 8px}
  .t-cmp td::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;color:var(--mute-2);margin-bottom:1px}
}

.t-steps{list-style:none;margin:clamp(32px,4vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.t-steps li{border-radius:20px;padding:24px 24px 26px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:10px}
.t-step-n{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font:600 13px/1 var(--mono);color:var(--on-amber);background:var(--amber)}
.t-steps h3{font-size:18px;margin-top:6px}
.t-steps p{color:var(--mute);font-size:15px}
@media (max-width:860px){.t-steps{grid-template-columns:1fr}}

.t-langs{margin-top:clamp(32px,4vw,44px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:28px clamp(28px,5vw,64px);align-items:start}
.t-langs h3{font-size:17px;margin-bottom:14px}
.t-langs p{color:var(--mute);font-size:15.5px}
.t-langs p + p{margin-top:12px}
.t-langs em{font-style:normal;color:var(--paper);font-weight:600}
.t-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.t-chips li{font-size:14px;padding:6px 11px;border-radius:999px;background:rgba(242,240,235,.06);box-shadow:inset 0 0 0 1px var(--line-2)}
@media (max-width:860px){.t-langs{grid-template-columns:1fr}}

.t-price{border-radius:20px;padding:clamp(22px,3vw,32px);background:radial-gradient(520px 200px at 100% 0%,rgba(255,181,71,.12),transparent 70%),var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:12px;max-width:860px}
.t-price .h-sec{font-size:clamp(24px,2.6vw,30px)}
.t-price p{color:var(--mute);font-size:16.5px;max-width:46em}
.t-price b{color:var(--paper);font-weight:600;font-variant-numeric:tabular-nums}

.t-end{display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;align-items:start;max-width:860px}
.t-end img{width:64px;height:64px}
.t-end .h-sec{font-size:clamp(24px,2.8vw,34px)}
.t-end p{margin-top:12px;color:var(--mute);font-size:16px;max-width:40em}
.t-end .cta{margin-top:20px}
@media (max-width:520px){.t-end{grid-template-columns:1fr}.t-end img{width:48px;height:48px}.t-end .btn,.t-hero-txt .btn{width:100%}}

/* ---------- demo: Ctrl+1 → select → Y → translated in place (fixed 520×340 world, scaled by JS) ---------- */
.t-demo{margin:0}
.t-scene{position:relative;aspect-ratio:520/340;border-radius:14px;overflow:hidden;background:#20343C;box-shadow:0 0 0 1px var(--line),0 30px 70px -30px rgba(0,0,0,.75),0 0 120px -50px rgba(255,181,71,.25)}
.t-world{position:absolute;left:0;top:0;width:520px;height:340px;transform-origin:0 0;transform:scale(var(--s,1));font-family:var(--sans);color:#1B1F23;overflow:hidden}
.t-world .wall{position:absolute;inset:0;background:radial-gradient(420px 300px at 10% 0%,#46707F 0,transparent 70%),radial-gradient(400px 300px at 100% 100%,#7A5C42 0,transparent 70%),#22343B}
.t-demo-cap{margin-top:12px;font-size:12.5px;color:var(--mute-2)}
.td-win{position:absolute;left:18px;top:18px;width:484px;height:304px;border-radius:10px;background:#F7F8F9;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 20px 44px -16px rgba(0,0,0,.6);overflow:hidden}
.td-bar{height:30px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#E4E7EA;font-size:11px;color:#40464C}
.td-bar b{width:11px;height:11px;border-radius:3px;background:linear-gradient(135deg,#3B7285,#1E3A48)}
.td-side{position:absolute;left:0;top:30px;bottom:0;width:96px;padding:16px 14px;background:#EEF1F3}
.td-side span{display:block;height:8px;border-radius:4px;background:#DCE1E5;margin-bottom:13px}
.td-side span.on{background:#B9CAD2}
.td-crumb{position:absolute;left:114px;top:38px;font-size:10.5px;color:#7A8288}
.td-rows{position:absolute;left:114px;right:18px;top:204px;display:grid;gap:8px}
.td-rows span{height:24px;border-radius:5px;background:#fff;box-shadow:0 0 0 1px #E3E7EA}
.td-card{position:absolute;left:132px;top:84px;width:346px;padding:12px 14px;border-radius:8px;background:#FFF6E6;box-shadow:0 0 0 1px #F0DDBA;color:#4A3A20}
.td-ln{position:relative;display:grid;font-size:11.5px;line-height:18px;height:18px;white-space:nowrap}
.td-ln>span,.td-btn>span{grid-area:1/1}
.td-h{font-size:13.5px;font-weight:700;line-height:20px;height:22px;color:#3B2C12}
.td-btn{position:relative;display:inline-grid;margin-top:9px;height:24px;padding:0 11px;border-radius:6px;background:#3B2C12;color:#FFF6E6;font-size:11px;font-weight:600;line-height:24px}
.td-card .n{opacity:0}
.td-shim{position:absolute;left:142px;top:94px;width:326px}
.td-shim i{display:block;height:16px;margin-bottom:4px;border-radius:4px;opacity:0;background:linear-gradient(90deg,rgba(255,181,71,.06),rgba(255,181,71,.38),rgba(255,181,71,.06)) 0 0/200% 100%}
.td-shim i:nth-child(1){width:46%;height:18px}
.td-shim i:nth-child(2){width:84%}
.td-shim i:nth-child(3){width:76%}
.td-sel{position:absolute;left:124px;top:76px;width:362px;height:126px;outline:1.5px solid var(--amber);box-shadow:0 0 0 1200px rgba(8,10,12,.42);opacity:0}
.td-sel .cn{position:absolute;width:13px;height:13px;border:2.5px solid var(--amber)}
.td-sel .cn.tl{left:-4px;top:-4px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.td-sel .cn.tr{right:-4px;top:-4px;border-left:0;border-bottom:0;border-radius:0 4px 0 0}
.td-sel .cn.bl{left:-4px;bottom:-4px;border-right:0;border-top:0;border-radius:0 0 0 4px}
.td-sel .cn.br{right:-4px;bottom:-4px;border-left:0;border-top:0;border-radius:0 0 4px 0}
.td-tb{position:absolute;left:338px;top:210px;display:flex;gap:3px;padding:4px;border-radius:9px;background:rgba(26,28,31,.9);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 10px 24px -8px rgba(0,0,0,.6);opacity:0}
.td-tb i{width:24px;height:22px;border-radius:6px;background:rgba(255,255,255,.08);font:600 9px/22px var(--sans);font-style:normal;text-align:center;color:var(--amber)}
.td-key{position:absolute;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(18,20,23,.88);color:#EDEFF1;font-size:11px;white-space:nowrap;opacity:0}
.td-key kbd{background:var(--amber);color:var(--on-amber);box-shadow:none;font-size:11px}
.td-key.k1{left:206px;top:140px}
.td-key.k2{left:150px;top:258px}
.td-chip{position:absolute;left:124px;top:48px;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;background:rgba(24,26,29,.92);box-shadow:0 0 0 1px rgba(255,255,255,.1);color:#D9DCDF;font-size:10.5px;white-space:nowrap;opacity:0}
.td-chip b{color:var(--amber);font-weight:600}
.td-chip span:last-child{color:#fff;font-weight:600}
.td-cur{position:absolute;left:0;top:0;width:20px;height:20px;z-index:5;opacity:0;transform:translate(124px,76px);filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.td-cur svg{width:20px;height:20px}

/* the loop only runs while the demo is on screen (translator.js adds .in) */
.t-demo.in .td-key.k1{animation:td-k1 10s linear infinite}
.t-demo.in .td-sel{animation:td-sel 10s var(--out) infinite}
.t-demo.in .td-cur{animation:td-cur 10s var(--out) infinite}
.t-demo.in .td-tb{animation:td-tb 10s var(--out) infinite}
.t-demo.in .td-tb .tr{animation:td-trb 10s linear infinite}
.t-demo.in .td-key.k2{animation:td-k2 10s linear infinite}
.t-demo.in .td-shim i{animation:td-shim 10s linear infinite}
.t-demo.in .td-card .o{animation:td-o 10s linear infinite}
.t-demo.in .td-card .n{animation:td-n 10s linear infinite}
.t-demo.in .td-card{animation:td-card 10s linear infinite}
.t-demo.in .td-chip{animation:td-chip 10s var(--out) infinite}
@keyframes td-k1{0%,3%{opacity:0;transform:translateY(6px)}6%,13%{opacity:1;transform:none}16%,100%{opacity:0}}
@keyframes td-sel{0%,14%{opacity:0;width:0;height:0}15%{opacity:1;width:0;height:0}25%,88%{opacity:1;width:362px;height:126px}92%,100%{opacity:0;width:362px;height:126px}}
@keyframes td-cur{0%,13%{opacity:0;transform:translate(124px,76px)}15%{opacity:1;transform:translate(124px,76px)}25%{opacity:1;transform:translate(486px,202px)}29%{opacity:1;transform:translate(486px,202px)}33%,100%{opacity:0;transform:translate(486px,202px)}}
@keyframes td-tb{0%,26%{opacity:0;transform:translateY(-4px)}29%,88%{opacity:1;transform:none}92%,100%{opacity:0}}
@keyframes td-trb{0%,33%{background:rgba(255,255,255,.08);color:var(--amber)}34%,100%{background:var(--amber);color:var(--on-amber)}}
@keyframes td-k2{0%,31%{opacity:0;transform:translateY(6px)}33%,42%{opacity:1;transform:none}45%,100%{opacity:0}}
@keyframes td-shim{0%,35%{opacity:0;background-position:100% 0}37%{opacity:1;background-position:100% 0}50%{opacity:1;background-position:-100% 0}52%,100%{opacity:0;background-position:-100% 0}}
@keyframes td-o{0%,50%{opacity:1}53%,94%{opacity:0}97%,100%{opacity:1}}
@keyframes td-n{0%,51%{opacity:0;clip-path:inset(0 100% 0 0)}52%{opacity:1;clip-path:inset(0 100% 0 0)}58%,92%{opacity:1;clip-path:inset(0 0 0 0)}95%,100%{opacity:0;clip-path:inset(0 0 0 0)}}
@keyframes td-card{0%,49%{background:#FFF6E6}51%,94%{background:#FFF8EC}97%,100%{background:#FFF6E6}}
@keyframes td-chip{0%,56%{opacity:0;transform:translateY(4px)}59%,88%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}

/* still image for people who turn off motion: the translated end state */
@media (prefers-reduced-motion:reduce){
  .t-demo.in *{animation:none!important}
  .t-demo .td-card .o{opacity:0}
  .t-demo .td-card .n{opacity:1}
  .t-demo .td-sel,.t-demo .td-tb,.t-demo .td-chip{opacity:1}
  .t-demo .td-tb .tr{background:var(--amber);color:var(--on-amber)}
}