/* Украшено landing page. Values from the Claude Design canvas «Украшено — страница-заглушка»:
   Main (day), Night (dark scheme) and Phone (narrow) artboards. No inline styles anywhere:
   the CSP allows style-src 'self' only. */
@font-face{font-family:"Ysabeau Office";src:url("/static/fonts/YsabeauOffice-Variable.woff2") format("woff2");font-weight:1 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url("/static/fonts/Literata-Variable.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}

:root{
  color-scheme:light dark;
  --bg:#f7f1ed;--fg:#28211e;--muted:#675d58;--rule:#857f7a;--mark:#7b602f;
  --field-bg:#fefdfc;--field-border:#857f7a;--field-hover:#675d58;
  --btn-bg:#2c2522;--btn-fg:#fdf9f7;--btn-hover:#413a37;--btn-active:#1a1512;
  --error:#91322a;--ok-bg:#ddedde;--ok-fg:#35633d;--divider:#e1dad5;--underline:#857f7a;
  --sans:"Ysabeau Office","Segoe UI",system-ui,sans-serif;
  --serif:Literata,Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(0.2,0,0,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1a1614;--fg:#f0eae4;--muted:#b2aba5;--rule:#7a736f;--mark:#d6b57e;
    --field-bg:#2b2623;--field-border:#7a736f;--field-hover:#b2aba5;
    --btn-bg:#d6b57e;--btn-fg:#1c1610;--btn-hover:#e4c48f;--btn-active:#c5a46d;
    --error:#f3b6ad;--ok-bg:#232f24;--ok-fg:#afd2b3;--divider:#38332f;--underline:#7a736f;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-optical-sizing:auto}
[hidden]{display:none!important}

.page{min-height:100vh;display:flex;flex-direction:column;padding:40px clamp(16px,4.45vw,64px) 32px}
.hero{flex:1 0 auto;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 0}
.eyebrow{margin:0 0 20px;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.02em;color:var(--muted)}

.wordmark{display:block;width:min(100%,760px);color:var(--fg);line-height:0}
.ukr-logo{display:block;width:100%;height:auto;overflow:visible}
.ukr-logo .ukr-gem{fill:currentColor;transform-box:fill-box;transform-origin:center;transition:fill 240ms var(--ease),filter 240ms var(--ease)}
.ukr-logo .ukr-gem.is-shine{transition:none}

.ruler{display:block;height:auto;margin:40px 0 0;color:var(--rule);overflow:visible}
.ruler--wide{width:min(100%,720px)}
.ruler--narrow{display:none;width:min(100%,320px)}
.ruler__mark{stroke:var(--mark)}

.title{max-width:720px;margin:40px 0 0;font-family:var(--serif);font-size:clamp(24px,2.25vw,32px);line-height:1.25;font-weight:400;letter-spacing:-.005em}
.lead{max-width:640px;margin:16px 0 0;font-size:18px;line-height:28px;font-weight:400}

.signup,.done{width:100%;max-width:560px;margin:40px 0 0;display:flex;flex-direction:column;text-align:left}
.signup{gap:6px}
.done{align-items:flex-start;gap:8px}
.status{width:100%;max-width:560px;display:flex;justify-content:center}
.status:focus{outline:none}
.signup__label{font-size:14px;line-height:20px;font-weight:600}
.signup__row{display:flex;flex-wrap:wrap;gap:12px}

.input{flex:999 1 240px;min-width:0;height:48px;padding:0 12px;background:var(--field-bg);border:1px solid var(--field-border);border-radius:8px;font-family:var(--sans);font-size:16px;line-height:24px;color:var(--fg);outline:none;transition:border-color 140ms var(--ease)}
.input::placeholder{color:var(--muted);opacity:1}
.input:hover{border-color:var(--field-hover)}
.input:focus-visible{border-color:var(--fg);outline:2px solid var(--fg);outline-offset:2px}
.input.is-error{border-color:var(--error);box-shadow:inset 0 0 0 1px var(--error)}

.button{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border:1px solid transparent;border-radius:8px;background:var(--btn-bg);color:var(--btn-fg);font-family:var(--sans);font-size:15px;line-height:20px;font-weight:600;letter-spacing:.01em;white-space:nowrap;cursor:pointer;transition:background 140ms var(--ease)}
.button:hover{background:var(--btn-hover)}
.button:active{background:var(--btn-active)}
.button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.button[aria-disabled="true"]{cursor:progress}

.trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.field-error{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:13px;line-height:18px;font-weight:500;color:var(--error)}
.field-error svg{flex:none;width:16px;height:16px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.field-error svg .field-error__dot{fill:currentColor;stroke:none}
.field-hint{margin:0;font-size:13px;line-height:18px;font-weight:450;color:var(--muted)}
.consent{margin:12px 0 0;font-size:13px;line-height:18px;font-weight:450;color:var(--muted)}

.link{color:var(--muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.link:hover{color:var(--fg)}
.link:focus-visible,.button-tertiary:focus-visible{outline:2px solid var(--fg);outline-offset:2px;border-radius:2px}

.done__panel{display:flex;align-items:flex-start;gap:10px;width:100%;padding:12px 16px;background:var(--ok-bg);border-radius:8px;color:var(--ok-fg);font-size:16px;line-height:24px;font-weight:400}
.done__panel svg{flex:none;width:20px;height:20px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.button-tertiary{height:44px;padding:0 2px;border:0;background:transparent;color:var(--fg);font-family:var(--sans);font-size:15px;line-height:20px;font-weight:600;letter-spacing:.01em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--underline);cursor:pointer}
.button-tertiary:hover{text-decoration-color:currentColor}

.footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:24px;border-top:1px solid var(--divider);font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
.footer__links{display:flex;flex-wrap:wrap;gap:8px 24px}

/* document pages: privacy, newsletter terms, thanks, not found */
.doc{flex:1 0 auto;width:100%;max-width:720px;margin:0 auto;padding:48px 0;text-align:left}
.doc__back{margin:0;font-size:14px;line-height:20px}
.doc h1{margin:24px 0 8px;font-family:var(--serif);font-size:clamp(24px,2.25vw,32px);line-height:1.25;font-weight:400;letter-spacing:-.005em}
.doc h2{margin:32px 0 8px;font-family:var(--serif);font-size:20px;line-height:28px;font-weight:400}
.doc p,.doc li{font-size:16px;line-height:24px}
.doc ul{padding-left:20px}
.doc__meta{margin:0;font-size:13px;line-height:18px;color:var(--muted)}

@media (max-width:599px){
  .page{padding:32px 16px 24px}
  .hero{padding:32px 0}
  .wordmark{width:100%}
  .ruler{margin-top:32px}
  .ruler--wide{display:none}
  .ruler--narrow{display:block}
  .title{margin-top:32px;font-size:24px;line-height:30px;letter-spacing:0}
  .lead{margin-top:12px;font-size:16px;line-height:24px}
  .signup,.done,.status{max-width:none}
  .signup,.done{margin-top:32px}
  .signup__row{flex-direction:column}
  .input{flex:none;width:100%;height:52px}
  .button{display:flex;width:100%;height:52px;padding:0 22px;font-size:16px}
  .footer{padding-top:20px}
  .doc{padding:32px 0}
}

@media (prefers-reduced-motion:reduce){
  .ukr-logo .ukr-gem{animation:none!important;transition-duration:140ms}
  .input,.button{transition:none}
}