/* Header buttons from the CTA briefing (v2.0, 28 Oct 2026, section 3), added by legal-kit (apply.py add_header_ctas).
   Check a plot for free (filled), Get your own configurator and Try our Modeller (outline),
   in place of Contact us; the same three at full width in the mobile menu, before Contact.
   Desktop: the navigation follows the logo; cta.js moves it into the menu when it no longer fits beside the buttons.
   Colours: the site's own blue, and the Pliera design system for the rest (square corners, hairline #c2c2c2,
   deep blue on hover, a pale blue tint, Switzer 500). forms.css uses the same tokens. */
:root{--cta-accent:#1755e5;--cta-deep:#00178d;--cta-pale:#eff2ff;--cta-line:#c2c2c2;--cta-ink:#161514;--cta-muted:rgba(0,0,0,.64)}
/* Previous / Next pager buttons (Thesis, Products, Use cases) have their own, smaller size (his call, 29 Oct 2026):
   below the 40-44 px of the CI buttons, still above the 24 px WCAG minimum target. */
:root{--pager-h:32px;--pager-px:12px;--pager-gap:6px;--pager-space:12px;--pager-font:500 12px/1 Switzer,Arial,sans-serif;--pager-icon:12px;--pager-w:96px}

.cta{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:40px;min-height:0;padding:0 18px;border:1.5px solid var(--cta-accent);border-radius:0;box-shadow:none;font:500 14px/1 Switzer,Arial,sans-serif;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s}
#header .cta-primary,#mobile-menu .cta-primary{background:var(--cta-accent);color:#fff}
#header .cta-primary:hover,#mobile-menu .cta-primary:hover{background:var(--cta-deep);border-color:var(--cta-deep)}
#header .cta-secondary,#mobile-menu .cta-secondary{background:#fff;color:var(--cta-ink);border-width:1px;border-color:var(--cta-line)}
#header .cta-secondary:hover,#mobile-menu .cta-secondary:hover{border-color:var(--cta-ink)}
.cta:focus-visible{outline:2px solid var(--cta-accent);outline-offset:2px}
/* Above the header's own guide line (header::before), which otherwise crosses the buttons' edge on phones. */
#header .header-ctas .cta{position:relative;z-index:1}
.cta-short{display:none}
.header-ctas{display:flex;gap:8px}
/* Holds the old Contact us column: app.js centres the Architecture section's skip control on it. */
#header .header-action.cta-anchor{visibility:hidden;pointer-events:none}

/* Desktop */
@media (min-width:1101px){
  #header .header-ctas{position:absolute;top:8px;right:32px;z-index:1}
  #header.cta-animate .header-ctas{transition:right .35s ease}
  #header .header-action.cta-anchor{grid-column:3;grid-row:1}
  #header.site-header nav{position:absolute;top:0;left:var(--cta-nav-left,calc(20px + var(--brand-width,157.66px) + 32px));display:flex;justify-content:flex-start;align-items:center;gap:20px;height:56px;padding:0;transition:opacity .3s,visibility .3s}
  #header.site-header nav>a,#header.site-header nav>button{width:auto}
  #header .menu-toggle{display:none}
  /* Until cta.js has measured (as soon as the page is parsed); shown anyway after 8 s if it never runs. */
  #header:not(.cta-measured) nav{opacity:0;animation:cta-nav-fallback 0s 8s forwards}
  /* Logo, navigation and buttons do not fit in one row: the navigation moves into the menu. */
  #header.cta-nav-collapsed nav{opacity:0;visibility:hidden;pointer-events:none}
  #header.cta-nav-collapsed .header-ctas{right:80px}
  #header.cta-nav-collapsed .menu-toggle{display:flex;position:absolute;top:8px;right:32px;width:40px;height:40px;min-height:0;padding:0;border:0;align-items:center;justify-content:center;background:transparent;color:inherit}
  #header.cta-nav-collapsed .menu-bars{display:flex;flex-direction:column;gap:5px;width:20px}
  #header.cta-nav-collapsed .menu-bars i{display:block;width:100%;height:1.5px;background:currentColor;transition:transform .3s,opacity .3s}
  #header .menu-toggle[aria-expanded="true"] .menu-bars i:first-child{transform:translateY(6.5px) rotate(45deg)}
  #header .menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(2){opacity:0}
  #header .menu-toggle[aria-expanded="true"] .menu-bars i:last-child{transform:translateY(-6.5px) rotate(-45deg)}
  /* The same dark menu as on phones, as a panel under the buttons. */
  html body #mobile-menu:not([hidden]){position:fixed;inset:56px 32px auto auto;width:300px;display:flex;flex-direction:column;gap:0;padding:8px 24px 20px;background:#161514;color:#fff;font:400 18px/1.25 Switzer,Arial,sans-serif;z-index:29}
  html body #mobile-menu>a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid #ffffff1f;color:#fff;font-size:18px}
  #mobile-menu .menu-ctas{display:none}
  html body #mobile-menu .mobile-menu-legal{margin-top:16px}
  #header:not(.cta-nav-collapsed)~#mobile-menu{display:none!important}
}

@keyframes cta-nav-fallback{to{opacity:1}}

/* Tablet and phone: logo, Try for free, menu. The site's own dark menu lists the navigation, the three buttons, then Contact. */
@media (max-width:1100px){
  #header .header-action.cta-anchor{display:none!important}
  #header .header-ctas{grid-column:2;grid-row:1;align-self:center}
  #header .header-ctas .cta-secondary{display:none}
  #header .cta-long{display:none}
  #header .cta-short{display:inline}
  #header .menu-toggle{grid-column:3;grid-row:1}
  #header:has(.menu-toggle[aria-expanded="true"]) .header-ctas{visibility:hidden}
  /* The three buttons are in the list now, so the space kept for the old pinned Contact us button goes. */
  #mobile-menu{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
  #mobile-menu .menu-ctas{display:flex;flex-direction:column;gap:8px;margin:4px 0}
  #mobile-menu .menu-ctas .cta{display:flex;width:100%;height:48px;min-height:48px;font-size:15px;font-weight:500}
}
@media (min-width:701px) and (max-width:1100px){
  #header.site-header,#header.site-header.on-home,#header.site-header.compact,#header.site-header:not(.compact):not(.light):not(.on-dark){grid-template-columns:1fr auto 56px}
  #header .header-ctas{margin-right:8px}
}
/* 1024 to 1100 px is still the tablet layout here, but wide enough for the three full buttons. */
@media (min-width:1024px) and (max-width:1100px){
  #header .header-ctas .cta-secondary{display:inline-flex}
  #header .cta-long{display:inline}
  #header .cta-short{display:none}
}
@media (max-width:700px){
  #header.site-header,#header.site-header.on-home,#header.site-header:not(.compact):not(.light):not(.on-dark){grid-template-columns:1fr auto 44px}
  #header .header-ctas{margin-right:4px}
  #header .header-ctas .cta{height:34px;padding:0 12px;font-size:13px}
}

/* Homepage buttons (briefing section 4): two per product slide, one under the use-case slide controls, one under
   How it works. Square, Switzer 500, like the header ones. */
.cta-primary{background:var(--cta-accent);color:#fff}
.cta-primary:hover{background:var(--cta-deep);border-color:var(--cta-deep)}
.cta-secondary{background:#fff;color:var(--cta-ink);border-width:1px;border-color:var(--cta-line)}
.cta-secondary:hover{border-color:var(--cta-ink)}
.product-ctas{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:8px;margin-top:auto}
/* Both buttons span the text column, the same width (his call, 29 Oct 2026; the briefing had the second fit its label). */
.product-ctas .cta{align-self:stretch;height:44px;padding:0 20px}
#process .process-cta{align-self:flex-start;margin-top:32px;height:44px;padding:0 20px}
@media (max-width:700px){
  .product-ctas{gap:6px}
  .product-ctas .cta{height:40px;font-size:13px}
}

/* Closing section (briefing section 4): three tiles in place of Contact us and Get a demo, then "Something else?
   Contact us.". The whole tile is the link. On the blue footer the featured first tile is filled pale blue (a blue
   outline would vanish into the footer), the others are outlined in white. */
#contact.footer .footer-actions.closing-tiles{position:absolute;left:20px;right:auto;top:84px;bottom:auto;width:calc(50% - 52px);height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;z-index:2}
/* Closing tiles: white cards with a real button each, so they stand out on the blue footer (Flo, 29 Oct 2026:
   "all blue in blue, the CTAs are not clearly visible"). The first (Residential) gets the filled button. */
.closing-tile{display:flex;flex-direction:column;gap:6px;box-sizing:border-box;min-width:0;padding:16px;border:1px solid #fff;background:#fff;color:var(--cta-ink);text-decoration:none;transition:box-shadow .2s}
.closing-tile:hover{box-shadow:0 0 0 2px var(--cta-ink)}
.closing-tile:focus-visible{outline:2px solid #fff;outline-offset:2px}
.closing-tile-label{font:500 17px/1.15 Switzer,Arial,sans-serif;letter-spacing:-.01em}
.closing-tile-text{flex:1;font:400 13px/1.35 Switzer,Arial,sans-serif;color:var(--cta-muted)}
.closing-tile-cta{align-self:flex-start;display:inline-flex;align-items:center;box-sizing:border-box;height:36px;margin-top:10px;padding:0 14px;border:1px solid var(--cta-ink);color:var(--cta-ink);font:500 13px/1 Switzer,Arial,sans-serif;white-space:nowrap}
#contact .closing-tile-featured .closing-tile-cta{background:var(--cta-accent);border-color:var(--cta-accent);color:#fff}
#contact .closing-tile-featured:hover .closing-tile-cta{background:var(--cta-deep);border-color:var(--cta-deep)}
#contact .closing-tile span span{display:inline}
#contact .closing-tile .hover-label:after{display:none}
.closing-other{grid-column:1/-1;margin:6px 0 0;font:400 13px/1.3 Switzer,Arial,sans-serif;color:rgba(255,255,255,.75)}
#contact .closing-other a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* Desktop: the footer navigation keeps one row with Contact added. */
@media (min-width:1101px){
  #contact.footer nav{grid-template-columns:repeat(6,minmax(0,1fr))}
  #contact.footer nav>a{white-space:nowrap}
}
@media (min-width:701px) and (max-width:1100px){
  #contact.footer .footer-actions.closing-tiles{left:20px;right:auto;top:250px;width:calc(var(--tablet-main,78%) - 40px)}
}
/* Phones: the tiles stack under the headline; the footer grows so they keep clear of the navigation below. */
@media (max-width:700px){
  .footer-transition #contact.footer{height:max(920px,100dvh);min-height:max(920px,100dvh)}
  #contact.footer .footer-actions.closing-tiles{left:20px;right:20px;top:223px;width:auto;grid-template-columns:1fr}
  .closing-tile{gap:3px;padding:12px 14px}
  .closing-tile-label{font-size:15px}
  .closing-tile-text{font-size:12px}
  .closing-tile-cta{height:32px;margin-top:6px;font-size:12px}
  #contact.footer:before{top:var(--closing-bottom,271px)}
}

/* Product slides and use cases: Previous and Next as labelled buttons, 44 px high, at full strength (visitors missed
   the faint 32 px arrows); cta.js adds the labels. Outline buttons like the header's secondary ones. */
#products .desktop-product-pager,#products .mobile-product-pager{gap:var(--pager-space)}
#products .desktop-product-pager .pager-button,#products .mobile-product-pager .pager-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--pager-gap);width:auto;height:var(--pager-h);min-width:0;margin:0;padding:0 var(--pager-px);border:1px solid var(--cta-line);background:#fff;color:var(--cta-ink);opacity:1;font:var(--pager-font);white-space:nowrap;transition:border-color .2s}
#products .desktop-product-pager .pager-button:hover,#products .mobile-product-pager .pager-button:hover{border-color:var(--cta-ink)}
#products .mobile-product-pager .pager-button:disabled{opacity:.35}
#products .pager-button img{width:var(--pager-icon);height:auto}
#verticals .vertical-controls{gap:var(--pager-space)}
#verticals #vertical-prev.pager-button,#verticals #vertical-next.pager-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--pager-gap);width:auto;height:var(--pager-h);padding:0 var(--pager-px);border:1px solid currentColor;color:inherit;opacity:1;font:var(--pager-font);white-space:nowrap}
#verticals #vertical-prev.pager-button:hover,#verticals #vertical-next.pager-button:hover{background:rgba(255,255,255,.1)}
#verticals #vertical-prev.pager-button:disabled,#verticals #vertical-next.pager-button:disabled{opacity:.35}
/* Thesis: the same labelled buttons, in the chapter's own colour (white on the dark steps, black on the light ones).
   Phones keep their swipe strip without buttons. */
@media (min-width:701px){
  #architecture .architecture-pager{height:var(--pager-h);gap:var(--pager-space)}
  #architecture .architecture-pager .pager-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--pager-gap);width:auto;height:var(--pager-h);padding:0 var(--pager-px);border:1px solid currentColor;color:inherit;opacity:1;font:var(--pager-font);white-space:nowrap;transition:background-color .2s,opacity .2s}
  #architecture .architecture-pager .pager-button:hover:not(:disabled){background:color-mix(in srgb,currentColor 12%,transparent)}
  #architecture .architecture-pager .pager-button:disabled{opacity:.35}
  #architecture .architecture-pager .pager-button img{width:var(--pager-icon);height:auto}
}
#verticals .vertical-actions{position:absolute;left:0;top:calc(100% + 28px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
#verticals .vertical-actions .vertical-cta{position:static;height:44px;padding:0 20px}
#verticals .vertical-see{font:500 14px/1.3 Switzer,Arial,sans-serif;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;white-space:nowrap}
#verticals [data-vertical][data-configurator][aria-selected="true"],#verticals .vertical-slide[data-configurator]:not([aria-hidden="true"]){cursor:pointer}
#verticals [data-vertical][data-configurator][aria-selected="true"]:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
/* Phones: the picture starts right under the controls and there is no free space around it, so one solid button sits
   on its top edge: See the configurator where the use case has a slide, otherwise Get your own configurator. */
@media (max-width:700px){
  /* Phones: on the pager's row, right of Next, as a text link, so it no longer sits half on the picture. */
  #verticals .vertical-actions{top:0;left:calc(100% + 12px);width:calc(100vw - 100% - 42px);height:var(--pager-h);justify-content:center;z-index:3}
  #verticals .vertical-actions:has(.vertical-see:not([hidden])) .vertical-cta{display:none}
  #verticals .vertical-actions .vertical-cta,#verticals .vertical-see{display:block;height:auto;padding:0;border:0;background:none;color:#fff;font:500 12px/1.3 Switzer,Arial,sans-serif;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;white-space:normal;text-wrap:balance}
}

/* The one-time swipe hint over the product picture (cta.js swipeHint). */
#products .product-image .swipe-hint{position:absolute;left:50%;top:50%;z-index:4;display:flex;align-items:center;gap:8px;padding:8px 12px;transform:translate(-50%,-50%);background:rgba(22,21,20,.82);color:#fff;font:500 12px/1 Switzer,Arial,sans-serif;white-space:nowrap;pointer-events:none}
#products .product-image .swipe-hint i{font-style:normal;animation:swipe-hint-arrow 1s ease-in-out infinite}
@keyframes swipe-hint-arrow{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
/* Phones: product cards narrower than the screen, so the next card peeks in at the right edge (apply.py
   add_mobile_product_peek slides whole cards); the Previous / Next row lines up with the card. */
@media (max-width:700px){
  #products .product-panel,#products #product-panel{right:auto!important;width:calc(100% - 80px)!important}
  #products .mobile-product-pager{right:auto!important;width:calc(100% - 80px)!important}
}
/* Previous and Next are the same width in every pager (his call, 29 Oct 2026). */
#products .desktop-product-pager .pager-button,#products .mobile-product-pager .pager-button,#verticals #vertical-prev.pager-button,#verticals #vertical-next.pager-button,#architecture .architecture-pager .pager-button{min-width:var(--pager-w)}
/* The desktop next-configurator hint (cta.js nextHint). */
.next-hint-label{position:fixed;z-index:21;display:flex;align-items:center;gap:8px;padding:10px 14px;transform:translate(-50%,-50%);background:rgba(22,21,20,.85);color:#fff;font:500 13px/1 Switzer,Arial,sans-serif;white-space:nowrap;pointer-events:none}
.next-hint-label i{font-style:normal;animation:next-hint-arrow 1s ease-in-out infinite}
@keyframes next-hint-arrow{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
#products .desktop-product-pager .pager-button.next-hint-pulse{animation:next-hint-pulse 1.2s ease-in-out 2}
@keyframes next-hint-pulse{0%,100%{box-shadow:0 0 0 0 rgba(23,85,229,0)}50%{box-shadow:0 0 0 4px rgba(23,85,229,.35);border-color:var(--cta-accent)}}
/* Phones: the Previous / Next row sits in front of the card's and section's frame lines, which run down past the
   narrowed card and would otherwise cross the Next button. */
@media (max-width:1100px){
  #products .mobile-product-pager{z-index:6}
  #products .mobile-product-pager .pager-button{position:relative;z-index:1;background:#fff}
}
/* Use cases: the Previous / Next row in front of the section's guide line (.rails, z-index 9), on the section's dark
   ground so the line does not show through the buttons. */
#verticals .vertical-controls{z-index:10}
#verticals #vertical-prev.pager-button,#verticals #vertical-next.pager-button{background:#161514}
#verticals #vertical-prev.pager-button:hover:not(:disabled),#verticals #vertical-next.pager-button:hover:not(:disabled){background:#2a2928}
@media (max-width:700px){
  /* Equal-width Previous / Next leave less room beside them: keep "See the configurator →" on two lines. */
  #verticals .vertical-controls{gap:8px}
  #verticals .vertical-actions{left:calc(100% + 10px);width:calc(100vw - 100% - 40px)}
  #verticals .vertical-actions .vertical-cta,#verticals .vertical-see{font-size:11px}
}
.next-hint-label.beside-next{transform:translateY(-50%)}
.next-hint-label.beside-next i{animation-name:next-hint-arrow-back}
@keyframes next-hint-arrow-back{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
/* Products: the auto-advance timeline along the bottom of Next (cta.js timelineFrame). */
#products .desktop-product-pager .pager-button,#products .mobile-product-pager .pager-button{position:relative;overflow:hidden}
#products .next-timeline{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--cta-accent);transform:scaleX(var(--fill,0));transform-origin:left center;pointer-events:none}
/* Desktop products: Previous / Next sit below the card, on the way to the next product waiting below-left
   (apply.py drop_desktop_peek lowers it to make room). */
#products .desktop-product-pager:not([hidden]){top:calc(73.75% + 16px)}
/* Closing tiles: a button label wraps rather than run past a narrow tile's edge. */
.closing-tile-cta{max-width:100%;height:auto;min-height:36px;padding:8px 14px;line-height:1.2;white-space:normal;text-align:left}
@media (max-width:700px){.closing-tile-cta{min-height:32px;padding:7px 12px}}
/* Desktop: Previous at the left edge of the card's buttons, Next at their right edge (cta.js alignDesktopPager). */
#products .desktop-product-pager:not([hidden]){justify-content:space-between;box-sizing:border-box}

/* EN | DE (home-i18n.js), as on /gen: a small bordered pair at the end of the header navigation, larger in the menu.
   It follows the header's own text colour. A stored German choice hides the page until the words are swapped. */
html.lang-pending body{visibility:hidden}
.pl-lang{display:inline-flex;align-items:stretch;flex:none;border:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.pl-lang button{display:flex;align-items:center;justify-content:center;min-width:30px;height:24px;padding:0 8px;border:0;border-radius:0;background:none;font:400 12px/1 Switzer,Arial,sans-serif;letter-spacing:0;color:inherit;opacity:.5;cursor:pointer;transition:background-color .25s,opacity .25s}
.pl-lang button:hover{opacity:1}
.pl-lang button[aria-pressed="true"]{opacity:1;background:color-mix(in srgb,currentColor 9%,transparent)}
.pl-lang button:focus-visible{outline:2px solid var(--cta-accent);outline-offset:-2px}
#mobile-menu .pl-lang{align-self:flex-start;margin:16px 0 4px;color:#fff;border-color:#ffffff47}
#mobile-menu .pl-lang button{min-height:44px;min-width:56px;font-size:15px}
@media (min-width:701px) and (max-width:1100px){html[lang="de"] #home .hero-card-art:after{content:'Tippen & drehen'}}  /* the hero model's touch hint, where tablet-layout.css shows it */