/* Shared by all five demo concepts.
   No-JavaScript fallback: <html class="no-js"> is switched to "js" by an inline script in <head>,
   so these rules only apply when JavaScript is off or failed to load. */
.no-js [role="tablist"], .no-js .nav-toggle, .no-js .sticky-cta, .no-js .header-cta { display: none !important; }
.no-js [role="tabpanel"][hidden] { display: block !important; }
.no-js .ind-panel[hidden], .no-js .d-panel[hidden] { display: grid !important; }
.no-js [role="tabpanel"] + [role="tabpanel"] { margin-top: 24px; }
.no-js .subtabs-layout { display: block !important; }
.no-js .site-header { position: static !important; height: auto !important; }
.no-js .site-header .container { flex-wrap: wrap; padding-block: 10px; }
.no-js .site-nav { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; padding: 0 !important; flex-basis: 100%; max-height: none !important; background: transparent !important; }
@media (min-width: 1024px) { .no-js .site-nav { flex-basis: auto; } .no-js .site-header .container { flex-wrap: nowrap; } }

/* Honeypot field for the demo form (hidden from people, visible to naive bots) */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
button[aria-busy="true"] { opacity: .75; cursor: progress; }
.form-error-box { border: 1px solid #f3c2bd; background: #fff4f2; color: #b42318; border-radius: 10px; padding: 12px 14px; font-size: .9063rem; font-weight: 500; }
.form-error-box a { color: inherit; }

/* =========================================================
   TPM app screen — faithful HTML rebuild of the real Android app screens
   (labels, colours and layout copied from the screenshots on tpmsystem.it),
   crisp at any size. Usage: <div class="tpm-phone" style="--pw:240px">…</div>
   ========================================================= */
.tpm-phone { --pw: 240px; container-type: inline-size; width: var(--pw); max-width: 100%; aspect-ratio: 305 / 640; flex: none;
  /* the frame is sized from --pw: cq units on the container itself would resolve against an ancestor */
  padding: calc(var(--pw) * .028); border-radius: calc(var(--pw) * .14); background: linear-gradient(160deg, #2a2a30, #0b0b0d 60%);
  box-shadow: inset 0 0 0 calc(var(--pw) * .006) #45454c, 0 0 0 1px rgb(0 0 0 / .25); position: relative; }
.tpm-phone::after { content: ""; position: absolute; right: calc(var(--pw) * -.008); top: 26%; width: calc(var(--pw) * .012); height: 12%; border-radius: 2px; background: #2a2a2e; }
.tp-screen { position: relative; height: 100%; border-radius: 10.5cqw; overflow: hidden; background: #f1f0f3; display: flex; flex-direction: column;
  font-family: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif; color: #111; line-height: 1.2; -webkit-font-smoothing: antialiased; user-select: none; }
.tp-status { position: relative; height: 9cqw; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 7cqw; background: #fff; font-size: 3.6cqw; color: #555; }
.tp-status::before { content: ""; position: absolute; left: 50%; top: 2.2cqw; width: 4.6cqw; height: 4.6cqw; margin-left: -2.3cqw; border-radius: 50%; background: #0b0b0d; }
.tp-sys { display: inline-flex; gap: 1.2cqw; align-items: center; }
.tp-sys > span { display: block; width: 3.2cqw; height: 3.2cqw; background: #555; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.tp-sys > span + span { width: 1.8cqw; height: 3.4cqw; border-radius: .5cqw; clip-path: none; }
.tp-head { position: relative; height: 12cqw; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; border-bottom: .4cqw solid #e6e4ea; }
.tp-head .tp-title { font-size: 5cqw; font-weight: 700; margin-left: -8cqw; }
.tp-logout { position: absolute; right: 4.5cqw; display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.7cqw 3.2cqw; border-radius: 99px; background: #ee5e49; color: #fff; font-size: 3.7cqw; font-weight: 500; }
.tp-logout svg { width: 3.8cqw; height: 3.8cqw; fill: none; stroke: currentColor; stroke-width: 2.2; }
.tp-welcome { flex: none; margin: 0 3.4cqw; padding: 6.5cqw 0; background: #fff; text-align: center; font-size: 6.4cqw; font-weight: 700; color: #1d1d1f; border-bottom: .4cqw solid #e6e4ea; }
.tp-card { flex: 1; margin: 5cqw 3.4cqw 0; padding: 4cqw; border-radius: 3cqw 3cqw 0 0; background: #fff; box-shadow: 0 .6cqw 2cqw rgb(0 0 0 / .08); display: grid; align-content: start; gap: 3.3cqw; }
.tp-btn { position: relative; display: flex; align-items: center; gap: 3.2cqw; height: 11.6cqw; padding: 0 4cqw; border-radius: 2.2cqw; background: #448ee6; color: #fff; font-size: 4.4cqw; font-weight: 600; }
.tp-btn svg { width: 5.2cqw; height: 5.2cqw; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tp-btn .tp-dot { margin-left: auto; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: #21b870; }
.tpm-phone.is-help .tp-help { outline: 1.1cqw solid #e5141b; outline-offset: 1.1cqw; }
.tp-ver { display: block; flex: none; margin: 0 3.4cqw; padding: 3cqw 0 5cqw; background: #fff; text-align: center; font-size: 2.9cqw; color: #7a7a80; }
.tp-dialog { display: block; position: absolute; left: 2.6cqw; right: 2.6cqw; top: 47%; padding: 5.2cqw 6cqw 4.5cqw; border-radius: 1.6cqw; background: #fff; box-shadow: 0 2cqw 6cqw rgb(0 0 0 / .28); }
.tp-dialog .tp-dt { display: block; font-size: 5.3cqw; font-weight: 500; color: #111; }
.tp-dialog .tp-dd { display: block; margin-top: 2.2cqw; font-size: 3.9cqw; color: #333; }
.tp-dialog .tp-da { display: flex; justify-content: flex-end; gap: 7cqw; margin-top: 9cqw; font-size: 3.7cqw; font-weight: 600; letter-spacing: .06em; color: #1565c0; }
.tp-dialog ~ .tp-shade { position: absolute; inset: 0; background: rgb(0 0 0 / .04); }
.tpm-phone[data-tilt] { transform: rotate(-9deg); }
@media (prefers-reduced-motion: no-preference) { .tpm-phone.float { animation: tp-float 6s ease-in-out infinite; } }
@keyframes tp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
picture { display: contents; }

.demo-link { font-size: .8125rem; opacity: .8; }

/* Scoped reset: page styles (e.g. ".help-flow p", ".step span") must never reach the phone internals */
.tpm-phone .tp-screen, .tpm-phone .tp-screen * { box-sizing: border-box; letter-spacing: normal; text-transform: none; text-align: inherit; font-style: normal; text-decoration: none; }
.tpm-phone .tp-screen span, .tpm-phone .tp-screen div { line-height: 1.2; }
.tpm-phone .tp-head, .tpm-phone .tp-welcome, .tpm-phone .tp-ver { color: #1d1d1f; }
.tpm-phone .tp-ver { color: #7a7a80; text-align: center; }
.tpm-phone .tp-welcome { text-align: center; }
.tpm-phone .tp-btn { color: #fff; }
.tpm-phone .tp-dialog .tp-da { color: #1565c0; }

/* Help-flow phones: three in a row, sized per breakpoint so they never overflow */
.help-flow .tpm-phone, .help-steps .tpm-phone { --pw: 176px; margin-inline: auto; }
@media (min-width: 560px) and (max-width: 767px) { .help-flow .tpm-phone, .help-steps .tpm-phone { --pw: 148px; } }
@media (min-width: 768px) { .help-flow .tpm-phone, .help-steps .tpm-phone { --pw: 186px; } }

/* Help flow, all concepts: the three steps always sit side by side and the phones scale with the list,
   so nothing is clipped on a phone (replaces the old sideways carousel). --pw is registered as a length
   so the cq value is resolved against the list, not re-resolved inside each phone. */
@property --pw { syntax: "<length>"; inherits: true; initial-value: 240px; }
ol.help-flow, ol.help-steps { container-type: inline-size; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  overflow: visible; margin-inline: 0; padding: 4px 0 0; scroll-snap-type: none; }
ol.help-flow > li, ol.help-steps > li { min-width: 0; max-width: none; text-align: center; }
.help-flow .tpm-phone, .help-steps .tpm-phone { --pw: min(186px, calc((100cqw - 20px) / 3)); margin-inline: auto; }
@media (max-width: 559px) { ol.help-flow p, ol.help-steps p { font-size: .8125rem; line-height: 1.35; } }

/* Tab rows: a tidy grid on phones instead of a sideways scroller with a cut-off last label */
@media (max-width: 767px) {
  .ind-tabs, .dtabs, .sd-chips, .d-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; }
  .ind-tabs [role="tab"], .dtabs [role="tab"], .sd-chips [role="tab"], .d-tabs [role="tab"] { min-width: 0; justify-content: center; padding-inline: 10px; }
  .sd-chips [role="tab"]:last-child:nth-child(odd), .dtabs [role="tab"]:last-child:nth-child(odd), .d-tabs [role="tab"]:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 359px) { .ind-tabs [role="tab"] .dot, .ind-tabs [role="tab"] > .ic { display: none; } }
@media (min-width: 560px) and (max-width: 1023px) {
  .ind-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .ind-tabs [role="tab"] { justify-content: center; }
}