:root {
  --chassis: #e7e4dd; --panel: #f2f0eb; --paper: #fbfaf7; --ink: #121212; --ink-2: #5f5b53; --ink-3: #8f8a80; --off: #d9d5cc;
  --line: rgba(18,18,18,.09); --sig: #ff4f00; --sig-dim: rgba(255,79,0,.14); --oled: #0b0b0a;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--chassis); color: var(--ink); font: 400 16px/1.55 Geist, -apple-system, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
code { font: 400 .88em 'Geist Mono', monospace; background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 4px; }
kbd { font: 500 12px 'Geist Mono', monospace; padding: 3px 8px; border-radius: 6px; background: linear-gradient(#fbfaf7, #ebe8e1); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), inset 0 -2px 0 rgba(0,0,0,.08); }
.lbl { font: 500 11px 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pt { display: inline-block; width: .2em; height: .2em; border-radius: 50%; background: var(--sig); margin-left: .08em; }
.fine { font-size: 13px; color: var(--ink-3); }
.badges { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.badges img { display: block; height: 54px; width: auto; max-width: 100%; }
.center { text-align: center; margin-top: 18px; }

/* buttons: physical keys */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px; border-radius: 12px; font: 500 12px 'Geist Mono', monospace; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: linear-gradient(#ff6a26, #f24a00); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), inset 0 -4px 0 rgba(0,0,0,.16), 0 10px 24px -10px rgba(255,79,0,.6);
  transition: transform 90ms ease-out, box-shadow 160ms; }
.btn:hover { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), inset 0 -4px 0 rgba(0,0,0,.16), 0 14px 30px -10px rgba(255,79,0,.75); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), inset 0 -2px 0 rgba(0,0,0,.16); }
.btn.ghost { color: var(--ink); background: linear-gradient(#fbfaf7, #ebe8e1); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), inset 0 -4px 0 rgba(0,0,0,.07), 0 1px 0 #fff; }
.btn.sm { height: 36px; padding: 0 14px; font-size: 10.5px; }
.btn.lg { height: 58px; padding: 0 28px; font-size: 13px; }
.btn .key { width: 14px; height: 14px; border-radius: 4px; background: radial-gradient(circle at 50% 50%, #fff 0 2px, transparent 2.5px), rgba(255,255,255,.18); }

/* nav */
.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 28px; padding: 14px max(20px, calc(50vw - 600px));
  background: rgba(231,228,221,.82); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 10px; font: 900 22px Doto; }
.mini { display: grid; grid-template-columns: repeat(3, 5px); gap: 3px; }
.mini i { width: 5px; height: 5px; border-radius: 50%; background: #bdb7ad; }
.mini i:nth-child(5) { background: var(--sig); }
.nav nav { display: flex; gap: 24px; margin-left: auto; }
.nav nav a { font: 500 11px 'Geist Mono'; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); transition: color 120ms; }
.nav nav a:hover { color: var(--ink); }

/* hero */
.hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 80px 20px 60px; }
.hero h1 { font: 900 clamp(36px, 3.7vw, 56px)/1.02 Doto; white-space: nowrap; letter-spacing: -.01em; margin: 18px 0 22px; }
.lede { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 30ch; margin-bottom: 30px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.hero > * { min-width: 0; }
.hero-copy > * { animation: rise 700ms var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 60ms; } .hero-copy > :nth-child(3) { animation-delay: 120ms; } .hero-copy > :nth-child(4) { animation-delay: 180ms; } .hero-copy > :nth-child(5) { animation-delay: 240ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }

/* the device */
.device { position: relative; border-radius: 26px; padding: 0 0 18px; background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 #fff, 0 50px 90px -40px rgba(0,0,0,.45), 0 0 0 .5px rgba(0,0,0,.15);
  animation: rise 900ms 120ms var(--ease) both; }
.screw { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f6f4ef, #bdb7ad); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); }
.screw::after { content: ''; position: absolute; left: 1.5px; right: 1.5px; top: 4px; height: 1px; background: rgba(0,0,0,.35); transform: rotate(var(--r, 30deg)); }
.s1 { left: 11px; top: 11px; } .s2 { right: 11px; top: 11px; --r: -40deg; } .s3 { left: 11px; bottom: 11px; --r: 70deg; } .s4 { right: 11px; bottom: 11px; --r: 5deg; }
.rail { display: flex; align-items: center; gap: 8px; padding: 14px 26px; border-bottom: 1px solid var(--line); font: 900 18px Doto; }
.rail .led { width: 7px; height: 7px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 0 3px var(--sig-dim), 0 0 8px rgba(255,79,0,.6); animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .35; } }
.rail .model { font: 500 10px 'Geist Mono'; letter-spacing: .14em; color: var(--ink-3); }
.oled { flex: 1; margin-left: 14px; height: 26px; border-radius: 7px; background: var(--oled); overflow: hidden; position: relative; box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.oled span { position: absolute; top: 50%; white-space: nowrap; font: 600 11px Doto; letter-spacing: .12em; color: var(--sig); text-shadow: 0 0 6px rgba(255,79,0,.7); transform: translateY(-50%); animation: tape 22s linear infinite; left: 100%; }
.oled span.now { animation: none; left: 12px; }
@keyframes tape { to { transform: translate(-100%, -50%); left: -100%; } }
.query { display: flex; align-items: center; gap: 4px; padding: 20px 26px 6px; min-height: 76px; }
#typed { font: 900 clamp(20px, 2.1vw, 30px)/1.1 Doto; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; direction: rtl; text-align: left; min-width: 0; flex: 0 1 auto; }
.caret { width: 3px; height: 34px; background: var(--sig); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.odo { margin-left: auto; text-align: right; }
.odo b { display: block; font: 900 30px/1 Doto; }
.matrix { display: block; width: calc(100% - 52px); height: 30px; margin: 4px 26px 10px; }
.keys { display: flex; gap: 6px; padding: 0 26px 14px; }
.k { font: 500 10px 'Geist Mono'; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding: 7px 12px; border-radius: 8px; background: linear-gradient(#fbfaf7, #ebe8e1);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), inset 0 -3px 0 rgba(0,0,0,.07); transition: all 140ms; }
.k.on { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), inset 0 -1px 0 rgba(0,0,0,.07); transform: translateY(2px); }
.k.on::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--sig); margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 6px var(--sig); }
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 26px; min-height: 210px; }
.r { border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; opacity: 0; transform: translateY(10px) scale(.98); animation: rin 420ms var(--ease) forwards; position: relative; }
.r.sel { box-shadow: inset 0 0 0 1.5px var(--sig), 0 0 0 4px var(--sig-dim); }
@keyframes rin { to { opacity: 1; transform: none; } }
.r .th { height: 110px; position: relative; }
.r .th .score { position: absolute; right: 8px; top: 8px; font: 600 11px Doto; color: #fff; background: rgba(0,0,0,.55); padding: 2px 6px; border-radius: 5px; }
.r .nm { font: 500 12px Geist; padding: 8px 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r .sn { font: 400 10.5px 'Geist Mono'; color: var(--ink-3); padding: 2px 10px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r .sn em { font-style: normal; color: var(--sig); }

/* strip */
.strip { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 1200px; margin: 0 auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip div { padding: 26px 20px; display: grid; gap: 6px; }
.strip div + div { border-left: 1px solid var(--line); }
.strip .strip-note { grid-column: 1 / -1; border-top: 1px solid var(--line); padding: 10px 20px; font: 500 12px/1 "Geist Mono", monospace; letter-spacing: .04em; color: var(--ink-2); text-decoration: none; }
.strip .strip-note:hover { color: var(--ink); }
.strip b { font: 900 34px/1 Doto; }

/* sections */
.sec { max-width: 1200px; margin: 0 auto; padding: 110px 20px 40px; }
.sec h2 { font: 600 clamp(34px, 4.4vw, 56px)/1.05 Geist; letter-spacing: -.035em; margin: 14px 0 18px; max-width: 18ch; }
.sec .sub { font-size: 18px; color: var(--ink-2); max-width: 60ch; margin-bottom: 40px; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.card { padding: 14px 14px 22px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 #fff; transition: transform 300ms var(--ease), box-shadow 300ms; }
.card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 #fff, 0 24px 40px -24px rgba(0,0,0,.35); }
.card h3 { font: 600 17px Geist; letter-spacing: -.01em; margin: 18px 6px 6px; }
.card p { font-size: 14px; color: var(--ink-2); margin: 0 6px; }
.vis { height: 160px; border-radius: 12px; position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-content: flex-end; gap: 6px; padding: 12px; }
.vis-photo { background: linear-gradient(180deg, #8fc6e8 0%, #bfe1ef 45%, #3fb3c9 46%, #2a8fa8 100%); }
.vis-photo::before { content: ''; position: absolute; left: 18%; bottom: 40%; width: 6px; height: 70px; background: #6b4a2b; border-radius: 3px; transform: rotate(-6deg); }
.vis-photo::after { content: ''; position: absolute; left: calc(18% - 30px); bottom: calc(40% + 58px); width: 66px; height: 30px; border-radius: 50%; background: radial-gradient(ellipse at 50% 100%, #2f7a3a, #1d5a28); clip-path: polygon(0 60%, 50% 0, 100% 60%, 50% 40%); }
.tag { position: relative; z-index: 1; font: 500 10px 'Geist Mono'; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(18,18,18,.72); padding: 4px 8px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255,79,0,.5); }
.vis-audio { background: var(--oled); flex-direction: column; justify-content: center; align-content: stretch; }
.vis-audio .wave { height: 46px; background: repeating-linear-gradient(90deg, var(--sig) 0 3px, transparent 3px 6px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); animation: eq 1.2s ease-in-out infinite alternate; transform-origin: center; }
@keyframes eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.vis-audio q { font: 600 13px Doto; color: var(--sig); text-transform: uppercase; letter-spacing: .06em; text-shadow: 0 0 8px rgba(255,79,0,.6); margin-top: 14px; quotes: none; }
.vis-doc { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); flex-direction: column; align-content: stretch; justify-content: center; gap: 10px; padding: 20px; }
.vis-doc .line { height: 8px; border-radius: 4px; background: var(--off); }
.vis-doc .line.hit { background: linear-gradient(90deg, var(--off) 30%, var(--sig) 30% 70%, var(--off) 70%); box-shadow: 0 0 0 4px var(--sig-dim); }
.vis-doc .short { width: 60%; }
.vis-disk { background: var(--oled); flex-direction: column; align-content: stretch; justify-content: center; gap: 8px; }
.vis-disk span { font: 400 11.5px 'Geist Mono'; color: #b9b4aa; }
.vis-disk span:first-child { color: var(--sig); }

.dark { max-width: none; background: var(--oled); color: #f2f0eb; padding: 110px max(20px, calc(50vw - 580px)); margin-top: 90px; }
.dark .lbl { color: #8f8a80; }
.cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; margin-top: 20px; }
.cols > p { font-size: 19px; color: #b9b4aa; }
.ticks { list-style: none; display: grid; gap: 14px; }
.ticks li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; }
.ticks li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 8px var(--sig); transform: translateY(-2px); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plan { position: relative; padding: 26px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 #fff, inset 0 -4px 0 rgba(0,0,0,.05); }
.plan.best { box-shadow: inset 0 0 0 2px var(--sig), inset 0 1px 0 #fff, 0 30px 50px -30px rgba(255,79,0,.5); }
.plan.best > .lbl { color: var(--sig); }
.badge { position: absolute; top: -11px; right: 20px; font: 500 10px 'Geist Mono'; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--sig); padding: 4px 10px; border-radius: 6px; }
.price { font: 900 60px/1 Doto; margin: 16px 0 12px; }
.price small { font: 500 12px 'Geist Mono'; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-left: 8px; }
.plan p { font-size: 14px; color: var(--ink-2); }

.steps { list-style: none; display: grid; gap: 14px; }
.steps li { display: grid; grid-template-columns: 54px 1fr 300px; gap: 22px; align-items: center; padding: 20px 22px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 #fff; }
.steps .n { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font: 900 22px Doto; color: #fff; background: var(--ink); }
.steps h3 { font: 600 18px Geist; margin-bottom: 4px; }
.steps p { font-size: 14.5px; color: var(--ink-2); }
.mock { height: 96px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: center; gap: 18px; padding: 14px; font-size: 12px; }
.m-drag .app { width: 48px; height: 48px; border-radius: 12px; background: url(icon-256.png) center/cover; animation: drag 2.6s var(--ease) infinite; }
@keyframes drag { 0%, 15% { transform: none; } 55%, 70% { transform: translateX(96px) scale(.8); opacity: .6; } 100% { transform: none; } }
.m-drag .arrow { font: 600 22px Geist; color: var(--ink-3); }
.m-drag .folder { width: 54px; height: 44px; border-radius: 6px; background: linear-gradient(#7cc4f2, #3a9be0); box-shadow: inset 0 6px 0 rgba(255,255,255,.3); }
.m-alert, .m-settings { flex-direction: column; gap: 4px; text-align: center; }
.m-alert b { font-size: 12.5px; } .m-alert span, .m-settings span { color: var(--ink-3); font-size: 11.5px; }
.m-alert i, .m-settings i { font-style: normal; margin-top: 6px; padding: 4px 14px; border-radius: 6px; background: #2e7cf6; color: #fff; font-size: 11.5px; }
.m-settings i { background: #e9e7e2; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 3px var(--sig-dim), 0 0 0 1.5px var(--sig); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 6px rgba(255,79,0,.05), 0 0 0 1.5px var(--sig); } }
.m-keys kbd { font-size: 15px; padding: 10px 14px; }
.m-keys kbd.w { padding: 10px 34px; }

.faq { display: grid; gap: 10px; max-width: 820px; }
details { border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); padding: 0 22px; transition: background 200ms; }
details[open] { background: var(--paper); }
summary { list-style: none; cursor: pointer; padding: 20px 0; font: 500 16px Geist; display: flex; justify-content: space-between; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font: 400 22px 'Geist Mono'; color: var(--ink-3); transition: transform 240ms var(--ease); }
details[open] summary::after { transform: rotate(45deg); color: var(--sig); }
details p { padding: 0 0 20px; color: var(--ink-2); font-size: 15px; max-width: 64ch; }
details a { color: var(--sig); }

.final { position: relative; text-align: center; padding: 140px 20px 120px; margin-top: 90px; overflow: hidden; background: var(--panel); border-top: 1px solid var(--line); }
.final h2 { position: relative; font: 900 clamp(44px, 6vw, 80px)/.95 Doto; margin-bottom: 34px; }
.final .btn { position: relative; }
.final .fine { position: relative; margin-top: 16px; }
.dots-big { position: absolute; inset: 0; background-image: radial-gradient(circle, #d3cec5 2.4px, transparent 3px); background-size: 28px 28px; -webkit-mask: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 70%); mask: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 70%); opacity: .8; }

.foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 26px max(20px, calc(50vw - 600px)); border-top: 1px solid var(--line); font: 900 18px Doto; }
.foot div { display: flex; align-items: center; gap: 14px; }
.foot nav { display: flex; gap: 22px; }
.foot nav a { font: 500 11px 'Geist Mono'; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.foot nav a:hover { color: var(--sig); }

/* legal pages */
.legal { max-width: 760px; margin: 0 auto; padding: 80px 20px 100px; }
.legal h1 { font: 900 56px/1 Doto; margin: 14px 0 8px; }
.legal h2 { font: 600 20px Geist; margin: 36px 0 10px; letter-spacing: -.01em; }
.legal p, .legal li { color: var(--ink-2); font-size: 15.5px; margin-bottom: 10px; }
.legal ul { padding-left: 20px; }
.legal a { color: var(--sig); }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: 48px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip div + div { border-left: 0; }
  .plans, .cols { grid-template-columns: 1fr; }
  .steps li { grid-template-columns: 44px 1fr; }
  .steps .mock { grid-column: 1 / -1; }
  .nav nav { display: none; }
  .nav .btn { margin-left: auto; }
}
@media (max-width: 560px) {
  .hero h1 { white-space: normal; font-size: 40px; }
  .cards { grid-template-columns: 1fr; }
  .results { grid-template-columns: 1fr 1fr; }
  .results .r:nth-child(3) { display: none; }
  .rail .oled { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- Day timeline showcase ---- */
.tlx { margin-top: 40px; border-radius: 24px; background: var(--panel); padding: 8px 24px 18px; box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 #fff, 0 40px 80px -50px rgba(0,0,0,.45); }
.tlx-head { display: flex; align-items: center; gap: 12px; padding: 16px 0 14px; border-bottom: 1px solid var(--line); }
.tlx-head b { font: 900 clamp(20px, 2.4vw, 28px) Doto; }
.tlx-head .tnav { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-2); background: linear-gradient(#fbfaf7, #ebe8e1); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), inset 0 -2px 0 rgba(0,0,0,.06); }
.tlx-head .facts { margin-left: auto; text-align: right; font: 400 12px 'Geist Mono'; color: var(--ink-3); }
.tlx-head .facts b { font: 600 12px 'Geist Mono'; color: var(--ink); }
.tlx-hour { display: grid; grid-template-columns: 70px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tlx-hour:last-child { border-bottom: 0; }
.tlx-hour .t { font: 900 16px Doto; color: var(--ink-3); padding-top: 12px; }
.tlx-hour.on .t { color: var(--sig); }
.tlx-hour .row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.it { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.tlx.in .it { opacity: 1; transform: none; }
.it > span:last-child { display: grid; gap: 2px; min-width: 0; }
.it b { font: 500 13.5px Geist; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it i { font: normal 500 10px 'Geist Mono'; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tb { flex: none; width: 42px; height: 42px; border-radius: 9px; display: grid; place-items: center; font: 600 15px 'Geist Mono'; color: var(--sig); background: var(--sig-dim); }
.tb.yt { width: 68px; height: 40px; position: relative; }
.tb.yt::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.tb.yt.a { background: radial-gradient(circle at 30% 40%, #3d6fe0, #0e1a3a 70%); }
.tb.yt.b { background: linear-gradient(135deg, #f4b860, #c4532f); }
.tb.doc { color: var(--ink-2); background: #ece9e2; font-size: 10.5px; }
.tb.code { font-size: 11px; }
.tb.ph { background: linear-gradient(160deg, #8fc6e8, #3fb3c9 55%, #2a8fa8); }
.tb.code { color: var(--ink-2); background: #ece9e2; }

/* ---- Meaning pairs + comparison ---- */
.pairs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 10px; }
.pair { display: grid; grid-template-columns: 1fr auto 1.2fr; align-items: center; gap: 14px; padding: 18px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 #fff; }
.pair q { font: 600 15px/1.35 Doto; quotes: '“' '”'; }
.pair .arrow { font: 500 18px 'Geist Mono'; color: var(--sig); }
.pair div { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.pair div b { font: 600 13.5px Geist; }
.pair div i { font: normal 400 12px Geist; color: var(--ink-2); }
.vs { margin-top: 36px; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); }
.vs-row { display: grid; grid-template-columns: 1fr 120px 120px; padding: 13px 20px; border-top: 1px solid var(--line); font-size: 15px; }
.vs-row.head { border-top: 0; background: var(--panel); font: 500 11px 'Geist Mono'; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.vs-row > span:nth-child(n+2) { text-align: center; }
.vs-row .y { color: var(--sig); font-weight: 600; }
.vs-row .n { color: var(--ink-3); font-size: 13px; }

/* ---- Made for minds that wander ---- */
.mind h2 { max-width: 22ch; }
.mind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
.mind-grid div { padding: 22px; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.mind-grid b { display: block; font: 600 16px Geist; margin-bottom: 8px; }
.mind-grid b::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 0 4px var(--sig-dim); margin-bottom: 16px; }
.mind-grid p { font-size: 14px; color: var(--ink-2); }

/* demo extras: play moment and quiet web/copy cards */
.r .th .play { position: absolute; left: 10px; bottom: 10px; font: 600 11px Doto; color: #fff; background: var(--sig); padding: 3px 7px; border-radius: 5px; }
.r .th.q { display: grid; place-items: center; font: 600 15px/1.3 Doto; color: #f2f0eb; padding: 12px; text-align: center; }

@media (max-width: 960px) {
  .pairs { grid-template-columns: 1fr; }
  .mind-grid { grid-template-columns: repeat(2, 1fr); }
  .tlx-head .facts { display: none; }
}
@media (max-width: 560px) {
  .pair { grid-template-columns: 1fr; }
  .pair .arrow { display: none; }
  .vs-row { grid-template-columns: 1fr 70px 70px; padding: 12px 14px; font-size: 13.5px; }
  .mind-grid { grid-template-columns: 1fr; }
  .tlx { padding: 6px 14px 12px; }
  .tlx-hour { grid-template-columns: 1fr; gap: 8px; }
  .tlx-hour .t { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .it { opacity: 1; transform: none; transition: none; } }

/* ---- Answer and blog pages ---- */
.answer h1.q { font: 600 clamp(28px, 3.6vw, 44px)/1.1 Geist; letter-spacing: -.03em; margin: 14px 0 18px; }
.answer h1.q i { display: none; }
.answer .short { font-size: 19px; line-height: 1.55; color: var(--ink); padding: 18px 20px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--sig); }
.answer ol { padding-left: 22px; display: grid; gap: 8px; margin: 10px 0 8px; }
.answer h3 { font: 600 16px Geist; margin: 18px 0 4px; }
.answer a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--sig); text-underline-offset: 3px; }
.answer .lbl a { text-decoration: none; color: inherit; }
.related { list-style: none; padding: 0; display: grid; gap: 8px; }
.related li { padding: 12px 14px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.related a { text-decoration: none !important; font-weight: 500; }
.cta-box { margin: 36px 0 10px; padding: 24px; border-radius: 20px; background: var(--oled); color: #f2f0eb; display: grid; gap: 12px; justify-items: start; }
.cta-box b { font: 900 24px Doto; }
.cta-box p { color: #b9b4aa; margin: 0; }
.cta-box a.btn { color: #fff; text-decoration: none; }
.cta-box .fine { color: #8f8a80; }