/* ==========================================================================
   TengoChat public pages: ink and paper.

   Every page anyone can open without an account: the home page (landing.css
   adds its sections), pricing, safety, the legal texts, the pages written for
   searches (guide.css), sign in and sign up, and the error pages. White paper
   and black ink by day, a black page and white ink at night (the tokens are in
   app.css; head.php picks the theme by the visitor's own clock). Inter does
   all the work: large and tight for headlines, calm for reading. Buttons,
   surfaces and words are ink and paper; colour lives in the orange mark,
   TengoChat's drawn people, the icon tiles, the faces and the few signals
   that need it. Nothing here is blurred, glowing or animated while nobody is
   touching it.
   ========================================================================== */

/* ------------------------------------------------------------- page tokens */

.marketing, .minimal-page {
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --top-h: 64px;
  --sec: clamp(88px, 11vw, 152px);
  --fs-h1: clamp(46px, 7.2vw, 104px);
  --fs-h2: clamp(34px, 4.4vw, 62px);
  --fs-lead: clamp(18px, 1.45vw, 20px);
  --theirs: var(--surface-2);
  --theirs-ink: var(--text);
  --mine: var(--text);
  --mine-ink: var(--bg);
}

/* --------------------------------------------------------------------- base */

html:has(> body.marketing) { background: var(--bg); scroll-padding-top: calc(var(--top-h, 64px) + 16px); }
@media (prefers-reduced-motion: no-preference) { html:has(> body.marketing) { scroll-behavior: smooth; } }
.marketing, .minimal-page { background: var(--bg); color: var(--text); }
.marketing { font-size: 17px; line-height: 1.6; letter-spacing: -0.011em; }
.marketing ::selection, .minimal-page ::selection { background: var(--text); color: var(--bg); }
.marketing :focus-visible, .minimal-page :focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.marketing h1, .marketing h2, .marketing h3 { font-weight: 600; }
.lp-wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.site-main { display: block; }
.tnum { font-variant-numeric: tabular-nums; }

.lp-h2 { margin: 0; font-size: var(--fs-h2); font-weight: 600; line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.lp-lead { margin: 20px 0 0; max-width: 34em; color: var(--text-2); font-size: var(--fs-lead); line-height: 1.55; letter-spacing: -0.012em; text-wrap: pretty; }
.lp-link { color: var(--text); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-3); text-underline-offset: 5px; transition: text-decoration-color 140ms; }
.lp-link:hover { text-decoration-color: var(--text); }

.ticks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; }
.ticks li svg { flex: none; margin-top: 4px; }

/* The one shape: a chat bubble. Theirs on grey, yours in solid ink. */
.bub { display: inline-block; max-width: 100%; margin: 0; padding: 10px 16px 11px; border-radius: 22px; background: var(--theirs); color: var(--theirs-ink); line-height: 1.4; letter-spacing: -0.012em; overflow-wrap: anywhere; }
.bub.them { border-bottom-left-radius: 6px; }
.bub.them.same { border-top-left-radius: 6px; }
.bub.me { background: var(--mine); color: var(--mine-ink); border-bottom-right-radius: 6px; }

/* ------------------------------------------------------------------ buttons */

.lp-btn {
  --h: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--h);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms, border-color 140ms, color 140ms;
}
.lp-btn:active { transform: translateY(1px); }
.lp-btn-primary, .marketing .btn-primary { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); box-shadow: none; }
.lp-btn-primary:hover, .marketing .btn-primary:hover:not(:disabled) { background: var(--btn-hover); border-color: var(--btn-hover); box-shadow: none; }
.lp-btn-quiet, .lp-btn-glass, .marketing .btn-secondary { background: transparent; color: var(--text); border-color: var(--line-3); box-shadow: none; }
.lp-btn-quiet:hover, .lp-btn-glass:hover, .marketing .btn-secondary:hover:not(:disabled) { background: transparent; border-color: var(--text); }
.lp-btn-sm { --h: 36px; padding: 0 16px; font-size: 14px; }
.lp-btn-lg { --h: 52px; padding: 0 26px; font-size: 16px; }
.marketing .btn { border-radius: 999px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.lp-link-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; transition: color 140ms; }
.lp-link-btn:hover { color: var(--text); }

/* ------------------------------------------------------------------- header */

.lp-top { position: sticky; top: 0; z-index: 40; height: var(--top-h); background: var(--bg); border-bottom: 1px solid transparent; transition: border-color 160ms; }
.lp-top.is-solid, .marketing:not(.is-home) .lp-top { border-bottom-color: var(--line); }
.lp-top-in { display: flex; align-items: center; gap: 28px; height: 100%; }
.lp-brand { display: inline-flex; flex: none; align-items: center; gap: 10px; color: var(--text); font-size: 17px; font-weight: 600; letter-spacing: -0.03em; text-decoration: none; }
.lp-mark { flex: none; display: block; }
.lp-nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.lp-nav a { padding: 8px 10px; border-radius: 8px; color: var(--text-2); font-size: 14.5px; font-weight: 500; text-decoration: none; transition: color 140ms; }
.lp-nav a:hover, .lp-nav a[aria-current="page"] { color: var(--text); }
.lp-top-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.lp-signin { color: var(--text); font-size: 14.5px; font-weight: 500; text-decoration: none; }
.lp-signin:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line-3); }
.lp-top .lang-menu > summary, .auth2-top .lang-menu > summary, .minimal-top .lang-menu > summary { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; }
.lp-top .lang-menu > summary:hover, .auth2-top .lang-menu > summary:hover { color: var(--text); background: var(--surface); }
.lp-top .lang-menu .menu-pop, .auth2-top .lang-menu .menu-pop { background: var(--bg); border: 1px solid var(--line-2); box-shadow: var(--shadow-pop); backdrop-filter: none; -webkit-backdrop-filter: none; }

.lp-burger { display: none; place-items: center; width: 40px; height: 40px; margin-right: -8px; border: 0; border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; }
.lp-burger:hover { background: var(--surface); }
.lp-burger .bars { position: relative; width: 18px; height: 1.5px; background: currentColor; transition: background-color 160ms; }
.lp-burger .bars::before, .lp-burger .bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor; transition: transform 200ms var(--ease-out); }
.lp-burger .bars::before { transform: translateY(-6px); }
.lp-burger .bars::after { transform: translateY(6px); }
.lp-burger[aria-expanded="true"] .bars { background: transparent; }
.lp-burger[aria-expanded="true"] .bars::before { transform: rotate(45deg); }
.lp-burger[aria-expanded="true"] .bars::after { transform: rotate(-45deg); }

/* SaluChat, the owner's place to meet real people: a quiet link, never a badge. */
.salu { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.salu:hover { color: var(--text); }
.salu-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.salu-text { display: flex; flex-direction: column; line-height: 1.3; }
.salu-text small { color: var(--text-3); font-size: 13px; font-weight: 400; }
.salu-lg { gap: 10px; color: var(--text); font-size: 15px; }

/* The phone menu: the whole screen, solid. */
.lp-menu { position: fixed; inset: var(--top-h) 0 0; z-index: 39; display: none; flex-direction: column; gap: 28px; padding: 24px var(--gutter) calc(32px + env(safe-area-inset-bottom)); overflow-y: auto; background: var(--bg); }
.lp-menu[open] { display: flex; }
.lp-menu-links { display: flex; flex-direction: column; }
.lp-menu-links a { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--text); font-size: 24px; font-weight: 600; letter-spacing: -0.03em; text-decoration: none; }
.lp-menu-acts { display: grid; gap: 10px; }
.lp-menu-acts .lp-btn { width: 100%; }
.lp-menu-langs { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.lp-menu-langs a { color: var(--text-2); font-size: 15px; text-decoration: none; }
.lp-menu-langs a[aria-current="true"] { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------------- footer */

.lp-foot { padding: 72px 0 40px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 14.5px; }
.lp-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px 32px; }
.lp-foot-brand p { max-width: 26em; margin: 16px 0 20px; color: var(--text-2); line-height: 1.55; }
.lp-foot h2 { margin: 6px 0 14px; color: var(--text); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.lp-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lp-foot ul a { color: var(--text-2); text-decoration: none; transition: color 140ms; }
.lp-foot ul a:hover, .lp-foot ul a[aria-current="true"] { color: var(--text); }
.lp-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 13.5px; }
.lp-foot-legal { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* ------------------------------------------------- pages inside the site */

.page-hero { padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 5vw, 64px); }
.page-hero h1, .marketing .display-2 { max-width: 15em; margin: 0; font-size: clamp(40px, 5.6vw, 76px); font-weight: 600; line-height: 1.02; letter-spacing: -0.042em; text-wrap: balance; }
.page-hero .lead { max-width: 36em; margin: 20px 0 0; color: var(--text-2); font-size: var(--fs-lead); line-height: 1.55; }
.page-hero .eyebrow { display: block; margin-bottom: 16px; color: var(--text-3); font-size: 14px; }
.page-hero .small { margin-top: 16px; }
.marketing .sec { padding: clamp(64px, 8vw, 112px) 0; border-top: 1px solid var(--line); }
.marketing .sec-h, .marketing .sec-title, .marketing .sec-head h2 { margin: 0; font-size: clamp(30px, 3.6vw, 48px); font-weight: 600; line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; }
.marketing .sec-title.mb-48 { margin-bottom: 40px; }
/* Narrower columns keep the same left edge as the rest of the page. */
.marketing .container.container-md, .marketing .container.container-sm { margin-left: max(0px, calc((100% - var(--container) - var(--gutter) * 2) / 2)); margin-right: auto; }
.sec-head { display: grid; gap: 14px; max-width: 40em; margin-bottom: 40px; }
.sec-head p { margin: 0; color: var(--text-2); font-size: 17px; }

/* Safety: the promises, numbered like the articles they are. */
.promise-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 64px; align-items: start; }
.promise-head { position: sticky; top: calc(var(--top-h) + 32px); }
.promise-head p { margin: 16px 0 0; color: var(--text-2); }
.articles { list-style: none; margin: 0; padding: 0; counter-reset: art; }
.articles li { counter-increment: art; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; padding: 24px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--top-h) + 24px); }
.articles li:last-child { border-bottom: 1px solid var(--line); }
.articles li::before { content: counter(art, decimal-leading-zero); grid-row: 1 / span 2; color: var(--text-3); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.45; }
.articles h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.02em; }
.articles p { margin: 0; color: var(--text-2); }
.safety-sec + .safety-sec { border-top: 1px solid var(--line); }
.crisis-sheet { display: grid; gap: 24px; }
.crisis-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.crisis-lines li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.crisis-lines li svg { flex: none; margin-top: 4px; }
.crisis-protocol { padding: 24px; border-radius: 20px; background: var(--surface); }
.crisis-protocol h3 { margin: 0 0 8px; font-size: 18px; }
.crisis-protocol p { margin: 0; color: var(--text-2); }
.report-box p { margin: 0 0 20px; color: var(--text-2); }

/* Pricing: three plans, the most chosen in solid ink. */
.sec .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sec .plan { position: relative; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line-2); border-radius: 24px; background: transparent; box-shadow: none; }
/* The most chosen plan is set in the other theme: black by day, white at night. */
.sec .plan.is-featured, .lp-plan.is-pick {
  --bg: #000000; --text: #ffffff; --text-2: #b3b3b3; --text-3: #8a8a8a; --text-4: #666666;
  --line: rgba(255, 255, 255, 0.14); --line-2: rgba(255, 255, 255, 0.2); --line-3: rgba(255, 255, 255, 0.4);
  --btn: #ffffff; --btn-ink: #000000; --btn-hover: #e0e0e0;
  background: #000000; color: #ffffff; border-color: #000000;
}
:root:not([data-theme="light"]) .sec .plan.is-featured, :root:not([data-theme="light"]) .lp-plan.is-pick {
  --bg: #ffffff; --text: #000000; --text-2: #555555; --text-3: #767676; --text-4: #a3a3a3;
  --line: rgba(0, 0, 0, 0.09); --line-2: rgba(0, 0, 0, 0.15); --line-3: rgba(0, 0, 0, 0.32);
  --btn: #000000; --btn-ink: #ffffff; --btn-hover: #262626;
  background: #ffffff; color: #000000; border-color: #ffffff;
}
.marketing .plan-name, .marketing .plan-list li, .marketing .plan-price .amount { color: var(--text); }
.marketing .plan-tag { position: absolute; top: 24px; right: 24px; }
.marketing .plan-name { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.marketing .plan-tagline { margin-top: 4px; color: var(--text-2); font-size: 15px; }
.marketing .plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: 24px; }
.marketing .plan-price .amount { font-size: 48px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.marketing .plan-price .per { color: var(--text-2); font-size: 15px; }
.marketing .plan-note { margin-top: 6px; color: var(--text-3); font-size: 13.5px; }
.marketing .plan-list { list-style: none; display: grid; gap: 10px; margin: 24px 0 28px; padding: 22px 0 0; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 16%, transparent); flex: 1; }
.marketing .plan-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.marketing .plan-list li svg { flex: none; margin-top: 3px; }
.marketing .plan-list li.is-off { opacity: 0.5; }
.marketing .badge-accent { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.price-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 28px; color: var(--text-2); font-size: 15px; }
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.marketing .pack { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border: 1px solid var(--line-2); border-radius: 18px; background: transparent; }
.marketing .pack-minutes { font-weight: 600; }
.marketing .pack-price { color: var(--text-3); font-size: 13.5px; }
.marketing .table-wrap { border: 0; border-radius: 0; background: transparent; overflow-x: auto; }
.marketing .compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.marketing .compare th, .marketing .compare td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.marketing .compare thead th { color: var(--text); font-weight: 600; border-bottom-color: var(--line-3); }
.marketing .compare td:first-child { color: var(--text-2); }
.marketing .compare td svg { display: inline-block; vertical-align: middle; }
.marketing .compare .no svg { color: var(--text-4); }

/* Questions: a hairline list that opens in place. */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; color: var(--text); font-size: 18px; font-weight: 500; letter-spacing: -0.016em; line-height: 1.4; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { position: relative; flex: none; width: 14px; height: 14px; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; top: 50%; left: 0; width: 14px; height: 1.5px; margin-top: -0.75px; background: currentColor; transition: transform 200ms var(--ease-out); }
.faq summary .plus::after { transform: rotate(90deg); }
.faq details[open] summary .plus::after { transform: rotate(0deg); }
.faq .answer { overflow: hidden; }
.faq .answer-in { max-width: 40em; padding: 0 40px 24px 0; color: var(--text-2); font-size: 16.5px; line-height: 1.6; }

/* The legal texts: contents on the side, the text in a readable column. */
.legal-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; padding-bottom: 112px; }
.legal-toc { position: sticky; top: calc(var(--top-h) + 32px); display: flex; flex-direction: column; gap: 2px; align-self: start; }
.legal-toc a { padding: 6px 0; color: var(--text-3); font-size: 14px; text-decoration: none; }
.legal-toc a:hover, .legal-toc a.is-active { color: var(--text); }
.marketing .prose { max-width: 68ch; color: var(--text-2); font-size: 16.5px; line-height: 1.7; }
.marketing .prose h2 { margin: 48px 0 12px; color: var(--text); font-size: 22px; font-weight: 600; letter-spacing: -0.022em; scroll-margin-top: calc(var(--top-h) + 24px); }
.marketing .prose h2:first-child { margin-top: 0; }
.marketing .prose a { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-3); }
.marketing .prose strong { color: var(--text); }
.prose.deletion ol { padding-left: 22px; }

/* ----------------------------------------------- sign in, sign up and around */

.marketing .label { color: var(--text); font-size: 14px; font-weight: 500; }
.marketing .input, .marketing .textarea, .marketing .select { border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg); color: var(--text); box-shadow: none; transition: border-color 140ms; }
.marketing .input-lg { min-height: 52px; font-size: 16px; }
.marketing .input:hover, .marketing .textarea:hover { border-color: var(--line-3); }
.marketing .input:focus, .marketing .textarea:focus, .marketing .select:focus { outline: none; border-color: var(--text); background: var(--bg); box-shadow: 0 0 0 1px var(--text); }
.marketing .help { color: var(--text-3); font-size: 13px; }
.marketing .check { color: var(--text-2); font-size: 14.5px; }
.marketing .check a, .marketing .auth-switch a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 4px; }
.marketing .form-errors { border-radius: 14px; }
.marketing .notice { border-radius: 14px; }

.auth2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.auth2-main { display: flex; flex-direction: column; min-width: 0; padding: 0 clamp(20px, 5vw, 64px); }
.auth2-top { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.auth2-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 0 48px; }
.auth2-card { width: 100%; max-width: 400px; }
.auth2-card h1 { margin: 0; font-size: clamp(32px, 3.4vw, 44px); font-weight: 600; line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.auth2-card .sub { margin: 12px 0 32px; color: var(--text-2); font-size: 16px; line-height: 1.55; }
.auth2-card .fields { display: flex; flex-direction: column; gap: 18px; }
.auth2-card .field + .field { margin-top: 0; }
.auth2-card .btn-lg { --h: 52px; font-size: 16px; }
.auth2-card .auth-switch { margin: 28px 0 0; color: var(--text-2); font-size: 15px; text-align: center; }
.auth2-card .done-mark { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 24px; border-radius: 50%; background: var(--text); color: var(--bg); }
.auth2-card .integration-icon { background: var(--surface); color: var(--text); border: 0; }
.auth2-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 20px 0 28px; color: var(--text-3); font-size: 13.5px; }
.auth2-foot a { color: var(--text-3); text-decoration: none; }
.auth2-foot a:hover { color: var(--text); }
.auth2-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; padding: 48px; border-left: 1px solid var(--line); background: var(--bg-elev); }
.auth2-figure { display: block; width: min(300px, 60%); height: auto; }
.auth2-quote { max-width: 420px; margin: 0; }
.auth2-quote .bub { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.3; padding: 18px 24px 20px; border-radius: 30px; border-bottom-left-radius: 8px; text-wrap: pretty; }
.auth2-quote figcaption { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--text-2); font-size: 14.5px; }
.auth2-quote figcaption img { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); object-fit: cover; }

/* ------------------------------------------------ the minimal and error pages */

.minimal-page { min-height: 100vh; min-height: 100dvh; }
.minimal-page > .stars { display: none; }
.err-page { gap: 16px; }
.err-page .err-code { padding: 8px 16px 9px; color: var(--text); font-size: 15px; font-weight: 500; }
.err-page h1 { font-weight: 600; letter-spacing: -0.04em; }
.err-page p { color: var(--text-2); }

/* ------------------------------------------------------------------ smaller */

@media (max-width: 1080px) {
  .lp-nav .nav-wide { display: none; }
  .lp-top .salu { display: none; }
}
@media (max-width: 900px) {
  .lp-nav { display: none; }
  .lp-burger { display: grid; }
  .lp-top-actions { gap: 8px; }
  .lp-signin, .lp-top .lang-menu { display: none; }
  .lp-foot-grid { grid-template-columns: 1fr 1fr; }
  .lp-foot-brand { grid-column: 1 / -1; }
  .promise-grid, .faq-wrap { grid-template-columns: 1fr; }
  .promise-head { position: static; }
  .sec .plans { grid-template-columns: 1fr; }
  .legal-grid { grid-template-columns: 1fr; gap: 24px; }
  .legal-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .auth2 { grid-template-columns: 1fr; }
  .auth2-side { display: none; }
}
@media (max-width: 560px) {
  .marketing { font-size: 16px; }
  .lp-top-actions .lp-btn-sm { padding: 0 14px; }
  .lp-foot { padding-top: 56px; }
  .lp-foot-grid { gap: 32px 20px; }
  .faq summary { font-size: 17px; }
  .faq .answer-in { padding-right: 0; }
  .articles li { grid-template-columns: 36px minmax(0, 1fr); }
  .sec .plan { padding: 24px; }
}