/* The last layer. Loaded after site.css and home.css, so it wins over both.
   1. one easing for every hover, 2. the language menu, 3. the header lined up with the page, 4. the status, documents and account pages.
   Same tokens as the rest of the site: hairlines, Inter, black and white. No inline styles (the CSP allows stylesheets from 'self' only). */

:root {
  --sm: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.38s;
  --mono-face: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, Menlo, monospace;
  --panel: color-mix(in srgb, var(--ink) 3.5%, var(--paper));
  --panel-hi: color-mix(in srgb, var(--ink) 7%, var(--paper));
}

/* ==== 1. hovers: every colour, border, shadow and shift eases on the same curve, in and out ==== */

html:root body :is(
  .btn, .button, .ap-button, .auth-button, .auth-link, .menu2 a, .foot2-links a, .foot2-brand, .cookie button, .pill-btn,
  .dl-option, .plan-period, .feature, .card, .co-option, .co-back, .ap-link, .ac-link, .ac-nav-item, .ac-row, .ac-card,
  .icon-button, .ap-eye, .ac-badge, .ac-button, .legal-item, .legal-docs a, .legal-toc button, .legal-back, .legal-others a,
  .svc, .st-cell, .brand, .ap-logo, .ac-who
) {
  transition:
    color var(--dur) var(--sm),
    background-color var(--dur) var(--sm),
    border-color var(--dur) var(--sm),
    box-shadow var(--dur) var(--sm),
    transform var(--dur) var(--sm),
    opacity var(--dur) var(--sm),
    padding var(--dur) var(--sm),
    background-size var(--dur) var(--sm);
}

/* A gradient cannot be eased, so the grey hover is a plain colour that can. */
html:root body .btn:not(.primary):hover { background: color-mix(in srgb, var(--ink) 15%, transparent); }
html:root body .btn.primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
html:root body .btn:active { transform: scale(0.975); transition-duration: 0.12s; }

/* The arrow glides instead of jumping out of the button and back. */
.btn .arr { transition: transform var(--dur) var(--sm); }
.btn:hover .arr { animation: none; transform: translateX(4px); }

/* Inputs: the border and the glow come in rather than switching. */
html:root body :is(.ap-input, .ac-input, .code-box, .ap-slot) {
  transition: border-color var(--dur) var(--sm), background-color var(--dur) var(--sm), box-shadow var(--dur) var(--sm);
}

/* Text links draw their underline from the left. */
.legal-doc a,
.foot2-links a,
.ap-link,
.ac-link {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur) var(--sm), color var(--dur) var(--sm);
}
.legal-doc a:hover,
.foot2-links a:hover,
.ap-link:hover,
.ac-link:hover { background-size: 100% 1px; }

/* ==== 2. the language: one button, a small menu under it ==== */

.lang { position: relative; display: block; gap: 0; }
.lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 10px 0 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--secondary);
  font: 560 13px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color var(--dur) var(--sm), background-color var(--dur) var(--sm), border-color var(--dur) var(--sm);
}
.lang .lang-btn .i { width: 15px; height: 15px; }
.lang .lang-btn .chev { width: 13px; height: 13px; opacity: 0.7; transition: transform var(--dur) var(--sm); }
.lang .lang-btn:hover,
.lang[data-open="true"] .lang-btn { color: var(--ink); background: var(--soft); border-color: var(--rule); }
.lang[data-open="true"] .lang-btn .chev { transform: rotate(180deg); }

.lang .lang-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 2px;
  min-width: 176px;
  padding: 6px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 88%, var(--ink) 4%);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.26s var(--sm), transform 0.34s var(--sm), visibility 0s linear 0.34s;
}
.lang[data-open="true"] .lang-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.lang .lang-pop button {
  display: grid;
  grid-template-columns: 1fr 16px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px 10px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--secondary);
  font: 500 14px/1.2 Inter, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur) var(--sm), background-color var(--dur) var(--sm);
}
.lang .lang-pop .tick { width: 15px; height: 15px; opacity: 0; transform: scale(0.6); transition: opacity var(--dur) var(--sm), transform var(--dur) var(--sm); }
.lang .lang-pop button:hover,
.lang .lang-pop button:focus-visible { color: var(--ink); background: var(--soft); outline: none; }
.lang .lang-pop button[aria-checked="true"] { color: var(--ink); }
.lang .lang-pop button[aria-checked="true"] .tick { opacity: 1; transform: none; }

/* ==== 3. the header lines up with the page under it ==== */

html:root body .top { padding-inline: max(20px, calc((100% - 1120px) / 2)); border-bottom: 1px solid transparent; transition: background-color var(--dur) var(--sm), border-color var(--dur) var(--sm); }
/* once the page moves under it, the header frosts what passes behind and takes a hairline (site.js sets the class) */
html:root body .top.scrolled { border-bottom-color: var(--rule); background: color-mix(in srgb, var(--paper) 72%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }

/* ==== 4. page titles: Inter, large, left; the same on status, documents and account ==== */

.status-page,
.legal-page { width: min(1120px, 100%); padding-top: clamp(56px, 8vw, 104px); }

.st-title,
.legal-page > .display {
  margin: 0;
  font: 560 clamp(40px, 6.4vw, 76px) / 1 Inter, system-ui, sans-serif;
  letter-spacing: -0.05em;
}

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- status: the state, a day of bars, the services, the users; plain type, hairlines, colour only for state ---- */

:root { --warn: #f5b941; }
:root[data-theme="light"] { --warn: #b7791f; }

.status-page { max-width: 720px; margin-left: 0; margin-right: auto; }

.sp-now { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; color: var(--ink); font-size: 17px; }
.sp-now[hidden] { display: none; }
.sp-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.sp-now.bad .sp-dot, .sp-error .sp-dot { background: var(--bad); }

.sp-block { margin-top: clamp(40px, 6vw, 56px); }
.sp-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 14px; color: var(--ink); font-size: 15px; font-weight: 560; letter-spacing: -0.01em; }
.sp-head b { font-weight: 560; font-variant-numeric: tabular-nums; }

.sp-bars { display: flex; gap: 3px; height: 32px; }
.sp-bars i { flex: 1; min-width: 0; border-radius: 2px; background: var(--rule); }
.sp-bars i.up { background: var(--ok); }
.sp-bars i.part { background: var(--warn); }
.sp-bars i.down { background: var(--bad); }
.sp-bars i:hover { opacity: 0.7; }

/* the app's tooltip: the elevated surface, a hairline, 11.5px Inter */
.sp-tip { position: absolute; z-index: 70; max-width: min(420px, 80vw); padding: 4px 8px; border: 1px solid #3d3d3d; border-radius: 6px; background: #242424; color: rgb(245 245 245 / 0.9); font: 400 11.5px/1.45 Inter, system-ui, sans-serif; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.sp-tip.on { opacity: 1; }
.sp-tip[hidden] { display: none; }
:root[data-theme="light"] .sp-tip { border-color: #e0e0e0; background: #fff; color: rgb(23 23 23 / 0.9); }

.sp-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.sp-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.sp-list .name { color: var(--ink); }
.sp-list .state { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.sp-list .state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.sp-list .stopped .state { color: var(--bad); }
.sp-list .stopped .state::before { background: var(--bad); }

.sp-users { margin: 28px 0 0; color: var(--muted); font-size: 14px; }
.sp-users b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .sp-bars { gap: 2px; height: 28px; }
}

/* ---- documents ---- */

.legal-page > .display { margin: 0 0 clamp(28px, 4vw, 48px); }
.legal-page[data-view="doc"] > .display { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.legal-page[data-view="doc"] { padding-top: clamp(40px, 6vw, 72px); }

.legal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-list li { display: contents; animation: none; }
.legal-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "no no" "name name" "go arrow";
  align-items: end;
  gap: 0 12px;
  min-height: 176px;
  padding: 22px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  animation: rise 0.7s var(--sm) backwards;
}
.legal-list li:nth-child(2) .legal-item { animation-delay: 0.05s; }
.legal-list li:nth-child(3) .legal-item { animation-delay: 0.1s; }
.legal-list li:nth-child(4) .legal-item { animation-delay: 0.15s; }
.legal-list li:nth-child(5) .legal-item { animation-delay: 0.2s; }
.legal-list li:nth-child(6) .legal-item { animation-delay: 0.25s; }
.legal-item:hover { background: var(--panel-hi); border-color: color-mix(in srgb, var(--ink) 26%, transparent); transform: translateY(-3px); }
.legal-no { grid-area: no; align-self: start; color: var(--muted); font: 500 12px/1 var(--mono-face); letter-spacing: 0.1em; }
.legal-name { grid-area: name; align-self: end; margin: 28px 0 22px; font: 560 clamp(20px, 2.4vw, 26px) / 1.15 Inter, system-ui, sans-serif; letter-spacing: -0.035em; text-wrap: balance; }
.legal-go { grid-area: go; color: var(--muted); font-size: 13px; font-weight: 500; transition: color var(--dur) var(--sm); }
.legal-arrow { grid-area: arrow; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); transition: transform var(--dur) var(--sm), color var(--dur) var(--sm); }
.legal-item:hover .legal-go,
.legal-item:hover .legal-arrow { color: var(--ink); }
.legal-item:hover .legal-arrow { transform: translateX(5px); }
.legal-foot { margin: 22px 2px 0; color: var(--muted); font-size: 13px; }

/* one document: the other documents and the sections on the left, the text in a readable column */
.legal-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.legal-side { position: sticky; top: 84px; display: grid; gap: 28px; max-height: calc(100vh - 108px); overflow-y: auto; padding-right: 4px; scrollbar-width: none; }
.legal-side::-webkit-scrollbar { display: none; }

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}
.legal-back .legal-arrow { width: 15px; height: 15px; transform: scaleX(-1); }
.legal-back:hover { color: var(--ink); }
.legal-back:hover .legal-arrow { transform: scaleX(-1) translateX(5px); }

.legal-label { margin: 0 0 8px 12px; color: var(--muted); font: 500 11px/1 var(--mono-face); letter-spacing: 0.12em; text-transform: uppercase; }
.legal-docs,
.legal-toc { display: grid; align-content: start; gap: 1px; }
.legal-docs a,
.legal-toc button {
  position: relative;
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--muted);
  font: 500 13.5px/1.35 Inter, system-ui, sans-serif;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.legal-docs a:hover,
.legal-toc button:hover { color: var(--ink); background: var(--soft); }
.legal-docs a[aria-current="page"],
.legal-toc button[aria-current] { color: var(--ink); background: var(--soft); }
.legal-toc button[aria-current]::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--ink); }

.legal-doc { max-width: 700px; margin: 0; animation: rise 0.7s var(--sm) backwards; }
.legal-title { margin: 0; font: 560 clamp(32px, 5vw, 54px) / 1.05 Inter, system-ui, sans-serif; letter-spacing: -0.05em; text-wrap: balance; }
.legal-meta { margin: 18px 0 0; color: var(--muted); font: 400 12.5px var(--mono-face); }
.legal-note { margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); color: var(--secondary); font-size: 14px; line-height: 1.55; }
.legal-doc h3 {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: baseline;
  margin: 52px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 90px;
  font: 560 21px / 1.25 Inter, system-ui, sans-serif;
  letter-spacing: -0.03em;
}
.legal-doc h3 > :only-child { grid-column: 1 / -1; }
.legal-num { color: var(--muted); font: 500 12px var(--mono-face); letter-spacing: 0.06em; }
.legal-doc p,
.legal-doc li { color: var(--secondary); font-size: 15.5px; line-height: 1.72; }
.legal-doc p { margin: 0 0 14px; }
.legal-doc ul { margin: 0 0 16px; padding: 0; list-style: none; }
.legal-doc li { position: relative; padding-left: 20px; }
.legal-doc li + li { margin-top: 6px; }
.legal-doc li::before { content: ""; position: absolute; left: 3px; top: 0.82em; width: 7px; height: 1px; background: var(--muted); }
.legal-doc h3 + p,
.legal-doc h3 + ul { margin-top: 0; }
.legal-doc h3 ~ p,
.legal-doc h3 ~ ul { margin-left: 38px; }
.legal-doc h3 > :only-child ~ p { margin-left: 0; }
.legal-doc a { color: var(--ink); text-decoration: none; }

@media (max-width: 860px) {
  .legal-list { grid-template-columns: 1fr; }
  .legal-item { min-height: 132px; }
  .legal-shell { grid-template-columns: 1fr; gap: 28px; }
  .legal-side { position: static; max-height: none; overflow: visible; gap: 20px; }
  .legal-toc { display: none; }
  .legal-docs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .legal-docs .legal-label { display: none; }
  .legal-docs a { width: auto; flex: none; border: 1px solid var(--rule); border-radius: 999px; white-space: nowrap; }
  .legal-doc h3 { grid-template-columns: 30px 1fr; }
  .legal-doc h3 ~ p,
  .legal-doc h3 ~ ul { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .status-page > *, .legal-item, .legal-doc, .st-cell .dot { animation: none; }
  html:root body * { transition-duration: 0.01s !important; }
}

/* ---- the account ---- */

/* signing in and up: one bordered card in the middle, the mark above the title */
html:root body .ap-card {
  width: min(420px, calc(100vw - 32px));
  padding: 40px 36px 34px;
  border: 1px solid var(--rule);
  border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 5%, var(--paper)), var(--paper) 70%);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
  animation: rise 0.8s var(--sm) backwards;
}
html:root body .ap-mark { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 22px; border: 1px solid var(--rule); border-radius: 15px; background: var(--soft); }
html:root body .ap-mark svg { width: 22px; height: 22px; }
html:root body .ap-title { font: 560 27px / 1.1 Inter, system-ui, sans-serif; letter-spacing: -0.045em; }
html:root body .ap-hint { color: var(--muted); font-size: 14px; line-height: 1.5; }
html:root body .ap-label,
html:root body .ap-label-text { letter-spacing: 0; }
html:root body .ap-label { color: var(--secondary); font-size: 12.5px; font-weight: 500; }
html:root body .ap-control { border-radius: 12px; }
html:root body .ap .ap-input { border-radius: 12px; }
html:root body .ap-button { border-radius: 12px; }
html:root body .ap-link { color: var(--secondary); font-size: 13px; }
html:root body .ap-link:hover { color: var(--ink); }

/* signed in: the title, who is signed in, a list of tabs and the cards */
html:root body .account-page:not(.signed-out) { width: min(1120px, 100%); padding-top: clamp(56px, 8vw, 104px); }
html:root body .account-page:not(.signed-out) > .display {
  margin: 0 0 clamp(28px, 4vw, 44px);
  font: 560 clamp(40px, 6.4vw, 76px) / 1 Inter, system-ui, sans-serif;
  letter-spacing: -0.05em;
}
html:root body .ac-who {
  top: clamp(56px, 8vw, 104px);
  height: 42px;
  padding: 0 16px 0 7px;
  border: 1px solid var(--rule);
  background: var(--panel);
  font-size: 13.5px;
}
html:root body .ac-who:hover { background: var(--panel-hi); }
html:root body .ac-avatar.sm { width: 28px; height: 28px; }

@media (min-width: 761px) {
  .ac-layout { grid-template-columns: 232px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); }
}
.ac-nav { top: 88px; gap: 1px; }
html:root body .ac-nav-item {
  position: relative;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
}
html:root body .ac-nav-item::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--ink); opacity: 0; transform: scaleY(0.4); transition: opacity var(--dur) var(--sm), transform var(--dur) var(--sm); }
html:root body .ac-nav-item:hover { background: var(--soft); color: var(--ink); }
html:root body .ac-nav-item[aria-current="page"] { background: var(--soft); }
html:root body .ac-nav-item[aria-current="page"]::before { opacity: 1; transform: none; }
.ac-nav-item .i { transition: transform var(--dur) var(--sm); }
.ac-nav-item:hover .i { transform: translateX(2px); }

.ac-grid { gap: 14px; animation: rise 0.7s var(--sm) backwards; }
html:root body .ac-card {
  gap: 2px;
  padding: 24px 24px 14px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--paper);
}
html:root body .ac-card:hover { border-color: color-mix(in srgb, var(--ink) 20%, transparent); }
html:root body .ac-h { font: 560 17px / 1.2 Inter, system-ui, sans-serif; letter-spacing: -0.03em; }
html:root body .ac-card > .ac-intro { margin: 4px 0 10px; font-size: 13.5px; line-height: 1.5; }
html:root body .ac-row { margin: 0 -12px; padding: 14px 12px; border-radius: 0; }
html:root body .ac-row + .ac-row { border-top: 1px solid var(--rule); }
html:root body .ac-row:hover { background: var(--panel); }
html:root body .ac-row-text b { font-size: 14.5px; }
html:root body .ac-row-text span { font-size: 12.5px; }
html:root body .ac-ico { width: 36px; height: 36px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); transition: color var(--dur) var(--sm), background-color var(--dur) var(--sm); }
html:root body .ac-row:hover .ac-ico { color: var(--ink); background: var(--panel-hi); }
html:root body .ac-button {
  height: 34px;
  padding: 0 15px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 560;
}
html:root body .ac-button:hover { background: var(--panel-hi); border-color: color-mix(in srgb, var(--ink) 26%, transparent); }
html:root body .ac-button.danger { border-color: color-mix(in srgb, var(--bad) 30%, transparent); background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); }
html:root body .ac-button.danger:hover { background: color-mix(in srgb, var(--bad) 18%, transparent); }
html:root body .ac-badge { padding: 4px 10px; font-size: 11px; letter-spacing: 0.02em; }
html:root body .ac-notice { border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); }

@media (max-width: 760px) {
  html:root body .ac-who { position: static; width: max-content; max-width: 100%; margin: 0 0 18px; }
  html:root body .ac-who-text { display: block; }
  html:root body .account-page:not(.signed-out) { padding-top: 76px; }
  html:root body .ac-card { padding: 20px 18px 10px; }
  html:root body .ap-card { padding: 32px 22px 26px; }
}

/* ---- phones: a tighter header, a Status link that is reachable, 44px tap targets, a smaller cookie notice, a compact status page ---- */
@media (max-width: 640px) {
  /* header: mark on the left, Status and language on the right */
  html:root body .top { padding: 8px 8px 8px 16px; gap: 4px; min-height: 56px; }
  html:root body .top .brand { width: 44px; height: 44px; align-items: center; justify-content: flex-start; }
  html:root body .top .menu2 { display: flex; order: 1; gap: 0; }
  html:root body .top .menu2 a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 14px; }
  html:root body .top .switchers { order: 2; }
  html:root body .top .lang-btn { min-height: 44px; padding: 0 10px; }
  html:root body .lang-pop button { min-height: 44px; }

  /* the first screen: the page fills the phone's real height, the footer sits at its foot */
  html:root body .hero4 { min-height: calc(100svh - 104px); padding: 72px 20px 36px; gap: 14px; }
  /* small enough that the longest phrase of the changing line ("Ваши правила.", about 8.4em) stays on one line, so the page does not jump */
  html:root body .hero4 { padding-left: 0; padding-right: 0; }
  html:root body .hero4 .h-giant { font-size: clamp(26px, calc((100vw - 48px) / 8.7), 46px); line-height: 1.06; }
  html:root body .hero4 .h-giant .swap { min-height: 1.06em; }
  html:root body .hero4 .h-sub { max-width: 32ch; font-size: 15px; line-height: 1.55; }
  html:root body .actions { width: 100%; max-width: 340px; margin-top: 8px; }
  html:root body .btn { height: 52px; padding: 0 16px; font-size: clamp(13px, 4.2vw, 15px); }
  html:root body .orbit { transform: perspective(900px) rotateX(15deg) scale(.72); }
  html:root body .shade { background: linear-gradient(to top, var(--paper) 10%, color-mix(in srgb, var(--paper) 78%, transparent) 45%, color-mix(in srgb, var(--paper) 40%, transparent) 100%); }

  /* footer: two columns of links with room to tap, the copyright under them */
  html:root body .foot2 { flex-direction: column; align-items: center; gap: 0; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); }
  html:root body .foot2-links { justify-content: center; gap: 0 4px; width: 100%; }
  html:root body .foot2-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 13px; }
  html:root body .foot2-copy { order: 1; flex-basis: auto; padding-top: 4px; }

  /* cookie notice: one slim card that does not cover half the screen */
  html:root body .cookie { bottom: calc(10px + env(safe-area-inset-bottom)); gap: 8px; padding: 10px; border-radius: 16px; }
  html:root body .cookie p { font-size: 12px; line-height: 1.4; }
  html:root body .cookie button { height: 40px; font-size: 14px; }

  /* status */
  html:root body .status-page { padding-top: 88px; }
  html:root body .st-title { font-size: clamp(34px, 11vw, 44px); }
  html:root body .sp-now { margin-top: 12px; font-size: 16px; }
}

/* Download files: the same flat, monochrome page as status and documents. */
.downloads-page { width: min(900px, 100%); margin-inline: auto; padding-bottom: 64px; }
.dl-version { margin: 0 0 20px; color: var(--muted); font: 12px var(--mono); }
.dl-intro { margin: 20px 0 36px; color: var(--secondary); }
.dl-files { border-top: 1px solid var(--rule); }
.dl-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.dl-row h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; font-size: 22px; font-weight: 560; letter-spacing: -.03em; }
.dl-meta { margin: 8px 0 0; font-size: 13px; color: var(--secondary); }
.dl-note, .dl-help { color: var(--muted); font-size: 13px; line-height: 1.6; }
.dl-note { margin: 8px 0 0; max-width: 440px; }
.dl-help { margin: 24px 0 0; max-width: 640px; }
.dl-badge { padding: 4px 8px; border: 1px solid var(--rule); border-radius: 6px; color: var(--secondary); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.dl-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 6px; background: var(--ink); color: var(--paper); text-decoration: none; font-size: 14px; font-weight: 560; }
.dl-button:hover { opacity: .8; }
@media (max-width: 560px) {
  .dl-row { align-items: stretch; flex-direction: column; gap: 18px; }
  .dl-intro { margin-bottom: 28px; }
}
.dl-button .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.top .menu2 { display: flex; }