/* Sinkaos early-access site. Layout and colour live inline in the views, as in the design handoff;
   this file holds what inline styles cannot express: base rules, hover and focus states, breakpoints
   and native form controls dressed as the design's buttons. Tokens: design/design-system/tokens. */

/* Archivo has no Cyrillic, so the Ukrainian pages borrow Roboto Flex (OFL, wght and wdth axes) for those
   characters only. It joins the Archivo family through unicode-range, so it loads only where Cyrillic is drawn (the Ukrainian pages, and the
   „Українська" entry of the language menu elsewhere). Its
   weight and stretch ranges must equal the Google Archivo faces, or Chrome treats it as a separate face and never uses it. */
@font-face{font-family:'Archivo';src:url(/assets/fonts/roboto-flex-cyrillic.woff2) format('woff2');font-weight:300 900;font-stretch:62% 125%;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

html,body{margin:0;background:#0F1011;color:#E8EAEC;-webkit-font-smoothing:antialiased}
a{color:#FF8A57;text-decoration:underline;text-underline-offset:3px;transition:color 120ms cubic-bezier(0.2,0,0,1),background-color 120ms cubic-bezier(0.2,0,0,1),border-color 120ms cubic-bezier(0.2,0,0,1)}
a:hover{color:#FFB08C}
:focus-visible{outline:2px solid #FF6A2B;outline-offset:2px}
main:focus{outline:none}
input,textarea,select,button{font-family:inherit}
::placeholder{color:#80878E}
img{max-width:100%;height:auto}
/* Long compounds (German, Polish) must not push a phone page sideways: headings hyphenate by the page language. */
main h1,main h2,main h3{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Hover states (style-hover in the prototypes) */
a.h-primary:hover,.h-primary:hover{background:#FF8A57!important;color:#0F1011!important}
a.h-secondary:hover,.h-secondary:hover{border-color:#80878E!important;color:#FFFFFF!important}
a.h-secondary-soft:hover,.h-secondary-soft:hover{border-color:#80878E!important;color:#E8EAEC!important}
a.h-white:hover,.h-white:hover{color:#FFFFFF!important}
a.h-link:hover,.h-link:hover{color:#FFB08C!important;text-decoration:underline!important}

.skip-link{position:absolute;left:-9999px;top:8px;background:#FF6A2B;color:#0F1011;padding:10px 14px;z-index:100}
.skip-link:focus{left:8px;color:#0F1011}

/* Desktop and mobile shells switch at 960px */
.only-desktop{display:flex}
.only-mobile{display:none}
@media (max-width:959.98px){.only-desktop{display:none!important}.only-mobile{display:flex}}
#mobile-menu:not([hidden]){display:flex}
@media (min-width:960px){#mobile-menu{display:none!important}}
.menu-toggle div{transition:transform 120ms cubic-bezier(0.2,0,0,1),opacity 120ms}
.menu-toggle[aria-expanded="true"] .bar1{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bar2{opacity:0}
.menu-toggle[aria-expanded="true"] .bar3{transform:translateY(-7px) rotate(-45deg)}
body.menu-open{overflow:hidden}
.lang-opt:hover{color:#FFFFFF!important}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary:hover{border-color:#3A3F44!important}
.lang-menu[open] .lang-chev{transform:rotate(180deg)}
.lang-menu li a:hover{background:#2A2E32}

/* Tables scroll sideways on narrow screens instead of widening the page */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* Form controls */
.field{height:48px;box-sizing:border-box;padding:0 12px;background:#0F1011;color:#E8EAEC;border:1px solid #3A3F44;font-size:16px;border-radius:0;width:100%;transition:border-color 120ms cubic-bezier(0.2,0,0,1)}
textarea.field{height:auto;min-height:120px;padding:12px;line-height:1.5;resize:vertical}
select.field{appearance:none;-webkit-appearance:none;padding:0 40px 0 12px;cursor:pointer}
.field.is-invalid{border-color:#F04A3F}
.btn-submit{background:#FF6A2B;transition:background-color 120ms cubic-bezier(0.2,0,0,1)}
.btn-submit:hover{background:#FF8A57}
.btn-submit[disabled],.btn-submit[aria-busy="true"]{background:#B85326;cursor:progress}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Native checkboxes and radios dressed as the design's toggle buttons (work without JavaScript) */
.choice{position:relative;display:block}
.choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.choice span.box{display:flex;box-sizing:border-box;cursor:pointer;background:transparent;color:#C9CDD1;border:1px solid #3A3F44;transition:border-color 120ms cubic-bezier(0.2,0,0,1),background-color 120ms cubic-bezier(0.2,0,0,1)}
.choice input:checked+span.box{background:#1F2225;color:#FFFFFF;border-color:#FF6A2B}
.choice input:focus-visible+span.box{outline:2px solid #FF6A2B;outline-offset:2px}
.choice span.box:hover{border-color:#80878E}
.choice input:checked+span.box:hover{border-color:#FF6A2B}
.choice.is-invalid span.box{border-color:#F04A3F}
/* Segmented size picker: selected fills light */
.seg{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #3A3F44}
.seg .choice span.box{height:44px;align-items:center;justify-content:center;border:none;border-right:1px solid #3A3F44;font:500 14px 'IBM Plex Mono',monospace}
.seg .choice:last-child span.box{border-right:none}
.seg .choice input:checked+span.box{background:#E8EAEC;color:#0F1011}
/* Opt-in checkbox */
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:15px;line-height:1.45;color:#E8EAEC;position:relative}
.check input{position:absolute;opacity:0;width:18px;height:18px;margin:0}
.check .mark{width:18px;height:18px;flex-shrink:0;box-sizing:border-box;border:1px solid #80878E;background:transparent;margin-top:1px;color:#0F1011;font:700 12px/16px 'IBM Plex Mono',monospace;text-align:center}
.check input:checked+.mark{border-color:#FF6A2B;background:#FF6A2B}
.check input:checked+.mark::after{content:"\2713"}
.check input:focus-visible+.mark{outline:2px solid #FF6A2B;outline-offset:2px}

/* Details/summary used for the FAQ */
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}

/* Form states toggled by site.js; [hidden] must beat the inline display values */
[hidden]{display:none!important}
.form-success:not([hidden]),.err-summary:not([hidden]),.fail-alert:not([hidden]){display:flex}
.err-list a{display:inline-block;min-height:24px;line-height:24px}
/* FAQ: "+" closed, "−" open, as in the prototype */
details[open] .faq-plus{transform:none!important;color:transparent!important;position:relative}
details[open] .faq-plus::after{content:"\2212";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#A3A9AF}
@media (max-width:959.98px){.hdr{gap:12px!important}}
/* Between the breakpoint and 1200px the header is tight in the longer languages: short CTA, closer nav items. */
.cta-short{display:none}
@media (min-width:960px) and (max-width:1199.98px){.hdr{gap:16px!important}.hdr-link{padding:8px 6px!important}.hdr-cta .cta-long{display:none}.hdr-cta .cta-short{display:inline}}