/* Ornis — design system Orneos. Tokens shared with the Nextcloud app (nextcloud/apps/orneos). */

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/schibsted-grotesk-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: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/schibsted-grotesk-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; }
@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; }

:root {
  --field: #002FA7;            /* Bleu Klein — brand fields */
  --on-field: #FFFFFF;
  --on-field-muted: #D3DCF6;
  --action: #002FA7;
  --action-hover: #00217A;
  --action-tint: #E4EAFA;
  --on-action: #FFFFFF;
  --ink: #0F2440;              /* Bleu de Prusse */
  --muted: #45556E;
  --bg: #F5F6F9;               /* Brume */
  --surface: #FFFFFF;
  --surface-2: #EDF0F5;
  --line: #D3D9E3;
  --safran: #F0A202;
  --on-safran: #1C1400;
  --ok: #2A7262;
  --danger: #B8331B;
  --grid: rgba(255,255,255,.09);

  --font-ui: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --fs-body: 1rem;             /* 16px */
  --fs-small: .875rem;         /* 14px — floor for running text */
  --fs-label: .8125rem;        /* 13px — uppercase labels only */
  --r-ctl: 6px;
  --r-card: 10px;
  --t-fast: 140ms cubic-bezier(.2,.7,.2,1);
  --max: 1180px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --field: #0A2A8C; --on-field-muted: #C9D3F3;
    --action: #8A9EFF; --action-hover: #AEBBFF; --action-tint: #1A2A52; --on-action: #0A1424;
    --ink: #EDF0F6; --muted: #B0BCD0; --bg: #0A1424; --surface: #101D33; --surface-2: #16253F;
    --line: #2A3B5A; --safran: #F2B13A; --ok: #5CC2AC; --danger: #F07A62; --grid: rgba(255,255,255,.07);
    color-scheme: dark;
  }
}

/* ─── Base ──────────────────────────────────────────── */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/1.6 var(--font-ui); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; letter-spacing: -.015em; }
p { margin: 0; }
a { color: var(--action); text-underline-offset: 3px; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--safran); outline-offset: 2px; }
.icon { width: 20px; height: 20px; flex: none; stroke-linecap: square; }
.mono { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.label { font: 500 var(--fs-label)/1.3 var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--surface); padding: 10px 14px; border-radius: var(--r-ctl); }
.skip:focus { top: 8px; }
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.section { padding-block: 72px; }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 10px; max-width: 64ch; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -.025em; }
.section-head p { color: var(--muted); font-size: 1.0625rem; }

/* ─── Klein field + graticule ───────────────────────── */
.field {
  background-color: var(--field); color: var(--on-field);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px; background-position: -1px -1px;
}
.field a:not(.btn) { color: #FFFFFF; }

/* ─── Buttons ───────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-ctl); border: 1px solid transparent; font-weight: 600; font-size: var(--fs-body); line-height: 1.2; text-decoration: none; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.btn .icon { width: 18px; height: 18px; }
.btn-primary { background: var(--action); color: var(--on-action); }
.btn-primary:hover { background: var(--action-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn-field { background: #FFFFFF; color: #002FA7; }
.btn-field:hover { background: #E4EAFA; }
.btn-field-line { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.55); }
.btn-field-line:hover { border-color: #FFFFFF; }
.btn-lg { min-height: 52px; padding: 0 24px; font-size: 1.0625rem; }
.btn-block { width: 100%; }

/* ─── Header ────────────────────────────────────────── */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header .container { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; min-height: 44px; }
.brand svg { width: 32px; height: 32px; }
.nav { display: flex; gap: 24px; flex: 1; }
.nav a { color: var(--ink); text-decoration: none; padding-block: 8px; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--line); }
.nav a[aria-current="page"] { border-bottom-color: var(--safran); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.locale { display: flex; gap: 2px; }
.locale a { display: inline-grid; place-items: center; min-width: 36px; min-height: 36px; padding: 0 6px; border-radius: var(--r-ctl); font: 500 var(--fs-label)/1 var(--font-data); color: var(--muted); text-decoration: none; }
.locale a[aria-current="true"] { color: var(--ink); background: var(--surface-2); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--field); color: #FFFFFF; display: inline-grid; place-items: center; font-weight: 700; font-size: var(--fs-small); flex: none; }
.user-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 600; }
.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: var(--r-ctl); background: transparent; cursor: pointer; }
.menu-toggle .icon { width: 22px; height: 22px; }
.menu-toggle .i-close { display: none; }

/* ─── Hero ──────────────────────────────────────────── */
.hero .container { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; padding-block: 88px 80px; }
.hero h1 { font-size: clamp(2.125rem, 5.4vw, 4rem); line-height: 1.03; font-weight: 800; letter-spacing: -.035em; }
.hero .lede { margin-top: 22px; font-size: 1.1875rem; line-height: 1.55; color: var(--on-field-muted); max-width: 46ch; }
.hero .cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero .fine { margin-top: 16px; font-size: var(--fs-small); color: var(--on-field-muted); }
.ledger { align-self: end; margin: 0; border-top: 1px solid rgba(255,255,255,.4); }
.ledger div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.ledger dt { color: var(--on-field-muted); font-size: .9375rem; }
.ledger dd { margin: 0; font-family: var(--font-data); font-size: 1rem; text-align: right; }

.page-head { padding-block: 64px 48px; }
.page-head .container { display: grid; gap: 16px; max-width: calc(var(--max)); }
.page-head h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; max-width: 22ch; }
.page-head p { font-size: 1.125rem; max-width: 56ch; color: var(--on-field-muted); }
.page-head .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* ─── App presentation ──────────────────────────────── */
.app-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.app-feature { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); text-decoration: none; transition: border-color var(--t-fast); }
.app-feature:hover { border-color: var(--action); }
.app-feature .icon { width: 28px; height: 28px; color: var(--action); }
.app-feature h3 { font-size: 1.25rem; font-weight: 700; }
.app-feature p { color: var(--muted); font-size: .9375rem; flex: 1; }
.app-feature .host { font: 500 var(--fs-small)/1.3 var(--font-data); color: var(--action); }

.app-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.app-list li { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--line); font-size: 1rem; }
.app-list .icon { color: var(--muted); }

.app-rows { display: grid; gap: 0; border-top: 1px solid var(--line); }
.app-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.app-row .tile { width: 48px; height: 48px; border-radius: var(--r-ctl); background: var(--action-tint); color: var(--action); display: grid; place-items: center; }
.app-row .tile .icon { width: 24px; height: 24px; }
.app-row h3 { font-size: 1.1875rem; font-weight: 700; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.app-row h3 .host { font: 500 var(--fs-small)/1 var(--font-data); color: var(--action); }
.app-row p { color: var(--muted); font-size: .9375rem; margin-top: 4px; max-width: 64ch; }
.app-row:target { background: linear-gradient(90deg, var(--action-tint), transparent 70%); }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.fact { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 2px solid var(--ink); }
.fact .icon { width: 24px; height: 24px; color: var(--action); }
.fact h3 { font-size: 1.125rem; font-weight: 700; }
.fact p { color: var(--muted); font-size: .9375rem; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.card > .icon { width: 28px; height: 28px; color: var(--action); }
.card h2, .card h3 { font-size: 1.1875rem; font-weight: 700; }
.card p { color: var(--muted); font-size: .9375rem; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; padding-block: 64px; }
.cta-band h2 { font-size: clamp(1.625rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; max-width: 20ch; }
.cta-band p { color: var(--on-field-muted); margin-top: 10px; max-width: 52ch; }

.narrow { max-width: 820px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 2px solid var(--action); }
.steps li::before { content: counter(step); font: 600 var(--fs-small)/1 var(--font-data); color: var(--action); }
.steps h3 { font-size: 1.125rem; font-weight: 700; }
.steps p { color: var(--muted); font-size: .9375rem; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 14px 0; cursor: pointer; font-weight: 600; font-size: 1.0625rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { width: 18px; height: 18px; color: var(--muted); transition: transform var(--t-fast); }
.faq details[open] summary .chev { transform: rotate(90deg); }
.faq details p { padding: 0 0 18px; color: var(--muted); max-width: 66ch; }
.prose { display: grid; gap: 40px; }
.prose article { display: grid; gap: 12px; }
.prose h2 { font-size: 1.5rem; font-weight: 700; }
.prose p { max-width: 68ch; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9375rem; }
.compare th, .compare td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { font: 500 var(--fs-label)/1.3 var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.compare tbody th { font-weight: 600; width: 26%; }
.compare td:nth-child(2) { color: var(--action); font-weight: 600; }
.facts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .table-wrap { overflow: visible; border: 0; background: transparent; }
  .compare { min-width: 0; }
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); margin-bottom: 10px; padding: 6px 0; }
  .compare tbody th { width: auto; border-bottom: 0; padding-bottom: 4px; }
  .compare td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; border-bottom: 0; padding-block: 6px; }
  .compare td::before { content: attr(data-label); font: 500 var(--fs-label)/1.5 var(--font-data); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  .compare tbody tr:last-child > * { border-bottom: 0; }
}

/* ─── Pricing ───────────────────────────────────────── */
.plans { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; align-items: start; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; display: grid; gap: 20px; }
.plan .price { font: 600 2.75rem/1 var(--font-data); letter-spacing: -.03em; }
.plan .price small { font: 500 1rem var(--font-ui); color: var(--muted); letter-spacing: 0; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks .icon { color: var(--ok); margin-top: 2px; }
.plan-note { color: var(--muted); font-size: var(--fs-small); }
.upcoming { padding: 28px; border: 1px dashed var(--line); border-radius: var(--r-card); display: grid; gap: 12px; align-content: start; }

/* ─── Forms ─────────────────────────────────────────── */
.form { display: grid; gap: 18px; }
.form-field { display: grid; gap: 6px; }
.form-field > label, .form-field > .label-text { font-size: .9375rem; font-weight: 600; }
.input, .input-group { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); }
.input { padding: 0 12px; font-size: 1.0625rem; color: var(--ink); }
.input:focus, .input-group:focus-within { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--action-tint); }
.input-group { display: flex; align-items: stretch; overflow: hidden; }
.input-group input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 12px; font-size: 1.0625rem; outline: none; color: var(--ink); }
.input-group .suffix { display: grid; place-items: center; padding: 0 12px; border-left: 1px solid var(--line); background: var(--surface-2); font: 500 .9375rem var(--font-data); color: var(--muted); }
.input-group .reveal { border: 0; border-left: 1px solid var(--line); background: var(--surface-2); padding: 0 14px; cursor: pointer; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.hint { font-size: var(--fs-small); color: var(--muted); }
.status { font-size: var(--fs-small); font-weight: 600; min-height: 1.4em; }
.status[data-state="available"] { color: var(--ok); }
.status[data-state="taken"], .status[data-state="error"] { color: var(--danger); }
.rules { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 4px 16px; font-size: var(--fs-small); color: var(--muted); }
.rules li { display: flex; align-items: center; gap: 6px; }
.rules li .icon { width: 16px; height: 16px; opacity: .35; }
.rules li.ok { color: var(--ok); }
.rules li.ok .icon { opacity: 1; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; }
.checkbox input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--action); flex: none; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-ctl); font-size: .9375rem; border: 1px solid; }
.alert .icon { margin-top: 1px; }
.alert-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.alert-success { color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }

/* ─── Auth ──────────────────────────────────────────── */
.auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100vh - 65px); }
.auth-aside { padding: 56px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.auth-aside h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
.auth-aside .ledger { align-self: stretch; }
.auth-main { display: grid; place-items: center; padding: 48px var(--gutter-r) 48px var(--gutter); }
.auth-box { width: 100%; max-width: 440px; display: grid; gap: 22px; }
.auth-box h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.025em; }
.auth-box .sub { color: var(--muted); margin-top: -10px; }
.auth-links { display: grid; gap: 8px; font-size: .9375rem; color: var(--muted); }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; text-decoration: none; }
.back-link .icon { width: 18px; height: 18px; }

/* ─── Client area ───────────────────────────────────── */
.space-head .container { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 48px 40px; }
.space-head h1 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -.025em; }
.space-head p { color: var(--on-field-muted); margin-top: 6px; }
.space-head .address { font-family: var(--font-data); color: #FFFFFF; }
.launcher { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.launcher a { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 96px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); text-decoration: none; font-weight: 600; transition: border-color var(--t-fast); }
.launcher a:hover { border-color: var(--action); }
.launcher .icon { width: 24px; height: 24px; color: var(--action); }
.kv { display: grid; gap: 0; margin: 0; }
.kv div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.kv div:last-child { border-bottom: 0; }
.kv dt { color: var(--muted); font-size: var(--fs-small); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv .copy-btn { justify-self: end; }
.dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dl-list a { justify-content: flex-start; width: 100%; }
.dl-list small { margin-left: auto; font: 500 var(--fs-label) var(--font-data); color: var(--muted); }
.copy-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); font-size: var(--fs-small); font-weight: 600; cursor: pointer; color: var(--ink); }
.copy-btn .icon { width: 16px; height: 16px; }
.copy-btn[data-done] { color: var(--ok); border-color: var(--ok); }

.settings { display: grid; gap: 40px; max-width: 760px; }
.settings-section { display: grid; gap: 14px; }
.settings-section > h2 { font-size: 1.25rem; font-weight: 700; }
.settings-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.settings-card > * + * { border-top: 1px solid var(--line); }
.setting { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 20px; min-height: 60px; color: var(--ink); text-decoration: none; }
.setting .icon { color: var(--muted); }
.setting .what b { display: block; font-weight: 600; }
.setting .what span { font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.setting .warn { color: var(--danger); }
.setting .chev { width: 18px; height: 18px; color: var(--muted); transition: transform var(--t-fast); }
details.setting-detail > summary { list-style: none; cursor: pointer; }
details.setting-detail > summary::-webkit-details-marker { display: none; }
details.setting-detail[open] > summary .chev { transform: rotate(90deg); }
.setting-body { padding: 4px 20px 22px 58px; display: grid; gap: 16px; }
a.setting:hover, details.setting-detail > summary:hover { background: var(--bg); }

.config-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.config-grid .card h2 { display: flex; align-items: center; gap: 10px; }
.config-grid .card h2 .icon { color: var(--action); }

/* ─── Legal & error ─────────────────────────────────── */
.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; padding-block: 56px 80px; }
.legal-toc { position: sticky; top: 96px; align-self: start; display: grid; gap: 4px; }
.legal-toc a { display: block; padding: 8px 12px; border-left: 2px solid var(--line); color: var(--ink); text-decoration: none; }
.legal-toc a:hover { border-left-color: var(--safran); }
.legal-body { max-width: 72ch; display: grid; gap: 48px; }
.legal-body article { display: grid; gap: 14px; }
.legal-body h1 { font-size: 2.25rem; font-weight: 800; letter-spacing: -.025em; }
.legal-body h2 { font-size: 1.5rem; font-weight: 700; margin-top: 8px; }
.legal-body h3 { font-size: 1.0625rem; font-weight: 700; margin-top: 8px; }
.legal-body ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.legal-body .updated { color: var(--muted); font-size: var(--fs-small); }
.error-page .container { display: grid; gap: 18px; justify-items: start; padding-block: 120px; }
.error-page .code { font: 600 var(--fs-small) var(--font-data); color: var(--on-field-muted); }
.error-page h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -.03em; }
.error-page p { color: var(--on-field-muted); font-size: 1.125rem; max-width: 50ch; }

/* ─── Footer ────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
.site-footer .container { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px; padding-block: 48px; }
.footer-brand p { color: var(--muted); font-size: var(--fs-small); margin-top: 12px; max-width: 34ch; }
.footer-col { display: grid; gap: 4px; align-content: start; }
.footer-col h2 { margin-bottom: 6px; }
.footer-col a { color: var(--ink); text-decoration: none; min-height: 36px; display: flex; align-items: center; }
.footer-col a:hover { text-decoration: underline; }
.footer-bottom { border-top: 1px solid var(--line); }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 18px; font-size: var(--fs-small); color: var(--muted); }

/* ─── Responsive ────────────────────────────────────── */
@media (max-width: 1024px) {
  .app-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .config-grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer .container { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hero .container { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 56px; }
  .facts, .facts-2, .split, .plans, .steps { grid-template-columns: minmax(0, 1fr); }
  .auth { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth-aside { padding: 28px var(--gutter-r) 28px var(--gutter); }
  .auth-aside .ledger, .auth-aside .aside-foot { display: none; }
  .auth-main { padding-block: 32px 56px; place-items: start center; }
  .legal { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .legal-toc { position: static; display: flex; flex-wrap: wrap; gap: 8px; }
  .legal-toc a { border: 1px solid var(--line); border-radius: var(--r-ctl); }
}
@media (max-width: 760px) {
  .menu-toggle { display: inline-grid; }
  .site-header .container { flex-wrap: wrap; gap: 0 12px; }
  .nav, .header-actions, .site-header .locale { display: none; }
  .site-header.open .nav, .site-header.open .header-actions, .site-header.open .locale { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 4px; }
  .site-header.open .nav { padding-top: 8px; flex: 0 0 100%; }
  .site-header.open .nav a { min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
  .site-header.open .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--safran); padding-left: 12px; }
  .site-header.open .header-actions { padding-block: 12px; }
  .site-header.open .header-actions .btn { width: 100%; }
  .site-header.open .locale { flex-direction: row; padding-bottom: 12px; }
  .site-header.open .menu-toggle .i-menu { display: none; }
  .site-header.open .menu-toggle .i-close { display: block; }
  .section { padding-block: 52px; }
  .app-features { grid-template-columns: minmax(0, 1fr); }
  .hero .cta .btn, .page-head .cta .btn, .cta-band .btn { flex: 1 1 100%; }
  .app-row { grid-template-columns: 40px minmax(0, 1fr); }
  .app-row .tile { width: 40px; height: 40px; }
  .app-row .btn { grid-column: 2; justify-self: start; }
  .kv div { grid-template-columns: minmax(0, 1fr) auto; }
  .kv dt { grid-column: 1 / -1; }
  .setting-body { padding-left: 20px; }
  .site-footer .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media print { .site-header, .site-footer, .menu-toggle { display: none; } body { background: #fff; color: #000; } }

/* ─── Richer surfaces (product previews, bands, tinted tiles) ─────────── */
:root { --tint-klein: #E4EAFA; --tint-safran: #FDF1D6; --tint-vdg: #DDEFEA; --ink-band: #0F2440; }
@media (prefers-color-scheme: dark) { :root { --tint-klein: #1A2A52; --tint-safran: #3A2E12; --tint-vdg: #133A33; --ink-band: #07101E; } }

.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding-block: 72px 64px; }
.hero-split h1 { font-size: clamp(2.125rem, 4.8vw, 3.75rem); line-height: 1.03; font-weight: 800; letter-spacing: -.035em; }
.hero-split .lede { margin-top: 20px; font-size: 1.1875rem; line-height: 1.55; color: var(--on-field-muted); max-width: 46ch; }
.hero-split .cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-split .fine { margin-top: 14px; font-size: var(--fs-small); color: var(--on-field-muted); }
.hero-split .eyebrow { font: 500 var(--fs-label)/1.3 var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--on-field-muted); display: block; margin-bottom: 14px; }

.readout { background: rgba(0, 0, 0, .18); border-top: 1px solid rgba(255,255,255,.18); }
.readout dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }
.readout dl > div { padding: 18px 20px 18px 0; display: grid; gap: 4px; }
.readout dl > div + div { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.18); }
.readout dt { color: var(--on-field-muted); font-size: var(--fs-small); }
.readout dd { margin: 0; font: 500 1.0625rem/1.3 var(--font-data); color: #FFFFFF; }

/* Product preview window */
.mock { display: grid; grid-template-columns: 52px minmax(0, 1fr); height: 380px; border-radius: var(--r-card); overflow: hidden; background: #F5F6F9; color: #0F2440;
  box-shadow: 0 30px 60px -20px rgba(0, 10, 40, .55), 0 0 0 1px rgba(255,255,255,.25); font-size: 13px; line-height: 1.35; }
.mock .icon { width: 18px; height: 18px; }
.mock-rail { background: #00217A; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; }
.mock-mark { width: 30px; height: 30px; margin-bottom: 6px; }
.mock-app { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; color: #C9D3F3; }
.mock-app.on { background: rgba(255,255,255,.16); color: #FFFFFF; box-shadow: inset 3px 0 0 #F0A202; }
.mock-app b { position: absolute; top: 1px; right: 0; min-width: 15px; height: 15px; border-radius: 8px; background: #F0A202; color: #1C1400; font: 600 10px/15px var(--font-data); text-align: center; }
.mock-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mock-top { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #FFFFFF; border-bottom: 1px solid #D3D9E3; color: #45556E; }
.mock-search { flex: 1; height: 26px; border: 1px solid #D3D9E3; border-radius: 5px; background: #F5F6F9; }
.mock-top kbd { font-size: 10px; padding: 3px 5px; }
.mock-mail { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 0; }
.mock-list { background: #FFFFFF; border-right: 1px solid #D3D9E3; overflow: hidden; }
.mock-msg { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 2px 8px; padding: 10px 12px; border-bottom: 1px solid #E6EAF0; }
.mock-msg i { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; grid-row: span 2; }
.mock-msg.unread i { background: #002FA7; }
.mock-msg b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-msg.unread b { font-weight: 700; }
.mock-msg time { font: 11px var(--font-data); color: #45556E; }
.mock-msg span { grid-column: 2 / span 2; color: #45556E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-msg.sel { background: #E4EAFA; }
.mock-read { padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.mock-read > b { font-size: 15px; margin-bottom: 6px; }
.mock-line { height: 8px; border-radius: 4px; background: #E3E7EE; }
.w90 { width: 90%; } .w80 { width: 80%; } .w60 { width: 60%; }
.mock-attach { margin-top: 8px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #D3D9E3; border-radius: 6px; background: #FFFFFF; font: 11px var(--font-data); color: #45556E; }
.mock-table { flex: 1; background: #FFFFFF; padding: 4px 0; display: flex; flex-direction: column; }
.mock-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 64px 72px; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #E6EAF0; color: #45556E; }
.mock-row .icon { color: #002FA7; }
.mock-row b { color: #0F2440; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-row span { font: 11px var(--font-data); }
.mock-row.person { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); }
.mock-av { width: 28px; height: 28px; border-radius: 50%; background: #E4EAFA; color: #002FA7; display: grid; place-items: center; font: 600 11px var(--font-ui) !important; }
.mock-quota { margin-top: auto; padding: 12px 14px; display: grid; gap: 6px; font: 11px var(--font-data); color: #45556E; }
.mock-quota i { display: block; height: 5px; border-radius: 3px; background: #002FA7; box-shadow: 0 0 0 999px #E3E7EE inset; }
.mock-quota { position: relative; }
.mock-cal { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: #FFFFFF; }
.mock-day { position: relative; border-right: 1px solid #E6EAF0; background-image: linear-gradient(#EEF1F5 1px, transparent 1px); background-size: 100% 12.5%; }
.mock-day > span { display: block; padding: 8px; font: 11px var(--font-data); color: #45556E; border-bottom: 1px solid #E6EAF0; background: #FFFFFF; }
.mock-day.today > span { color: #002FA7; font-weight: 600; box-shadow: inset 0 -2px 0 #F0A202; }
.ev { position: absolute; left: 5px; right: 5px; border-radius: 4px; padding: 4px 6px; font: 600 10.5px/1.2 var(--font-ui); font-style: normal; overflow: hidden; }
.ev.a { background: #E4EAFA; color: #002FA7; box-shadow: inset 3px 0 0 #002FA7; }
.ev.b { background: #FDF1D6; color: #6B4700; box-shadow: inset 3px 0 0 #F0A202; }
.ev.c { background: #DDEFEA; color: #1F5A4E; box-shadow: inset 3px 0 0 #2A7262; }
.mock-meet { flex: 1; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 10px 54px; background: #0B1A2E; }
.mock-meet > span { border-radius: 6px; background: #16253F; display: grid; place-items: center; color: #FFFFFF; font: 700 18px var(--font-ui); }
.mock-meet > span.talk { box-shadow: inset 0 0 0 3px #F0A202; }
.mock-meet > span.me { background: #002FA7; }
.mock-controls { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.mock-controls i { width: 34px; height: 34px; border-radius: 50%; background: #2A3B5A; }
.mock-controls i.end { background: #B8331B; width: 48px; border-radius: 17px; }
.mock-photos { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 4px; padding: 4px; background: #FFFFFF; }
.mock-photos span { border-radius: 3px; }
.p1 { background: linear-gradient(160deg, #8FB3E8, #2E5AA8); } .p2 { background: linear-gradient(160deg, #F2D49B, #C98A2B); }
.p3 { background: linear-gradient(160deg, #A9D6C8, #2A7262); } .p4 { background: linear-gradient(160deg, #E8B4A6, #A8473A); }
.p5 { background: linear-gradient(160deg, #C7CEDB, #45556E); } .p6 { background: linear-gradient(160deg, #F5E6B8, #8A7A3A); }

/* Section rhythm */
.section.band { background: var(--surface); }
.section.ink { background-color: var(--ink-band); color: #EDF0F6; border-top: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 64px 64px; }
.section.ink + .section { border-top: 0; }
.section.ink .section-head p, .section.ink .fact p { color: #B0BCD0; }
.section.ink .fact { border-top-color: #F0A202; }
.section.ink .fact .icon { color: #F0A202; }
.bigfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-bottom: 48px; }
.bigfacts div { display: grid; gap: 6px; }
.bigfacts b { font: 600 clamp(2rem, 4vw, 2.75rem)/1 var(--font-data); letter-spacing: -.03em; color: #FFFFFF; }
.bigfacts span { color: #B0BCD0; font-size: var(--fs-small); }

/* Tinted tiles by family */
.tile-icon { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: var(--tint-klein); color: var(--action); }
.tile-icon .icon { width: 22px; height: 22px; }
.fam-organize .tile-icon, .tile-icon.fam-organize { background: var(--tint-safran); color: #8A5A00; }
.fam-store .tile-icon, .tile-icon.fam-store { background: var(--tint-vdg); color: var(--ok); }
@media (prefers-color-scheme: dark) { .fam-organize .tile-icon, .tile-icon.fam-organize { color: #F2B13A; } }
.app-feature { box-shadow: 0 1px 0 var(--line); transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); }
.app-feature:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(15, 36, 64, .35); }
.app-list li .tile-icon { width: 32px; height: 32px; border-radius: 6px; }
.app-list li .tile-icon .icon { width: 18px; height: 18px; }

@media (max-width: 1024px) {
  .readout dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .readout dl > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .bigfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero-split { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 48px 40px; }
  .mock { height: 300px; }
}
@media (max-width: 640px) {
  .mock { grid-template-columns: 44px minmax(0, 1fr); height: 260px; }
  .mock-mail { grid-template-columns: minmax(0, 1fr); }
  .mock-read { display: none; }
  .mock-row { grid-template-columns: 20px minmax(0, 1fr) 64px; }
  .mock-row span:last-child { display: none; }
  .mock-row.person span:last-child { display: block; }
  .mock-cal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mock-day:nth-child(n+4) { display: none; }
  .readout dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readout dl > div, .readout dl > div + div { padding: 14px 0; border-left: 0; }
  .readout dl > div:nth-child(odd) { padding-right: 12px; }
  .hero-split .cta .btn { flex: 1 1 100%; }
}

/* ─── Pricing (tabs Individual / Teams) ─── */
.interval { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.interval label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.interval label:has(input:checked) { border-color: var(--field); background: color-mix(in srgb, var(--field) 6%, var(--surface)); }
.interval input { grid-row: span 2; accent-color: var(--field); width: 18px; height: 18px; margin: 0; }
.interval .price { font-size: 1.75rem; }
.interval small { color: var(--muted); font-size: var(--fs-small); }
.interval-name { color: var(--muted); font-size: var(--fs-small); }
.interval .save { font: 600 .75rem/1 var(--font-ui); font-style: normal; color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); padding: 3px 7px; border-radius: 999px; margin-left: 6px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); color: var(--muted); }
.consent input { accent-color: var(--field); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.pricing-head .container { text-align: center; display: grid; justify-items: center; gap: 10px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; margin-top: 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.seg a { min-height: 42px; padding: 0 26px; display: inline-flex; align-items: center; border-radius: 999px; color: #fff; font-weight: 600; text-decoration: none; }
.seg a[aria-selected="true"] { background: #fff; color: var(--field); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.pricing .container { display: grid; gap: 24px; }
.billing-switch { justify-self: center; display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.billing-switch label { position: relative; }
.billing-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.billing-switch span { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: .9375rem; color: var(--muted); }
.billing-switch input:checked + span { background: var(--ink); color: var(--bg); }
.billing-switch input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }
.billing-switch em { font: 600 .75rem/1 var(--font-ui); font-style: normal; color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); padding: 4px 8px; border-radius: 999px; }
.billing-switch input:checked + span em { color: var(--ok); background: color-mix(in srgb, var(--ok) 22%, var(--bg)); }
.tab-panel[hidden] { display: none; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.tier { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 14px; position: relative; min-width: 0; }
.tier-featured { border-color: var(--field); box-shadow: 0 0 0 1px var(--field), 0 24px 50px -30px rgba(0, 47, 167, .6); }
.tier-current { border-style: dashed; }
.tier:target { box-shadow: 0 0 0 3px var(--safran); }
.tier-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tier h2 { font-size: 1.5rem; font-weight: 800; margin: 0; }
.tier-flag { font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; color: #8a5300; background: color-mix(in srgb, var(--safran) 22%, transparent); white-space: nowrap; }
.tier-flag-pro { color: var(--field); background: color-mix(in srgb, var(--field) 12%, transparent); }
.tier-pitch { color: var(--muted); font-size: .9375rem; min-height: 2.9em; margin: 0; }
.tier-price { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 0; }
.tier-price b { font: 700 2.75rem/1 var(--font-ui); letter-spacing: -.03em; color: var(--ink); }
.tier-price span { color: var(--muted); font-size: .9375rem; }
.tier-sub { margin: 0; color: var(--muted); font-size: var(--fs-small); min-height: 1.4em; }
.tier-cta { display: grid; gap: 10px; min-height: 52px; }
.tier-form { display: grid; gap: 10px; }
.tier-badge { margin: 0; text-align: center; font-weight: 600; color: var(--ok); }
.tier-soon { color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-ctl); padding: 12px; }
.tier-lead { margin: 10px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.tier-hero { display: grid; gap: 2px; }
.tier-hero b { font: 700 1.875rem/1.1 var(--font-ui); letter-spacing: -.02em; }
.tier-hero span { color: var(--muted); font-size: .9375rem; }
.tier-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tier-items li { display: flex; gap: 10px; align-items: flex-start; }
.tier-items .icon { width: 18px; height: 18px; color: var(--ok); flex: none; margin-top: 2px; }
.tier-items b { display: block; font-weight: 600; }
.tier-items small { display: block; color: var(--muted); font-size: var(--fs-small); margin-top: 2px; }
.tier-items li.key { padding: 10px 12px; margin: 0 -12px; border-radius: 10px; background: color-mix(in srgb, var(--field) 8%, transparent); }
.tier-items li.key .icon { color: var(--field); }
.teams-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; border-color: var(--field); }
.teams-main, .teams-features { display: flex; flex-direction: column; gap: 14px; }
.teams-features .tier-lead { margin-top: 0; padding-top: 0; border-top: 0; }
.teams-calc { display: grid; gap: 10px; margin-top: 6px; }
.teams-calc > label { font-weight: 600; font-size: .9375rem; }
.stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; background: var(--surface); }
.stepper button { border: 0; background: var(--surface-2); color: var(--ink); font-size: 1.25rem; font-weight: 600; cursor: pointer; }
.stepper .input { border: 0; border-radius: 0; text-align: center; font-weight: 700; font-size: 1.125rem; -moz-appearance: textfield; }
.stepper .input::-webkit-inner-spin-button, .stepper .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.compare-title { margin: 32px 0 0; font-size: 1.375rem; font-weight: 800; text-align: center; }
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.plan-compare { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 560px; }
.plan-compare th, .plan-compare td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: center; }
.plan-compare tbody tr:last-child th, .plan-compare tbody tr:last-child td { border-bottom: 0; }
.plan-compare th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink); }
.plan-compare thead th { font-weight: 800; font-size: 1rem; }
.plan-compare .icon { width: 18px; height: 18px; color: var(--ok); }
.tiers-note { margin: 0; color: var(--muted); font-size: var(--fs-small); text-align: center; }
.pricing-faq { max-width: 760px; width: 100%; justify-self: center; display: grid; gap: 8px; margin-top: 16px; }
.pricing-faq h2 { font-size: 1.375rem; font-weight: 800; text-align: center; margin-bottom: 8px; }
.pricing-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; }
.pricing-faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; }
.pricing-faq details p { margin: 0 0 16px; color: var(--muted); }
@media (max-width: 960px) {
    .tiers { grid-template-columns: minmax(0, 1fr); max-width: 520px; width: 100%; justify-self: center; }
    .teams-card { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .tier-pitch { min-height: 0; }
}

/* ─── Header dropdowns: language and account (native <details>, enhanced by app.js) ─── */
.dropdown { position: relative; }
.dropdown > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.dropdown > summary::-webkit-details-marker { display: none; }
.lang-menu > summary { min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); font: 500 var(--fs-label)/1 var(--font-data); color: var(--ink); }
.lang-menu > summary .icon { width: 17px; height: 17px; color: var(--muted); }
.lang-menu > summary .chev { width: 6px; height: 6px; margin: 0 2px 3px 2px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform var(--t-fast); }
.lang-menu[open] > summary .chev { transform: rotate(-135deg); margin-bottom: -2px; }
.lang-menu > summary:hover, .lang-menu[open] > summary { border-color: var(--ink); }
.user-menu > summary { border-radius: 50%; }
.user-menu > summary .avatar { width: 40px; height: 40px; font-size: .875rem; transition: box-shadow var(--t-fast); }
.user-menu > summary:hover .avatar, .user-menu[open] > summary .avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--field); }
.dropdown-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 280px; padding: 6px; display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 18px 40px -18px rgba(15, 36, 64, .45); }
.dropdown-panel a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--r-ctl); color: var(--ink); text-decoration: none; font-size: var(--fs-body); }
.dropdown-panel a:hover, .dropdown-panel a:focus-visible { background: var(--surface-2); }
.dropdown-panel a .icon { width: 18px; height: 18px; color: var(--muted); flex: none; }
.dropdown-panel a.sep { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-ctl) var(--r-ctl); padding-top: 4px; }
.lang-menu .dropdown-panel { min-width: 180px; }
.lang-menu .code { font: 500 var(--fs-label)/1 var(--font-data); color: var(--muted); width: 22px; }
.lang-menu a[aria-current="true"] { font-weight: 600; }
.lang-menu .tick { margin-left: auto; color: var(--ok) !important; }
.user-menu .who { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.user-menu .who b { display: block; }
.user-menu .who > span { min-width: 0; }
.user-menu .who small { display: block; color: var(--muted); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu .accounts-switch { display: grid; gap: 2px; }
.user-menu .accounts-switch.sep { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.user-menu .accounts-switch:empty { display: none; }
.dropdown-panel a.account-row { min-height: 48px; }
.dropdown-panel a.account-row > span:last-child { min-width: 0; }
.dropdown-panel a.account-row b { display: block; font-weight: 500; }
.dropdown-panel a.account-row small { display: block; color: var(--muted); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar.sm { width: 28px; height: 28px; font-size: .75rem; }
.avatar.has-photo { background: var(--surface-2); overflow: hidden; }
.avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-chooser { list-style: none; margin: 20px 0 24px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; }
.account-chooser li + li { border-top: 1px solid var(--line); }
.account-chooser a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--ink); text-decoration: none; }
.account-chooser a:hover, .account-chooser a:focus-visible { background: var(--surface-2); }
.account-chooser a > span:nth-child(2) { min-width: 0; flex: 1; }
.account-chooser b { display: block; font-weight: 500; }
.account-chooser small { display: block; color: var(--muted); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chooser em { font-style: normal; font: 500 var(--fs-label)/1 var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.account-chooser .avatar.add { background: var(--surface-2); color: var(--ink); }
.account-chooser .avatar.add .icon { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .site-header .dropdown { display: none; }
  .site-header.open .dropdown { display: block; width: 100%; }
  .site-header.open .dropdown > summary { display: none; }
  .site-header.open .dropdown-panel { position: static; box-shadow: none; border: 0; padding: 0 0 8px; min-width: 0; }
  .site-header.open .lang-menu .dropdown-panel { display: flex; flex-direction: row; gap: 4px; }
  .site-header.open .lang-menu .dropdown-panel a { flex: 1; justify-content: center; border: 1px solid var(--line); }
  .site-header.open .lang-menu .dropdown-panel a span:not(.code), .site-header.open .lang-menu .tick { display: none; }
  .site-header.open .lang-menu .dropdown-panel a[aria-current="true"] { border-color: var(--field); background: color-mix(in srgb, var(--field) 8%, transparent); }
  .site-header.open .lang-menu a[aria-current="true"] .code { color: var(--field); }
}

/* ─── Storage usage on the account page ─── */
.usage-list { display: grid; gap: 14px; padding: 14px 20px 10px; border-top: 1px solid var(--line); }
.usage-list:empty { display: none; }
.usage { display: grid; gap: 7px; }
.usage-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--fs-small); }
.usage-head span { color: var(--muted); font-weight: 600; }
.usage-head b { font: 500 var(--fs-small)/1.3 var(--font-data); }
.usage-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--field) 14%, transparent); overflow: hidden; }
.usage-bar i { display: block; height: 100%; border-radius: 4px; background: var(--field); }
.usage[data-level="warn"] .usage-bar i { background: var(--safran); }
.usage[data-level="full"] .usage-bar i { background: var(--danger, #B8331B); }
.usage[data-level="full"] .usage-head b { color: var(--danger, #B8331B); }
@media (prefers-color-scheme: dark) { .usage-bar { background: rgba(255, 255, 255, .12); } .usage-bar i { background: #7C9BFF; } }
.upsell { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 20px 20px; padding: 16px 18px;
  border-radius: var(--r-card); background: color-mix(in srgb, var(--field) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--field) 35%, var(--line)); }
.upsell p { margin: 0; display: grid; gap: 2px; }
.upsell p span { color: var(--muted); font-size: var(--fs-small); }
.tier:target { box-shadow: 0 0 0 3px var(--safran); }

/* ─── Back office: account plans ─── */
.admin-search { display: flex; gap: 8px; margin-bottom: 18px; }
.admin-search .input { flex: 1; }
.admin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.admin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: center; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.admin-row:target { box-shadow: 0 0 0 3px var(--safran); }
.admin-row .who { display: grid; gap: 3px; min-width: 0; }
.admin-row .who .mono { font: 500 var(--fs-small)/1.3 var(--font-data); color: var(--muted); overflow-wrap: anywhere; }
.plan-pill { justify-self: start; margin-top: 4px; padding: 3px 9px; border-radius: 999px; font: 600 .75rem/1.2 var(--font-ui); background: var(--surface-2); color: var(--ink); }
.plan-pill.plan-plus { background: color-mix(in srgb, var(--field) 12%, transparent); color: var(--field); }
.plan-pill.plan-pro { background: color-mix(in srgb, var(--safran) 22%, transparent); color: #7A4F00; }
.admin-grant { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-grant .input { min-height: 40px; width: auto; font-size: var(--fs-body); }
.admin-grant .grow .input { width: 200px; }
@media (max-width: 900px) { .admin-row { grid-template-columns: minmax(0, 1fr); } .admin-grant .grow { flex: 1; } .admin-grant .grow .input { width: 100%; } }
@media (prefers-color-scheme: dark) { .plan-pill.plan-pro { color: #F2B13A; } .plan-pill.plan-plus { color: #9DB4FF; } }


/* ─── Two-factor authentication ─── */
.otp-input { font: 600 1.375rem/1 var(--font-data); letter-spacing: .25em; text-align: center; max-width: 14rem; }
.badge-reco { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font: 600 .75rem/1.3 var(--font-ui); font-style: normal;
  color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); vertical-align: middle; }
.badge-reco .icon { width: 14px; height: 14px; }
.auth-box .badge-reco { margin-bottom: 10px; }
.auth-box .checks { margin: 14px 0 18px; }
.auth-box .form .btn-ghost { margin-top: 8px; }
.twofa-help { margin-top: 18px; }
.twofa-help summary { cursor: pointer; color: var(--muted); font-size: var(--fs-small); }
.setting-reco { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: color-mix(in srgb, var(--ok) 6%, transparent); border-bottom: 1px solid var(--line); }
.setting-reco .what { flex: 1; display: grid; gap: 2px; }
.setting-reco .what > span { color: var(--muted); font-size: var(--fs-small); }
.setting .ok, .admin-row .ok { color: var(--ok); }
.twofa-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 22px; }
.twofa-steps > li { counter-increment: s; position: relative; padding: 20px 22px 20px 64px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.twofa-steps > li::before { content: counter(s); position: absolute; left: 20px; top: 20px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .9375rem/1 var(--font-data); color: #fff; background: var(--field); }
.twofa-steps h2 { font-size: 1.125rem; margin: 2px 0 8px; }
.twofa-qr { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.twofa-qr .qr svg { display: block; width: 200px; height: 200px; border-radius: 8px; border: 1px solid var(--line); }
.twofa-qr > div:last-child { flex: 1; min-width: 220px; }
.twofa-qr .secret code { font: 600 1rem/1.5 var(--font-data); letter-spacing: .06em; overflow-wrap: anywhere; }
.twofa-confirm { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.twofa-codes { padding: 18px 20px; display: grid; gap: 16px; }
.twofa-codes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 16px; }
.twofa-codes code { font: 600 1.0625rem/1.4 var(--font-data); letter-spacing: .04em; }
.twofa-codes-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form { padding-top: 6px; }
.inline-form + .inline-form { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.admin-2fa { display: flex; gap: 10px; align-items: center; margin-top: 2px; }
.admin-2fa small { display: inline-flex; gap: 4px; align-items: center; } .admin-2fa .icon { width: 14px; height: 14px; }
.linkish { background: none; border: 0; padding: 0; color: var(--danger); font: inherit; font-size: var(--fs-small); text-decoration: underline; cursor: pointer; }
@media (max-width: 600px) { .twofa-steps > li { padding: 56px 16px 16px; } .twofa-steps > li::before { left: 16px; top: 16px; } .setting-reco { flex-wrap: wrap; } }
.badge-reco { justify-self: start; width: fit-content; }
@media (hover: hover) and (pointer: fine) { .twofa-open { display: none; } }

/* Failed renewal payment */
.past-due { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; padding: 16px 20px; border-radius: var(--r-card, 14px);
    color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--bg, #fff)); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.past-due p { flex: 1 1 280px; margin: 0; font-weight: 600; }
.past-due form { margin: 0; }

/* Devices page */
.devices { display: grid; gap: 24px; max-width: 860px; }
.os-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.os-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--ink); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.os-tabs a .icon { width: 18px; height: 18px; color: var(--muted); }
.os-tabs a[aria-selected="true"] { background: var(--action); border-color: var(--action); color: #fff; }
.os-tabs a[aria-selected="true"] .icon { color: #fff; }
.os-panel { display: grid; gap: 16px; }
.os-panel[hidden] { display: none; }
.os-panel > h2 { font-size: 1.375rem; font-weight: 700; }
.guide { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: guide; }
.guide > li { counter-increment: guide; position: relative; display: grid; gap: 12px; padding: 22px 24px 22px 68px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-card); min-width: 0; }
.guide > li::before { content: counter(guide); position: absolute; left: 22px; top: 20px; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; background: color-mix(in srgb, var(--action) 12%, transparent); color: var(--action); font-weight: 700; }
.guide h3 { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 700; }
.guide h3 .icon { width: 20px; height: 20px; color: var(--action); }
.guide p { color: var(--muted); font-size: .9375rem; }
.guide .tip { font-size: var(--fs-small); padding-left: 12px; border-left: 3px solid var(--line); }
.guide form { margin: 0; }
.devices-help { color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 560px) {
    .guide > li { padding: 60px 16px 18px; }
    .guide > li::before { left: 16px; top: 16px; }
}
.text-danger { color: var(--danger); }

/* Import page */
.os-panel > h2 .icon { width: 22px; height: 22px; color: var(--action); vertical-align: -3px; }
.provider-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.provider-picker label { position: relative; }
.provider-picker input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.provider-picker span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); font-weight: 600; font-size: .9375rem; }
.provider-picker input:checked + span { background: var(--action); border-color: var(--action); color: #fff; }
.provider-picker input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }
.import-status { display: grid; gap: 10px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.import-status[data-status="done"] { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.import-status[data-status="failed"] { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.import-status form { margin: 0; }

/* Admin overview */
.admin-overview { display: grid; gap: 24px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tile { display: grid; gap: 4px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.tile span { color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.tile b { font: 700 1.75rem/1.15 var(--font-ui); color: var(--ink); }
.tile small { color: var(--muted); font-size: var(--fs-small); }
.tile[data-level="warn"] { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.tile[data-level="warn"] b { color: var(--danger); }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.panel { display: grid; gap: 12px; align-content: start; margin: 0; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); min-width: 0; }
.panel h2 { font-size: 1.0625rem; font-weight: 700; }
.panel figcaption { display: grid; gap: 2px; }
.panel .ok { color: var(--ok); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.panel .warn { display: flex; gap: 6px; align-items: center; }
.panel .small { font-size: var(--fs-small); }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 160px; padding-top: 20px; border-bottom: 1px solid var(--line); }
.bar { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; }
.bar i { display: block; width: 100%; max-width: 28px; background: var(--action); border-radius: 4px 4px 0 0; }
.bar em { font: 600 12px var(--font-data); font-style: normal; color: var(--ink); margin-bottom: 4px; }
.bar .tip { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 8px; border-radius: 6px;
    background: var(--ink); color: var(--bg); font-size: 12px; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 2; }
.bar:hover .tip, .bar:focus-visible .tip { opacity: 1; }
.bar:hover i, .bar:focus-visible i { background: var(--action-hover); }
.bars-axis { display: flex; justify-content: space-between; color: var(--muted); font: 500 12px var(--font-data); }
.data-table summary { cursor: pointer; color: var(--muted); font-size: var(--fs-small); }
.data-table table, table.plain { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.data-table th, .data-table td, table.plain th, table.plain td { text-align: left; padding: 6px 0; border-bottom: 1px solid var(--line); }
table.plain th, .data-table th { color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.health-checks, .recent { list-style: none; margin: 0; padding: 0; display: grid; }
.health-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.health-checks li .icon { width: 16px; height: 16px; color: var(--ok); }
.health-checks li[data-ok="0"] .icon, .health-checks li[data-ok="0"] span { color: var(--danger); }
.health-checks small, .recent small { color: var(--muted); font-size: var(--fs-small); }
.recent li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .admin-grid { grid-template-columns: 1fr; } }

/* Status page */
.status-page { display: grid; gap: 20px; max-width: 860px; }
.status-banner { display: flex; gap: 14px; align-items: center; padding: 18px 22px; border-radius: var(--r-card); border: 1px solid; }
.status-banner .icon { width: 26px; height: 26px; flex: none; }
.status-banner b { display: block; font-size: 1.125rem; }
.status-banner small { color: var(--muted); font-size: var(--fs-small); }
.status-banner[data-state="up"] { color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.status-banner[data-state="down"] { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.status-banner[data-state="unknown"] { color: var(--muted); background: var(--surface); border-color: var(--line); }
.status-banner b { color: inherit; }
.service { display: grid; gap: 10px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.service header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.service h2 { font-size: 1.125rem; font-weight: 700; }
.service-state { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9375rem; }
.service-state .icon { width: 18px; height: 18px; }
.service-state[data-state="up"] { color: var(--ok); }
.service-state[data-state="down"] { color: var(--danger); }
.service-state[data-state="unknown"] { color: var(--muted); }
.uptime { display: flex; gap: 2px; height: 34px; }
.uptime i { position: relative; flex: 1; border-radius: 2px; background: var(--line); }
.uptime i[data-level="up"], .status-legend [data-level="up"]::before { background: var(--ok); }
.uptime i[data-level="degraded"], .status-legend [data-level="degraded"]::before { background: var(--safran); }
.uptime i[data-level="down"], .status-legend [data-level="down"]::before { background: var(--danger); }
.status-legend [data-level="none"]::before { background: var(--line); }
.uptime .tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 8px; border-radius: 6px;
    background: var(--ink); color: var(--bg); font-size: 12px; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 2; }
.uptime i:hover .tip { opacity: 1; }
.uptime i:hover { filter: brightness(.85); }
.uptime-axis { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font: 500 12px var(--font-data); }
.status-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: var(--fs-small); }
.status-legend li { display: inline-flex; align-items: center; gap: 6px; }
.status-legend li::before { content: ""; width: 12px; height: 12px; border-radius: 2px; }
.status-page .small { font-size: var(--fs-small); }
/* status.orneos.eu: standalone layout (brand + language, then the page's own dark band; 64px keeps the grid aligned) */
.status-host { min-height: 100vh; display: flex; flex-direction: column; }
.status-host main { flex: 1; }
.status-top .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.status-top .brand { color: #FFFFFF; }
.status-top .lang-menu > summary { color: var(--on-field); border-color: transparent; }
.status-top .lang-menu > summary .icon, .status-top .lang-menu > summary .chev { color: var(--on-field-muted); border-color: var(--on-field-muted); }
.status-top .lang-menu > summary:hover, .status-top .lang-menu[open] > summary { background: rgba(255, 255, 255, .1); border-color: transparent; }
.status-top .dropdown-panel a { color: var(--ink); }
.status-foot { border-top: 1px solid var(--line); }
.status-foot .container { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-block: 18px; font-size: var(--fs-small); color: var(--muted); }
.status-foot a { color: var(--muted); text-decoration: none; }
.status-foot a:hover { color: var(--ink); text-decoration: underline; }
.status-foot span { margin-left: auto; }
@media (max-width: 560px) { .uptime { gap: 1px; } }
.uptime i:nth-child(-n+8) .tip { left: 0; transform: none; }
.uptime i:nth-last-child(-n+8) .tip { left: auto; right: 0; transform: none; }
.bar:nth-last-child(-n+2) .tip { left: auto; right: 0; transform: none; }

/* Extra addresses */
.alias-list { list-style: none; margin: 0; padding: 0; display: grid; }
.alias-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.alias-list form { margin: 0; }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: var(--fs-small); }
.input-suffix { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); overflow: hidden; }
.input-suffix:focus-within { outline: 2px solid var(--action); outline-offset: 1px; }
.input-suffix .input { border: 0; border-radius: 0; flex: 1; min-width: 0; outline: none; }
.input-suffix > span { display: flex; align-items: center; padding: 0 12px; color: var(--muted); background: var(--surface-2); font: 500 .9375rem var(--font-data); white-space: nowrap; }

/* Custom domain */
.os-panel > h2 .service-state { margin-left: 8px; font-size: .9375rem; }
.dns-records { display: grid; gap: 12px; }
.dns-record { padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.dns-record[data-ok="1"] { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.dns-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.dns-head span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.dns-head .icon { width: 16px; height: 16px; }
.dns-record[data-ok="1"] .dns-head span { color: var(--ok); }
.dns-kv div { grid-template-columns: minmax(0, 5rem) minmax(0, 1fr) auto; padding: 8px 0; }
.dns-value { font-size: 12.5px; word-break: break-all; }

/* Teams */
.teams-pitch { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.teams-pitch li { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); font-size: .9375rem; }
.teams-pitch .icon { width: 20px; height: 20px; color: var(--action); flex: none; margin-top: 2px; }
.teams-form { padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.teams-total { font-weight: 700; font-size: 1.125rem; margin: 0; }
.invite-link { display: grid; gap: 8px; padding: 16px 18px; border: 1px dashed var(--action); border-radius: var(--r-card); background: var(--surface); }
.invite-link p { margin: 0; font-size: .9375rem; }
.invite-link .copy-btn { border: 0; border-left: 1px solid var(--line); border-radius: 0; }
.member-list { list-style: none; margin: 0; padding: 0; display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.member-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.member-list > li:last-child { border-bottom: 0; }
.member-id { display: flex; gap: 12px; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.member-id .avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--action) 14%, transparent); color: var(--action); font-weight: 700; }
.role-badge { font-size: var(--fs-small); font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.role-badge[data-role="owner"], .role-badge[data-role="admin"] { color: var(--action); border-color: color-mix(in srgb, var(--action) 40%, transparent); }
.member-actions { position: relative; }
.member-actions summary { list-style: none; cursor: pointer; }
.member-actions summary::-webkit-details-marker { display: none; }
.member-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 280px; display: grid; gap: 6px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 12px 30px rgba(10, 25, 47, .16); }
.member-menu form { margin: 0; }
.member-menu .btn { width: 100%; justify-content: flex-start; }
.member-delete { display: grid; gap: 6px; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--line); }
.member-delete label { font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 640px) {
    .teams-pitch { grid-template-columns: 1fr; }
    .member-list > li { grid-template-columns: minmax(0, 1fr) auto; }
    .member-actions { grid-column: 1 / -1; }
    .member-menu { position: static; width: auto; margin-top: 8px; box-shadow: none; }
}
.teams-band { margin-top: 24px; }
.team-invite { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 18px 20px; border: 1px solid var(--field); border-radius: var(--r-card); background: color-mix(in srgb, var(--field) 6%, var(--surface)); }
.team-invite > .icon { width: 26px; height: 26px; color: var(--field); }
.team-invite p { flex: 1 1 260px; margin: 0; display: grid; gap: 2px; }
.team-invite span { color: var(--muted); font-size: .9375rem; }
.team-invite form { display: flex; gap: 8px; margin: 0; }
.member-list li.pending { opacity: .75; }
.activity-log { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.log-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.log-row:last-child { border-bottom: 0; }
.log-row time { color: var(--muted); font: 500 var(--fs-small) var(--font-data); padding-top: 2px; }
.transfer-answer { display: grid; gap: 10px; flex: 1 1 100%; margin: 0; }
@media (max-width: 560px) { .log-row { grid-template-columns: 1fr; gap: 2px; } }

/* Homepage: reasons to switch */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.switch-card { text-decoration: none; color: inherit; transition: border-color var(--t-fast), transform var(--t-fast); }
.switch-card:hover { border-color: var(--action); transform: translateY(-2px); }
.switch-card .more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--action); font-weight: 600; font-size: .9375rem; }
.switch-card .more .icon { width: 16px; height: 16px; }
.switch-teams { border-color: color-mix(in srgb, var(--field) 40%, var(--line)); background: color-mix(in srgb, var(--field) 4%, var(--surface)); }
@media (max-width: 900px) { .trio { grid-template-columns: minmax(0, 1fr); } }
.ref-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 16px; border-radius: var(--r-ctl); background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ink); font-weight: 600; font-size: .9375rem; }
.ref-banner .icon { color: var(--ok); margin-top: 2px; flex: none; }
.referral-card { padding: 18px 20px; display: grid; gap: 12px; }
.referral-card p { margin: 0; }
.referral-card .copy-btn { border: 0; border-left: 1px solid var(--line); border-radius: 0; }

/* Help center */
.help-head .container { text-align: center; display: grid; justify-items: center; gap: 10px; }
.help-search { max-width: 560px; width: 100%; min-height: 52px; margin-top: 10px; font-size: 1.0625rem; border-radius: 999px; padding: 0 22px; }
.help { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.help-topics { position: sticky; top: 90px; display: grid; gap: 4px; }
.help-topics a { padding: 8px 12px; border-radius: var(--r-ctl); color: var(--ink); text-decoration: none; font-weight: 500; }
.help-topics a:hover { background: var(--surface); }
.help-body { display: grid; gap: 32px; min-width: 0; }
.help-topic { display: grid; gap: 8px; scroll-margin-top: 90px; }
.help-topic h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; }
.help-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; }
.help-item summary { cursor: pointer; padding: 14px 0; font-weight: 600; }
.help-item p { margin: 0 0 16px; color: var(--muted); }
.help-empty { padding: 16px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; }
.help-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
textarea.input { min-height: 140px; padding: 12px; resize: vertical; font: inherit; }
@media (max-width: 860px) { .help { grid-template-columns: minmax(0, 1fr); } .help-topics { position: static; display: flex; flex-wrap: wrap; } }

/* ─── Orneos Search (search.orneos.eu) ─── */
.search-app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; --s-indent: 0px; }
@media (min-width: 900px) { .search-app { --s-indent: 152px; } }
.search-top { display: flex; align-items: center; gap: 24px; padding: 14px var(--gutter-r) 14px var(--gutter); background: var(--surface); }
.search-top:not(.search-top-home) { border-bottom: 1px solid var(--line); }
.search-top-home { background: transparent; }
.search-mini-logo { display: inline-flex; align-items: center; gap: 8px; width: 128px; flex: none; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.1875rem; letter-spacing: -.01em; min-height: 44px; }
.search-mini-logo svg { width: 30px; height: 30px; }
.search-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.apps-menu > summary { width: 44px; height: 44px; justify-content: center; border-radius: 50%; color: var(--muted); }
.apps-menu > summary:hover, .apps-menu[open] > summary { background: var(--surface-2); color: var(--ink); }
.apps-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(336px, calc(100vw - 32px)); min-width: 0; padding: 10px; max-height: 70vh; overflow-y: auto; }
.dropdown-panel.apps-panel a { flex-direction: column; justify-content: center; gap: 6px; min-height: 92px; padding: 10px 4px; font-size: var(--fs-small); text-align: center; }
.apps-panel .tile-icon .icon, .cloud-results .tile-icon .icon { color: inherit; }

/* Search box */
.sbox { position: relative; flex: 1; max-width: 690px; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 4px 0 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; transition: box-shadow var(--t-fast), border-color var(--t-fast); }
.sbox:focus-within { border-color: var(--action); box-shadow: 0 0 0 3px var(--action-tint); }
.sbox > .icon { color: var(--muted); }
.sbox input[type="search"] { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; outline: none; font-size: 1.0625rem; color: var(--ink); }
.sbox input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.sbox-go { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--action); color: var(--on-action); cursor: pointer; }
.sbox-go:hover { background: var(--action-hover); }
.sbox-go .icon { width: 18px; height: 18px; }
.sbox-lg { flex: none; width: 100%; min-height: 58px; padding-left: 20px; box-shadow: 0 10px 30px -18px rgba(15, 36, 64, .35); }
.sbox-lg input[type="search"] { height: 56px; font-size: 1.125rem; }
.sbox-lg .sbox-go { width: 46px; height: 46px; }
.sbox-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 70; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 18px 40px -18px rgba(15, 36, 64, .45); }
.sbox-list li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: var(--r-ctl); cursor: pointer; }
.sbox-list li .icon { width: 16px; height: 16px; color: var(--muted); }
.sbox-list li[aria-selected="true"], .sbox-list li:hover { background: var(--surface-2); }

/* Home */
.search-home { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--gutter-r) 12vh var(--gutter); }
.search-logo { display: flex; align-items: center; gap: 14px; font-size: clamp(2.25rem, 7vw, 3.5rem); font-weight: 800; letter-spacing: -.035em; }
.search-logo svg { width: 1.1em; height: 1.1em; }
.search-logo span { color: var(--action); font-weight: 500; margin-left: .1em; }
.search-signin { width: 100%; text-align: center; justify-items: center; }
.search-signin p { max-width: 46ch; }
.search-signin .btn-row { justify-content: center; }
.search-hint { color: var(--muted); font-size: var(--fs-small); text-align: center; max-width: 60ch; }
.search-bangs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -10px 0 0; padding: 0; list-style: none; }
.search-bangs button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: 500 var(--fs-small)/1 var(--font-data); color: var(--ink); cursor: pointer; }
.search-bangs button:hover { border-color: var(--action); color: var(--action); }
.search-bangs .icon { width: 16px; height: 16px; color: var(--muted); }

/* Tabs */
.search-tabs { background: var(--surface); border-bottom: 1px solid var(--line); }
.search-tabs-in { display: flex; align-items: center; gap: 2px; padding: 0 var(--gutter-r) 0 calc(var(--gutter) + var(--s-indent)); overflow-x: auto; scrollbar-width: none; }
.search-tabs-in > a, .time-menu > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-bottom: 3px solid transparent; color: var(--muted); text-decoration: none; font-size: var(--fs-small); font-weight: 500; white-space: nowrap; }
.search-tabs-in > a .icon { width: 16px; height: 16px; }
.search-tabs-in > a:hover { color: var(--ink); }
.search-tabs-in > a[aria-current="page"] { color: var(--action); border-bottom-color: var(--action); }
.time-menu { margin-left: 12px; position: static; }
.time-menu > summary .chev { width: 6px; height: 6px; margin: 0 2px 3px 4px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.time-menu .dropdown-panel { right: auto; top: auto; margin-top: 2px; min-width: 200px; }
.time-menu .dropdown-panel a[aria-current="true"] { font-weight: 600; color: var(--action); }

/* Results */
.search-main { flex: 1; display: grid; grid-template-columns: minmax(0, 652px) minmax(0, 368px); gap: 24px 64px; align-content: start; padding: 22px var(--gutter-r) 48px calc(var(--gutter) + var(--s-indent)); }
.search-main.search-tab-images { grid-template-columns: minmax(0, 1fr); }
.search-col, .search-side { min-width: 0; }
.search-col > .alert { margin-bottom: 20px; }
.search-correction { margin-bottom: 18px; font-size: 1.0625rem; }
.search-correction a { font-weight: 600; font-style: italic; }
.search-answer { margin-bottom: 26px; }
.search-answer a { font-size: var(--fs-small); }
.results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; }
.result-link { display: block; text-decoration: none; }
.result .crumb { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--fs-small); }
.result h3 { margin: 2px 0 4px; font-size: 1.25rem; font-weight: 500; line-height: 1.3; letter-spacing: -.005em; color: var(--action); }
.result h3 b { font-weight: 500; }
.result-link:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.result-link:visited h3 { color: color-mix(in srgb, var(--action) 55%, #8B2FC9); }
.result p { font-size: .9375rem; line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }
.result p b { color: var(--ink); font-weight: 600; }
.result-date { color: var(--muted); }
.result.has-thumb { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; align-items: start; }
.result-thumb { position: relative; display: block; }
.result-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-ctl); background: var(--surface-2); }
.result-thumb i { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .75); color: #FFFFFF; font: 500 .75rem/1.3 var(--font-data); font-style: normal; }
.search-empty { padding: 24px 0; color: var(--muted); }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 10px; }
.image-grid a { display: grid; gap: 4px; min-width: 0; color: var(--muted); text-decoration: none; font-size: .8125rem; }
.image-grid img { display: block; width: 100%; height: 170px; object-fit: cover; border-radius: var(--r-ctl); background: var(--surface-2); }
.image-grid span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-grid a:hover span { color: var(--ink); }
.search-related { margin-top: 36px; }
.search-related ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.search-related a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface-2); color: var(--ink); text-decoration: none; overflow: hidden; }
.search-related a:hover { background: var(--action-tint); }
.search-related .icon { width: 16px; height: 16px; color: var(--muted); }
.search-pages { display: flex; align-items: center; gap: 16px; margin-top: 36px; }

/* Results from the account's cloud */
.cloud-results.compact { margin-bottom: 30px; padding: 14px 14px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.cloud-results h2.label { display: flex; align-items: center; gap: 8px; margin: 0 0 6px 6px; }
.cloud-results h2.label .icon { width: 18px; height: 18px; color: var(--action); }
.cloud-results ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; }
.cloud-results li a { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: var(--r-ctl); color: var(--ink); text-decoration: none; }
.cloud-results li a:hover, .cloud-results li a:focus-visible { background: var(--surface-2); }
.cloud-results .tile-icon { width: 36px; height: 36px; flex: none; }
.cloud-results .tile-icon .icon { width: 18px; height: 18px; }
.cr-text { min-width: 0; }
.cr-text b, .cr-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-text b { font-weight: 500; }
.cr-text small { color: var(--muted); font-size: var(--fs-small); }
.cloud-more { display: inline-flex; align-items: center; gap: 6px; margin: 6px 6px 0; font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
.cloud-more .icon { width: 16px; height: 16px; }
.cloud-results > .muted { padding: 8px 6px; }

/* Infobox */
.search-side .infobox { padding: 20px; gap: 12px; }
.infobox img { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--r-ctl); background: var(--surface-2); }
.infobox h2 { font-size: 1.5rem; }
.infobox p { color: var(--ink); font-size: .9375rem; }
.infobox dl { display: grid; gap: 6px; margin: 0; font-size: var(--fs-small); }
.infobox dl div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 10px; }
.infobox dt { color: var(--muted); }
.infobox dd { margin: 0; }
.infobox-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }

/* Preferences */
.search-prefs { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 36px var(--gutter-r) 48px var(--gutter); display: grid; gap: 18px; align-content: start; }
.search-prefs h1 { font-size: 1.875rem; font-weight: 800; }
.search-prefs h2 { font-size: 1.1875rem; }
.search-prefs fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
.search-prefs legend, .pref-field > span { font-weight: 600; margin-bottom: 6px; }
.search-prefs .choice { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.search-prefs .choice input { width: 18px; height: 18px; accent-color: var(--action); }
.pref-field { display: grid; }

/* Footer */
.search-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 14px var(--gutter-r) calc(14px + env(safe-area-inset-bottom, 0px)) var(--gutter); background: var(--surface-2); color: var(--muted); font-size: var(--fs-small); }
.search-foot p { display: flex; align-items: center; gap: 8px; }
.search-foot p .icon { width: 16px; height: 16px; color: var(--ok); }
.search-foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.search-foot a { color: var(--muted); }

@media (max-width: 899px) {
  .search-main { grid-template-columns: minmax(0, 1fr); }
  .search-side { order: -1; }
  .search-side .infobox { padding: 16px; }
  .search-side .infobox img { max-height: 140px; }
  .search-side .infobox p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .search-side .infobox dl { display: none; }
}
@media (max-width: 640px) {
  .search-top { flex-wrap: wrap; gap: 10px 12px; padding-top: 10px; padding-bottom: 10px; }
  .search-mini-logo { width: auto; }
  .search-top .sbox { order: 3; flex-basis: 100%; max-width: none; }
  .result.has-thumb { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
  .search-related ul { grid-template-columns: minmax(0, 1fr); }
  .image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .image-grid img { height: 130px; }
  .search-foot { justify-content: center; text-align: center; }
}

/* Orneos Search promoted on the site (home section, dashboard box) */
.search-promo-band { background: var(--surface); border-block: 1px solid var(--line); }
.search-promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.search-promo > div:first-child { display: grid; gap: 18px; justify-items: start; }
.search-promo .label { display: inline-flex; align-items: center; gap: 8px; color: var(--action); }
.search-promo .label .icon { width: 16px; height: 16px; }
.search-promo h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; }
.search-promo > div:first-child > p { color: var(--muted); font-size: 1.0625rem; max-width: 52ch; }
.search-demo { display: grid; gap: 14px; padding: 28px; border-radius: var(--r-card); background: var(--bg); border: 1px solid var(--line); }
.search-demo .cloud-results.compact { margin: 0; }
.search-demo .cloud-results .label { display: flex; align-items: center; gap: 8px; margin: 0 0 6px 6px; }
.search-demo .cloud-results .label .icon { width: 18px; height: 18px; color: var(--action); }
.demo-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; }
.dash-search { padding-block: 28px 0; }
.dash-search .container { display: grid; gap: 10px; max-width: 760px; }
.dash-search .sbox-lg { max-width: none; }
.dash-search p { font-size: var(--fs-small); }
@media (max-width: 899px) { .search-promo { grid-template-columns: minmax(0, 1fr); gap: 32px; } .search-demo { padding: 16px; } }

/* ─── login.orneos.eu: sign-in card on the Klein field, no site menu ─── */
.login-host { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.login-top { display: flex; justify-content: flex-end; padding: 14px var(--gutter-r) 0 var(--gutter); }
.login-top .lang-menu > summary { color: var(--on-field); min-height: 40px; padding: 0 10px; border-radius: var(--r-ctl); }
.login-top .lang-menu > summary:hover, .login-top .lang-menu[open] > summary { background: rgba(255, 255, 255, .1); }
.login-top .dropdown-panel a { color: var(--ink); }
.login-main { flex: 1; display: grid; place-items: center; padding: 24px 16px 40px; }
.login-card { width: 100%; max-width: 480px; background: var(--surface); color: var(--ink); border-radius: 16px; padding: 36px 40px 32px;
  box-shadow: 0 24px 64px rgba(2, 10, 40, .35); display: grid; gap: 22px; }
.login-card a:not(.btn) { color: var(--action); }
.login-card .login-brand { color: var(--ink); font-size: 1.125rem; min-height: 0; }
.login-card .login-brand svg { width: 28px; height: 28px; }
.login-card .auth { display: block; min-height: 0; }
.login-card .auth-aside { display: none; }
.login-card .auth-main { display: block; padding: 0; }
.login-card .auth-box { max-width: none; }
.login-card .auth-box h1 { font-size: 1.625rem; }
.login-card .account-chooser { margin-block: 4px 8px; }
.login-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; padding: 0 16px 22px; font-size: var(--fs-small); color: var(--on-field-muted); }
.login-foot a { color: var(--on-field-muted) !important; text-decoration: none; }
.login-foot a:hover { color: #FFFFFF !important; text-decoration: underline; }
@media (max-width: 520px) {
  .login-main { padding: 8px 0 24px; place-items: start center; }
  .login-card { border-radius: 0; box-shadow: none; padding: 28px 16px; min-height: 100%; }
}

/* ─── Cloud notifications (bell next to the avatar, orneos.eu and Search) ─── */
.notif-menu > summary { position: relative; width: 44px; height: 44px; justify-content: center; border-radius: 50%; color: var(--muted); }
.notif-menu > summary .icon { width: 22px; height: 22px; }
.notif-menu > summary:hover, .notif-menu[open] > summary { background: var(--surface-2); color: var(--ink); }
.notif-count { position: absolute; top: 5px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #FFFFFF;
  font: 700 11px/18px var(--font-data); text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.notif-panel { width: min(380px, calc(100vw - 24px)); padding: 0; gap: 0; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.notif-clear { background: none; border: 0; padding: 4px 6px; border-radius: var(--r-ctl); color: var(--action); font: inherit; font-size: var(--fs-small); cursor: pointer; }
.notif-clear:hover { background: var(--surface-2); }
.notif-list { list-style: none; margin: 0; padding: 4px; max-height: min(60vh, 440px); overflow-y: auto; }
.notif-list:empty { display: none; }
.notif-list li { position: relative; }
.notif-list li + li { border-top: 1px solid var(--line); }
.dropdown-panel .notif-list a { display: flex; align-items: flex-start; gap: 12px; min-height: 0; padding: 10px 36px 10px 10px; border-radius: var(--r-ctl); }
.notif-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); }
.dropdown-panel .notif-icon .icon { width: 17px; height: 17px; color: inherit; }
.notif-body { min-width: 0; display: grid; gap: 2px; }
.notif-body b { font-weight: 500; line-height: 1.35; }
.notif-body span { color: var(--muted); font-size: var(--fs-small); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-body small { color: var(--muted); font-size: var(--fs-label); }
.notif-x { position: absolute; top: 8px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.notif-x:hover { background: var(--surface-2); color: var(--ink); }
.notif-empty, .notif-offline { margin: 0; padding: 22px 14px; text-align: center; color: var(--muted); font-size: var(--fs-small); }

/* Search guest mode */
.guest-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 26px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--action) 30%, var(--line)); border-radius: var(--r-card); background: var(--action-tint); }
.guest-banner p { flex: 1 1 320px; font-size: var(--fs-small); }

/* Search product page: wider comparison, preview */
.compare-multi { min-width: 760px; }
.compare-multi tbody th { width: 22%; }
.mock-searchpage { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 12px 16px; background: #F5F6F9; overflow: hidden; }
.mock-sbox { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid #D3D9E3; border-radius: 15px; background: #FFFFFF; color: #0F2440; }
.mock-sbox .icon { width: 14px; height: 14px; color: #45556E; }
.mock-cloud { display: grid; gap: 5px; padding: 8px 10px; border: 1px solid #D3D9E3; border-radius: 8px; background: #FFFFFF; }
.mock-cloud small { font: 500 10px/1.2 var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: #002FA7; }
.mock-cloud div { display: grid; grid-template-columns: 16px auto minmax(0, 1fr); align-items: center; gap: 8px; }
.mock-cloud .icon { width: 14px; height: 14px; color: #002FA7; }
.mock-cloud span { color: #45556E; font-size: 11px; }
.mock-result { display: grid; gap: 3px; }
.mock-result small { color: #45556E; font-size: 10px; }
.mock-result b { color: #002FA7; font-weight: 500; }
.mock-result i { display: block; height: 6px; border-radius: 3px; background: #D3D9E3; }
.mock-result i.short { width: 60%; }

/* Search "My team" tab */
.team-results { display: grid; gap: 10px; }
.team-results h2.label { margin: 18px 0 2px 6px; }
.team-name { display: flex; align-items: center; gap: 8px; color: var(--action); }
.team-name .icon { width: 16px; height: 16px; }
.team-members, .cloud-results-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; }
.team-members li { display: flex; align-items: center; gap: 12px; padding: 8px 6px; }
.team-members .cr-text, .cr-row .cr-text { flex: 1; }
.cr-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: var(--r-ctl); color: var(--ink); text-decoration: none; }
a.cr-row:hover, a.cr-row:focus-visible { background: var(--surface-2); }
.cr-row .tile-icon { width: 36px; height: 36px; flex: none; }
.cr-row .tile-icon .icon { width: 18px; height: 18px; color: inherit; }

/* Search signed-in home: calendar, unread mail, recent files */
.search-home.has-widgets { justify-content: flex-start; padding-top: clamp(24px, 9vh, 96px); padding-bottom: 48px; }
.home-widgets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 14px; width: min(1000px, calc(100vw - 32px)); margin-top: 18px; }
.widget { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.widget header { display: flex; align-items: center; gap: 10px; }
.widget header .tile-icon { width: 32px; height: 32px; }
.widget header .tile-icon .icon { width: 16px; height: 16px; color: inherit; }
.widget h2 { flex: 1; font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.widget-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--safran); color: var(--on-safran); font: 600 .75rem/22px var(--font-data); text-align: center; }
.widget-open { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); }
.widget-open:hover { background: var(--surface-2); color: var(--ink); }
.widget-open .icon { width: 16px; height: 16px; }
.widget ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.widget li a { display: grid; gap: 1px; padding: 7px 8px; margin: 0 -8px; border-radius: var(--r-ctl); color: var(--ink); text-decoration: none; }
.widget li a:hover, .widget li a:focus-visible { background: var(--surface-2); }
.widget li b, .widget li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget li b { font-weight: 500; font-size: .9375rem; }
.widget li small { color: var(--muted); font-size: .8125rem; }
.widget > p { font-size: var(--fs-small); }
.widget.is-loading { min-height: 168px; }
.widget.is-loading i { display: block; height: 10px; border-radius: 5px; background: var(--surface-2); animation: widget-pulse 1.2s ease-in-out infinite alternate; }
.widget.is-loading i.short { width: 55%; }
@keyframes widget-pulse { to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .widget.is-loading i { animation: none; } }
@media (max-width: 899px) { .home-widgets { grid-template-columns: minmax(0, 1fr); } }