/* The landing page (views.LoginPage, N3b-1; rebuilt on 2026-10-15 from the mockup the owner
   approved): / for a visitor without a session, and /login. A web page of its own, built on
   app.css's tokens and its Golos Text; only this page loads this file. Every class is lp-…, so
   nothing here touches the app's pages; the parts it shares with them (the brand, the «EN · RU»
   switch, the acceptance line, the documents' links) are restyled under .lp.

   The document scrolls under a sticky top bar. On a phone (up to 719 px) nothing is wider than
   the screen, the phone with the map is smaller and fades out at the bottom, its floating cards
   are hidden, and the features are compact rows of an icon and two lines. Tap targets are 44 px
   at least, the focus ring shows on every control, text keeps 4.5:1 (the headline, large text,
   3:1), and nothing moves for a person who asks for reduced motion. */

.lp{height:auto;min-height:100%;line-height:1.5;--lp-r:20px}
.lp-wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.lp img{display:block;max-width:100%;height:auto}
.lp :focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.lp-private :focus-visible{outline-color:var(--heat-1)}

/* ---------- the top bar: the brand, the switch and «Sign in», over the page as it scrolls. The
   switch is in --ink-2, which keeps 4.5:1 on the glass when the dark band scrolls under it. */
.lp-top{position:sticky;top:0;z-index:10;background:rgba(244,242,238,.85);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.lp-top-in{display:flex;align-items:center;gap:16px;height:64px}
.lp .brand{gap:10px;min-height:44px}
.lp .brand-mark{grid-template-columns:repeat(2,9px);gap:3px}
.lp .brand-mark i{height:9px;border-radius:2.5px}
.lp .brand-word{font-size:22px;letter-spacing:-.02em}
.lp-top .auth-lang{margin:0;font-size:13px;letter-spacing:0;color:var(--ink-2)}
.lp-top .auth-lang-opt{min-width:44px;padding:0 4px;color:var(--ink-2)}
.lp-top button.auth-lang-opt{text-decoration:underline;text-underline-offset:2px}
.lp-top .auth-lang-opt:hover{color:var(--ink)}
.lp-top .auth-lang-opt[aria-current]{color:var(--ink)}
.lp-top .auth-lang-sep{color:var(--ink-2)}
.lp-signin,.lp-signin:hover{display:inline-flex;align-items:center;flex:none;height:44px;padding:0 18px;border-radius:22px;background:var(--ink);color:#fff;font-size:15px;font-weight:600;white-space:nowrap;text-decoration:none}
.lp-signin:hover{background:var(--ink-2)}

/* ---------- the hero: the words, the button, and the map on a phone beside them (below on a
   phone). The glow and the cards reach past the phone; the hero clips them at the screen. */
.lp-hero{padding:40px 0 24px;overflow-x:clip}
.lp-hero-in{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.lp-hero{padding:72px 0 56px}.lp-hero-in{grid-template-columns:1.05fr .95fr;gap:56px}}
.lp-hero .auth-notice{margin-bottom:18px}
.lp-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:13px;font-weight:600;color:var(--ink-2)}
.lp-dot{width:8px;height:8px;border-radius:50%;background:var(--heat-3)}
.lp-h1{margin:18px 0;font-size:clamp(34px,5.2vw,58px);font-weight:700;line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.lp-h1 em{font-style:normal;background:linear-gradient(90deg,var(--heat-3),var(--heat-4));-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-lead{max-width:34em;margin:0 0 28px;font-size:clamp(17px,1.6vw,20px);color:var(--ink-2);text-wrap:pretty}
.lp-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
/* «Sign in with Google» in Google's branding: the four-colour «G» on a white button. */
.lp-gbtn,.lp-gbtn:hover{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 22px 0 18px;border:1px solid #dadce0;border-radius:26px;background:#fff;color:#1f1f1f;font:500 16px/1 var(--font);text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.06);transition:box-shadow .2s,transform .2s}
.lp-gbtn:hover{box-shadow:0 2px 4px rgba(0,0,0,.08),0 10px 24px rgba(0,0,0,.1);transform:translateY(-1px)}
.lp-gbtn svg{width:20px;height:20px;flex:none}
.lp-note{font-size:14px;color:var(--muted)}
.lp-hero .auth-legal{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);text-align:left}
.lp-hero .auth-legal a{color:var(--ink-2)}
.lp-hero .auth-legal a:hover{color:var(--ink)}
.lp-trust{display:flex;flex-wrap:wrap;gap:10px 18px;margin:28px 0 0;padding:0;list-style:none;font-size:14px;color:var(--ink-2)}
.lp-trust li{display:flex;align-items:center;gap:8px}
.lp-trust svg{width:18px;height:18px;flex:none;color:var(--heat-3)}

/* The map on a phone: a frame, a status bar with the island, the screenshot; a warm glow behind
   it, two cards of what the map shows on it, and the caption below. */
.lp-shot{justify-self:center;width:min(100%,340px);margin:0}
.lp-device{position:relative}
.lp-phone{position:relative;padding:10px;border-radius:46px;background:#141312;box-shadow:0 30px 80px -20px rgba(60,30,10,.45),0 12px 30px -10px rgba(0,0,0,.35)}
.lp-phone img{width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:0 0 36px 36px}
.lp-status{position:relative;height:34px;border-radius:36px 36px 0 0;background:#fff}
.lp-status::before{content:"";position:absolute;top:9px;left:50%;width:88px;height:24px;border-radius:14px;background:#141312;transform:translateX(-50%)}
.lp-status::after{content:"9:41";position:absolute;top:10px;left:28px;font-size:12px;font-weight:600;line-height:1.5}
.lp-glow{position:absolute;inset:-12% -18% -8%;z-index:-1;background:radial-gradient(closest-side,rgba(248,150,30,.35),rgba(232,93,4,.15) 55%,transparent 75%);filter:blur(10px)}
.lp-float{position:absolute;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:0 12px 30px -8px rgba(0,0,0,.25);font-size:13px;line-height:1.3}
.lp-float b{display:block;font-size:20px;letter-spacing:-.02em}
.lp-k{color:var(--muted)}
.lp-f1{top:34%;left:-28px}
.lp-f2{right:-22px;bottom:16%}
.lp-f2-row{display:flex;align-items:center;gap:8px;font-weight:600}
/* The floating card's pin: the palette's amber, as the demo's category Avoid (views.Palette). */
.lp-pin{width:10px;height:10px;border-radius:50%;background:#e9a23b}
.lp-caption{margin-top:14px;font-size:12px;line-height:1.4;color:var(--muted);text-align:center}
.lp-credit{white-space:nowrap}

/* ---------- the sections: what the app does, how to start, the privacy band, the last call */
.lp-section{padding:56px 0}
.lp-section.lp-section--next{padding-top:0}
@media (min-width:960px){.lp-section{padding:88px 0}}
.lp-h2{margin:0 0 14px;font-size:clamp(28px,3.6vw,42px);font-weight:700;line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.lp-sub{max-width:36em;font-size:18px;color:var(--ink-2)}
.lp-kicker{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--heat-1)}

.lp-features{display:grid;gap:16px;margin:36px 0 0;padding:0;list-style:none}
@media (min-width:720px){.lp-features{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.lp-features{grid-template-columns:repeat(4,1fr)}}
.lp-card{padding:24px;border:1px solid var(--line);border-radius:var(--lp-r);background:var(--surface);transition:transform .2s,box-shadow .2s}
.lp-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.18)}
.lp-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:16px;border-radius:12px}
.lp-icon svg{width:22px;height:22px}
.lp-i1{background:#fff4d6;color:#b45309}
.lp-i2{background:#ffe8d6;color:#c2410c}
.lp-i3{background:#fde4e4;color:#b91c1c}
.lp-i4{background:#e8eefc;color:#3d5bd8}
.lp-card h3{margin:0 0 8px;font-size:18px;line-height:1.25;letter-spacing:-.01em}
.lp-card p{font-size:15px;color:var(--muted)}

.lp-steps{display:grid;gap:16px;margin:36px 0 0;padding:0;list-style:none;counter-reset:lp-step}
@media (min-width:860px){.lp-steps{grid-template-columns:repeat(3,1fr)}}
.lp-steps li{position:relative;padding:24px 24px 24px 76px;border:1px solid var(--line);border-radius:var(--lp-r);background:var(--surface);counter-increment:lp-step}
.lp-steps li::before{content:counter(lp-step);position:absolute;top:24px;left:24px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700}
.lp-steps h3{margin:4px 0 6px;font-size:18px;line-height:1.3}
.lp-steps p{font-size:15px;color:var(--muted)}

.lp-private{display:grid;gap:28px;padding:40px 28px;border-radius:28px;background:var(--ink);color:#fff}
@media (min-width:960px){.lp-private{grid-template-columns:1fr 1fr;align-items:center;padding:56px}}
.lp-private .lp-h2{color:#fff}
.lp-private .lp-sub{color:#d6d2cb}
.lp-more,.lp-more:hover{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.lp-more:hover{border-bottom-color:#fff}
.lp-plist{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.lp-plist li{display:flex;align-items:flex-start;gap:14px;padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.06)}
.lp-plist svg{width:22px;height:22px;flex:none;margin-top:1px;color:var(--heat-1)}
.lp-plist h3{font-size:16px;line-height:1.5}
.lp-plist p{font-size:14px;color:#c9c4bc}

/* The greyhound (views.dogArt): it runs beside «Getting started» and bows to play above the
   last call. Its heights win over the height:auto of .lp img. */
.lp-h2-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 24px}
.lp-h2-row .lp-h2{margin-bottom:0}
.lp .lp-art{display:block;width:auto}
.lp .lp-art--run{height:64px;margin-bottom:2px}
.lp .lp-art--final{height:128px;margin:0 auto 28px}

.lp-final{text-align:center}
.lp-final .lp-sub{margin:0 auto 28px}
.lp-final .lp-cta{justify-content:center}

/* ---------- the foot: the brand, the year and the documents' links (publicFoot), 44 px each */
.lp-foot{padding:28px 0 40px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.lp-foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.lp-foot .brand-word{font-size:18px}
.lp-foot .public-foot{justify-content:flex-start;gap:0 20px;font-size:14px}
.lp-foot .public-foot a{padding:0;color:var(--ink-2);text-decoration:none}
.lp-foot .public-foot a:hover{color:var(--ink);text-decoration:underline}

/* ---------- phones: compact, and nothing wider than the screen */
@media (max-width:719px){
  .lp-hero{padding:20px 0 4px}
  .lp-hero-in{gap:28px}
  .lp-h1{margin:14px 0}
  .lp-lead{margin-bottom:22px}
  .lp-trust{gap:8px 16px;margin-top:22px}
  .lp-shot{width:min(80%,300px)}
  .lp-glow{inset:-6% -10% 0}
  .lp-float{display:none}
  .lp-phone{max-height:480px;overflow:hidden;padding:7px;border-radius:36px;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
  .lp-status{height:26px;border-radius:29px 29px 0 0}
  .lp-status::before{top:7px;width:70px;height:19px}
  .lp-status::after{top:6px;left:22px;font-size:10px}
  .lp-section{padding:44px 0}
  .lp-features{gap:10px;margin-top:22px}
  .lp-card{display:grid;grid-template-columns:44px 1fr;align-items:start;column-gap:14px;padding:16px 18px}
  .lp-card .lp-icon{grid-row:span 2;margin:0}
  .lp-card h3{margin:2px 0 4px;font-size:17px}
  .lp-steps{gap:10px;margin-top:22px}
  .lp-steps li{padding:16px 18px 16px 66px}
  .lp-steps li::before{top:16px;left:18px;width:32px;height:32px;font-size:15px}
  .lp-steps h3{margin:2px 0;font-size:17px}
  .lp-private{gap:22px;padding:28px 20px;border-radius:24px}
  .lp-plist{gap:10px}
  .lp-plist li{padding:14px}
  .lp-final .lp-sub{margin-bottom:22px}
  .lp .lp-art--run{height:44px}
  .lp .lp-art--final{height:100px;margin-bottom:20px}
  .lp-foot-in{gap:0 20px}
}
/* The narrowest phones (360 px): the top bar keeps the brand, the switch and «Sign in» on one
   line. */
@media (max-width:400px){
  .lp-top-in{gap:8px}
  .lp-signin,.lp-signin:hover{padding:0 14px}
}

@media (prefers-reduced-motion:reduce){
  .lp-gbtn,.lp-gbtn:hover,.lp-card{transition:none}
  .lp-gbtn:hover,.lp-card:hover{transform:none}
}