/* ============================================
   Automation section — hub /automation (v2)
   Loaded after pneu.css: reuses its hero (pnh), warehouse rail (pns), order steps (pno).
   Behaviour: js/pneu.js (stagger, parallax, rail, steps) + js/auto.js (bars, payback calculator).
   ============================================ */

/* ---------------- hero: start from the visitor's task ---------------- */
.aut{ margin-top: clamp(20px, 3vh, 30px); max-width: 680px; }
.aut-label{ font: 600 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.aut-list{ list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.aut-item{
  position: relative; display: grid; gap: 4px; height: 100%; padding: 13px 34px 13px 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff;
  transition: background-color .25s, border-color .25s, transform .4s var(--ease);
}
.aut-item b{ font: 600 14.5px/1.2 var(--font-display); letter-spacing: -.005em; }
.aut-item small{ font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,.55); transition: color .25s; }
.aut-item i{ position: absolute; right: 12px; top: 12px; font-style: normal; font-size: 14px; color: var(--accent-2); transition: transform .35s var(--ease), color .25s; }
.aut-item.is-free{ border-style: dashed; background: transparent; }
.aut-item:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){
  .aut-item:hover{ background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
  .aut-item:hover small{ color: rgba(255,255,255,.9); }
  .aut-item:hover i{ color: #fff; transform: translateX(3px); }
}
.auh .pnh-visual{ max-width: clamp(380px, 56svh, 600px); }
/* short laptop screens (1536×730, 1280×800, 1000×700): the whole first screen incl. facts must fit */
@media (min-width: 901px) and (max-height: 820px){
  .auh{ padding-top: calc(76px + 18px); padding-bottom: 20px; }
  .auh .pnh-kicker{ margin: 10px 0 10px; }
  .auh .pnh-h1-s{ font-size: clamp(30px, 3.2vw, 46px); }
  .auh .pnh-lead{ margin-top: 10px; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .aut{ margin-top: 14px; }
  .aut-list{ margin-top: 8px; gap: 6px; }
  .aut-item{ padding: 9px 30px 9px 12px; }
  .aut-item small{ display: none; }
  .auh .pnh-facts{ margin-top: 4px; }
  .auh .pnh-fact{ padding-top: 12px; }
  .auh .pnh-fact dd{ font-size: min(clamp(20px, 2vw, 28px), 3cqi); }
  .auh .pnh-visual{ max-width: clamp(300px, 50svh, 440px); }
}
@media (min-width: 901px) and (max-height: 720px){
  .auh .pnh-h1-s{ font-size: clamp(28px, 2.9vw, 40px); }
  .auh .pnh-fact dt{ font-size: 12.5px; }
}
@media (max-width: 620px){
  .aut-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- directions: photo tiles with direct sub-links ---------------- */
.aud{ list-style: none; margin: clamp(32px, 5vh, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.aud-tile{
  position: relative; isolation: isolate; overflow: hidden; grid-column: span 3; min-width: 0; min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end; border-radius: 24px; background: var(--ink); color: #fff;
}
.aud-xl{ grid-column: span 7; min-height: clamp(360px, 44vh, 460px); }
.aud-l{ grid-column: span 5; min-height: clamp(360px, 44vh, 460px); }
.aud-media{ position: absolute; inset: 0; z-index: -1; }
.aud-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.aud-media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,.05) 18%, rgba(10,10,12,.62) 55%, rgba(10,10,12,.94) 100%); }
.aud-body{ display: grid; gap: 8px; padding: clamp(18px, 2vw, 28px); }
.aud-kicker{ justify-self: start; padding: 5px 9px; border-radius: 7px; background: rgba(250,90,32,.92); font: 700 10.5px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.aud-name{ color: #fff; font: 600 clamp(19px, 1.6vw, 22px)/1.15 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
.aud-xl .aud-name, .aud-l .aud-name{ font-size: clamp(24px, 2.3vw, 32px); }
/* the whole tile is the link; sub-links sit above it */
.aud-name::after{ content: ""; position: absolute; inset: 0; }
.aud-name:focus-visible{ outline: none; }
.aud-name:focus-visible::after{ outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 24px; }
.aud-text{ max-width: 46ch; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.72); }
.aud-chips{ position: relative; z-index: 1; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; }
.aud-chips a{ display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 8px; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font: 600 12.5px/1 var(--font-display); transition: background-color .2s; }
.aud-chips a:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.aud-go{ position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(10,10,12,.5); border: 1px solid rgba(255,255,255,.25); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .3s, border-color .3s, transform .45s var(--ease); }
@media (hover: hover) and (pointer: fine){
  .aud-tile:hover .aud-media img{ transform: scale(1.06); }
  .aud-tile:hover .aud-go{ background: var(--accent); border-color: var(--accent); transform: rotate(-45deg); }
  .aud-chips a:hover{ background: var(--accent); }
}
@media (max-width: 1100px){
  .aud-tile{ grid-column: span 6; }
  .aud-xl, .aud-l{ grid-column: 1 / -1; }
}
@media (max-width: 620px){
  .aud-tile, .aud-xl, .aud-l{ grid-column: 1 / -1; min-height: 280px; }
}

/* ---------------- effect: research facts + robot density ---------------- */
.aue-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: clamp(32px, 5vh, 56px); align-items: stretch; }
.aue-facts{ margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; container-type: inline-size; }
.aue-facts > div{ display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2vw, 26px); border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.aue-facts dd{ margin: 0; display: flex; align-items: baseline; flex-wrap: nowrap; gap: 6px;
  font: 800 min(clamp(28px, 3vw, 44px), 7.6cqi)/1 'Unbounded', var(--font-display); letter-spacing: -.04em; white-space: nowrap;
  background: linear-gradient(168deg, #ffd01a 0%, #ffb61c 30%, #ff9827 54%, #ff7a3d 78%, #fa5a20 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aue-facts dd i{ font: 700 .36em/1 var(--font-display); font-style: normal; letter-spacing: 0; -webkit-text-fill-color: var(--accent-2); }
.aue-facts dt{ font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.66); }
.aue-chart{ margin: 0; padding: clamp(20px, 2.4vw, 32px); border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; }
.aue-chart figcaption{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.aue-chart figcaption b{ font: 600 17px/1.25 var(--font-display); }
.aue-chart figcaption span{ flex: none; font-size: 12.5px; color: rgba(255,255,255,.5); }
.aue-chart ul{ list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 20px; }
.aue-chart li{ display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) 56px; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,.78); }
.aue-chart li i{ display: block; height: 18px; width: var(--w); min-width: 4px; border-radius: 4px; background: rgba(255,255,255,.28); transform-origin: 0 50%; transition: transform 1.1s var(--ease); }
.aue-chart li b{ text-align: right; font: 700 14px/1 'Unbounded', var(--font-display); font-variant-numeric: tabular-nums; color: #fff; }
.aue-chart li.is-avg i{ background: rgba(255,255,255,.6); }
.aue-chart li.is-ru{ color: #fff; }
.aue-chart li.is-ru i{ background: linear-gradient(90deg, #ffd01a, #fa5a20); }
.aue-chart li.is-ru b{ color: var(--accent-2); }
/* bars grow once when the chart comes into view (auto.js sets the class) */
.aue-chart.is-armed li i{ transform: scaleX(0); }
.aue-chart.is-armed.is-in li i{ transform: scaleX(1); }
.aue-chart.is-armed li:nth-child(2) i{ transition-delay: .08s; } .aue-chart.is-armed li:nth-child(3) i{ transition-delay: .16s; }
.aue-chart.is-armed li:nth-child(4) i{ transition-delay: .24s; } .aue-chart.is-armed li:nth-child(5) i{ transition-delay: .32s; }
.aue-goal{ margin: auto 0 0; padding-top: 18px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.62); }
.aue-src{ margin-top: 18px; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.45); }
.aue-src a{ color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.22); transition: color .2s, border-color .2s; }
@media (hover: hover) and (pointer: fine){ .aue-src a:hover{ color: var(--accent-2); border-color: var(--accent-2); } }
@media (max-width: 980px){ .aue-grid{ grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px){
  .aue-facts{ grid-template-columns: minmax(0, 1fr); }
  .aue-facts dd{ font-size: min(36px, 11cqi); }
  .aue-chart li{ grid-template-columns: minmax(0, 104px) minmax(0, 1fr) 48px; gap: 8px; font-size: 13px; }
}

/* ---------------- payback calculator ---------------- */
.aur{ margin-top: clamp(32px, 5vh, 56px); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 14px; align-items: stretch; }
.aur-in{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; align-content: start; padding: clamp(20px, 2.6vw, 34px); border-radius: 26px; background: #fff; border: 1px solid rgba(10,10,12,.06); }
.aur-f{ border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; align-content: start; }
.aur-f-wide{ grid-column: 1 / -1; }
.aur-f label, .aur-f legend{ font: 600 14px/1.3 var(--font-display); color: var(--ink); padding: 0; }
.aur-f small{ font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.aur-f output{ font: 800 15px 'Unbounded', var(--font-display); color: var(--accent-ink); }
.aur-f input[type=text], .aur-f input[type=number]{
  width: 100%; height: 50px; padding: 0 14px; border-radius: 12px; border: 1.5px solid rgba(10,10,12,.12); background: var(--paper);
  font: 700 17px/1 'Unbounded', var(--font-display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; transition: border-color .2s, background-color .2s;
}
.aur-f-wide input[type=text]{ height: 60px; font-size: clamp(20px, 2vw, 26px); }
.aur-f input:focus{ outline: none; border-color: var(--accent); background: #fff; }
.aur-f input[type=range]{ width: 100%; margin: 8px 0 2px; accent-color: var(--accent); }
.aur-seg{ display: flex; gap: 6px; }
.aur-seg label{ position: relative; flex: 1; }
.aur-seg input{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.aur-seg span{ display: grid; place-items: center; height: 50px; border-radius: 12px; border: 1.5px solid rgba(10,10,12,.12); background: var(--paper);
  font: 700 17px/1 'Unbounded', var(--font-display); transition: background-color .2s, border-color .2s, color .2s; }
.aur-seg input:checked + span{ background: var(--ink); border-color: var(--ink); color: #fff; }
.aur-seg input:focus-visible + span{ outline: 2px solid var(--accent); outline-offset: 2px; }

.aur-out{ position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: clamp(22px, 2.8vw, 36px); border-radius: 26px; background: var(--ink); color: #fff; }
.aur-out::before{ content: ""; position: absolute; z-index: -1; right: -18%; top: -34%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(250,90,32,.34), transparent 65%); }
.aur-out-label{ font: 600 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.aur-pay{ margin-top: 12px; container-type: inline-size; }
.aur-pay b{ display: block; font: 800 min(clamp(34px, 4.4vw, 60px), 13cqi)/1.05 'Unbounded', var(--font-display); letter-spacing: -.04em;
  background: linear-gradient(168deg, #ffd01a 0%, #ffb61c 30%, #ff9827 54%, #ff7a3d 78%, #fa5a20 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aur-split{ display: flex; gap: 3px; height: 10px; margin-top: 22px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.08); }
.aur-split i{ display: block; height: 100%; width: 50%; transition: width .5s var(--ease); }
.aur-split i:first-child{ background: #ffb61c; }
.aur-split i:last-child{ background: #fa5a20; }
.aur-rows{ margin: 18px 0 0; }
.aur-rows div{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.aur-rows dt{ position: relative; font-size: 14px; line-height: 1.35; color: rgba(255,255,255,.68); }
.aur-rows .is-labor dt, .aur-rows .is-output dt{ padding-left: 18px; }
.aur-rows .is-labor dt::before, .aur-rows .is-output dt::before{ content: ""; position: absolute; left: 0; top: .42em; width: 9px; height: 9px; border-radius: 3px; background: #ffb61c; }
.aur-rows .is-output dt::before{ background: #fa5a20; }
.aur-rows dd{ margin: 0; flex: none; font: 700 15px/1 'Unbounded', var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aur-rows .is-total dt{ color: #fff; font-weight: 600; }
.aur-rows .is-total dd{ font-size: 17px; }
.aur-cta{ margin-top: 22px; align-self: flex-start; }
.aur-note{ margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.45); }
@media (max-width: 980px){ .aur{ grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px){
  .aur-in{ grid-template-columns: minmax(0, 1fr); }
  .aur-rows div{ flex-direction: column; gap: 6px; }
  .aur-cta{ align-self: stretch; justify-content: center; }
}

/* ---------------- cases ---------------- */
.auc{ list-style: none; margin: clamp(32px, 5vh, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.auc-card{ display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); height: 100%; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid rgba(10,10,12,.06); color: var(--ink); transition: border-color .3s, box-shadow .4s var(--ease); }
.auc-media{ position: relative; min-height: 220px; overflow: hidden; background: #e9e7e2; }
.auc-media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.auc-body{ display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 26px); }
.auc-year{ align-self: flex-start; padding: 5px 9px; border-radius: 7px; background: var(--paper); font: 700 11.5px/1 'Unbounded', var(--font-display); color: var(--accent-ink); }
.auc-body b{ font: 600 clamp(17px, 1.4vw, 20px)/1.25 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.auc-text{ font-size: 14.5px; line-height: 1.5; color: var(--muted-2); }
.auc-go{ margin-top: auto; padding-top: 6px; font: 600 14px/1 var(--font-display); color: var(--accent-ink); }
.auc-go i{ display: inline-block; font-style: normal; transition: transform .3s var(--ease); }
.auc-card:focus-visible{ outline: 3px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine){
  .auc-card:hover{ border-color: rgba(250,90,32,.4); box-shadow: 0 26px 54px -36px rgba(120,52,10,.5); }
  .auc-card:hover .auc-media img{ transform: scale(1.05); }
  .auc-card:hover .auc-go i{ transform: translateX(4px); }
}
@media (max-width: 1000px){ .auc{ grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px){ .auc-card{ grid-template-columns: minmax(0, 1fr); } .auc-media{ min-height: 0; aspect-ratio: 16 / 10; } }

@media (max-width: 480px){
  .auh .pnh-h1-s{ hyphens: auto; overflow-wrap: break-word; }
}
@media (prefers-reduced-motion: reduce){
  .aut-item, .aut-item i, .aud-media img, .aud-go, .aue-chart li i, .aur-split i, .auc-card, .auc-media img, .auc-go i{ transition: none; }
  .aue-chart.is-armed li i{ transform: none; }
}

/* ============================================
   Automation sub-pages: v2 look of the shared blocks (body.v2, template product)
   ============================================ */

/* first screen = the whole window, content centred (same rule as on the hubs) */
.v2.page-product .ph{ min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.v2.page-product .ph > .wrap{ width: 100%; }

/* ---- features: a ruled list instead of cards with check marks ---- */
.fx{ list-style: none; margin: clamp(28px, 4.5vh, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.fx-n3, .fx-n5, .fx-n6{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-n2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx li{ position: relative; padding: 24px 0 26px; border-top: 1px solid rgba(10,10,12,.14); min-width: 0; }
.fx li::before{ content: ""; position: absolute; left: 0; top: -1px; width: 44px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #ffd01a, #fa5a20); transition: width .5s var(--ease); }
.fx h3{ font: 600 clamp(18px, 1.45vw, 21px)/1.22 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.fx p{ margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--muted-2); }
.tone-dark .fx li{ border-color: rgba(255,255,255,.14); }
.tone-dark .fx p{ color: rgba(255,255,255,.64); }
@media (hover: hover) and (pointer: fine){ .fx li:hover::before{ width: 100%; } }
@media (max-width: 1000px){ .fx, .fx-n3, .fx-n5, .fx-n6{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .fx, .fx-n2, .fx-n3, .fx-n5, .fx-n6{ grid-template-columns: minmax(0, 1fr); } .fx li{ padding: 20px 0 22px; } }

/* ---- sibling links ---- */
.v2 .ln-title{ font: 600 clamp(22px, 2.2vw, 30px)/1.15 var(--font-display); letter-spacing: -.02em; }
.lnx{ margin-top: 22px; }
.lnx a{ padding: 16px 18px; }
.lnx b{ font-size: 15.5px; }
.tone-paper2 .lnx a, .tone-light .lnx a{ background: #fff; }

/* ---- effect facts in a row, on any tone ---- */
.aue-row{ grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(28px, 4.5vh, 48px); }
.aue-row dd{ font-size: min(clamp(28px, 3vw, 44px), 15cqi); }
.tone-light .aue-facts > div, .tone-paper2 .aue-facts > div{ background: #fff; border-color: rgba(10,10,12,.06); }
.tone-light .aue-facts dt, .tone-paper2 .aue-facts dt{ color: var(--muted-2); }
.tone-light .aue-facts dd, .tone-paper2 .aue-facts dd{ background: linear-gradient(168deg, #ff9827 0%, #fa5a20 100%); -webkit-background-clip: text; background-clip: text; }
.tone-light .aue-facts dd i, .tone-paper2 .aue-facts dd i{ -webkit-text-fill-color: var(--accent-ink); }
.tone-light .aue-src, .tone-paper2 .aue-src{ color: var(--muted); }
.tone-light .aue-src a, .tone-paper2 .aue-src a{ color: var(--muted-2); border-color: rgba(10,10,12,.2); }
@media (max-width: 1000px){ .aue-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .aue-row dd{ font-size: min(clamp(28px, 5vw, 40px), 9cqi); } }
@media (max-width: 480px){ .aue-row{ grid-template-columns: minmax(0, 1fr); } .aue-row dd{ font-size: 34px; } }

/* ---- order steps: three- and five-step variants, dark tone ---- */
.pno-n3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pno-n5{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pno-track:has(.pno-n3) .pno-line{ right: calc(33.333% - 23px); }
.pno-track:has(.pno-n5) .pno-line{ right: calc(20% - 23px); }
.tone-dark .pno-dot{ background: #16161a; border-color: rgba(255,255,255,.2); color: #fff; }
.tone-dark .pno-steps li.is-on .pno-dot{ background: var(--accent); border-color: var(--accent); }
.tone-dark .pno-steps p{ color: rgba(255,255,255,.64); }
.tone-dark .pno-line{ background: rgba(255,255,255,.12); }
.tone-dark .pno-contact{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
@media (max-width: 900px){ .pno-n3, .pno-n5{ grid-template-columns: minmax(0, 1fr); } .pno-track:has(.pno-n3) .pno-line, .pno-track:has(.pno-n5) .pno-line{ right: auto; } }

/* long words in headings must not widen phones */
@media (max-width: 480px){
  .v2 .sh-title, .v2 .ph-h1{ overflow-wrap: anywhere; }
  .v2 .sh-row > div{ min-width: 0; }
}
@media (prefers-reduced-motion: reduce){ .fx li::before{ transition: none; } }

/* short laptop screens: sub-page heroes (incl. the facts row) must fit the window */
@media (min-width: 901px) and (max-height: 820px){
  .v2.page-product .ph{ padding-top: calc(76px + 20px); padding-bottom: 22px; }
  .v2.page-product .ph-h1{ font-size: clamp(30px, 3.5vw, 52px); }
  .v2.page-product .ph-h1-s{ font-size: clamp(28px, 3.1vw, 46px); }
  .v2.page-product .ph-lead{ margin-top: 14px; font-size: 15.5px; }
  .v2.page-product .ph-actions{ margin-top: 18px; }
  .v2.page-product .ph-visual{ max-width: clamp(300px, 54svh, 460px); }
  .v2.page-product .ph-fact{ padding-top: 13px; }
  .v2.page-product .ph-fact dd{ font-size: clamp(20px, 2vw, 28px); }
}
@media (min-width: 901px) and (max-height: 720px){
  .v2.page-product .ph-h1{ font-size: clamp(28px, 3.1vw, 44px); }
  .v2.page-product .ph-lead{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
/* hub: no extra 20px over the window on 1440×900 */
@media (min-width: 901px) and (min-height: 821px) and (max-height: 960px){
  .auh{ padding-top: calc(76px + 30px); padding-bottom: 30px; }
}

/* tables on phones: every row becomes a card with labelled values (no sideways scrolling) */
@media (max-width: 700px){
  .v2 .tb-wrap{ overflow: visible; border: 0; background: transparent; border-radius: 0; }
  .v2 .tb, .v2 .tb tbody, .v2 .tb tr, .v2 .tb th, .v2 .tb td{ display: block; width: auto; }
  .v2 .tb{ min-width: 0; width: 100%; }
  .v2 .tb th, .v2 .tb td{ min-width: 0; max-width: none; overflow-wrap: anywhere; }
  .v2 .tb thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .v2 .tb tr{ padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid rgba(10,10,12,.07); }
  .v2 .tb tr + tr{ margin-top: 10px; }
  .v2 .tb tbody th{ padding: 0 0 10px; border: 0; font: 600 17px/1.25 var(--font-display); text-align: left; }
  .v2 .tb td{ padding: 9px 0 0; margin-top: 9px; border: 0; border-top: 1px solid rgba(10,10,12,.07); font-size: 14.5px; line-height: 1.45; white-space: normal; }
  .v2 .tb td::before{ content: attr(data-label); display: block; margin-bottom: 3px; font: 700 10.5px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
}

/* ---- order: questionnaire files (hydraulics) ---- */
.pno-files{ list-style: none; margin: clamp(28px, 4.5vh, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pno-files .pst-doc{ margin-top: 0; max-width: none; height: 100%; background: #fff; border-color: rgba(10,10,12,.08); color: var(--ink); }
.pno-files .pst-doc small{ color: var(--muted); }
.pno-files .pst-doc i{ color: var(--accent); }
.pno-files + .pno-contact{ margin-top: 14px; }
.tone-dark .pno-files .pst-doc{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; }
.tone-dark .pno-files .pst-doc small{ color: rgba(255,255,255,.5); }
@media (max-width: 900px){ .pno-files{ grid-template-columns: minmax(0, 1fr); } }

/* ---------------- payback calculator on the robots landing (/industrial-robots, 2026-10-18) ----------------
   The landing keeps «one block = one screen» (style.css); here only the head of the block and a denser calculator. */
.rr{ background: var(--paper); }
.rr-wrap{ width: 100%; }
.rr-head{ display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
.rr-lead{ max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--muted-2); }
.rr .aur{ margin-top: clamp(20px, 3.6vh, 40px); }
@media (min-width: 981px) and (max-height: 860px){
  .rr .aur-in{ gap: 12px 18px; padding: 20px 24px; }
  .rr .aur-f input[type=text], .rr .aur-f input[type=number]{ height: 46px; }
  .rr .aur-f-wide input[type=text]{ height: 52px; }
  .rr .aur-seg span{ height: 46px; }
  .rr .aur-out{ padding: 22px 26px; }
  .rr .aur-rows div{ padding: 8px 0; }
}
/* short laptop screens (1000×700, 1536×730): no lead and no hints under the fields, denser rows — the block stays one screen */
@media (min-width: 981px) and (max-height: 800px){
  .rr-lead, .rr .aur-f small{ display: none; }
  .rr .aur{ margin-top: 18px; }
  .rr .aur-in{ gap: 10px 16px; padding: 18px 22px; }
  .rr .aur-out{ padding: 18px 24px; }
  .rr .aur-pay{ margin-top: 8px; }
  .rr .aur-split{ margin-top: 14px; }
  .rr .aur-rows{ margin-top: 10px; }
  .rr .aur-rows div{ padding: 6px 0; }
  .rr .aur-cta{ margin-top: 14px; }
  .rr .aur-note{ margin-top: 10px; font-size: 11.5px; }
}
.rr-wrap:not(.is-visible) > *{ opacity: 0; }
.rr-wrap.is-visible > *{ animation: av-up .8s var(--ease) backwards; }
.rr-wrap.is-visible > :nth-child(2){ animation-delay: .12s; }
@media (prefers-reduced-motion: reduce){
  .rr-wrap:not(.is-visible) > *{ opacity: 1; }
  .rr-wrap.is-visible > *{ animation: none; }
}
.rr-title{ max-width: none; }

/* first screen with products on a white card instead of a framed photo (page.hero_card; /process_automation 2026-10-19,
   the owner's picture of Festo electromechanics) */
.ph-card .ph-visual{ aspect-ratio: 16 / 9.6; }
.ph-card .ph-frame{ padding: 0; background: #fff; border: 0; }
.ph-card .ph-frame::after{ display: none; }
.ph-card .ph-photo-img{ object-fit: contain; border-radius: 30px; padding: clamp(10px, 1.4vw, 18px); background: #fff; }
.v2.page-product .ph-card .ph-visual{ max-width: min(620px, 100%); }
.ph-card .ph-badge{ display: none; }      /* the products fill the card, a badge would cover them; Festo is on the products themselves */
@media (max-width: 900px){ .v2.page-product .ph-card .ph-visual{ max-width: 560px; } }

/* ===== /robots-solutions (2026-10-28): pick — robot types on shared scales, effect, kit ===== */
.pk{ margin-top: clamp(28px, 3vw, 40px); display: grid; grid-template-columns: minmax(250px, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); column-gap: clamp(18px, 2.4vw, 36px); }
.pk-scale, .pk-row{ display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; }
.pk-scale{ padding: 0 22px 10px; }
.pk-axis{ position: relative; height: 34px; }
.pk-axis b{ position: absolute; left: 0; top: 0; font: 600 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pk-axis i{ position: absolute; bottom: 0; left: var(--p); transform: translateX(-50%); white-space: nowrap; font: 500 11.5px/1 var(--font-body); font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.pk-axis i:first-of-type{ transform: none; }
.pk-axis i:last-of-type{ transform: translateX(-100%); }
.pk-row{ padding: 18px 22px; border-radius: 22px; background: #fff; border: 1px solid rgba(10,10,12,.08); }
.pk-row + .pk-row{ margin-top: 12px; }
.pk-who{ display: flex; align-items: center; gap: 16px; min-width: 0; color: inherit; text-decoration: none; }
.pk-pic{ flex: none; width: 92px; aspect-ratio: 1; border-radius: 16px; background: #fff; border: 1px solid rgba(10,10,12,.06); overflow: hidden; display: grid; place-items: center; }
.pk-pic img{ width: 100%; height: 100%; object-fit: contain; padding: 8px; mix-blend-mode: multiply; }
.pk-name{ display: grid; gap: 5px; min-width: 0; }
.pk-name b{ font: 600 17px/1.25 var(--font-display); letter-spacing: -.01em; hyphens: manual; }
.pk-name small{ font: 600 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.pk-bar{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pk-lbl{ display: none; font: 600 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pk-track{ position: relative; height: 10px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(10,10,12,.09) 0 2px, transparent 2px 10px); }
.pk-track i{ position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--b)); min-width: 10px; border-radius: 6px;
  background: linear-gradient(90deg, #ffb61c, #ff7a3d 60%, #fa5a20); }
.pk-val{ font: 600 14.5px/1.2 var(--font-body); font-variant-numeric: tabular-nums; }
.pk-when{ margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted-2); }
.pk-when span{ display: block; margin-bottom: 4px; font: 600 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pk-note{ margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 80ch; }
@media (hover: hover) and (pointer: fine){
  .pk-who .pk-name b{ transition: color .2s; }
  .pk-who:hover .pk-name b{ color: var(--accent-ink); }
}
@media (max-width: 1000px){
  .pk{ display: block; }
  .pk-scale{ display: none; }
  .pk-row{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 22px; padding: 18px; }
  .pk-who{ grid-column: 1 / -1; }
  .pk-when{ grid-column: 1 / -1; }
  .pk-lbl{ display: block; }
}
@media (max-width: 560px){
  .pk-row{ grid-template-columns: minmax(0, 1fr); }
  .pk-pic{ width: 72px; }
}

.efx{ margin-top: clamp(28px, 3vw, 44px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
.efx-main{ margin: 0; padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: linear-gradient(160deg, #18181c, #101013); border: 1px solid rgba(255,255,255,.08); display: grid; align-content: start; gap: 12px; }
.efx-num{ margin: 0; display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: baseline; gap: 8px; font: 800 clamp(48px, 5.4vw, 84px)/.95 'Unbounded', var(--font-display); letter-spacing: -.04em;
  background: linear-gradient(168deg, #ffd01a 0%, #ffb61c 30%, #ff9827 54%, #ff7a3d 78%, #fa5a20 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.efx-num i{ font: 700 .32em/1 var(--font-display); font-style: normal; letter-spacing: 0; -webkit-text-fill-color: var(--accent-2); }
.efx-txt{ margin: 0; max-width: 34ch; font-size: 17px; line-height: 1.45; color: rgba(255,255,255,.82); }
.efx-bars{ margin-top: clamp(14px, 2vw, 26px); display: grid; gap: 12px; }
.efx-bar{ display: grid; grid-template-columns: 110px minmax(0, 1fr) 74px; align-items: center; gap: 14px; font-size: 13.5px; color: rgba(255,255,255,.66); }
.efx-bar i{ position: relative; height: 26px; border-radius: 8px; background: rgba(255,255,255,.05); }
.efx-bar i::before{ content: ""; position: absolute; inset: 0 calc(100% - var(--lo)) 0 0; border-radius: 8px; background: rgba(255,255,255,.28); }
.efx-bar.is-after i::before{ background: linear-gradient(90deg, #ffb61c, #fa5a20); border-radius: 8px 0 0 8px; }
.efx-bar.is-after i::after{ content: ""; position: absolute; top: 0; bottom: 0; left: var(--lo); right: calc(100% - var(--hi)); border-radius: 0 8px 8px 0; background: repeating-linear-gradient(135deg, rgba(250,90,32,.9) 0 4px, rgba(250,90,32,.35) 4px 8px); }
.efx-bar b{ font: 700 15px/1 var(--font-body); color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.efx-main figcaption{ font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.45); }
.efx-list{ margin: 0; display: grid; align-content: stretch; border-radius: 28px; border: 1px solid rgba(255,255,255,.08); background: #121215; }
.efx-row{ display: grid; grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr); gap: 18px; align-items: center; padding: clamp(18px, 2.2vw, 28px) clamp(20px, 2.6vw, 34px); }
.efx-row + .efx-row{ border-top: 1px solid rgba(255,255,255,.08); }
.efx-row dd{ margin: 0; display: flex; align-items: baseline; gap: 6px; font: 800 clamp(30px, 3vw, 42px)/1 'Unbounded', var(--font-display); letter-spacing: -.03em; color: #fff; white-space: nowrap; }
.efx-row dd i{ font: 700 .4em/1 var(--font-display); font-style: normal; color: var(--accent-2); }
.efx-row dt{ font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.72); }
.efx-den dd{ font: 600 15px/1.35 var(--font-body); letter-spacing: 0; white-space: normal; color: rgba(255,255,255,.86); }
.efx-den dt{ display: grid; gap: 10px; }
.efx-d{ display: grid; grid-template-columns: 128px minmax(0, 1fr) 36px; align-items: center; gap: 10px; font-size: 13.5px; }
.efx-d em{ font-style: normal; color: rgba(255,255,255,.66); }
.efx-d i{ height: 12px; border-radius: 6px; width: var(--w); background: rgba(255,255,255,.4); }
.efx-d.is-ru i{ background: linear-gradient(90deg, #ffb61c, #fa5a20); min-width: 8px; }
.efx-d b{ font: 700 15px/1 var(--font-body); color: #fff; text-align: right; }
.efx-d.is-ru b{ color: var(--accent-2); }
@media (max-width: 1000px){ .efx{ grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px){
  .efx-row{ grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .efx-bar{ grid-template-columns: 92px minmax(0, 1fr) 64px; gap: 10px; }
  .efx-d{ grid-template-columns: 104px minmax(0, 1fr) 32px; }
}

.kt{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.kt-media{ margin: clamp(24px, 3vw, 36px) 0 0; border-radius: 28px; overflow: hidden; background: #fff; }
.kt-media img{ display: block; width: 100%; height: auto; }
.kt-cap{ margin: 0; padding: 14px 20px 16px; font-size: 13.5px; line-height: 1.45; color: var(--muted-2); border-top: 1px solid rgba(10,10,12,.06); }
.kt-list{ margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kt-list li{ display: grid; grid-template-rows: auto auto 1fr; gap: 8px; padding: 20px 20px 22px; border-radius: 20px; background: #fff; border: 1px solid rgba(10,10,12,.07); }
.kt-ico{ width: 48px; height: 48px; margin-bottom: 6px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(168deg, rgba(255,208,26,.18), rgba(250,90,32,.16)); color: var(--accent-ink); }
.kt-ico svg{ width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kt-list b{ font: 600 17px/1.25 var(--font-display); letter-spacing: -.01em; }
.kt-list p{ margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted-2); }
@media (max-width: 1000px){
  .kt{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px){ .kt-list{ grid-template-columns: minmax(0, 1fr); } }

/* large cut-out in the first screen (page flag hero_xl, /robots-solutions 2026-10-28) */
.ph-xl .ph-wrap{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.ph-xl .ph-visual{ max-width: 720px; aspect-ratio: 1.12; margin-right: clamp(-48px, -2.5vw, 0px); }
.ph-xl .ph-sun{ width: 62%; left: 56%; top: 46%; }
@media (min-width: 901px) and (max-height: 820px){
  .v2.page-product .ph-xl .ph-visual{ max-width: clamp(400px, 72svh, 600px); }
}
@media (max-width: 900px){
  .ph-xl .ph-wrap{ grid-template-columns: minmax(0, 1fr); }
  .ph-xl .ph-visual{ max-width: 520px; margin-right: 0; margin-bottom: -12px; }
}
@media (max-width: 760px){
  .ph-xl .ph-visual{ max-width: min(360px, 100%); }
}