/* The home page: night mode of the same system. The tokens are remapped so
   every shared component in site.css (buttons, cards, the calculator, the
   plan, the FAQ) turns dark with it; only what is new lives below. */
body.home {
  color-scheme: dark;
  --paper: #08090d;
  --paper-2: #13141b;
  --card: #0f1016;
  --white: #16171f;
  --text: #edebe6;
  --mute: #9a978f;
  --line: #1f2029;
  --line-strong: #30313c;
  --brass-deep: #c79a68;
  --ok: #7fb88a;
  --shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 30px 80px -40px rgb(0 0 0 / 0.9);
  background: var(--paper);
}
body.home .soft { color: #6f6c66; }
body.home .nav { background: rgb(8 9 13 / 0.62); }
body.home .nav.scrolled { border-bottom-color: #1a1b23; }
body.home .brand .mark { background: #edebe6; }
body.home .brand .mark svg { color: #08090d; }
body.home :focus-visible { outline-color: var(--text); }
body.home .band { background: linear-gradient(180deg, #111219, #0c0d12); border: 1px solid #1d1e27; }
body.home .job, body.home .calc, body.home .cmp, body.home .plan, body.home .facts > div { background: var(--card); }
body.home .facts { background: var(--line); border-color: var(--line); }
body.home .job .ask { background: #16171f; border-color: #262731; color: var(--text); }
body.home .cmp.us { background: #16171f; border-color: #3a3024; }
body.home .toggle { background: #16171f; }
body.home .faq details { border-color: var(--line); }
body.home section { position: relative; }

/* ---- nav: the walkthrough sits beside the trial ---- */
.nav .book { margin-right: 4px; }
@media (max-width: 760px) { .nav .book { display: none; } }

/* ---- the opening ---- */
.hx {
  --net-h: 0px;
  position: relative;
  min-height: max(720px, min(100svh, 980px));
  margin-top: -64px; /* under the glass nav */
  padding: 64px 0 0;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  background:
    radial-gradient(60% 70% at 70% 50%, rgb(199 154 104 / 0.13), transparent 70%),
    radial-gradient(40% 50% at 78% 40%, rgb(110 140 255 / 0.08), transparent 70%),
    #08090d;
}
.hx::before { /* a fine grid, fading out from the core */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(60% 70% at 70% 50%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 70% at 70% 50%, #000 10%, transparent 75%);
}
.hx::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(transparent, #08090d); z-index: 4; pointer-events: none; }
.hx-c { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.hx-back, .hx-front { position: absolute; inset: 0; pointer-events: none; }
.hx-back { z-index: 1; }
.hx-front { z-index: 3; }
.hx-logo {
  position: absolute; left: 0; top: 0;
  width: 52px; height: 52px; border-radius: 15px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, rgb(34 35 46 / 0.94), rgb(14 15 21 / 0.94));
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.09), 0 10px 26px -10px rgb(0 0 0 / 0.9), 0 0 24px -6px color-mix(in srgb, var(--c) 55%, transparent);
  will-change: transform, opacity;
  opacity: 0;
}
.hx-logo svg { width: 26px; height: 26px; }
.hx-logo span {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px);
  font: 500 12px/1 var(--mono); color: #edebe6; white-space: nowrap;
  background: rgb(8 9 13 / 0.8); padding: 5px 8px; border-radius: 6px; border: 1px solid rgb(255 255 255 / 0.08);
  opacity: 0; transition: opacity 0.3s, transform 0.3s var(--ease);
}
.hx-logo::after { content: ""; position: absolute; inset: -2px; border-radius: 17px; border: 1.5px solid var(--c); opacity: 0; }
.hx-logo.ping::after { animation: hx-ping 0.9s var(--ease); }
.hx-logo.named span { animation: hx-name 1.8s var(--ease); }
@keyframes hx-ping { 0% { opacity: 0.95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes hx-name { 0%, 100% { opacity: 0; transform: translate(-50%, -4px); } 15%, 75% { opacity: 1; transform: translate(-50%, 0); } }

.hx-core { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.hx-core > * { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.hx-core .glow { width: 360px; height: 360px; background: radial-gradient(closest-side, rgb(226 184 132 / 0.5), rgb(199 154 104 / 0.12) 45%, transparent); animation: hx-breathe 5s ease-in-out infinite; }
.hx-core .disc {
  width: 92px; height: 92px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #2a2b36, #0d0e13 72%);
  box-shadow: 0 0 0 1px rgb(226 184 132 / 0.5), 0 0 40px rgb(199 154 104 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.12);
  color: #fff;
}
.hx-core .disc svg { width: 40px; height: 40px; }
.hx-core .ring { width: 128px; height: 128px; border: 1px solid rgb(226 184 132 / 0.35); animation: hx-ring 3.2s var(--ease) infinite; }
.hx-core .ring.b { animation-delay: 1.6s; }
.hx-core.flash .disc { animation: hx-flash 1s var(--ease); }
@keyframes hx-breathe { 0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.94); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes hx-ring { 0% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.7); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); } }
@keyframes hx-flash { 0% { box-shadow: 0 0 0 1px rgb(226 184 132 / 0.9), 0 0 110px rgb(226 184 132 / 1); } 100% { box-shadow: 0 0 0 1px rgb(226 184 132 / 0.5), 0 0 40px rgb(199 154 104 / 0.55); } }
/* On load: the core ignites, then everything bursts out of it. */
.hx .hx-core { opacity: 0; transform: scale(0.2); }
.hx.go .hx-core { opacity: 1; transform: none; transition: opacity 0.5s, transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1); }

.hx-copy { position: relative; z-index: 5; width: 100%; }
.hx-copy > div { max-width: 640px; }
.hx .eyebrow { color: #c79a68; display: inline-flex; align-items: center; gap: 10px; }
.hx .eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #7fb88a; box-shadow: 0 0 0 4px rgb(127 184 138 / 0.18); animation: hx-live 2s ease-in-out infinite; }
@keyframes hx-live { 50% { box-shadow: 0 0 0 7px rgb(127 184 138 / 0); } }
.hx h1 { font-size: clamp(46px, 5.6vw, 84px); margin: 0 0 22px; color: #fff; text-align: left; }
.hx h1 .soft { display: block; color: transparent; background: linear-gradient(92deg, #e2b884, #c79a68 40%, #8d8a84); -webkit-background-clip: text; background-clip: text; }
.hx .lede { margin: 0 0 32px; color: #a9a69f; }
.hx .lede b { color: #edebe6; font-weight: 600; }
.hx .cta { justify-content: flex-start; }
.hx .btn.book svg { width: 17px; height: 17px; }
.hx .assure { justify-content: flex-start; }
.hx-copy .reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); }
.hx.go .hx-copy .reveal { opacity: 1; transform: none; filter: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); }
.hx.go .reveal:nth-child(2) { transition-delay: 0.12s; }
.hx.go .reveal:nth-child(3) { transition-delay: 0.24s; }
.hx.go .reveal:nth-child(4) { transition-delay: 0.36s; }
.hx.go .reveal:nth-child(5) { transition-delay: 0.48s; }

/* The live readout: what it is doing right now. */
.hx-hud {
  position: absolute; z-index: 5; right: 4%; bottom: 13%;
  width: 330px; padding: 14px 16px 14px;
  border-radius: 14px; background: rgb(14 15 21 / 0.72); border: 1px solid rgb(255 255 255 / 0.08);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 24px 60px -30px #000;
  font-family: var(--mono); font-size: 12.5px; color: #a9a69f;
  opacity: 0; transform: translateY(10px);
}
.hx.go .hx-hud { opacity: 1; transform: none; transition: opacity 0.8s 1.6s, transform 0.8s 1.6s var(--ease); }
.hx-hud .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6f6c66; }
.hx-hud .top b { color: #c79a68; font-weight: 500; }
.hx-hud .hx-n { color: #edebe6; }
.hx-line { color: #edebe6; font-size: 13.5px; line-height: 1.45; min-height: 2.9em; display: block; }
.hx-line::before { content: "› "; color: #6e8cff; }
.hx-hud[data-kind="learn"] .hx-line { color: #e2b884; }
.hx-hud[data-kind="learn"] .hx-line::before { content: "✦ "; color: #e2b884; }
.hx-hud[data-kind="ask"] .hx-line::before { content: "? "; color: #e2b884; }
.hx-line.in { animation: hx-type 0.5s var(--ease); }
@keyframes hx-type { from { opacity: 0; transform: translateY(4px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
.hx-ask { display: flex; gap: 8px; margin-top: 10px; }
.hx-ask span { flex: 1; text-align: center; padding: 7px 0; border-radius: 8px; border: 1px solid #30313c; color: #edebe6; font-family: var(--sans); font-size: 13px; transition: all 0.3s; }
.hx-ask span:first-child { border-color: #c79a68; }
.hx-ask.ok span:first-child { background: #c79a68; color: #08090d; }
.hx-ask.ok span:last-child { opacity: 0.35; }

@media (max-width: 1079px) {
  .hx { --net-h: 400px; min-height: 0; display: block; padding: calc(64px + var(--net-h)) 0 40px; background: radial-gradient(80% 360px at 50% 220px, rgb(199 154 104 / 0.14), transparent 70%), #08090d; }
  .hx::before { mask-image: radial-gradient(70% 300px at 50% 230px, #000 10%, transparent 80%); -webkit-mask-image: radial-gradient(70% 300px at 50% 230px, #000 10%, transparent 80%); }
  .hx-core .glow { width: 240px; height: 240px; }
  .hx-core .disc { width: 70px; height: 70px; }
  .hx-core .disc svg { width: 30px; height: 30px; }
  .hx-core .ring { width: 96px; height: 96px; }
  .hx-hud { right: 50%; transform: translate(50%, 10px); top: calc(64px + var(--net-h) - 64px); bottom: auto; width: min(330px, calc(100% - 32px)); padding: 10px 14px; }
  .hx.go .hx-hud { transform: translate(50%, 0); }
  .hx-hud .top, .hx-ask { display: none; }
  .hx-line { min-height: 0; }
  .hx-copy { padding-top: 36px; }
  .hx h1 { font-size: clamp(42px, 11vw, 64px); }
}
@media (max-width: 560px) {
  .hx .cta { flex-direction: column; align-items: stretch; }
  .hx .cta .btn { width: 100%; min-width: 0; white-space: normal; }
  .belt p { font-size: 11px; letter-spacing: 0.08em; padding: 0 16px; line-height: 1.5; }
}

/* ---- the apps it works in: two belts, opposite ways ---- */
.belt { padding: 40px 0 0; text-align: center; }
.belt p { font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #6f6c66; margin: 0 0 22px; }
.belt .rows { display: grid; gap: 12px; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); overflow: hidden; }
.belt .row { display: flex; gap: 12px; width: max-content; animation: belt 60s linear infinite; }
.belt .row.rev { animation-direction: reverse; animation-duration: 70s; }
.belt .chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 12px; background: #0f1016; border: 1px solid #1f2029; color: #cfccc5; font-size: 14.5px; white-space: nowrap; }
.belt .chip svg { width: 20px; height: 20px; }
.belt:hover .row { animation-play-state: paused; }
@keyframes belt { to { transform: translateX(-50%); } }

/* ---- the app, live (not pictures of it) ---- */
.live { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.lp { position: relative; border-radius: 18px; padding: 18px; background: linear-gradient(180deg, #15161f, #101118); border: 1px solid #23242e; box-shadow: 0 40px 80px -50px #000, inset 0 1px 0 rgb(255 255 255 / 0.04); overflow: hidden; min-height: 380px; display: flex; flex-direction: column; }
.lp::before { content: ""; position: absolute; width: 300px; height: 300px; right: -120px; top: -160px; background: radial-gradient(closest-side, rgb(199 154 104 / 0.14), transparent); pointer-events: none; }
.lp h3 { font-size: 15px; margin: 0 0 4px; color: #edebe6; display: flex; align-items: center; gap: 8px; }
.lp .lp-sub { font-size: 13px; color: #83807a; margin: 0 0 16px; }
.lp .cap { margin-top: auto; padding-top: 16px; font-size: 14px; color: #a9a69f; }
.lp .cap b { color: #edebe6; font-weight: 600; }
/* Connections */
.ai { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid #262731; background: #121319; margin-bottom: 8px; transition: border-color 0.4s, background 0.4s; }
.ai .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #1c1d26; flex: none; }
.ai .ico svg { width: 20px; height: 20px; }
.ai b { display: block; font-size: 14px; color: #edebe6; font-weight: 600; }
.ai small { font-size: 12px; color: #83807a; }
.ai .st { margin-left: auto; font-size: 12.5px; color: #a9a69f; border: 1px solid #30313c; border-radius: 8px; padding: 5px 10px; white-space: nowrap; }
.ai.busy { border-color: #3a3024; }
.ai.busy .st { color: #e2b884; border-color: #5a4630; }
.ai.busy small { color: #e2b884; }
.ai.on { border-color: rgb(127 184 138 / 0.45); background: #121813; }
.ai.on .st { color: #7fb88a; border-color: rgb(127 184 138 / 0.4); }
.ai .bar { height: 2px; background: #262731; border-radius: 2px; margin-top: 7px; overflow: hidden; display: none; }
.ai.busy .bar { display: block; }
.ai .bar i { display: block; height: 100%; width: 0; background: #c79a68; transition: width 0.3s linear; }
/* Workflows */
.wf { padding: 11px 12px; border-radius: 12px; border: 1px solid #22232c; background: #121319; margin-bottom: 8px; }
.wf .n { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: #edebe6; font-weight: 600; }
.wf .n em { font-style: normal; font-weight: 400; font-size: 12px; color: #83807a; }
.wf .s { font-size: 12.5px; color: #a9a69f; margin-top: 3px; display: flex; align-items: center; gap: 7px; }
.wf .s i { width: 6px; height: 6px; border-radius: 50%; background: #7fb88a; flex: none; }
.wf.run { border-color: #3a3024; }
.wf.run .s { color: #e2b884; }
.wf.run .s i { background: #e2b884; animation: hx-live 1.2s infinite; box-shadow: 0 0 0 3px rgb(226 184 132 / 0.2); }
.wf .bar { height: 2px; border-radius: 2px; background: #262731; margin-top: 8px; overflow: hidden; display: none; }
.wf.run .bar { display: block; }
.wf .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #87592f, #e2b884); transition: width 0.4s linear; }
/* What it knows */
.kn { list-style: none; margin: 0; padding: 0; }
.kn li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid #1f2029; font-size: 13.5px; color: #d6d3cc; line-height: 1.4; }
.kn li:last-child { border-bottom: 0; }
.kn li small { margin-left: auto; flex: none; font-size: 11px; color: #83807a; border: 1px solid #2a2b35; border-radius: 99px; padding: 2px 8px; white-space: nowrap; }
.kn li.new { animation: kn-in 1.4s var(--ease); }
.kn li.new span { color: #e2b884; }
@keyframes kn-in { from { opacity: 0; transform: translateY(-8px); background: rgb(199 154 104 / 0.14); } to { opacity: 1; transform: none; background: transparent; } }
@media (max-width: 980px) { .live { grid-template-columns: 1fr; } .lp { min-height: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hx *, .belt .row, .hx-core * { animation: none !important; transition: none !important; }
  .hx .hx-core, .hx-copy .reveal, .hx-hud { opacity: 1 !important; transform: none !important; filter: none !important; }
}

body.home .plan .tag { background: #c79a68; color: #08090d; border-color: #c79a68; }

/* ---- lighter rhythm: less air between sections, smaller heads ---- */
body.home section { padding-top: 104px; }
body.home #try { padding-top: 72px; }
body.home .head-block { margin-bottom: 36px; }
body.home main section h2 { font-size: clamp(30px, 3.8vw, 46px); }
body.home .sub { font-size: 17px; }
body.home .job { padding: 22px 22px 20px; }
body.home .closer { margin-top: 104px; padding: 72px 24px; }
@media (max-width: 700px) { body.home section { padding-top: 80px; } }

/* ---- sign in ---- */
.nav .signin { color: var(--mute); text-decoration: none; font-size: 14.5px; padding: 8px 12px; border-radius: 8px; }
.nav .signin:hover { color: var(--text); }
@media (max-width: 760px) { .nav .signin { display: none; } }
.leaves-line { margin: 16px 0 0; font-size: 14px; color: var(--ink-mute); line-height: 1.55; }
body.home .safe { grid-template-columns: 1fr 0.9fr; gap: 40px 56px; }
body.home .safe .rules { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px; }
body.home .safe .rules li { border-top: 1px solid var(--ink-line); border-bottom: 0; }
body.home .safe .more { grid-column: 1 / -1; margin: 0; }
body.home .safe > div:nth-child(2) { align-self: center; }
body.home .band { padding: 60px 48px; }
@media (max-width: 980px) { body.home .safe .rules { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { body.home .safe { grid-template-columns: 1fr; } body.home .safe .rules { grid-template-columns: 1fr; } body.home .band { padding: 44px 22px; } }

/* ---- sign in, device, account: one calm card on the night page ---- */
.auth { min-height: calc(100svh - 64px); display: grid; place-items: center; padding: 40px 16px 80px; position: relative; isolation: isolate; }
.auth::before { content: ""; position: absolute; width: 760px; height: 760px; left: 50%; top: 42%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgb(199 154 104 / 0.13), transparent); z-index: -1; pointer-events: none; }
.acard { width: min(440px, 100%); background: linear-gradient(180deg, #15161f, #0f1016); border: 1px solid #23242e; border-radius: 22px; padding: 34px 30px 28px; box-shadow: 0 50px 100px -50px #000, inset 0 1px 0 rgb(255 255 255 / 0.04); text-align: center; }
.acard.wide { width: min(640px, 100%); text-align: left; }
.acard .core { width: 60px; height: 60px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #2a2b36, #0d0e13 72%); box-shadow: 0 0 0 1px rgb(226 184 132 / 0.45), 0 0 30px rgb(199 154 104 / 0.4); color: #fff; }
.acard .core svg { width: 26px; height: 26px; }
.acard h1 { font-size: 30px; letter-spacing: -0.03em; margin: 0 0 8px; }
.acard > p.sub, .acard .muted { color: var(--mute); font-size: 15px; margin: 0 0 24px; }
.field { display: block; width: 100%; height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid #30313c; background: #0b0c11; color: var(--text); font: 500 16px var(--sans); outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.field:focus { border-color: #c79a68; box-shadow: 0 0 0 4px rgb(199 154 104 / 0.15); }
.acard form { display: grid; gap: 10px; }
.acard .btn { width: 100%; }
.otp { display: flex; gap: 8px; justify-content: center; }
.otp input { width: 48px; height: 58px; text-align: center; font: 600 24px var(--mono); border-radius: 12px; border: 1px solid #30313c; background: #0b0c11; color: #fff; outline: none; }
.otp input:focus { border-color: #c79a68; box-shadow: 0 0 0 4px rgb(199 154 104 / 0.15); }
.alink { background: none; border: 0; color: var(--mute); font: inherit; font-size: 14px; cursor: pointer; padding: 6px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #3a3b47; }
.alink:hover { color: var(--text); }
.amsg { min-height: 1.4em; font-size: 14px; color: #e7a38f; margin: 10px 0 0; }
.amsg.ok { color: #7fb88a; }
.afoot { margin-top: 18px; font-size: 13px; color: #6f6c66; }
.afoot a { color: var(--mute); }
.ucode { font: 600 30px var(--mono); letter-spacing: 0.12em; color: #fff; background: #0b0c11; border: 1px solid #30313c; border-radius: 14px; padding: 14px; margin: 0 0 22px; }
.row2 { display: flex; gap: 10px; }
.row2 .btn { flex: 1; }
/* account */
.acct-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.acct-h h1 { margin: 0; }
.pill { font: 500 12.5px var(--sans); padding: 5px 11px; border-radius: 99px; border: 1px solid #30313c; color: var(--mute); white-space: nowrap; }
.pill.on { color: #7fb88a; border-color: rgb(127 184 138 / 0.4); background: rgb(127 184 138 / 0.06); }
.pill.warn { color: #e2b884; border-color: #5a4630; }
.kv { display: grid; gap: 0; border-top: 1px solid #1f2029; margin: 0 0 22px; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid #1f2029; font-size: 15px; }
.kv span { color: var(--mute); }
.dev { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #1f2029; }
.dev b { display: block; font-size: 15px; }
.dev small { color: var(--mute); font-size: 13px; }
.dev button { margin-left: auto; }
.acct-sec { margin: 26px 0 0; }
body.home .acct-sec h2 { font-size: 16px; letter-spacing: -0.01em; margin: 0 0 6px; }
.welcome-b { border: 1px solid #3a3024; background: rgb(199 154 104 / 0.07); border-radius: 14px; padding: 16px 18px; margin: 0 0 22px; font-size: 15px; color: #e8dccb; }
.welcome-b b { color: #fff; }
.welcome-b .row2 { margin-top: 12px; }

/* ---- the simpler story ---- */
.hx-note { font-size: 14px; color: #83807a; margin: 18px 0 0; }
.steps-min { list-style: none; padding: 0; margin: 0 auto 40px; max-width: 980px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.steps-min li { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: start; padding: 16px 18px; border-radius: 14px; border: 1px solid #1f2029; background: #0f1016; }
.steps-min i { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--mono); font-style: normal; color: #e2b884; border: 1px solid #5a4630; background: rgb(199 154 104 / 0.06); }
.steps-min b { font-size: 15.5px; color: #edebe6; }
.steps-min span { font-size: 14px; color: var(--mute); line-height: 1.45; }
body.home #try .belt { padding: 48px 0 0; }
.cases { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; border-top: 1px solid #1f2029; }
.cases li { display: grid; grid-template-columns: 170px 1fr 28px; gap: 20px; align-items: baseline; padding: 20px 4px; border-bottom: 1px solid #1f2029; }
.cases b { font-size: 15.5px; color: #edebe6; }
.cases span { color: #b9b6ae; font-size: 16px; line-height: 1.5; }
.cases a { color: #6f6c66; text-decoration: none; font-size: 18px; transition: color 0.2s, transform 0.2s var(--ease); }
.cases li:hover a { color: #e2b884; transform: translateX(3px); }
@media (max-width: 760px) { .steps-min { grid-template-columns: 1fr; } .cases li { grid-template-columns: 1fr 24px; gap: 4px 12px; } .cases b { grid-column: 1; } .cases span { grid-column: 1; } .cases a { grid-column: 2; grid-row: 1 / span 2; align-self: center; } }
.hx h1 .soft { font-size: 0.56em; letter-spacing: -0.035em; line-height: 1.08; margin-top: 12px; }

/* ---- the rest of the site in the same night style ---- */
body.home .btn.primary { background: #edebe6; border-color: #edebe6; color: #08090d; box-shadow: 0 10px 30px -14px rgb(226 184 132 / 0.35); }
body.home .btn.primary:hover { background: #fff; }
body.home .btn:not(.primary) { background: transparent; color: #edebe6; border-color: #30313c; }
body.home .btn:not(.primary):hover { border-color: #edebe6; }
body.home .doc p, body.home .doc li, body.home td { color: #c4c1b9; }
body.home .doc h1, body.home .doc h2, body.home .doc h3, body.home .doc strong, body.home .doc b { color: #f2f0eb; }
body.home .cta-box { background: linear-gradient(180deg, #111219, #0c0d12); border: 1px solid #1d1e27; }
body.home .toggle .save { color: #7fb88a; background: rgb(127 184 138 / 0.1); }
body.home .ui { background: #1c1d26; color: #edebe6; }
body.home .card, body.home .dl-card, body.home .path, body.home .st, body.home .warn, body.home .then, body.home .install li { background: var(--card); border-color: var(--line); }
body.home .timeline, body.home .timeline > * { border-color: var(--line); }
body.home img { border-color: var(--line); }
body.home .job .before li::before { background: #b3533f; }
/* the getting-started checklist on /account: one line per step, ticked */
.start { border: 1px solid #2a2b35; background: #0c0d12; border-radius: 16px; padding: 18px 18px 8px; margin: 0 0 24px; }
.start-k { font: 500 11.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #c79a68; margin: 0 0 8px; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #1a1b23; }
.checklist li:first-child { border-top: 0; }
.checklist .tick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #3a3b47; display: grid; place-items: center; }
.checklist li.is-done .tick { background: #7fb88a; border-color: #7fb88a; }
.checklist li.is-done .tick::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #08090d; border-bottom: 2px solid #08090d; transform: rotate(-45deg) translate(1px, -1px); }
.checklist li.now .tick { border-color: #c79a68; box-shadow: 0 0 0 4px rgb(199 154 104 / 0.15); }
.checklist b { font-size: 15px; font-weight: 600; color: #edebe6; display: block; }
.checklist li.is-done b { color: #83807a; font-weight: 500; }
.checklist small { font-size: 13px; color: var(--mute); }
.checklist .btn { width: auto; min-height: 36px; padding: 7px 14px; font-size: 13.5px; }
.checklist li.is-done .btn { display: none; }
.learn3 { list-style: none; padding: 0; margin: 20px auto 0; max-width: 980px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.learn3 li { padding: 16px 18px; border-radius: 14px; border: 1px solid #1f2029; background: #0f1016; }
.learn3 b { display: block; font-size: 15px; color: #edebe6; margin-bottom: 2px; }
.learn3 span { font-size: 14px; color: var(--mute); line-height: 1.45; }
@media (max-width: 760px) { .learn3 { grid-template-columns: 1fr; } }
/* account: Your Vassal's status, the one live thing on the page */
.vstat { display: flex; align-items: center; gap: 16px; padding: 4px 0 22px; margin-bottom: 22px; border-bottom: 1px solid #1f2029; }
.vcore { position: relative; width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 50% 35%, #2a2b36, #0d0e13 72%); box-shadow: 0 0 0 1px rgb(226 184 132 / 0.45); }
.vcore svg { width: 24px; height: 24px; position: relative; }
.vcore .glow { position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(closest-side, rgb(226 184 132 / 0.35), transparent); animation: vbreathe 4.5s ease-in-out infinite; }
.vstat.on .vcore { box-shadow: 0 0 0 1px rgb(127 184 138 / 0.6), 0 0 24px rgb(127 184 138 / 0.25); }
@keyframes vbreathe { 0%, 100% { opacity: 0.55; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.06); } }
.vk { margin: 0; font: 500 11.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #c79a68; }
.vt { margin: 2px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: #edebe6; }
.vs { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: #8c8981; }
.vstat .pill { margin-left: auto; }
body.home .acct-h .acct-t { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.dl-row { margin-top: 10px; flex-wrap: wrap; }
.dl-row .btn { min-width: max-content; }
@media (prefers-reduced-motion: reduce) { .vcore .glow { animation: none; } }

/* The opening keeps its own padding: the section rhythm above must not
   reach it (on a phone the copy sits under the globe, not on top of it). */
body.home section.hx { padding-top: 64px; }
@media (max-width: 1079px) { body.home section.hx { padding: calc(64px + var(--net-h)) 0 40px; } }
@media (max-width: 560px) { .hx { --net-h: 330px; } }

/* ---- the menu button (phones and narrow windows): two lines that become
   an ×, and a glass sheet under the bar instead of a boxed dropdown ---- */
body.home .nav .menu summary { position: relative; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 12px; transition: background 0.2s; }
body.home .nav .menu summary:hover { background: rgb(255 255 255 / 0.05); }
body.home .nav .menu summary svg { display: none; }
body.home .nav .menu summary::before, body.home .nav .menu summary::after { content: ""; position: absolute; left: 12px; right: 12px; height: 1.7px; border-radius: 2px; background: #edebe6; transition: top 0.3s var(--ease), transform 0.35s var(--ease), right 0.3s var(--ease); }
body.home .nav .menu summary::before { top: 17px; }
body.home .nav .menu summary::after { top: 25px; right: 17px; }
body.home .nav .menu[open] summary::before { top: 21px; transform: rotate(45deg); }
body.home .nav .menu[open] summary::after { top: 21px; right: 12px; transform: rotate(-45deg); }
body.home .nav .menu[open] summary { border: 0; }
body.home .nav .menu .drop { position: fixed; left: 12px; right: 12px; top: 70px; width: auto; padding: 8px; border-radius: 20px; background: #0c0d12; border: 1px solid #23242e; box-shadow: 0 40px 80px -20px #000, 0 0 0 100vmax rgb(4 5 8 / 0.55); animation: menu-in 0.32s var(--ease); }
body.home .nav .menu .drop a { color: #edebe6; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; padding: 14px 16px; border-radius: 12px; }
body.home .nav .menu .drop a:hover, body.home .nav .menu .drop a:focus-visible { background: rgb(255 255 255 / 0.05); }
body.home .nav .menu .drop a[href="/signin"], body.home .nav .menu .drop a[href="/account"] { margin-top: 6px; border-top: 1px solid #1f2029; border-radius: 0 0 12px 12px; color: #e2b884; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.home .nav .menu .drop { animation: none; } body.home .nav .menu summary::before, body.home .nav .menu summary::after { transition: none; } }

/* Phones: nothing may be wider than the screen. The auth glow is clipped to
   its section; wide tables scroll inside themselves. */
.auth { overflow-x: clip; }
body.home .doc table, body.home main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.home .nav .menu .drop a { display: block; line-height: 1.3; margin: 0; min-height: 0; height: auto; }

/* Hero: "What do you do?" (who.js) */
.hx-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}
.hx-who > span {
  margin-right: 4px;
  color: #a9a69f;
  font-size: 14px;
}
.hx-who button {
  padding: 7px 14px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.03);
  color: #edebe6;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hx-who button:hover {
  border-color: rgb(199 154 104 / 0.7);
  background: rgb(199 154 104 / 0.1);
}
.plan .compare {
  margin: 6px 0 0;
  color: #c79a68;
  font-size: 14px;
}

/* ---- The homepage in three moments (2026-09-27) ---- */
body.home main { display: block; }
.m-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 92vh;
  padding: 120px 24px 60px;
  text-align: center;
}
.m-orb {
  position: relative;
  width: 132px;
  height: 132px;
  margin-bottom: 44px;
}
.m-core, .ll-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #2a2630, #15161f 72%);
  box-shadow: 0 0 0 1.5px rgb(199 154 104 / 0.75), 0 0 90px rgb(199 154 104 / 0.28);
  color: #fafaf8;
}
.m-core svg, .ll-core svg { width: 46%; height: 46%; }
.m-scan, .ll-scan {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgb(199 154 104 / 0.6) 40deg, transparent 90deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 67%, transparent 68%);
  mask: radial-gradient(circle, transparent 62%, #000 63%, #000 67%, transparent 68%);
  animation: m-spin 2.8s linear infinite;
}
.m-orbit {
  position: absolute;
  inset: -34px;
  border: 1px dashed rgb(237 235 230 / 0.14);
  border-radius: 50%;
  animation: m-spin 60s linear infinite reverse;
}
.m-sat {
  position: absolute;
  inset: -34px;
  animation: m-spin 9s linear infinite;
}
.m-sat::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c79a68;
  box-shadow: 0 0 12px #c79a68;
}
.m-hero h1 {
  margin: 0;
  font-size: clamp(44px, 7vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.m-hero h1 span { color: #a9a69f; }
.m-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}
.m-quiet {
  color: #a9a69f;
  font-size: 14px;
  text-decoration: none;
}
.m-quiet:hover { color: #edebe6; }
.m-moment {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16vh 24px;
  text-align: center;
}
.m-copy h2, .m-moment > h2 {
  margin: 0;
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -0.03em;
}
.m-copy p, .m-moment > p {
  max-width: 560px;
  margin: 16px auto 0;
  color: #a9a69f;
  font-size: 18px;
  line-height: 1.5;
}
.m-moment .demo-tabs { margin-top: 40px; }
/* It learns you (learnlive.js) */
.ll {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 56px;
}
.ll-trail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 78px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  color: #83807a;
  font-size: 14px;
}
.ll-trail li::before { content: "✓  "; color: #6e9e5f; }
.ll-trail li.live { color: #edebe6; }
.ll-trail li.live::before { content: "●  "; color: #c79a68; }
.ll-orb {
  position: relative;
  width: 112px;
  height: 112px;
}
.ll-orb.pulse .ll-core { animation: m-pulse 700ms ease-out; }
/* The count climbs while the words stay put: the number holds two digits'
   width, so "things it knows" does not shift left when it passes 9, and the
   two sit on one baseline instead of on the tall number's own line box. */
.ll-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 28px 0 22px;
  color: #a9a69f;
  font-size: 15px;
}
.ll-count b {
  min-width: 2ch;
  color: #edebe6;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ll-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(520px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ll-feed li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 12px;
  background: rgb(28 29 38 / 0.7);
  text-align: left;
  animation: m-card 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ll-feed li:nth-child(2) { opacity: 0.6; }
.ll-feed li:nth-child(3) { opacity: 0.3; }
.ll-feed span {
  flex-shrink: 0;
  width: 118px;
  color: #c79a68;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ll-feed b { color: #edebe6; font-weight: 400; font-size: 14px; }
/* It's yours */
.m-lock {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 26px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgb(199 154 104 / 0.6), 0 0 50px rgb(199 154 104 / 0.18);
  color: #c79a68;
}
.m-lock svg { width: 26px; height: 26px; }
.m-three {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 34px auto 28px;
  padding: 0;
  list-style: none;
  color: #edebe6;
  font-size: 19px;
}
.m-price { padding-bottom: 20vh; }
@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes m-pulse { 35% { transform: scale(1.06); } }
@keyframes m-card { from { opacity: 0; transform: translateY(-12px); filter: blur(4px); } }
@media (max-width: 640px) {
  .m-hero { min-height: 86vh; padding-top: 100px; }
  .m-moment { padding: 12vh 16px; }
  .ll-feed span { width: 92px; }
  .m-three { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .m-scan, .ll-scan, .m-orbit, .m-sat, .ll-feed li { animation: none; }
}

/* ---- Cinematic chapters (2026-09-27) ---- */
.ch {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16vh 24px;
}
.ch-k {
  margin: 0 0 14px;
  color: #c79a68;
  font: 500 12px var(--mono, ui-monospace, monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ch h2 {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.ch h2 span { color: #a9a69f; }
.ch-copy p:not(.ch-k), .ch-lede {
  max-width: 560px;
  margin: 18px 0 0;
  color: #a9a69f;
  font-size: 18px;
  line-height: 1.55;
}
.ch-proof {
  max-width: 560px;
  margin: 22px 0 0;
  padding-left: 14px;
  border-left: 2px solid rgb(199 154 104 / 0.6);
  color: #cfccc5;
  font-size: 15px;
  line-height: 1.5;
}
.ch-proof b { color: #e3be8f; font-weight: 600; }
.center { text-align: center; margin-left: auto !important; margin-right: auto !important; }
.ch-copy.center p { margin-left: auto; margin-right: auto; }
.ch-proof.center { border-left: none; padding-left: 0; }
/* 01: copy beside the live learning */
.ch-learn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ch-learn .ll { margin-top: 0; }
/* 02: the demo */
.ch-work .demo-tabs { margin-top: 40px; }
.ch-work .demo-box { margin-top: 18px; }
.ch-work .ch-proof { margin-top: 26px; }
/* 03: the lock closes as it arrives */
.ch-yours { text-align: center; }
.ch-lock {
  display: inline-grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: 28px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgb(199 154 104 / 0.6), 0 0 60px rgb(199 154 104 / 0.2);
  color: #c79a68;
}
.ch-lock svg { width: 36px; height: 36px; overflow: visible; }
.ch-lock .shackle { transform: translateY(-7px); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s; }
.ch-yours.in .ch-lock .shackle { transform: none; }
.ch-yours .ch-lede { margin-left: auto; margin-right: auto; }
.ch-four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 48px 0 30px;
  padding: 0;
  list-style: none;
  text-align: left;
}
.ch-four li {
  padding: 22px 20px;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 16px;
  background: rgb(255 255 255 / 0.02);
}
.ch-four b { display: block; color: #edebe6; font-size: 16px; line-height: 1.3; }
.ch-four span { display: block; margin-top: 8px; color: #a9a69f; font-size: 14px; line-height: 1.5; }
.ch-link { color: #a9a69f; font-size: 14px; text-decoration: none; }
.ch-link:hover { color: #edebe6; }
/* 04: the price as value */
.ch-price { text-align: center; padding-bottom: 20vh; }
.ch-plan {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 44px;
  padding: 36px 40px;
  border: 1px solid rgb(199 154 104 / 0.35);
  border-radius: 22px;
  background: linear-gradient(180deg, rgb(199 154 104 / 0.06), transparent 60%);
}
.ch-amount { font-size: 56px; font-weight: 600; letter-spacing: -0.03em; }
.ch-amount small { color: #a9a69f; font-size: 18px; font-weight: 400; }
.ch-plan ul { margin: 0; padding: 0; list-style: none; color: #cfccc5; font-size: 15px; line-height: 2; }
.ch-plan li::before { content: "✓  "; color: #c79a68; }
.ch-fine { margin: 0; color: #83807a; font-size: 13px; max-width: 420px; }
/* Each chapter rises in as it arrives (home.js) */
.ch { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ch.in { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .ch-learn { grid-template-columns: 1fr; gap: 40px; }
  .ch-four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ch { padding: 11vh 16px; }
  .ch-four { grid-template-columns: 1fr; }
  .ch-plan { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ch { opacity: 1; transform: none; transition: none; }
}

/* ---- the shared header and slim footer (2026-09-27 overhaul): the same on
   every page as on the homepage ---- */
body.home .nav .signin { color: #8c8981; text-decoration: none; font-size: 14.5px; padding: 8px 12px; }
body.home .nav .signin:hover { color: var(--text); }
@media (max-width: 760px) { body.home .nav .links, body.home .nav .signin { display: none; } }
/* ---- the slim footer ---- */
.sitefoot.slim { margin-top: 96px; padding: 44px 0 40px; border-top: 1px solid #16171e; }
.sitefoot.slim .brand { display: inline-flex; align-items: center; gap: 10px; }
.slim-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.slim-top nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.sitefoot.slim a { display: inline; padding: 0; }
.slim-more { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 26px 0 0; font-size: 13px; }
.slim-more a { color: #5e5b55 !important; }
.slim-more a:hover { color: var(--text) !important; }
.sitefoot.slim .legal { margin: 22px 0 0; font-size: 12.5px; color: #5e5b55; }
.sitefoot.slim .legal a { color: #5e5b55; }

/* The shared header on pages that load content.css instead of site.css (the
   generated guides): the same structure as the homepage's. */
body.home .nav .links { display: flex; align-items: center; gap: 4px; }
body.home .nav .links a { color: #8c8981; text-decoration: none; font-size: 14.5px; padding: 8px 12px; border-radius: 8px; }
body.home .nav .links a:hover { color: var(--text); }
body.home .nav .end { display: flex; align-items: center; gap: 8px; }
body.home .nav .menu { display: none; position: relative; }
body.home .nav .menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; }
body.home .nav .menu summary::-webkit-details-marker { display: none; }
body.home .nav .menu .drop { display: grid; }
body.home .nav .menu .drop a { text-decoration: none; }
@media (max-width: 760px) { body.home .nav .menu { display: block; } }
body.home .sitefoot.slim a { text-decoration: none; }
body.home .sitefoot.slim .slim-top nav a { color: #8c8981; font-size: 14px; }
body.home .sitefoot.slim .slim-top nav a:hover { color: var(--text); }
/* Vassal Agent's own mark is the orb (the app icon), not the bare V. */
body.home .brand .mark { width: 34px; height: 34px; background: none; border-radius: 8px; overflow: hidden; }
body.home .brand .mark img { display: block; width: 100%; height: 100%; }
body.home .nav .btn.book { background: transparent; border-color: #2c2d38; color: var(--text); }
body.home .nav .btn.book:hover { border-color: #4a4b57; }
@media (max-width: 900px) { body.home .nav .btn.book { display: none; } }
/* Phones: the bar is the mark, Try it free and the menu (after every rule
   above that shows the links). */
@media (max-width: 760px) {
  body.home .nav .links, body.home .nav .signin, body.home .nav .btn.book { display: none; }
  body.home .nav .menu { display: block; }
}
/* Teams on the account page (account.js paintTeam2): the same rows as the
   computers list; the action on the right, a destructive one asks first. */
.t2-h { margin: 18px 0 2px; color: var(--mute); font: 500 12px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.t2-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #1f2029; }
.t2-row > div { min-width: 0; }
.t2-row b { display: block; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.t2-row small { display: block; color: var(--mute); font-size: 13px; }
.t2-row .t2-act { margin-left: auto; flex-shrink: 0; }
.t2-tag { margin-left: 8px; padding: 2px 8px; border: 1px solid #30313c; border-radius: 99px; color: var(--mute); font-size: 12px; font-weight: 500; }
.t2-join { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 6px 0 10px; border: 1px solid #5a4630; border-radius: 12px; background: rgb(199 154 104 / 0.06); }
.t2-join div { min-width: 0; }
.t2-join .btn { margin-left: auto; }
.t2-link { display: flex; gap: 8px; margin-top: 8px; }
.t2-link .field { height: 42px; font: 500 13px var(--sans); }
.t2-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.t2-none, .t2-price { margin: 10px 0 0; color: var(--mute); font-size: 14px; }
/* One line: the box and its button side by side (.acard makes forms a grid
   and buttons full width). */
.acard form.team-add { display: flex; gap: 8px; }
.acard .team-add .btn, .acard .t2-join .btn, .acard .t2-link .btn, .acard .t2-row .btn { width: auto; flex-shrink: 0; }
@media (max-width: 560px) { .t2-join { flex-wrap: wrap; } .t2-join .btn { margin-left: 0; } }
/* Your team on the account page (account.js paintTeam). */
.team-add { display: flex; gap: 8px; margin-top: 10px; }
.team-add .field { height: 42px; }
.team-add .btn { min-height: 42px; padding: 8px 16px; }
.dev-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 14.5px; }
/* Licenses on the account page (account.js licBlock): the four numbers, the
   price line, and the payer's stepper that opens Stripe's confirm page. */
.t2-lic { margin: 8px 0 4px; padding: 16px; border: 1px solid #1f2029; border-radius: 14px; background: #0b0c11; }
.t2-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; }
.t2-nums b { display: block; font: 600 24px/1.1 var(--display, var(--sans)); letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.t2-nums small { color: var(--mute); font-size: 12.5px; }
.t2-lic .t2-price { margin-top: 12px; }
.t2-step { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.acard .t2-step .btn { width: auto; min-height: 40px; padding: 8px 16px; font-size: 14.5px; }
.acard .t2-step .t2-pm { width: 40px; padding: 0; font-size: 18px; }
.t2-n { min-width: 36px; text-align: center; font: 600 18px var(--sans); font-variant-numeric: tabular-nums; }
.t2-step .alink { margin-left: auto; }
.t2-acts { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.acard .t2-acts .btn { min-height: 34px; padding: 6px 12px; font-size: 13.5px; }
.t2-acts .alink { font-size: 13.5px; }
.t2-row.t2-off b { color: var(--mute); }
.t2-row.t2-ask { padding: 14px 16px; margin: 4px 0 8px; border: 1px solid #5a4630; border-radius: 12px; background: rgb(199 154 104 / 0.06); }
.acard .t2-ask .btn { min-height: 38px; padding: 7px 14px; }
.acard form.team-add .t2-role { width: auto; flex: 0 0 auto; height: 42px; padding: 0 10px; font-size: 14px; }
.t2-foot { gap: 6px; }
/* The activity dashboard (account.js activityBlock): a week, a person, CSV. */
.t2-actbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; }
.acard .t2-actbar .t2-sel { width: auto; flex: 0 1 auto; min-width: 0; max-width: 100%; height: 38px; padding: 0 10px; font-size: 14px; }
.t2-actbar .alink { margin-left: auto; font-size: 13.5px; }
.t2-actrow small { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .t2-row { flex-wrap: wrap; }
  .t2-acts { margin-left: 0; justify-content: flex-start; width: 100%; }
  .acard form.team-add { flex-wrap: wrap; }
  .acard form.team-add .field:first-child { flex: 1 1 100%; }
}
/* .pill.warn is a status pill, not the site's .warn section (site.css). */
.pill.warn { display: inline-block; gap: 0; padding: 5px 11px; border-radius: 99px; background: none; }