/* TranTech — themeable. All colour comes from CSS variables set by js/themes.js. */
:root {
  --bg: #090b22; --surf: #12163f; --fg: #e8ecff; --mut: #8f98c9;
  --accent: #00b5ef; --accent2: #7c83ff; --on-accent: #06101a;
  --bg-rgb: 9 11 34; --surf-rgb: 18 22 63; --fg-rgb: 232 236 255; --accent-rgb: 0 181 239; --accent2-rgb: 124 131 255;
  --good: #3ddc97; --warn: #ffb547; --bad: #ff5d73;
  --font: 'Montserrat', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --radius: 14px;
  --line: rgb(var(--fg-rgb) / .12);
  --glass: rgb(var(--surf-rgb) / .72);
  --pad: clamp(64px, 9vw, 120px);
  --party-hue: 0;
}
[data-density='compact'] { --pad: clamp(40px, 6vw, 72px); }
[data-density='roomy'] { --pad: clamp(88px, 12vw, 160px); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
html[data-motion='0'] { scroll-behavior: auto; }
html.ov-open { overflow: hidden; }
body {
  margin: 0; font-family: var(--font); background: var(--bg); color: var(--fg);
  line-height: 1.6; font-size: 16px; overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent2); }
h1, h2, h3, h4 { line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.8rem, 8.5vw, 6.2rem); font-weight: 800; letter-spacing: -.045em; }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.2rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }
em { font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
p { margin: 0 0 1em; }
code, .mono { font-family: var(--mono); }
small, .fine { font-size: .82rem; color: var(--mut); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--on-accent); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: 8px; z-index: 999; }
.skip:focus { left: 8px; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.noscript { padding: 16px; background: var(--surf); text-align: center; position: relative; z-index: 3; }

#bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
.crt { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: none;
  background: repeating-linear-gradient(0deg, rgb(0 0 0 / .18) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / .45) 100%);
  mix-blend-mode: multiply; }
[data-crt='1'] .crt { display: block; animation: flick 6s infinite steps(1); }
[data-crt='1'] body { text-shadow: 0 0 6px rgb(var(--accent-rgb) / .35); }
@keyframes flick { 0%, 100% { opacity: 1 } 47% { opacity: .96 } 48% { opacity: 1 } 90% { opacity: .97 } }

/* ───────── Header ───────── */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: 6px;
  padding: 12px max(16px, calc((100% - 1400px) / 2)); transition: background .3s, backdrop-filter .3s, border-color .3s; border-bottom: 1px solid transparent;
}
.top.stuck { background: rgb(var(--bg-rgb) / .78); backdrop-filter: blur(14px) saturate(1.4); border-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 600; }
.brand:hover { color: var(--fg); }
.brand svg { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.brand:hover svg { transform: rotate(-8deg) scale(1.08); }
.brand-text { font-size: 1.25rem; letter-spacing: -.03em; font-weight: 500; }
.brand-text b { font-weight: 800; color: var(--accent); }
.brand-text.big { font-size: 1.7rem; }
.nav { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.nav a { color: var(--mut); text-decoration: none; padding: 8px 12px; border-radius: 999px; font-size: .9rem; font-weight: 600; transition: color .2s, background .2s; }
.nav a:hover, .nav a.on { color: var(--fg); background: rgb(var(--fg-rgb) / .08); }
.nav .nav-cta { background: var(--accent); color: var(--on-accent); }
.nav .nav-cta:hover { background: var(--accent2); color: var(--on-accent); }
.nav .nav-remote { border: 1.5px solid var(--accent); color: var(--accent); }
.nav .nav-remote:hover { background: rgb(var(--accent-rgb) / .15); color: var(--accent); }
.tools { display: flex; gap: 6px; align-items: center; }
.icon-btn { display: inline-flex; align-items: center; gap: 8px; background: rgb(var(--fg-rgb) / .06); border: 1px solid var(--line); color: var(--fg); padding: 8px 12px; border-radius: 999px; cursor: pointer; transition: background .2s, transform .15s; font-weight: 600; font-size: .85rem; }
.icon-btn:hover { background: rgb(var(--fg-rgb) / .13); }
.icon-btn:active { transform: scale(.96); }
.kbd { font-family: var(--mono); font-size: .72rem; padding: 2px 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; color: var(--mut); background: rgb(var(--bg-rgb) / .5); }
.menu-btn { display: none; }
.phone-btn { text-decoration: none; color: var(--accent); border-color: rgb(var(--accent-rgb) / .5); white-space: nowrap; }
.phone-btn:hover { background: rgb(var(--accent-rgb) / .15); }
.nav a, .icon-btn { white-space: nowrap; }
@media (max-width: 1699px) { #btn-palette { display: none; } }
@media (max-width: 1500px) { .nav a { padding: 8px 8px; } }
@media (max-width: 1440px) and (min-width: 961px) { .nav a { padding: 8px 6px; font-size: .86rem; } }
.nav, .tools, .brand { flex-shrink: 0; }
@media (max-width: 1260px) and (min-width: 961px) { .phone-btn .lbl { display: none; } }
@media (max-width: 1160px) and (min-width: 961px) { .tools .lbl { display: none; } .nav a { padding: 8px 5px; font-size: .82rem; } }

/* ───────── Buttons ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .25s, background .2s, color .2s; font-size: .95rem; }
.btn.primary { background: linear-gradient(120deg, var(--accent), var(--accent2)); color: var(--on-accent); box-shadow: 0 8px 28px -8px rgb(var(--accent-rgb) / .7); }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgb(var(--accent-rgb) / .85); color: var(--on-accent); }
.btn.ghost { border-color: var(--line); background: rgb(var(--fg-rgb) / .05); color: var(--fg); }
.btn.ghost:hover { background: rgb(var(--fg-rgb) / .12); color: var(--fg); transform: translateY(-2px); }
.btn.small { padding: 8px 16px; font-size: .84rem; }
.good-btn { background: rgb(61 220 151 / .14); border-color: rgb(61 220 151 / .5); color: var(--fg); }
.bad-btn { background: rgb(255 93 115 / .14); border-color: rgb(255 93 115 / .5); color: var(--fg); }
.good-btn:hover, .bad-btn:hover { transform: translateY(-2px); }
.linklike { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 4px; font-weight: 600; }
.linklike:hover { color: var(--accent2); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; align-items: center; }

/* ───────── Hero ───────── */
.hero { min-height: 100svh; display: grid; align-items: center; padding: 110px 0 70px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.3fr .8fr; gap: 48px; align-items: center; }
.eyebrow { font-family: var(--mono); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mut); display: inline-block; }
.dot.live { background: var(--good); box-shadow: 0 0 0 0 rgb(61 220 151 / .7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgb(61 220 151 / 0); } 100% { box-shadow: 0 0 0 0 rgb(61 220 151 / 0); } }
.lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgb(var(--fg-rgb) / .86); max-width: 38em; }
.lead.sm { font-size: 1.05rem; }
.lead strong { color: var(--accent); }
.hint { margin-top: 28px; color: var(--mut); font-size: .9rem; max-width: 40em; }
.caret { color: var(--accent); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.glitch { position: relative; display: inline-block; color: var(--accent); }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; opacity: .75; }
.glitch::before { color: var(--accent2); transform: translate(-2px, 1px); clip-path: inset(0 0 55% 0); animation: gl 3.6s infinite steps(1); }
.glitch::after { color: var(--fg); transform: translate(2px, -1px); clip-path: inset(55% 0 0 0); animation: gl 3.6s infinite steps(1) reverse; opacity: .35; }
@keyframes gl { 0%, 90%, 100% { transform: translate(0); } 92% { transform: translate(-4px, 1px); } 94% { transform: translate(3px, -2px); } 96% { transform: translate(-2px, 2px); } }
[data-motion='0'] .glitch::before, [data-motion='0'] .glitch::after, [data-motion='0'] .caret, [data-motion='0'] .dot.live { animation: none; }

.statuscard { background: var(--glass); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); backdrop-filter: blur(10px); box-shadow: 0 30px 80px -30px rgb(0 0 0 / .6), inset 0 1px 0 rgb(var(--fg-rgb) / .08); overflow: hidden; font-family: var(--mono); font-size: .88rem; transform: perspective(900px) rotateY(-4deg); transition: transform .5s; }
.statuscard:hover { transform: perspective(900px) rotateY(0); }
.sc-head, .term-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: rgb(var(--fg-rgb) / .04); color: var(--mut); }
.dots { display: inline-flex; gap: 6px; } .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); } .dots i:nth-child(2) { background: var(--warn); } .dots i:nth-child(3) { background: var(--good); }
.sc-body { margin: 0; padding: 16px 18px; display: grid; gap: 10px; }
.sc-body div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.sc-body dt { color: var(--mut); } .sc-body dd { margin: 0; text-align: right; color: var(--fg); }
.sc-body .ok { color: var(--good); } .sc-body .closed { color: var(--warn); }
.sc-foot { display: flex; gap: 8px; padding: 0 18px 18px; flex-wrap: wrap; }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; border: 2px solid var(--mut); border-radius: 14px; transform: translateX(-50%); opacity: .6; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--accent); animation: sc 1.8s infinite; }
@keyframes sc { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }

/* ───────── Marquee ───────── */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: rgb(var(--bg-rgb) / .6); padding: 14px 0; }
.marquee-track { display: flex; gap: 40px; width: max-content; animation: mq 40s linear infinite; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; color: var(--mut); }
.marquee-track span::before { content: '◆'; color: var(--accent); margin-right: 40px; }
@keyframes mq { to { transform: translateX(-50%); } }
[data-motion='0'] .marquee-track { animation: none; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ───────── Sections ───────── */
.sec { padding: var(--pad) 0; position: relative; }
.sec.alt { background: linear-gradient(180deg, rgb(var(--surf-rgb) / .45), rgb(var(--surf-rgb) / .2)); border-block: 1px solid var(--line); }
.sec-head { max-width: 760px; margin-bottom: 44px; }
.sub { color: var(--mut); font-size: 1.08rem; }
.js .sec-head, .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease var(--d, 0ms), transform .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
.js .sec-head.in, .js .reveal.in { opacity: 1; transform: none; }
[data-motion='0'] .js .sec-head, .js[data-motion='0'] .sec-head, .js[data-motion='0'] .reveal { opacity: 1; transform: none; transition: none; }

/* tabs */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.tab { background: rgb(var(--fg-rgb) / .05); border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px; cursor: pointer; font-weight: 700; font-size: .92rem; transition: all .2s; }
.tab:hover { background: rgb(var(--fg-rgb) / .12); }
.tab[aria-selected='true'] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 8px 24px -10px rgb(var(--accent-rgb) / .8); }

.sol-panel, .lab-panel { background: var(--glass); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: clamp(22px, 4vw, 44px); backdrop-filter: blur(8px); }
.sol-panel.swap { animation: swap .45s ease; }
@keyframes swap { from { opacity: 0; transform: translateY(10px); } }
.sol { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
.modes { display: grid; gap: 10px; align-content: start; }
.mode { display: flex; flex-direction: column; background: rgb(var(--bg-rgb) / .55); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 14px 16px; }
.mode span { color: var(--mut); font-size: .9rem; }
.ticks { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .42em; width: 16px; height: 16px; border-radius: 50%; background: rgb(var(--accent-rgb) / .18) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2300b5ef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat; }
.ticks li small { color: var(--mut); }

/* cards */
.grid { display: grid; gap: 16px; }
.cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card {
  --mx: 50%; --my: 50%;
  text-align: left; cursor: pointer; position: relative; overflow: hidden; padding: 24px; border-radius: var(--radius); border: 1px solid var(--line);
  background: radial-gradient(260px circle at var(--mx) var(--my), rgb(var(--accent-rgb) / .16), transparent 60%), var(--glass);
  transition: transform .25s, border-color .25s;
}
.card:hover { transform: translateY(-4px); border-color: rgb(var(--accent-rgb) / .55); }
.card .ic { font-size: 1.8rem; display: block; margin-bottom: 10px; filter: drop-shadow(0 4px 10px rgb(var(--accent-rgb) / .35)); }
.card p { color: var(--mut); font-size: .95rem; margin: 0; }
.card .fact { display: block; max-height: 0; opacity: 0; overflow: hidden; color: var(--accent); font-family: var(--mono); font-size: .8rem; transition: all .3s; }
.card[aria-expanded='true'] .fact, .card:hover .fact, .card:focus-visible .fact { max-height: 40px; opacity: 1; margin-top: 12px; }

/* cyber tiers */
.tier-box { background: var(--glass); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: clamp(20px, 4vw, 40px); backdrop-filter: blur(8px); }
.tier-slider { max-width: 640px; margin: 0 auto 34px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--pct, 33%), rgb(var(--fg-rgb) / .15) var(--pct, 33%)); outline-offset: 6px; cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--fg); border: 4px solid var(--accent); box-shadow: 0 4px 14px rgb(0 0 0 / .4); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--fg); border: 4px solid var(--accent); }
.tier-labels { display: flex; justify-content: space-between; margin-top: 14px; }
.tl-btn { background: none; border: 0; cursor: pointer; font-weight: 700; color: var(--mut); padding: 4px 8px; border-radius: 8px; font-size: .9rem; }
.tl-btn.on { color: var(--accent); }
.tier-grid { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: start; }
.shield { display: grid; place-items: center; padding-top: 10px; }
.shield svg { filter: drop-shadow(0 10px 30px rgb(var(--accent-rgb) / calc(.2 + var(--lvl, 0) * .18))); transition: filter .4s, transform .4s; transform: scale(calc(.9 + var(--lvl, 0) * .06)); }
.tier-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.tier-grp { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: rgb(var(--bg-rgb) / .45); animation: swap .4s ease; }
.tier-grp.new { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 14px 40px -20px rgb(var(--accent-rgb) / .8); }
.tier-grp h4 { color: var(--accent); }
.tier-grp .ticks { margin: 0; }
.tier-cta { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* lab */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card-in { background: rgb(var(--bg-rgb) / .5); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.row { display: flex; gap: 10px; align-items: center; margin: 12px 0; }
.row.wrap { flex-wrap: wrap; }
.inline { display: inline-flex; gap: 8px; align-items: center; font-size: .9rem; }
.inline input[type=range] { width: 140px; }
input[type=text], input[type=password], input[type=email], input[type=tel], input:not([type]), select, textarea, .pw-in, .pw-out {
  width: 100%; background: rgb(var(--bg-rgb) / .7); color: var(--fg); border: 1px solid var(--line); border-radius: calc(var(--radius) - 4px); padding: 12px 14px; font: inherit; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .25); }
.pw-in, .pw-out { font-family: var(--mono); }
input[type=color] { width: 44px; height: 34px; padding: 0; border: 1px solid var(--line); background: none; border-radius: 8px; cursor: pointer; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.meter { height: 10px; border-radius: 99px; background: rgb(var(--fg-rgb) / .12); overflow: hidden; margin: 14px 0 8px; }
.meter i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .3s, background .3s; }
.pw-verdict { min-height: 1.6em; margin-bottom: 8px; }
.chip { background: rgb(var(--fg-rgb) / .06); border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; cursor: pointer; font-weight: 600; font-size: .88rem; }
.chip:hover { background: rgb(var(--fg-rgb) / .14); }
.chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.qrow { padding: 14px 0; border-bottom: 1px dashed var(--line); }
.qrow p { margin: 0 0 10px; }
.qopts { display: flex; gap: 8px; flex-wrap: wrap; }
.qbar { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.qprog { flex: 1; height: 6px; border-radius: 9px; background: rgb(var(--fg-rgb) / .12); overflow: hidden; } .qprog i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.qresult { margin-top: 20px; padding: 22px; border: 1px solid var(--accent); border-radius: var(--radius); background: rgb(var(--accent-rgb) / .08); animation: swap .4s; }
.score { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; } .score b { font-size: 3rem; line-height: 1; color: var(--accent); letter-spacing: -.04em; }
.msg { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: rgb(var(--bg-rgb) / .6); margin: 14px 0; }
.msg.sms { max-width: 460px; border-radius: 22px 22px 22px 6px; }
.msg-meta { display: flex; justify-content: space-between; color: var(--mut); font-size: .8rem; margin-bottom: 8px; }
.msg-from { font-size: .85rem; color: var(--mut); word-break: break-word; } .msg-from code { color: var(--fg); }
.msg-subj { font-weight: 700; margin: 8px 0 4px; }
.msg-body { margin-top: 8px; }
.phish-fb { margin-top: 14px; padding: 16px; border-radius: var(--radius); display: none; }
.phish-fb.ok, .phish-fb.bad { display: block; animation: swap .3s; }
.phish-fb.ok { background: rgb(61 220 151 / .12); border: 1px solid rgb(61 220 151 / .5); }
.phish-fb.bad { background: rgb(255 93 115 / .12); border: 1px solid rgb(255 93 115 / .5); }
.kv { width: 100%; border-collapse: collapse; font-size: .85rem; }
.kv th { text-align: left; color: var(--mut); font-weight: 600; padding: 6px 12px 6px 0; vertical-align: top; white-space: nowrap; }
.kv td { font-family: var(--mono); padding: 6px 0; word-break: break-word; border-bottom: 1px dashed var(--line); }

/* pbx */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
.plan { padding: 26px; border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); background: var(--glass); transition: transform .25s, border-color .25s, box-shadow .25s; }
.plan.best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 20px 50px -24px rgb(var(--accent-rgb) / .8); transform: translateY(-4px); }
.price { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; margin: 4px 0 16px; color: var(--accent); } .price small { font-size: .9rem; font-weight: 600; }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 28px; margin: 18px 0; }
.calc-grid label { display: grid; gap: 8px; font-size: .9rem; font-weight: 600; }
.calc-grid output { float: right; font-family: var(--mono); color: var(--accent); }
.calc-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 18px 0; }
.co { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 2px; }
.co b { font-size: 1.7rem; letter-spacing: -.03em; } .co b small { font-size: .8rem; color: var(--mut); }
.co em { color: var(--good); font-size: .78rem; font-weight: 700; }
.co.best { border-color: var(--good); background: rgb(61 220 151 / .08); }
.mobile-strip { margin-top: 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 26px; border: 1px dashed rgb(var(--accent-rgb) / .5); border-radius: var(--radius); }
.mobile-strip h3 { margin: 0 0 4px; } .mobile-strip p { margin: 0; color: var(--mut); }

/* team */
.team { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.person { background: none; border: 0; padding: 0; cursor: pointer; perspective: 900px; height: 230px; text-align: center; }
.p-inner { display: block; position: relative; height: 100%; transition: transform .6s cubic-bezier(.3, 1.2, .4, 1); transform-style: preserve-3d; }
.person:hover .p-inner, .person.flipped .p-inner, .person:focus-visible .p-inner { transform: rotateY(180deg); }
.p-front, .p-back { position: absolute; inset: 0; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 20px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--glass); }
.p-back { transform: rotateY(180deg); background: linear-gradient(145deg, rgb(var(--accent-rgb) / .22), rgb(var(--accent2-rgb) / .18)), var(--glass); }
.p-front span:not(.avatar) { color: var(--mut); font-size: .88rem; } .p-front small { margin-top: 6px; font-family: var(--mono); }
.avatar { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; margin-bottom: 8px; color: var(--on-accent); background: conic-gradient(from calc(var(--h) * 1deg), var(--accent), var(--accent2), var(--accent)); }
.quote { font-style: italic; line-height: 1.4; font-size: .85rem; }
.p-back .ask { display: flex; flex-direction: column; gap: 2px; font-weight: 700; font-size: .9rem; line-height: 1.3; margin-top: 4px; }
.p-back .ask em { font-style: normal; font-weight: 600; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.p-back .fun { color: var(--mut); font-size: .82rem; line-height: 1.35; margin-top: 4px; }
.p-back { gap: 6px; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 40px 0 0; }
.quotes blockquote { margin: 0; padding: 24px; border-left: 3px solid var(--accent); background: var(--glass); border-radius: 0 var(--radius) var(--radius) 0; }
.quotes p { font-size: 1.05rem; } .quotes cite { color: var(--mut); font-style: normal; font-size: .9rem; }

/* trantalk */
.trantalk { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tag { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass); font-family: var(--mono); font-size: .82rem; transition: transform .2s, border-color .2s, color .2s; cursor: default; text-decoration: none; color: inherit; }
a.tag { cursor: pointer; }
.tag:hover { transform: translateY(-3px) rotate(-2deg); border-color: var(--accent); color: var(--accent); }

/* contact */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.contact-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; }
.contact-list li { display: flex; gap: 14px; } .contact-list li > span { font-size: 1.4rem; } .contact-list b { color: var(--accent); }
.form { background: var(--glass); border: 1px solid var(--line); padding: 28px; border-radius: calc(var(--radius) + 6px); display: grid; gap: 14px; align-content: start; backdrop-filter: blur(8px); }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
.form h3 { margin: 0; }
.fine.err { color: var(--bad); }

/* footer */
.foot { padding: 50px 0 40px; border-top: 1px solid var(--line); background: rgb(var(--bg-rgb) / .85); }
.foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 30px; align-items: start; }
.foot-links { display: grid; gap: 8px; justify-items: start; }
.foot-fun { display: grid; gap: 10px; justify-items: end; text-align: right; }
.prompt-line { color: var(--good); margin: 0; min-height: 1.4em; }
.coffee { background: none; border: 0; font-size: 1.6rem; cursor: pointer; transition: transform .2s; } .coffee:hover { transform: rotate(-14deg) scale(1.2); }

/* ───────── Overlays ───────── */
.ov { position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; padding: 10vh 16px 16px; visibility: hidden; }
.ov.in { visibility: visible; }
.ov-scrim { position: absolute; inset: 0; background: rgb(var(--bg-rgb) / .55); backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s; }
.ov.in .ov-scrim { opacity: 1; }
.ov-panel { position: relative; width: min(680px, 100%); max-height: 80vh; overflow: auto; background: rgb(var(--surf-rgb) / .96); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); box-shadow: 0 40px 100px -20px rgb(0 0 0 / .65); transform: translateY(14px) scale(.98); opacity: 0; transition: all .22s cubic-bezier(.2, .9, .3, 1); }
.ov.in .ov-panel { transform: none; opacity: 1; }
.ov-side { place-items: stretch end; padding: 0; }
.ov-side .ov-panel { width: min(400px, 100%); max-height: 100vh; height: 100vh; border-radius: 0; border-width: 0 0 0 1px; transform: translateX(30px); }
.ov-side .ov-scrim { background: transparent; backdrop-filter: none; }
.tp { padding: 20px; }
.tp-head { display: flex; align-items: center; justify-content: space-between; } .tp-head h3 { margin: 0; }
.tp-list { display: grid; gap: 4px; margin: 12px 0 18px; }
.tp-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; background: none; border: 1px solid transparent; cursor: pointer; text-align: left; }
.tp-item:hover, .tp-item:focus-visible { background: rgb(var(--fg-rgb) / .09); border-color: var(--line); outline: 0; }
.tp-item[aria-selected='true'] { border-color: var(--accent); }
.tp-item:disabled { opacity: .5; cursor: not-allowed; }
.tp-name { flex: 1; font-weight: 600; } .tp-tag { font-family: var(--mono); font-size: .72rem; color: var(--mut); }
.sw { display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); } .sw i { width: 14px; height: 24px; display: block; } .sw.lock { width: 56px; height: 24px; align-items: center; justify-content: center; font-size: .8rem; }
.cz-title { margin: 6px 0 4px; }
.cz { display: grid; gap: 10px; }
.cz-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .88rem; font-weight: 600; }
.cz-row select, .cz-row input[type=range] { width: 170px; padding: 7px 10px; }
.cz-inline { display: inline-flex; gap: 8px; align-items: center; }
.cz-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }

.pal { padding: 0; }
.pal-input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 20px 22px; font-size: 1.1rem; background: transparent; }
.pal-input:focus { box-shadow: none; }
.pal-list { max-height: 52vh; overflow: auto; padding: 8px; }
.pal-group { padding: 10px 12px 4px; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mut); }
.pal-row { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 0; background: none; cursor: pointer; text-align: left; }
.pal-row[aria-selected='true'] { background: rgb(var(--accent-rgb) / .2); }
.pal-name { flex: 1; } .pal-ic { width: 24px; text-align: center; }
.pal-empty, .pal-foot { padding: 16px 22px; color: var(--mut); }
.pal-foot { border-top: 1px solid var(--line); }

.term-ov .ov-panel { width: min(860px, 100%); height: min(560px, 76vh); display: flex; flex-direction: column; background: rgb(var(--bg-rgb) / .97); font-family: var(--mono); }
.term { display: flex; flex-direction: column; height: 100%; font-size: .9rem; }
.term-head { justify-content: flex-start; } .term-head .icon-btn { margin-left: auto; padding: 4px 10px; }
.term-out { flex: 1; overflow: auto; padding: 14px 18px 4px; line-height: 1.5; }
.tl { white-space: pre-wrap; word-break: break-word; min-height: 1.5em; } .tl.dim { color: var(--mut); }
.term-ps { color: var(--good); }
.term-line { display: flex; gap: 10px; padding: 10px 18px 16px; align-items: center; }
.term-in { flex: 1; background: transparent !important; border: 0 !important; padding: 0 !important; color: var(--fg); font-family: var(--mono); box-shadow: none !important; outline: 0; }
.nf { color: var(--accent); }
.gems { padding: 22px; }
.gem-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.gem-list li { display: flex; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; opacity: .6; }
.gem-list li.got { opacity: 1; border-color: var(--accent); background: rgb(var(--accent-rgb) / .08); }
.gem-list b { display: block; } .gem-list small { display: block; }

#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 200; display: grid; gap: 8px; justify-items: center; width: min(560px, 100% - 24px); pointer-events: none; }
.toast { background: var(--fg); color: var(--bg); padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: .9rem; box-shadow: 0 14px 40px -10px rgb(0 0 0 / .6); opacity: 0; transform: translateY(14px); transition: all .3s cubic-bezier(.2, .9, .3, 1.2); text-align: center; }
.toast.in { opacity: 1; transform: none; }

.bsod { position: fixed; inset: 0; z-index: 500; background: #0078d7; color: #fff; display: grid; place-items: center; font-family: 'Segoe UI', system-ui, sans-serif; cursor: none; }
.bsod-in { width: min(780px, 90%); } .bsod-face { font-size: clamp(5rem, 16vw, 9rem); line-height: 1; margin-bottom: 20px; }
.bsod p { font-size: clamp(1rem, 2.2vw, 1.4rem); } .bsod-fine { font-size: .85rem !important; white-space: pre-line; opacity: .9; }

.saver { position: fixed; inset: 0; z-index: 400; background: #000; cursor: none; }
.saver-logo { position: absolute; left: 0; top: 0; font-weight: 800; font-size: clamp(1.4rem, 4vw, 3rem); white-space: nowrap; letter-spacing: -.03em; color: var(--accent); will-change: transform; }
.saver-logo { text-align: center; }
.saver-logo span, .saver-logo small { display: block; }
.saver-phone { font-size: .55em; font-weight: 600; letter-spacing: .02em; margin-top: .15em; opacity: .9; }
.saver-hint { position: absolute; bottom: 20px; width: 100%; text-align: center; font-family: var(--mono); color: #666; }

.party body, .party .brand, .party h1, .party .btn.primary, .party .tab[aria-selected='true'] { animation: hue 1.2s linear infinite; }
@keyframes hue { to { filter: hue-rotate(360deg); } }
.party .card { animation: wob .6s ease-in-out infinite alternate; } @keyframes wob { to { transform: rotate(1deg) scale(1.01); } }

/* the top bar turns into the menu button a little earlier than the rest of the layout, so it never gets crowded */
@media (max-width: 1060px) {
  .menu-btn { display: inline-flex; }
  .nav { position: fixed; inset: 64px 12px auto 12px; flex-direction: column; align-items: stretch; background: rgb(var(--surf-rgb) / .97); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: none; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6); }
  .menu-open .nav { display: flex; }
  .nav a { padding: 12px 14px; }
  .tools { margin-left: auto; }
  .kbd { display: none; }
  .icon-btn .lbl { display: none; }
}
@media (max-width: 960px) {
  .hero-grid, .sol, .two, .trantalk, .contact, .foot-grid, .tier-grid { grid-template-columns: 1fr; }
  .statuscard { transform: none; }
  .foot-fun { justify-items: start; text-align: left; }
  .shield { display: none; }
  .menu-btn { display: inline-flex; }
  .nav { position: fixed; inset: 64px 12px auto 12px; flex-direction: column; align-items: stretch; background: rgb(var(--surf-rgb) / .97); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: none; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6); }
  .menu-open .nav { display: flex; }
  .nav a { padding: 12px 14px; }
  .tools { margin-left: auto; }
  .kbd { display: none; }
  .icon-btn .lbl { display: none; }
}
@media (max-width: 520px) {
  .scroll-cue { display: none; }
  .cz-row select, .cz-row input[type=range] { width: 120px; }
  .person { height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .marquee-track { animation: none; }
}
@media print { #bg, .grain, .crt, .top, .marquee, #toasts { display: none !important; } body { background: #fff; color: #000; } }

@media (max-width: 960px) {
  #btn-palette::before { content: '🔎'; }
}

/* team photos */
.person { height: 340px; }
.p-front.has-photo { padding: 0; overflow: hidden; justify-content: flex-end; align-items: stretch; text-align: left; }
.p-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s; }
.person:hover .p-photo { transform: scale(1.04); }
.p-front.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(var(--bg-rgb) / .92) 0%, rgb(var(--bg-rgb) / .55) 28%, transparent 55%); }
.p-front.has-photo > b, .p-front.has-photo > span, .p-front.has-photo > small { position: relative; z-index: 1; padding: 0 16px; color: var(--fg) !important; }
.p-front.has-photo > small { padding-bottom: 14px; }
@media (max-width: 520px) { .person { height: 320px; } }

.crew { margin: 0 0 34px; position: relative; border-radius: calc(var(--radius) + 6px); overflow: hidden; border: 1px solid var(--line); }
.crew img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; object-position: center 35%; }
.crew figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 14px; font-weight: 600; color: var(--fg); background: linear-gradient(0deg, rgb(var(--bg-rgb) / .9), transparent); }

/* theme-aware logo: colours follow the active theme */
:root { --logo-b: var(--accent); }
[data-theme="paper"] { --logo-b: var(--accent2); }
.logo { display: block; height: 40px; width: auto; overflow: visible; }
.logo-foot { height: 80px; }
.logo [class^="lg-"] { transition: stroke .3s, fill .3s; }
.lg-a { stroke: var(--logo-b); fill: none; } .lg-d { stroke: var(--fg); fill: none; }
.lg-t1 { fill: var(--fg); } .lg-t2 { fill: var(--logo-b); } .lg-t3 { fill: var(--mut); }
.brand:hover .logo { filter: drop-shadow(0 0 10px rgb(var(--accent-rgb) / .5)); }
@media (max-width: 520px) { .logo { height: 34px; } }
#tt-logo text { font-family: 'Montserrat', Arial, sans-serif; }

/* business phones */
.handsets, .usage { margin: 6px 0 18px; }
.handsets summary, .usage summary { cursor: pointer; font-weight: 700; color: var(--accent); padding: 6px 0; }
.handsets ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; max-width: 520px; }
.handsets li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgb(var(--bg-rgb) / .45); }
.calc-grid .chk { display: flex; align-items: center; gap: 10px; align-self: end; }
.calc-grid select { width: 100%; }

/* hero: meet the crew row */
.crew-row { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; padding: 8px 18px 8px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgb(var(--fg-rgb) / .05); color: var(--fg); text-decoration: none; transition: background .2s, transform .2s, border-color .2s; }
.crew-row:hover { background: rgb(var(--fg-rgb) / .1); border-color: rgb(var(--accent-rgb) / .6); transform: translateY(-2px); color: var(--fg); }
.crew-row .faces { display: inline-flex; }
.crew-row .faces img, .crew-row .faces .more { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--bg); object-fit: cover; margin-left: -12px; background: var(--surf); transition: transform .25s; }
.crew-row .faces > :first-child { margin-left: 0; }
.crew-row:hover .faces img { transform: translateY(-3px); }
.crew-row:hover .faces img:nth-child(2n) { transform: translateY(2px); }
.crew-row .faces .more { display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: var(--on-accent); background: linear-gradient(120deg, var(--accent), var(--accent2)); }
.crew-txt { display: grid; line-height: 1.25; }
.crew-txt b { font-size: .95rem; }
.crew-txt small { color: var(--mut); }
.crew-arrow { color: var(--accent); font-weight: 800; transition: transform .2s; }
.crew-row:hover .crew-arrow { transform: translateX(4px); }
@media (max-width: 520px) { .crew-row { gap: 10px; padding-right: 14px; } .crew-row .faces img, .crew-row .faces .more { width: 38px; height: 38px; margin-left: -11px; } .crew-txt small { font-size: .74rem; } }

/* status card: Windows-style title bar (replaces the Mac dots / linux prompt) */
.sc-head { justify-content: space-between; padding-right: 0; }
.win-btns { display: inline-flex; align-self: stretch; margin: -10px 0; }
.win-btns i { font-style: normal; width: 42px; display: grid; place-items: center; color: var(--mut); font-family: "Segoe UI Symbol", "Segoe UI", sans-serif; font-size: .78rem; }
.win-btns i:last-child:hover { background: #c42b1c; color: #fff; }

/* status card title: TT logo + text. Faint light edge in dark themes so the navy parts stay visible. */
.sc-title { display: inline-flex; align-items: center; gap: 10px; }
.sc-ico { width: 24px; height: 24px; flex: none; object-fit: contain; }
[data-mode="dark"] .sc-ico { filter: drop-shadow(0 0 1px rgb(255 255 255 / .75)); }

/* ───────── Theme effects (behind the content; hidden if background effects are off) ───────── */
.fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; overflow: hidden; }
[data-theme='synthwave'] .fx, [data-theme='blueprint'] .fx, [data-theme='bsod'] .fx { display: block; }
[data-bgfx='none'] .fx { display: none !important; }
[data-motion='0'] .fx, [data-motion='0'] .fx::before, [data-motion='0'] .fx::after { animation: none !important; }

/* Amber CRT: scanlines + phosphor glow switch on automatically */
[data-theme='amber-crt'] .crt { display: block; animation: flick 6s infinite steps(1); }
[data-theme='amber-crt'] body { text-shadow: 0 0 8px rgb(var(--accent-rgb) / .5); }

/* Blueprint: drawn graph-paper grid */
[data-theme='blueprint'] .fx {
  background-image:
    linear-gradient(rgb(255 255 255 / .2) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .2) 1px, transparent 1px),
    linear-gradient(rgb(255 255 255 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .08) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}

/* Synthwave: striped sun + glowing perspective grid that rolls toward you */
[data-theme='synthwave'] .fx::before {
  content: ''; position: absolute; left: 50%; bottom: 24vh; width: min(52vmin, 460px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: linear-gradient(180deg, #ffd319 0%, #ff2e97 58%, #7b2cff 100%);
  -webkit-mask-image: linear-gradient(#000 0 52%, transparent 52% 55%, #000 55% 64%, transparent 64% 68%, #000 68% 76%, transparent 76% 81%, #000 81% 88%, transparent 88% 93%, #000 93%);
  mask-image: linear-gradient(#000 0 52%, transparent 52% 55%, #000 55% 64%, transparent 64% 68%, #000 68% 76%, transparent 76% 81%, #000 81% 88%, transparent 88% 93%, #000 93%);
  opacity: .38; filter: drop-shadow(0 0 40px rgb(255 46 151 / .7));
}
[data-theme='synthwave'] .fx::after {
  content: ''; position: absolute; left: -60%; right: -60%; bottom: 0; height: 42vh;
  background-image: linear-gradient(rgb(255 46 151 / .6) 1px, transparent 1px), linear-gradient(90deg, rgb(255 46 151 / .6) 1px, transparent 1px);
  background-size: 64px 64px; transform: perspective(360px) rotateX(64deg); transform-origin: top center;
  -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%);
  animation: gridroll 2.4s linear infinite;
}
@keyframes gridroll { to { background-position: 0 64px, 0 0; } }

/* Blue Screen: faint failing-screen flicker and a slow scan band, above the page but see-through */
[data-theme='bsod'] .fx { z-index: 80; background: repeating-linear-gradient(0deg, rgb(255 255 255 / .025) 0 2px, transparent 2px 4px); animation: bsodflick 7s steps(1) infinite; }
[data-theme='bsod'] .fx::before { content: ''; position: absolute; left: 0; right: 0; top: -120px; height: 100px; background: linear-gradient(180deg, transparent, rgb(255 255 255 / .06), transparent); animation: bsodband 9s linear infinite; }
@keyframes bsodflick { 0%, 100% { background-color: rgb(255 255 255 / 0); } 41% { background-color: rgb(255 255 255 / .05); } 42% { background-color: rgb(255 255 255 / 0); } 77% { background-color: rgb(255 255 255 / .07); } 78% { background-color: rgb(255 255 255 / 0); } 79% { background-color: rgb(255 255 255 / .04); } 80% { background-color: rgb(255 255 255 / 0); } }
@keyframes bsodband { to { top: 110vh; } }

/* Theme list / palette / gems panels keep one font and fixed row height, so previewing a theme
   (e.g. the typewriter-font ones) can never shift the rows under the mouse. */
.tp-ov .ov-panel, .pal-ov .ov-panel, .gems-ov .ov-panel { font-family: 'Montserrat', system-ui, sans-serif; }
.tp-item { min-height: 46px; }
.pal-row { min-height: 42px; }

/* password lab: strength bands (same four bands as Bitwarden's chart) */
.pill { display: inline-block; padding: 2px 12px; border-radius: 999px; font-weight: 800; font-size: .78rem; color: #0b0d1a; margin-right: 8px; vertical-align: middle; }
.bands { list-style: none; padding: 0; margin: 14px 0 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.bands li { display: grid; gap: 4px; justify-items: start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; opacity: .6; transition: opacity .2s, border-color .2s; }
.bands li.on { opacity: 1; border-color: var(--accent); }
.bands .pill { margin: 0; }

/* Windows 10 or older: a slim, dismissible strip in the empty space at the very top of the page.
   It scrolls away with the page and nudges the hero down while it is showing, so it never covers anything. */
.os-note { position: absolute; top: 70px; left: 0; right: 0; margin-inline: auto; z-index: 30; width: min(900px, calc(100% - 32px));
  display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; border-radius: 999px;
  border: 1px solid rgb(var(--accent-rgb) / .45); background: var(--glass); backdrop-filter: blur(10px);
  font-size: .82rem; line-height: 1.4; opacity: 0; transition: opacity .4s ease; }
.os-note.in { opacity: 1; }
.os-ico { font-size: 1.1rem; line-height: 1; }
.os-body { flex: 1; min-width: 0; }
.os-body p { margin: 0; }
.os-x { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgb(var(--fg-rgb) / .08); color: var(--fg); cursor: pointer; font-size: .75rem; }
.os-x:hover { background: rgb(var(--fg-rgb) / .18); }
.has-os-note .hero { padding-top: 168px; transition: padding-top .4s ease; }
[data-motion='0'] .os-note, [data-motion='0'] .has-os-note .hero { transition: none; }
@media (max-width: 899px), print { .os-note { display: none; } .has-os-note .hero { padding-top: 110px; } }

.prefill-note { margin: 0; padding: 8px 12px; border-radius: 10px; border: 1px dashed rgb(var(--accent-rgb) / .55); background: rgb(var(--accent-rgb) / .08); color: var(--fg); }

/* ───────── Inferno: the page on fire (visitors on Windows 8 or older) ───────── */
.burn-fire { position: fixed; left: 0; bottom: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: .92; }
.burn-ash { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; opacity: .75; }
[data-theme='inferno'] body { background: radial-gradient(130% 90% at 50% 115%, #5b1a02 0%, #230a02 45%, #0e0301 100%) fixed; }
[data-theme='inferno'] .fx { display: block; box-shadow: inset 0 -140px 180px -70px rgb(255 90 0 / .45), inset 0 0 220px rgb(110 20 0 / .55); animation: breathe 3.2s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .75; } to { opacity: 1; } }
[data-theme='inferno'] h1, [data-theme='inferno'] h2 { animation: heat 2.6s ease-in-out infinite alternate; }
@keyframes heat { from { text-shadow: 0 0 10px rgb(255 106 26 / .5), 0 -4px 16px rgb(255 194 26 / .22); } to { text-shadow: 0 0 20px rgb(255 106 26 / .8), 0 -8px 28px rgb(255 194 26 / .4); } }
[data-theme='inferno'] img:not(.sc-ico) { filter: sepia(.4) saturate(1.35) brightness(.95); }
[data-theme='inferno'] .btn.primary { color: #2a0d00; }
.os-note.burn { background: linear-gradient(90deg, #6b1200, #b03000); border-color: #ff9a3c; color: #fff4e8; box-shadow: 0 0 28px rgb(255 100 20 / .55); animation: burnpulse 2.4s ease-in-out infinite alternate; }
@keyframes burnpulse { from { box-shadow: 0 0 14px rgb(255 100 20 / .35); } to { box-shadow: 0 0 34px rgb(255 120 30 / .7); } }
.os-note.burn .os-x { background: rgb(255 255 255 / .18); color: #fff; }
.os-note.burn .btn.primary { background: #ffd24a; color: #2a0d00; box-shadow: none; }
.os-note.burn .btn.ghost { color: #fff4e8; border-color: rgb(255 255 255 / .4); background: rgb(255 255 255 / .1); }
[data-motion='0'][data-theme='inferno'] .fx, [data-motion='0'][data-theme='inferno'] h1, [data-motion='0'][data-theme='inferno'] h2, [data-motion='0'] .os-note.burn { animation: none; }

/* contact form: email code step */
.verify-box { display: grid; gap: 10px; padding: 14px; border-radius: var(--radius); border: 1px solid rgb(var(--accent-rgb) / .5); background: rgb(var(--accent-rgb) / .07); }
.verify-box[hidden] { display: none; }
.verify-box p { margin: 0; font-size: .9rem; }
.verify-box input { font-family: var(--mono); font-size: 1.4rem; letter-spacing: .3em; text-align: center; }
.verify-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.form label small { color: var(--mut); font-weight: 400; }

/* placeholder card (photo not in yet): dashed outline and a head-and-shoulders silhouette */
.p-front.placeholder { border-style: dashed; border-color: rgb(var(--accent-rgb) / .55); }
.p-silhouette { display: grid; place-items: center; color: var(--mut); background: linear-gradient(160deg, rgb(var(--accent-rgb) / .14), rgb(var(--accent2-rgb) / .08)); }
.p-silhouette svg { width: 48%; height: auto; opacity: .75; margin-bottom: 34%; }

/* Legend reward: confetti, trophy card, gold footer badge, Platinum theme */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 150; pointer-events: none; }
.legend { text-align: center; padding: 30px 26px 22px; }
.legend h3 { font-size: 1.6rem; margin-bottom: 10px; }
.legend p { color: var(--mut); max-width: 34em; margin-inline: auto; }
.legend-trophy { font-size: 3.6rem; line-height: 1; margin-bottom: 8px; animation: trophy .7s cubic-bezier(.3, 1.7, .5, 1); filter: drop-shadow(0 8px 24px rgb(255 204 51 / .55)); }
@keyframes trophy { from { transform: scale(.2) rotate(-18deg); opacity: 0; } }
#gem-counter.legend { color: #ffcc33; font-weight: 800; text-shadow: 0 0 12px rgb(255 204 51 / .55); }
[data-theme='platinum'] .fx { display: block; box-shadow: inset 0 0 220px rgb(255 204 51 / .13), inset 0 -120px 160px -80px rgb(255 204 51 / .12); }
[data-bgfx='none'] .fx { display: none !important; }

/* status card title bar: Windows buttons on the right, or Mac-style dots on the left, matching the visitor's flavour */
.sc-head .dots { display: none; }
[data-term='unix'] .sc-head .dots { display: inline-flex; }
[data-term='unix'] .sc-head .win-btns { display: none; }
[data-term='unix'] .sc-head { justify-content: flex-start; gap: 14px; }

/* fake crash screens for Mac and Linux (the "famous last words" gem) */
.panic { position: fixed; inset: 0; z-index: 500; cursor: none; }
.panic.linux { background: #000; color: #e6e6e6; padding: 18px; overflow: hidden; font-family: var(--mono); font-size: .86rem; line-height: 1.4; }
.panic.linux pre { margin: 0; white-space: pre-wrap; font: inherit; }
.panic.mac { background: #1c1c1e; color: #f2f2f2; display: grid; place-items: center; font-family: var(--font); }
.panic-mac { width: min(640px, 88%); text-align: center; line-height: 1.5; }
.panic-mac p { margin: 0 0 14px; font-size: 1rem; }
.panic-mac .panic-joke { margin-top: 26px; opacity: .6; font-size: .8rem; }

/* AI & Automation (home page pill and band) */
.ai-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 9px 16px; border: 1px solid rgb(var(--accent-rgb) / .5); border-radius: 999px; background: rgb(var(--accent-rgb) / .1); color: var(--fg); text-decoration: none; font-size: .92rem; flex-wrap: wrap; transition: background .2s, transform .15s; }
.ai-pill:hover { background: rgb(var(--accent-rgb) / .2); transform: translateY(-1px); }
.ai-pill small { color: var(--mut); font-size: .85rem; }
.ai-pill + .crew-row { margin-left: 0; }
.ai-band { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); }
.ai-band h2 { margin: 4px 0 8px; }
.ai-band .sub { margin: 0 0 14px; max-width: 640px; }
.ai-band .tag { text-decoration: none; color: inherit; cursor: pointer; }
.ai-note { margin-top: 12px; text-align: center; }
.ai-note a { color: var(--accent); }
@media (max-width: 860px) { .ai-band { grid-template-columns: 1fr; padding: 24px; } }

/* Contact form: New Customer / Existing Customer */
.form-wrap { display: grid; gap: 0; align-content: start; }
.ctabs { display: flex; gap: 6px; padding: 5px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 999px; background: rgb(var(--fg-rgb) / .05); }
.ctabs button { flex: 1; cursor: pointer; font: inherit; font-weight: 700; font-size: .95rem; padding: 10px 14px; border-radius: 999px; border: 0; background: transparent; color: var(--mut); transition: background .2s, color .2s; }
.ctabs button:hover { color: var(--fg); }
.ctabs button[aria-selected=true] { background: var(--accent); color: var(--on-accent); }
.form[hidden] { display: none; }
.req-who { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 16px; display: grid; gap: 12px; margin: 0; }
.req-who legend { font-weight: 700; font-size: .9rem; padding: 0 6px; }
.req-fields { display: grid; gap: 14px; }
.req-fields [hidden] { display: none !important; }
.req-fields .help, .form small.help { color: var(--mut); font-weight: 400; font-size: .8rem; line-height: 1.4; }
.chk-fs { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
.chk-fs legend { padding: 0; margin-bottom: 6px; }
.chk-group { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.form label.chk { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.form label.chk.confirm { align-items: flex-start; line-height: 1.45; }
.form label.chk input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; flex: none; }

/* Chat helper (js/chat.js) */
#tt-chat { position: fixed; right: 14px; bottom: 0; z-index: 80; font-size: 15px; }
.chat-launch { --cl-h: 170px; position: relative; display: block; background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .45)); }
.chat-idle { height: var(--cl-h); width: auto; display: block; transform-origin: 50% 100%; animation: chat-bob 3.4s ease-in-out infinite; }
.chat-launch:not(.has-wave):hover .chat-idle, .chat-launch:hover .chat-mystery { animation: chat-wave .7s ease-in-out infinite; }
/* the raised-hand picture: while the mouse is on the character the arm is up, and it goes back down when the mouse leaves */
.chat-wv { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: calc(var(--cl-h) * var(--r, 1)); width: auto; max-width: none; opacity: 0; pointer-events: none; }
.chat-launch.has-wave:hover .chat-idle, .chat-launch.has-wave:focus-visible .chat-idle { opacity: 0; animation: none; }
.chat-launch.has-wave:hover .chat-wv2, .chat-launch.has-wave:focus-visible .chat-wv2 { opacity: 1; }
.chat-mystery { height: var(--cl-h); width: auto; display: block; color: var(--fg); transform-origin: 50% 100%; animation: chat-bob 3.4s ease-in-out infinite; }
.chat-launch:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.chat-shadow { position: absolute; left: 50%; bottom: 2px; width: 56px; height: 8px; margin-left: -28px; border-radius: 50%; background: rgb(0 0 0 / .35); filter: blur(2px); z-index: -1; }
@keyframes chat-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes chat-wave { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-3px); } }
#tt-chat.open .chat-launch, #tt-chat.open .chat-nudge { display: none; }
.chat-nudge { position: absolute; right: 70px; bottom: 120px; width: max-content; max-width: 200px; display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; background: var(--surf, #14182b); color: var(--fg); border: 1px solid var(--accent); border-radius: 14px 14px 2px 14px; font-weight: 600; font-size: .85rem; box-shadow: 0 8px 24px rgb(0 0 0 / .4); animation: chat-pop .35s ease; }
.chat-nudge button { background: none; border: 0; color: var(--mut); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0; }
.chat-nudge[hidden] { display: none; }
@keyframes chat-pop { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.chat-panel { width: min(380px, calc(100vw - 20px)); height: min(580px, 80vh); display: flex; flex-direction: column; margin-bottom: 14px; background: var(--surf, #12162a); color: var(--fg); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px -10px rgb(0 0 0 / .65); overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: rgb(var(--accent-rgb) / .12); }
.chat-face { border-radius: 50%; background: rgb(var(--fg-rgb) / .08); object-fit: cover; flex: none; }
.chat-face[hidden] { display: none; }
.chat-who { display: grid; line-height: 1.2; min-width: 0; flex: 1; }
.chat-who small { color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-swap { background: none; border: 1px solid var(--line); color: var(--fg); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: .8rem; cursor: pointer; }
.chat-swap[hidden] { display: none; }
.chat-x { background: none; border: 0; color: var(--mut); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.chat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; flex-direction: column; gap: 6px; max-width: 88%; }
.msg.you { align-self: flex-end; align-items: flex-end; }
.msg .bub { padding: 9px 13px; border-radius: 14px; line-height: 1.5; font-size: .92rem; }
.msg.bot .bub { background: rgb(var(--fg-rgb) / .07); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.msg.you .bub { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 3px; }
.msg-links { display: flex; flex-wrap: wrap; gap: 6px; }
.msg-link { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); text-decoration: none; font-size: .82rem; font-weight: 600; }
.msg-link:hover { background: rgb(var(--accent-rgb) / .15); }
button.msg-link { background: none; font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; line-height: 1.2; }
.typing .bub { display: flex; gap: 4px; padding: 12px 14px; }
.typing .bub span { width: 7px; height: 7px; border-radius: 50%; background: var(--mut); animation: chat-dot 1s infinite; }
.typing .bub span:nth-child(2) { animation-delay: .15s; } .typing .bub span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chat-pick { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 12px; background: rgb(var(--fg-rgb) / .04); color: var(--fg); cursor: pointer; font: inherit; text-align: center; transition: border-color .15s, transform .15s; }
.chat-pick:hover, .chat-pick:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.chat-pick img { border-radius: 50%; background: rgb(var(--fg-rgb) / .08); }
.chat-pick b { font-size: .85rem; } .chat-pick small { color: var(--mut); font-size: .68rem; line-height: 1.2; }
.chat-chips { display: flex; gap: 6px; padding: 8px 12px 0; overflow-x: auto; scrollbar-width: none; }
.chat-chips:empty { display: none; }
.chat-chips button { flex: none; cursor: pointer; font: inherit; font-size: .78rem; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg); white-space: nowrap; }
.chat-chips button:hover { border-color: var(--accent); color: var(--accent); }
.chat-form { display: flex; gap: 8px; padding: 10px 12px; }
.chat-form[hidden] { display: none; }
.chat-form input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgb(var(--fg-rgb) / .06); color: var(--fg); font: inherit; }
.chat-fine { margin: 0; padding: 0 14px 10px; color: var(--mut); font-size: .72rem; text-align: center; }
@media (max-width: 600px) {
  #tt-chat { right: 8px; }
  .chat-launch { --cl-h: 120px; }
  .chat-nudge { bottom: 80px; right: 46px; }
  .chat-panel { width: calc(100vw - 16px); height: 78vh; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .chat-mystery, .chat-idle, .chat-launch:hover .chat-idle, .chat-launch.has-wave:hover .chat-wv2, .chat-launch.has-wave:hover .chat-wv1, .chat-launch.has-wave:focus-visible .chat-wv1, .chat-launch.has-wave:focus-visible .chat-wv2, .chat-nudge, .typing .bub span { animation: none; } .chat-launch.has-wave:hover .chat-wv2, .chat-launch.has-wave:focus-visible .chat-wv2 { opacity: 1; } }
[data-motion='0'] .chat-idle, [data-motion='0'] .chat-nudge { animation: none; }
[data-motion='0'] .chat-launch.has-wave:hover .chat-wv2 { animation: none; opacity: 1; }
[data-motion='0'] .chat-launch.has-wave:hover .chat-wv1 { animation: none; opacity: 0; }
@media print { #tt-chat { display: none !important; } }

.msg .bub code { font-family: var(--mono); font-size: .85em; padding: 1px 6px; border-radius: 5px; background: rgb(var(--fg-rgb) / .12); }
.msg .tip-more { color: var(--mut); }

/* "take me for a run" (js/chat.js) */
.chat-throw { position: fixed; z-index: 86; background-repeat: no-repeat; cursor: pointer; }          /* no drop-shadow filter here: re-filtering a big picture every frame is what made it laggy */
.chat-rb { position: fixed; left: 0; top: 0; z-index: 86; pointer-events: none; max-width: none; background-repeat: no-repeat; will-change: transform; transform-origin: 50% 50%; }
.chat-rb.rb-t1, .chat-rb.rb-t4 { z-index: 85; }
.chat-hackcap { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 90; pointer-events: none; font: 800 clamp(1.4rem, 5vw, 3rem)/1 ui-monospace, Consolas, monospace; letter-spacing: .12em; color: #38ff6a; text-shadow: 0 0 18px #38ff6a; transition: opacity .4s; }
.chat-sky { position: fixed; inset: 0; z-index: 85; pointer-events: none; background: linear-gradient(180deg, #2f8fe8 0%, #6bb7f5 55%, #bfe3ff 100%); }
.chat-sky canvas { display: block; width: 100%; height: 100%; }
.chat-rainshade { position: fixed; inset: 0; z-index: 84; pointer-events: none; background: rgb(30 40 70); transition: opacity .3s; }
.chat-dust { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 88; pointer-events: none; }
.chat-spark { position: fixed; left: 0; top: 0; z-index: 88; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, #fff 0, #fff 18%, rgb(140 210 255 / .85) 40%, rgb(80 150 255 / 0) 72%); mix-blend-mode: screen; }
.chat-rise { overflow: hidden; }
.chat-tag { position: fixed; left: 0; top: 0; z-index: 88; pointer-events: none; padding: 3px 10px; border-radius: 999px; background: rgb(8 12 30 / .82); color: #fff; border: 1px solid var(--accent, #38bdf8); font: 700 12px/1.4 system-ui, sans-serif; letter-spacing: .03em; white-space: nowrap; box-shadow: 0 0 12px rgb(56 189 248 / .55); }
.chat-ball { position: fixed; left: 0; top: 0; z-index: 87; pointer-events: none; border-radius: 50%; will-change: transform; background: radial-gradient(circle at 35% 30%, #fff 0, #f2f2f2 45%, #bfc4ca 100%); box-shadow: 0 1px 3px rgb(0 0 0 / .5); transform-origin: 50% 50%; }
.chat-flash { position: fixed; inset: 0; z-index: 89; pointer-events: none; background: #fff; }
.chat-crack { position: fixed; inset: 0; z-index: 90; pointer-events: none; transition: opacity .4s ease; }
.chat-crack svg { display: block; width: 100%; height: 100%; }
.chat-basket { position: fixed; z-index: 86; pointer-events: none; transition: opacity .4s ease; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .45)); }
.chat-basket .bk-chains { transform-box: fill-box; transform-origin: 50% 0; }
.chat-throw { transition: opacity .4s ease; }
.chat-throw-b { transition: none; }
.chat-disc { transition: opacity .4s ease; position: fixed; left: 0; top: 0; z-index: 87; pointer-events: none; max-width: none; will-change: transform; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .4)); }
.chat-runner-sprite { background-repeat: no-repeat; background-position: 0 0; }
.chat-runner { position: fixed; left: 0; top: 0; width: auto; z-index: 86; cursor: pointer; will-change: transform; transform-origin: 50% 50%; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .45)); }
#tt-chat.running .chat-launch, #tt-chat.running .chat-nudge { visibility: hidden; }
@media print { .chat-runner, .chat-throw, .chat-disc, .chat-basket, .chat-ball, .chat-flash, .chat-crack, .chat-rb, .chat-tag, .chat-spark, .chat-dust, .chat-sky, .chat-rainshade, .chat-hackcap { display: none !important; } }

/* flip cards: the front must never show through the back (mirrored text), so swap which side is visible halfway through the turn as well */
.p-front, .p-back { -webkit-backface-visibility: hidden; transform-style: flat; }
.p-front { opacity: 1; transition: opacity 0s linear .08s; }
.p-back { opacity: 0; transition: opacity 0s linear .08s; }
.person:hover .p-front, .person.flipped .p-front, .person:focus-visible .p-front { opacity: 0; }
.person:hover .p-back, .person.flipped .p-back, .person:focus-visible .p-back { opacity: 1; }