/* Arduris — shared styles for every language version of the page
   (/, /lv, /ru). Layout and colour still live inline in the markup,
   as exported from the design; this file holds what inline styles
   cannot do: hover states, media queries, keyframes. */

html { -webkit-text-size-adjust:100%; }
body { margin:0; background:#dfdedb; font-family:Archivo, sans-serif; }
a { color:inherit; text-decoration:none; }
* { box-sizing:border-box; }

/* Even out ragged line breaks in short display text rather than leaving a
   single orphan word on the last line. Ignored where unsupported. */
h1, h2, .problem-card .ph, .install-row .title, .objection > div:first-child { text-wrap:balance; }
::placeholder { color:#8c8983; opacity:1; }
@keyframes riseIn { from { opacity:0; transform:translateY(18px);} to { opacity:1; transform:none;} }
@keyframes floatA { 0%,100%{ transform:translate3d(-150px,-96px,120px) rotateY(13deg);} 50%{ transform:translate3d(-150px,-116px,120px) rotateY(13deg);} }
@keyframes floatB { 0%,100%{ transform:translate3d(100px,-40px,-40px) rotateY(-11deg);} 50%{ transform:translate3d(100px,-22px,-40px) rotateY(-11deg);} }
@keyframes floatC { 0%,100%{ transform:translate3d(-40px,80px,-180px) rotateY(8deg);} 50%{ transform:translate3d(-40px,62px,-180px) rotateY(8deg);} }
@keyframes floatD { 0%,100%{ transform:translate3d(176px,110px,-300px) rotateY(-6deg);} 50%{ transform:translate3d(176px,128px,-300px) rotateY(-6deg);} }
input, textarea, button, select { font:inherit; color:inherit; }
input:focus, textarea:focus { outline:1px solid #ff5a1f; }

/* Buttons. Colour, border and background live here rather than in inline
   style attributes — inline wins over any stylesheet rule, so a hover state
   defined here could only ever change the properties inline did not set.
   That is what made "Send message" turn orange-on-orange: the hover colour
   applied, the hover background could not. Keep these out of the markup. */
.btn-primary, .btn-ghost, .btn-dark, .btn-outline {
  transition:background .2s, color .2s, border-color .2s; }

.btn-primary { background:#ff5a1f; color:#171614; border:none; }
.btn-primary:hover, .btn-primary:focus-visible { background:#ff7440; color:#171614; }

/* Opaque, not transparent: the floating hero documents drift behind this
   button and were showing through it. */
.btn-ghost { background:#171614; border:1px solid #3a3833; color:#a8a5a0; }
.btn-ghost:hover, .btn-ghost:focus-visible { background:#171614; border-color:#dfdedb; color:#dfdedb; }

.btn-dark { background:#171614; color:#ff5a1f; border:none; }
.btn-dark:hover, .btn-dark:focus-visible { background:#000; color:#ff5a1f; }

.btn-outline { background:transparent; border:2px solid #171614; color:#171614; }
.btn-outline:hover, .btn-outline:focus-visible { background:#171614; color:#ff5a1f; }

/* Disabled while a submission is in flight — dim the whole control rather
   than letting the label drop out. */
#book-form button[disabled] { opacity:.55; cursor:default; }
#book-form button[disabled]:hover { background:#171614; color:#ff5a1f; }
#book-form .btn-outline[disabled]:hover { background:transparent; color:#171614; }

.link-soft:hover { opacity:.85; }
a:focus-visible, button:focus-visible { outline:2px solid #ff5a1f; outline-offset:2px; }

.lang-switch { display:flex; align-items:center; gap:10px; padding:0 clamp(16px,2.2vw,28px); font-family:'JetBrains Mono',monospace; font-size:11px; color:#8c8983; }
.lang-switch a { padding:6px 0; transition:color .2s; }
.lang-switch a:hover { color:#dfdedb; }
.lang-switch [aria-current="page"], .lang-switch [aria-current="page"]:hover { color:#ff5a1f; }

/* Mobile-only compact form of .lang-switch. Hidden until the header needs
   the room; the caret is drawn as a background so no icon file is needed. */
.lang-select { display:none; align-self:center; margin:0 6px 0 0;
  -webkit-appearance:none; appearance:none; background:transparent; border:0;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em;
  color:#ff5a1f; padding:6px 14px 6px 8px; cursor:pointer; line-height:1; min-height:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5'%3E%3Cpath d='M0 0h7L3.5 5z' fill='%238c8983'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center; }
.lang-select option { background:#171614; color:#dfdedb; }

.doc-stack { transform-style:preserve-3d; transition:transform .6s cubic-bezier(.22,.61,.36,1); }

/* Turnstile is invisible for most visitors, so the container must not
   reserve space until it actually renders something. */
#captcha:not(:empty) { margin-top:4px; }

/* The numbered "what we install" rows collapse to a stack rather than
   forcing a 504px-wide three-column track onto a phone. */
.install-row { display:grid; grid-template-columns:64px minmax(200px,1fr) minmax(240px,1.1fr); gap:clamp(16px,2.4vw,32px); padding:24px 0; border-top:1px solid #3a3833; align-items:baseline; }
.install-row:last-child { border-bottom:1px solid #3a3833; }
.install-row .num { font-family:Anton,sans-serif; font-size:34px; color:#ff5a1f; }
.install-row .title { font-size:24px; font-weight:700; letter-spacing:-.02em; }
.install-row .body { font-size:16px; line-height:1.55; color:#a8a5a0; }
/* Ticker: the three claims spread across the full bar rather than bunching
   at the left with dead space to the right. Gap acts as the minimum. */
.ticker { background:#ff5a1f; color:#171614; padding:22px clamp(20px,3.4vw,40px);
          display:flex; flex-wrap:wrap; justify-content:space-between;
          gap:10px clamp(16px,3vw,40px); align-items:center;
          font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:500; letter-spacing:.04em; }

/* Problem cards: vertical rules between columns on desktop. */
.problem-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); border-top:3px solid #171614; }
.problem-card { padding:32px; border-left:1px solid #bfbdb8; }
.problem-card:first-child { padding-left:0; border-left:none; }
.problem-card .ph { margin:0; font-size:23px; line-height:1.3; font-weight:600; letter-spacing:-.02em; }
.problem-card .pb { margin:12px 0 0; font-size:16px; line-height:1.6; color:#57544e; }

.objection-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:20px; }
.objection { background:#cfcecb; padding:30px; border-left:6px solid #ff5a1f; }

@media (max-width: 720px) {
  .install-row { grid-template-columns:36px 1fr; gap:6px 14px; padding:22px 0; }
  .install-row .num { grid-row:span 2; font-size:26px; }
  .install-row .title { font-size:21px; }
  .install-row .body { grid-column:2; font-size:15px; }

  /* Stacked, the vertical rules would read as stray marks down the left
     edge — they become horizontal dividers instead, and every card lines
     up on the same left margin. */
  .problem-card { padding:26px 0; border-left:none; border-top:1px solid #bfbdb8; }
  .problem-card:first-child { padding-top:26px; border-top:none; }
  .problem-card .ph { font-size:21px; }

  .objection { padding:24px; border-left-width:5px; }

  /* One row per claim, and the dots are desktop separators only. */
  .ticker { flex-direction:column; align-items:flex-start; gap:9px; padding:20px clamp(20px,3.4vw,40px); font-size:12px; }
  .ticker .dot { display:none; }

  /* Header stays one row: logo left, language + CTA right. Everything is
     trimmed just enough to fit rather than wrapping to a second bar. */
  /* Every one of these fights an inline style from the design export, so
     they all need !important — a plain rule silently loses. */
  .site-header .brand { padding:12px 0 12px 18px !important; }
  .site-header .brand img { height:20px !important; }
  .lang-switch { display:none; }        /* replaced by the select below */
  .lang-select { display:block; }
  .site-header .btn-primary { font-size:13px !important; padding:19px 16px !important; }

  /* All four documents stay on screen. Rather than shrinking each card and
     re-deriving every offset, the whole stack is scaled — the layout, the
     3D depth and the float animations all survive it. Bleeding a little
     past the viewport is intentional; the wrapper clips it. */
  #doc-field { height:330px !important; }
  .doc-stack { transform:scale(.78); }

  /* iOS Safari zooms the whole page when a focused field is under 16px,
     and never zooms back out. The inline 15px has to be overridden. */
  #book-form input, #book-form textarea { font-size:16px !important; }
}

@media (max-width: 480px) {
  #doc-field { height:270px !important; }
  .doc-stack { transform:scale(.64); }
}

@media (max-width: 380px) {
  /* At 320 the stack's own asymmetry (card A sits further left than card D
     sits right) pushed the lead document's title off-screen. Smaller, and
     nudged right, so every card keeps its heading. */
  #doc-field { height:240px !important; }
  .doc-stack { transform:translateX(14px) scale(.55); }

  /* Balance gives up past a few lines and starts producing ragged ones at
     this width, so wrap normally. Size is handled by the 13vw term. */
  .hero-h1 { text-wrap:normal; }

  .site-header .brand { padding-left:14px !important; }
  .site-header .brand img { height:18px !important; }
  .site-header .btn-primary { font-size:11.5px !important; padding:17px 11px !important; letter-spacing:.04em; }
  .lang-select { font-size:10px; padding:6px 12px 6px 6px; margin-right:2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}