/* Rotor's pages. The design is in docs/ui-sketch (index.html, and docs/design/web-ui.md for why): ink on warm paper,
   one quiet accent, Inter for words and JetBrains Mono for anything technical. Nothing comes from another origin,
   since the Content-Security-Policy allows none. */

/* ============ Fonts ============ */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============ Design tokens ============
   The only colours are ink, the accent (links, the primary action, selection, focus), and red for danger. Monospace is
   technical, gray is secondary. The pages follow the system's light or dark. */
:root {
  color-scheme: light dark;
  --bg: #fbfbf9; --card: #ffffff; --fg: #1c1c1a; --muted: #6f6e67; --field: #96958d; --rule: #ebeae5; --rule-strong: #dcdbd4;
  --hi: #f3f2ee; --accent: #3451b2; --accent-hover: #283f8f; --accent-soft: rgba(52, 81, 178, .09); --on-accent: #fff;
  --bad: #b3261e;
  --shadow: 0 16px 40px -12px rgba(28, 28, 26, .18), 0 2px 6px rgba(28, 28, 26, .05);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: 32px; --radius: 8px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141413; --card: #1b1b1a; --fg: #ebeae6; --muted: #9a9991; --field: #6a6a63; --rule: #292927; --rule-strong: #363633;
    --hi: #1f1f1d; --accent: #9db0f5; --accent-hover: #bccaff; --accent-soft: rgba(157, 176, 245, .12); --on-accent: #141413;
    --bad: #f2867c;
    --shadow: 0 16px 40px -12px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
  }
}

/* ============ Base ============ */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.55 var(--sans);
  font-feature-settings: "cv11", "ss01"; font-optical-sizing: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--accent-soft); }
/* A link that is the line itself is ink with a quiet underline; inside running text it is the accent, so it stands out
   from the words around it. */
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--field); transition: color .12s, text-decoration-color .12s; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
p a, .note a, button.link { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent); }
p a:hover, .note a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
code, pre, .m { font-family: var(--mono); font-size: .85em; font-feature-settings: normal; }
.g { color: var(--muted); }
h1 { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; margin: 0 0 6px; }
h2 { font-size: 15px; font-weight: 600; margin: 32px 0 6px; }
p { margin: 0 0 10px; }
.sub { font-size: 13px; color: var(--muted); }
h1 + .sub, h1 + p.sub { margin: 0 0 20px; }

/* ============ Controls ============ */
button { font: 500 14px/20px var(--sans); padding: 8px 16px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  border-radius: 7px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.plain { background: var(--card); color: var(--fg); border-color: var(--field); }
button.plain:hover { background: var(--hi); border-color: var(--fg); }
button.danger { background: var(--card); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
button.danger:hover { background: color-mix(in srgb, var(--bad) 8%, var(--card)); border-color: var(--bad); }
/* GitHub's own look for signing in with GitHub: near-black with its mark, inverted in dark mode. */
button.gh { display: inline-flex; align-items: center; gap: 8px; background: #1f2328; border-color: #1f2328; color: #fff; }
button.gh:hover { background: #32383f; border-color: #32383f; }
button.gh svg { width: 16px; height: 16px; flex: none; }
button.gh.plain { background: var(--card); color: var(--fg); border-color: var(--field); }
button.gh.plain:hover { background: var(--hi); border-color: var(--fg); }
@media (prefers-color-scheme: dark) {
  button.gh:not(.plain) { background: #f6f8fa; border-color: #f6f8fa; color: #1f2328; }
  button.gh:not(.plain):hover { background: #ffffff; border-color: #ffffff; }
}
button:disabled, button:disabled:hover { cursor: default; background: var(--hi); border-color: var(--rule); color: var(--muted); }
a.button { display: inline-block; font: 500 14px/20px var(--sans); padding: 8px 16px; background: var(--card); color: var(--fg); text-decoration: none;
  border: 1px solid var(--field); border-radius: 7px; transition: background .12s, border-color .12s; }
a.button:hover { background: var(--hi); border-color: var(--fg); color: var(--fg); }
button.link { background: none; border: 0; padding: 0; font-weight: 400; color: var(--accent); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent); text-underline-offset: 3px; }
button.link:hover { background: none; color: var(--accent-hover); }
input:not([type=checkbox]):not([type=radio]), textarea { font: inherit; font-size: 15px; line-height: 20px; padding: 8px 11px; border: 1px solid var(--field);
  border-radius: 7px; background: var(--card); color: var(--fg); transition: border-color .12s, box-shadow .12s; }
input:not([type=checkbox]):not([type=radio]) { min-width: 230px; }
input:not([type=checkbox]):not([type=radio]):focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
label { display: block; }
label.check { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
a:focus-visible, button:focus-visible, summary:focus-visible, textarea:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.error { color: var(--bad); }
.note { background: var(--hi); border-radius: var(--radius); padding: 10px 14px; margin: 10px 0; font-size: 14px; line-height: 1.55; }

/* ============ Frame ============ */
header.top { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; min-height: 56px; padding: 0 var(--gutter);
  border-bottom: 1px solid var(--rule); background: var(--bg); }
header.top .brand { color: var(--fg); text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
header.top .crumbs { display: inline-flex; align-items: baseline; }
header.top .sep { color: var(--rule-strong); margin: 0 10px; }
header.top .pin { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 14px; }
button.me { width: 30px; height: 30px; border-radius: 50%; padding: 0; font-size: 11px; font-weight: 600; letter-spacing: .03em;
  background: var(--hi); color: var(--fg); border: 1px solid var(--rule); }
button.me:hover { background: var(--hi); border-color: var(--rule-strong); }
/* The database's name opens the database's menu. */
button.dbm { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 4px 6px; margin: 0 -6px; border-radius: 6px;
  color: var(--fg); font: 600 15px/1.2 var(--mono); }
button.dbm:hover { background: var(--hi); border: 0; }
button.dbm .chev { width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); margin: -3px 0 0; }
/* Menus are popovers: the browser closes them on a click outside or Escape. */
.menu { margin: 0; padding: 0; width: 248px; background: var(--card); color: var(--fg); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: var(--shadow); font-size: 14px; overflow: hidden; position: fixed; inset: 52px auto auto auto; }
.me-menu { right: var(--gutter); }
.db-menu { left: var(--gutter); }
.menu .msec { padding: 6px; border-bottom: 1px solid var(--rule); }
.menu .msec:last-child { border-bottom: 0; }
.menu .memail { padding: 8px 10px 6px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.menu a, .menu button.menuitem { display: block; width: 100%; padding: 6px 10px; border-radius: 6px; color: var(--fg); text-decoration: none;
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.menu a:hover, .menu button.menuitem:hover { background: var(--hi); color: var(--fg); }
.menu form { margin: 0; }
header.top .pin > a { color: var(--fg); text-decoration: none; font-weight: 500; }
header.top form { margin: 0; }
main { padding: 36px var(--gutter) 80px; max-width: 880px; }
main p, main .note { max-width: 68ch; }
@media (max-width: 860px) {
  :root { --gutter: 16px; }
  header.top { padding-top: 12px; padding-bottom: 12px; }
  /* 16 px stops phones zooming into a field when it's focused. */
  input:not([type=checkbox]):not([type=radio]), textarea { font-size: 16px; min-width: 0; max-width: 100%; }
  input:not([type=checkbox]):not([type=radio]) { width: 100%; }
  input:not([type=checkbox]):not([type=radio]) + button { margin: 8px 0 0; }
}

/* ============ The homepage ============
   One column of prose, centred, with the header lined up on it and no rule under it. Ink only: the one button is
   GitHub's. The headline uses Inter's display cut (optical sizing, on this page only). */
body.home { --col: 620px; }
body.home header.top { min-height: 72px; border-bottom-color: transparent; padding-inline: max(var(--gutter), calc((100% - var(--col)) / 2)); }
body.home main { max-width: none; }
.home-text { --ink2: color-mix(in srgb, var(--fg) 82%, var(--bg)); max-width: var(--col); margin: 0 auto; padding: 88px 0 136px; container-type: inline-size;
  font-size: 18px; line-height: 1.7; color: var(--ink2); font-optical-sizing: auto; text-wrap: pretty; }
/* Sized to the column and balanced, so it breaks in three even lines. */
.home-text h1 { font-size: min(54px, 10cqi); line-height: 1.04; font-weight: 500; letter-spacing: -.036em; color: var(--fg); margin: 0 0 48px; text-wrap: balance; }
.home-text p { max-width: none; margin: 0 0 22px; }
.home-text code { font-size: .8em; color: var(--fg); }
/* The two kinds of complexity: numbers hang in the margin, so the text keeps its edge. */
.home-text ol { list-style: none; counter-reset: kind; margin: 0 0 22px; padding: 0; color: var(--fg); }
.home-text ol li { counter-increment: kind; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; margin: 0 0 4px -32px; text-wrap: balance; }
.home-text ol li::before { content: counter(kind) "."; font-variant-numeric: tabular-nums; color: var(--muted); }
.home-text p.turn { margin-top: 52px; }
/* What the stack has to do: each point's first sentence on its own line. */
.home-text ul { list-style: none; margin: 36px 0 0; padding: 0; }
.home-text ul li { margin: 0 0 32px; }
.home-text ul strong { display: block; font-weight: 600; letter-spacing: -.012em; color: var(--fg); margin: 0 0 3px; }
/* The close: what Rotor is, a step up from the prose. */
.home-text p.last { margin: 76px 0 22px; font-size: 21px; line-height: 1.55; letter-spacing: -.01em; color: var(--fg); }
/* The demo video's place: a quiet frame with a play button. */
.home-text .demo { display: grid; justify-items: center; align-content: center; gap: 14px; width: 100%; aspect-ratio: 16 / 9; margin: 36px 0 32px; padding: 0;
  background: var(--hi); border: 0; border-radius: 12px; color: var(--muted); font: 500 14px/1 var(--sans); cursor: pointer;
  transition: background .15s, color .15s; }
.home-text .demo:hover { background: color-mix(in srgb, var(--fg) 4%, var(--hi)); color: var(--fg); }
.home-text .demo .play { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--fg); transition: transform .2s; }
.home-text .demo:hover .play { transform: scale(1.06); }
.home-text .demo .play::after { content: ''; position: absolute; left: 22px; top: 18px; border-style: solid; border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--bg); }
.home-text .demo:focus-visible { border-radius: 12px; }
.home-text button.gh { gap: 10px; padding: 11px 20px; font-size: 15px; border-radius: 8px; }
.home-text button.gh:focus-visible { border-radius: 8px; }
.home-text button.gh svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .home-text { padding: 40px 0 96px; font-size: 17px; }
  .home-text h1 { line-height: 1.08; letter-spacing: -.03em; margin-bottom: 32px; }
  .home-text ol li { grid-template-columns: 26px minmax(0, 1fr); margin-left: 0; }
  .home-text p.turn { margin-top: 40px; }
  .home-text p.last { margin-top: 56px; font-size: 19px; }
}

/* ============ Sign in, and sign in again ============
   A narrow column: a headline, then equal buttons with an "or" between. */
.signin { max-width: 340px; padding-top: min(12vh, 88px); }
.signin h1 { font-size: 36px; line-height: 1.08; font-weight: 500; letter-spacing: -.03em; margin: 0 0 32px; }
.signin .note { margin: 0 0 24px; }
.signin form { margin: 0; }
.signin button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 20px; font-size: 15px; border-radius: 8px; }
.signin button svg { width: 18px; height: 18px; flex: none; }
.signin button.plain { background: var(--card); color: var(--fg); border-color: var(--rule-strong); }
.signin button.plain:hover { background: var(--hi); border-color: var(--field); }
.signin .or { display: flex; align-items: center; gap: 14px; margin: 18px 0; font-size: 13px; color: var(--muted); }
.signin .or::before, .signin .or::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.signin .error { margin: 14px 0 0; font-size: 14px; }
.signin .why { margin: -14px 0 28px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.signin .back { margin: 22px 0 0; text-align: center; font-size: 14px; }
.signin .back a { color: var(--muted); text-decoration-color: var(--rule-strong); }
.signin .back a:hover { color: var(--fg); }
/* The GitHub username, asked for only once signing in with a passkey without one hasn't worked. */
.signin .back button.link { display: inline; width: auto; padding: 0; font-size: 14px; border-radius: 0; color: var(--muted); text-decoration-color: var(--rule-strong); }
.signin .back button.link:hover { color: var(--fg); }
.signin label { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.signin input:not([type=checkbox]):not([type=radio]) { width: 100%; margin: 0 0 12px; padding: 11px 13px; border-color: var(--rule-strong); border-radius: 8px; }

/* ============ The welcome: an account with no database ============
   One quiet column: a lead line, the fine print, one row to act. */
.welcome { max-width: 480px; padding-top: min(12vh, 88px); }
.welcome h1 { font-size: 36px; line-height: 1.08; font-weight: 500; letter-spacing: -.03em; margin: 0 0 22px; }
.welcome .lead { font-size: 19px; line-height: 1.5; letter-spacing: -.008em; margin: 0; text-wrap: balance; }
.welcome .terms { margin: 22px 0 44px; padding: 0 0 0 20px; font-size: 16px; line-height: 1.5; }
.welcome .terms li { margin: 0 0 8px; padding-left: 4px; }
.welcome .terms li::marker { color: var(--field); }
.welcome label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.welcome .wrow { display: grid; gap: 12px; justify-items: start; }
.welcome input:not([type=checkbox]):not([type=radio]) { width: 100%; min-width: 0; padding: 10px 13px; border-color: var(--rule-strong); border-radius: 8px; }
.welcome button { padding: 10px 20px; border-radius: 8px; }

/* ============ Databases ============
   A quiet list, one row per database: its name and how long it has left. */
.dbs, .settings, .details { max-width: 560px; }
.dblist { list-style: none; margin: 18px 0 26px; padding: 0; border-top: 1px solid var(--rule); }
.dblist li { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.dblist a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; color: var(--fg); text-decoration: none; transition: color .12s; }
.dblist a .m { font-size: 15px; font-weight: 500; }
.dblist a .left { font-size: 14px; color: var(--muted); white-space: nowrap; }
.dblist a:hover .m { color: var(--accent); }
/* A form that opens from a button: Add another database, Add a token, Add a passkey. */
details.add > summary { display: inline-block; list-style: none; cursor: pointer; font: 500 14px/20px var(--sans); padding: 8px 16px;
  background: var(--card); color: var(--fg); border: 1px solid var(--field); border-radius: 7px; transition: background .12s, border-color .12s; }
details.add > summary::-webkit-details-marker { display: none; }
details.add > summary:hover { background: var(--hi); border-color: var(--fg); }
details.add[open] > summary { display: none; }
details.add > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
form.mk { display: grid; gap: 12px; margin: 0; }
form.mk p { margin: 0; }
form.mk input:not([type=checkbox]):not([type=radio]) { width: 100%; }
form.mk .mrow { display: flex; align-items: center; gap: 18px; }

/* ============ Details ============ */
.det { margin: 18px 0 0; max-width: 620px; border-top: 1px solid var(--rule); display: block; }
.det div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.det dt { font-size: 14px; color: var(--muted); }
.det dd { margin: 0; overflow-wrap: anywhere; }
.det .url { color: var(--muted); }
@media (max-width: 520px) { .det div { grid-template-columns: 1fr; gap: 4px; } }

/* ============ Settings ============
   One column; each job is a section set apart by a rule and space; rows are plain, with a quiet action on the right. */
.sec { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--rule); }
.sec h2 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.01em; }
.sec > .sub { margin: 0 0 22px; max-width: 54ch; font-size: 14px; line-height: 1.6; }
.sec.danger { border-top-color: color-mix(in srgb, var(--bad) 28%, var(--rule)); }
.sec p { margin: 0; }
.srows { list-style: none; margin: 0 0 18px; padding: 0; }
.srows li { padding: 14px 0; }
.srows li:first-child { padding-top: 0; }
.srows li + li { border-top: 1px solid var(--rule); }
.srows .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.srows .row > span { font-weight: 500; overflow-wrap: anywhere; }
.srows .row form { margin: 0; }
.srows .sub { margin-top: 2px; }
.revall { margin: -6px 0 22px !important; }
.revall form { margin: 0; }
.settings .foot { margin: 44px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); }
.settings .none { margin: 0 0 18px; }

/* ============ Connecting an agent, and letting a machine in ============ */
.connect, .machine { max-width: 560px; }
.step { display: grid; grid-template-columns: 28px 1fr; margin: 0 0 18px; }
.step > b { color: var(--muted); font-weight: 500; padding-top: 1px; }
.step p:first-child { margin-top: 0; }
.copy { display: flex; gap: 12px; align-items: center; background: var(--hi); padding: 8px 8px 8px 14px; border-radius: var(--radius); margin: 8px 0; }
.copy code { flex: 1; font-size: 13px; user-select: all; overflow-wrap: anywhere; }
.copy button { padding: 6px 12px; font-size: 13px; }
form.code { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
form.code input { flex: 1; max-width: 240px; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.machine .det { margin-bottom: 20px; }
.machine form.mk { margin: 0 0 12px; }
.machine form.turn-down { display: block; margin-top: 20px; }
.machine > p { margin-bottom: 18px; }
@media (max-width: 860px) { form.code input { max-width: none; } form.code input + button { margin: 0; } }

/* ============ The confirmation dialog ============
   Taking something away asks first, and says what stops working. */
dialog#confirm { width: calc(100% - 32px); max-width: 380px; padding: 24px 24px 20px; background: var(--card); color: var(--fg);
  border: 1px solid var(--rule-strong); border-radius: 12px; box-shadow: var(--shadow); }
dialog#confirm::backdrop { background: rgba(20, 20, 19, .45); }
dialog#confirm h2 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.01em; }
dialog#confirm p { margin: 0 0 22px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
dialog#confirm .mrow { display: flex; gap: 10px; justify-content: flex-end; }

/* ============ Parts of pages with no design of their own yet ============
   Rules for the named parts only: nothing here is for a bare element, which would reach every screen. */
h1 + p, h2 + p { margin-top: 0; }
pre.secret { padding: 10px; background: var(--hi); border-radius: var(--radius); overflow-wrap: anywhere; white-space: pre-wrap; user-select: all; }
article.feedback { border-bottom: 1px solid var(--rule); padding: 4px 0 8px; }
article.feedback p { margin: 4px 0; }
p.message { white-space: pre-wrap; overflow-wrap: anywhere; }
label input:not([type=checkbox]):not([type=radio]) { display: block; margin-top: 4px; }

/* Upgrade and Contact us, from the approved sketch. */
.settings, .contact { max-width: 560px; }
.contact .lead2 { margin: 0 0 28px; color: var(--muted); }
.contact form.msg { display: grid; gap: 14px; }
.contact form.msg > label:first-child { font-size: 13px; color: var(--muted); margin: 0 0 -6px; }
.contact textarea { max-width: none; min-height: 168px; padding: 12px 14px; font-size: 15.5px; border-color: var(--rule-strong); border-radius: 8px; background: var(--card); resize: vertical; }
.contact form.msg label.check { padding: 0; font-size: 14.5px; }
.contact .mrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.contact .sent { font-size: 14px; color: var(--muted); }
.fbs { list-style: none; margin: 0; padding: 0; }
.fbs li { padding: 16px 0; }
.fbs li:first-child { padding-top: 0; }
.fbs li + li { border-top: 1px solid var(--rule); }
.fbs p { margin: 0; }
.fbs .sub { margin-bottom: 4px; }
.tscroll { overflow-x: auto; }
table.plans { border-collapse: collapse; margin: 20px 0; }
.plans th, .plans td { text-align: left; padding: 11px 36px 11px 0; border-bottom: 1px solid var(--rule); }
.plans th { font-weight: 600; }
.plans th:nth-child(n+2), .plans td:nth-child(n+2) { border-left: 1px solid var(--rule); padding-left: 22px; }
.plans td:first-child { color: var(--muted); }
.plans tr.act td { border-bottom: 0; padding-top: 16px; color: inherit; }
@media (max-width: 520px) {   /* three columns in a phone's width */
  .plans th, .plans td { padding-right: 12px; }
  .plans th:nth-child(n+2), .plans td:nth-child(n+2) { padding-left: 12px; }
  .plans tr.act button { padding: 8px 12px; } }
a.button.upg { padding: 5px 13px; font-size: 14px; line-height: 20px; border-radius: 8px; }
@media (max-width: 520px) { .upgmore { display: none; } }

.fbs .message { white-space: pre-wrap; overflow-wrap: anywhere; }