/* Products, SparkleShift and Contact: glass panels and the enquiry form card (panel markup: scroll-landing-work/tools/panels/products.py).
   Same material as secure-ui.css: frosted sheet, lit top edge, container-relative sizes, motion that plays once. Navy (--fg) and cyan (--cy) only. */

/* ---- Glass sheets ---- */
.ui.ui-pr-hero, .ui.ui-pr-launch, .ui.ui-pr-registry, .ui.ui-pr-access, .ui.ui-ss-hero, .ui.ui-ss-roster, .ui.ui-ss-phone, .ui.ui-ss-docs, .ui.ui-ss-timeline, .ui.ui-ct2-sent{
  padding:4cqw; background:var(--glass); border:1px solid var(--glass-edge); border-radius:20px;
  -webkit-backdrop-filter:blur(30px) saturate(190%); backdrop-filter:blur(30px) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px var(--line), 0 2px 6px rgba(20,43,58,.05), 0 30px 60px -30px rgba(20,43,58,.35); }
.ui.ui-pr-hero, .ui.ui-pr-launch, .ui.ui-ss-hero{ --r:4/3; }
.ui.ui-pr-registry, .ui.ui-pr-access, .ui.ui-ss-roster, .ui.ui-ss-docs{ --r:16/10; }
.ui.ui-ss-phone{ --r:5/6; }
.ui.ui-ss-timeline{ --r:5/4; }
.ui.ui-ct2-sent{ --r:6/5; text-align:center; }
.ui.ui-pr-hero, .ui.ui-pr-launch, .ui.ui-pr-registry, .ui.ui-pr-access, .ui.ui-ss-hero, .ui.ui-ss-docs, .ui.ui-ss-timeline, .ui.ui-ct2-sent{ display:flex; flex-direction:column; justify-content:center; }
.ui.ui-ss-phone{ display:flex; flex-direction:column; }
.ui .ui-big small{ margin-left:1.4cqw; font-size:.32em; font-weight:500; letter-spacing:0; color:var(--fg-soft); }
.ui .ui-tags{ display:flex; flex-wrap:wrap; gap:1.4cqw; margin-top:2.6cqw; }
.ui .ui-btns{ flex-wrap:wrap; margin-top:3cqw; }

/* ---- Products ---- */
.ui .pr-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:3cqw; margin-top:3.4cqw; }
.ui .pr-tile{ display:flex; flex-direction:column; align-items:flex-start; gap:1.4cqw; padding:3.4cqw; border-radius:14px; background:rgba(255,255,255,.7); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 18px 40px -26px rgba(20,43,58,.3); }
.ui .pr-tile b{ font-size:3.2cqw; letter-spacing:-.015em; }
.ui .pr-tile small{ font-size:2.2cqw; line-height:1.4; color:var(--fg-soft); }
.ui .pr-tile .ui-pill{ margin-top:auto; }
.ui .pr-tile.is-next{ background:none; border-style:dashed; box-shadow:none; }
.ui .pr-ico{ display:grid; place-items:center; width:9cqw; height:9cqw; border-radius:2.4cqw; background:var(--fg); color:var(--cy); font-size:4.4cqw; font-weight:700; margin-bottom:.6cqw; }
.ui .pr-ico.is-dash{ background:none; border:1px dashed rgba(20,43,58,.35); color:var(--fg-soft); }
.ui .pr-host{ display:inline-flex; align-items:center; gap:1.4cqw; margin:3.4cqw 0 2cqw; padding:1.6cqw 2.8cqw; border-radius:999px; background:rgba(20,43,58,.06); font-size:2.8cqw; font-weight:600; letter-spacing:.005em; align-self:flex-start; }
.ui .pr-lock{ position:relative; display:inline-block; flex:none; width:2.2cqw; height:1.7cqw; margin-top:.8cqw; border-radius:.5cqw; background:var(--fg); }
.ui .pr-lock::before{ content:""; position:absolute; left:50%; bottom:100%; width:1.2cqw; height:1.1cqw; margin-left:-.6cqw; border:.34cqw solid var(--fg); border-bottom:0; border-radius:1cqw 1cqw 0 0; }
.ui .pr-lock.is-open{ background:rgba(20,43,58,.35); } .ui .pr-lock.is-open::before{ border-color:rgba(20,43,58,.35); transform:translateY(-.5cqw) rotate(-18deg); }
.ui .pr-rows{ margin:3cqw 0 0; padding:0; list-style:none; display:grid; gap:2cqw; }
.ui .pr-row{ display:flex; align-items:center; gap:2.4cqw; padding:2.6cqw 3cqw; border-radius:14px; background:rgba(255,255,255,.7); border:1px solid var(--line); font-size:2.8cqw; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.ui .pr-row b{ font-weight:700; letter-spacing:-.005em; }
.ui .pr-row .ui-pill{ margin-left:auto; }
.ui .pr-row.is-next{ background:none; border-style:dashed; box-shadow:none; }
.ui .pr-row .pr-lock{ margin-top:.4cqw; }
.ui .pr-hostp{ font-size:2.4cqw; color:var(--fg-soft); }
.ui .pr-form .pr-row .ui-lab{ width:22%; margin:0; }
.ui .pr-form .pr-row{ padding:2.4cqw 3cqw; }

/* ---- SparkleShift ---- */
.ui .ss-two{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2cqw; margin-top:3.4cqw; }
.ui .ss-mini{ padding:3.2cqw; }
.ui .ss-mini .ui-big{ font-size:7cqw; margin:.4cqw 0 2cqw; }
.ui .ss-link{ display:grid; justify-items:center; }
.ui .ss-link .ui-pill{ font-size:1.9cqw; }
.ui.ui-ss-roster{ display:grid; grid-template-columns:20% 1fr; gap:3.4cqw; align-items:start; }
.ui .ss-side{ display:flex; flex-direction:column; gap:.8cqw; padding-top:.4cqw; font-size:2.3cqw; font-weight:600; color:var(--fg-soft); }
.ui .ss-side span{ padding:1.2cqw 1.6cqw; border-radius:8px; }
.ui .ss-side span.is-on{ background:rgba(41,181,232,.14); color:var(--fg); }
.ui .ss-logo{ display:grid; place-items:center; width:6cqw; height:6cqw; margin-bottom:2cqw; border-radius:1.6cqw; background:var(--fg); color:var(--cy); font-size:3cqw; }
.ui .ss-banner{ margin:1.8cqw 0 .6cqw; }
.ui .ss-main .ui-tbl{ font-size:2.3cqw; }
.ui .ss-main .ui-tbl td:first-child{ font-weight:700; }
.ui .ss-main .ui-pill{ font-size:1.9cqw; }
.ui .ss-av{ display:inline-grid; place-items:center; width:4.6cqw; height:4.6cqw; margin-right:1.6cqw; border-radius:50%; background:var(--fg); color:#fff; font-size:1.7cqw; font-weight:700; vertical-align:middle; }
.ui .ss-gauge{ position:relative; width:46%; margin:2cqw auto 3cqw; aspect-ratio:1; }
.ui .ss-ring{ width:100%; height:100%; transform:rotate(-90deg); }
.ui .ss-ring circle{ fill:none; stroke-width:8; stroke-linecap:round; }
.ui .ss-ring .t{ stroke:rgba(20,43,58,.08); }
.ui .ss-ring .v{ stroke:var(--cy); stroke-dasharray:264; stroke-dashoffset:calc((1 - var(--v)) * 264); }
.ui .ss-rn{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.ui .ss-rn b{ font-size:9cqw; font-weight:600; letter-spacing:-.04em; line-height:1; }
.ui .ss-rn small{ font-size:2.2cqw; font-weight:600; color:var(--fg-soft); }
.ui .ss-checks{ margin:0; padding:0; list-style:none; font-size:2.6cqw; }
.ui .ss-checks li{ display:grid; grid-template-columns:auto 1fr; column-gap:2cqw; padding:1.8cqw 0; border-top:1px solid var(--line); }
.ui .ss-checks b{ font-weight:700; } .ui .ss-checks span{ grid-column:2; font-size:.85em; color:var(--fg-soft); }
.ui .ss-tick{ grid-row:span 2; align-self:center; position:relative; width:4cqw; height:4cqw; border-radius:50%; background:var(--cy); }
.ui .ss-tick::after{ content:""; position:absolute; left:1.35cqw; top:.8cqw; width:1cqw; height:1.8cqw; border:solid var(--fg); border-width:0 .4cqw .4cqw 0; transform:rotate(40deg); }
.ui .ss-job{ display:flex; align-items:center; gap:2cqw; margin-top:auto; padding:2.6cqw 3cqw; font-size:2.6cqw; }
.ui .ss-job .ui-lab{ margin:0; }
.ui .ss-job .ui-btn{ margin-left:auto; }
.ui .ss-up{ display:flex; align-items:center; gap:2cqw; margin:2cqw 0 .6cqw; }
.ui .ss-delta{ padding:.5em 1em; border-radius:999px; background:var(--cy); color:var(--fg); font-size:2.1cqw; font-weight:700; }
.ui.ui-ss-docs .ui-tbl{ font-size:2.4cqw; }
.ui.ui-ss-docs .ui-pill{ font-size:1.9cqw; }
.ui .ss-tl{ position:relative; margin:2.6cqw 0 0; padding:0; list-style:none; }
.ui .ss-tl::before{ content:""; position:absolute; left:14cqw; top:1.2cqw; bottom:2cqw; width:1px; background:rgba(20,43,58,.18); }
.ui .ss-tl li{ position:relative; display:grid; grid-template-columns:12cqw auto 1fr; column-gap:3.4cqw; align-items:baseline; padding:1.9cqw 0; font-size:2.6cqw; }
.ui .ss-tl li::before{ content:""; position:absolute; left:13.1cqw; top:3cqw; width:1.8cqw; height:1.8cqw; border-radius:50%; background:var(--cy); box-shadow:0 0 0 .5cqw rgba(41,181,232,.2); }
.ui .ss-tl time{ font-size:.82em; font-weight:600; color:var(--fg-faint); }
.ui .ss-tl .ss-who{ grid-column:2; grid-row:1 / span 2; margin-left:3.4cqw; } .ui .ss-tl .ss-who .ui-pill{ font-size:1.8cqw; }
.ui .ss-tl b{ grid-column:3; font-weight:700; } .ui .ss-tl small{ grid-column:3; font-size:.82em; color:var(--fg-soft); }

/* ---- Thank-you ---- */
.ui .ct2-ring{ width:22%; margin:0 auto 2cqw; display:block; transform:rotate(-90deg); }
.ui .ct2-ring circle{ fill:none; stroke-width:6; } .ui .ct2-ring .t{ stroke:rgba(20,43,58,.08); } .ui .ct2-ring .v{ stroke:var(--cy); stroke-linecap:round; stroke-dasharray:264; stroke-dashoffset:0; }
.ui .ct2-ring path{ fill:none; stroke:var(--fg); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:0; transform:rotate(90deg); transform-origin:50% 50%; }
.ui .ct2-t{ font-size:5cqw; margin-bottom:1cqw; }
.ui.ui-ct2-sent .pr-rows{ text-align:left; margin-top:2.4cqw; }
.ui.ui-ct2-sent .pr-row{ font-size:2.6cqw; } .ui.ui-ct2-sent .pr-row .ui-lab{ width:16%; margin:0; }

/* ---- Entrance: once, from where each part belongs ---- */
.ui-armed:not(.is-live) .pr-tile, .ui-armed:not(.is-live) .pr-row, .ui-armed:not(.is-live) .pr-host, .ui-armed:not(.is-live) .ui-btns, .ui-armed:not(.is-live) .ui-tags,
.ui-armed:not(.is-live) .ss-mini, .ui-armed:not(.is-live) .ss-link, .ui-armed:not(.is-live) .ss-side, .ui-armed:not(.is-live) .ss-banner, .ui-armed:not(.is-live) .ss-gauge,
.ui-armed:not(.is-live) .ss-checks li, .ui-armed:not(.is-live) .ss-job, .ui-armed:not(.is-live) .ss-up, .ui-armed:not(.is-live) .ss-tl li, .ui-armed:not(.is-live) .ct2-t{ opacity:0; transform:translate3d(0,2cqw,0); }
.ui-armed:not(.is-live) .ss-ring .v{ stroke-dashoffset:264; }
.ui-armed:not(.is-live) .ct2-ring .v{ stroke-dashoffset:264; } .ui-armed:not(.is-live) .ct2-ring path{ stroke-dashoffset:60; }
.ui .pr-tile:nth-child(1), .ui .pr-row:nth-child(1), .ui .ss-mini:nth-child(1), .ui .ss-checks li:nth-child(1), .ui .ss-tl li:nth-child(1){ --d:.15; }
.ui .pr-tile:nth-child(2), .ui .pr-row:nth-child(2), .ui .ss-link, .ui .ss-checks li:nth-child(2), .ui .ss-tl li:nth-child(2){ --d:.3; }
.ui .pr-row:nth-child(3), .ui .ss-mini:nth-child(3), .ui .ss-checks li:nth-child(3), .ui .ss-tl li:nth-child(3){ --d:.45; }
.ui .ss-tl li:nth-child(4), .ui .ss-job{ --d:.6; }
.ui .pr-host{ --d:.1; } .ui .ui-btns{ --d:.3; } .ui .ui-tags{ --d:.45; } .ui .ss-side{ --d:.05; } .ui .ss-banner{ --d:.2; } .ui .ss-up{ --d:.15; } .ui .ss-gauge{ --d:.1; }
.ui .ss-ring .v{ transition-delay:.4s; } .ui .ct2-ring .v{ transition-delay:.1s; } .ui .ct2-ring path{ transition:stroke-dashoffset .7s var(--spring) .7s; } .ui .ct2-t{ --d:.9; }
.ui-armed .ss-ring .v, .ui-armed .ct2-ring .v{ transition:stroke-dashoffset 1.3s var(--spring); }

/* ---- Contact: the form is the visual ---- */
.s-hero.ct2-sec{ --glass:rgba(255,255,255,.58); --glass-edge:rgba(255,255,255,.8); --line:rgba(20,43,58,.10); --cy:#29B5E8;
  padding:calc(var(--hdr,90px) + clamp(24px,5vh,56px)) 0 clamp(40px,8vh,88px); }
.s-hero.ct2-sec .wrap{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); grid-template-rows:auto auto; align-items:start; gap:clamp(20px,3vw,40px) clamp(24px,4vw,56px); max-width:1240px; text-align:left; }
.ct2-head{ grid-column:1 / -1; }
.ct2-head .b-title{ max-width:none; }
.ct2-head .b-lede{ margin-top:16px; }
.ct2-card{ padding:clamp(20px,3vw,36px); border-radius:22px; background:var(--glass); border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(30px) saturate(190%); backdrop-filter:blur(30px) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px var(--line), 0 2px 6px rgba(20,43,58,.05), 0 30px 60px -30px rgba(20,43,58,.35); scroll-margin-top:calc(var(--hdr,90px) + 16px); }
.ct2-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); font-size:15px; font-weight:700; letter-spacing:-.005em; }
.ct2-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.7); border:1px solid var(--line); font-size:13px; font-weight:600; }
.ct2-chip::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--cy); box-shadow:0 0 0 4px rgba(41,181,232,.2); }
.ct2-card .form{ margin-top:22px; gap:18px clamp(16px,2.4vw,28px); }
.ct2-card .field label{ color:var(--fg-soft); }
.ct2-card .field input, .ct2-card .field select, .ct2-card .field textarea{ width:100%; box-sizing:border-box; min-height:44px; padding:11px 14px; font:inherit; font-size:16px; color:var(--fg);
  background:rgba(255,255,255,.62); border:1px solid rgba(20,43,58,.14); border-radius:12px; box-shadow:inset 0 1px 2px rgba(20,43,58,.05); transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.ct2-card .field textarea{ min-height:150px; }
.ct2-card .field input:focus-visible, .ct2-card .field select:focus-visible, .ct2-card .field textarea:focus-visible{ outline:none; background:#fff; border-color:var(--cy); box-shadow:0 0 0 4px rgba(41,181,232,.28); }
.ct2-card .consent input{ accent-color:var(--cy); }
.ct2-card .form-status{ flex:1 1 220px; }
.ct2-card .form button[disabled]{ opacity:.6; }
.ct2-side{ display:grid; gap:14px; align-content:start; }
.ct2-info{ padding:18px 20px; border-radius:18px; background:var(--glass); border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px var(--line), 0 24px 44px -30px rgba(20,43,58,.35); }
.ct2-info b{ display:block; margin-bottom:4px; font-size:13px; font-weight:700; letter-spacing:.03em; color:var(--fg-soft); }
.ct2-info p, .ct2-info a{ margin:0; font-size:16px; line-height:1.45; color:var(--fg); overflow-wrap:anywhere; }
.ct2-info a{ text-decoration:underline; text-decoration-color:var(--cy); text-decoration-thickness:2px; text-underline-offset:4px; }
.ct2-note{ margin:4px 4px 0; font-size:13px; color:var(--fg-faint); }
@media (max-width:900px){
  .s-hero.ct2-sec .wrap{ grid-template-columns:1fr; }
  .ct2-head .b-actions{ justify-content:flex-start; }
}
@media (prefers-reduced-transparency:reduce){
  .ui.ui-pr-hero, .ui.ui-pr-launch, .ui.ui-pr-registry, .ui.ui-pr-access, .ui.ui-ss-hero, .ui.ui-ss-roster, .ui.ui-ss-phone, .ui.ui-ss-docs, .ui.ui-ss-timeline, .ui.ui-ct2-sent, .ct2-card, .ct2-info{ background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* ---- Command deck theme: contact form and thank-you ---- */
html.t-deck .s-hero{ background:var(--vellum); }
html.t-deck .s-hero.ct2-sec{ --cy:#29B5E8; --line:var(--frost); }
html.t-deck .ct2-head .b-title{ font-size:clamp(40px,4.6vw,68px); }
html.t-deck .ct2-card{ padding:clamp(20px,3vw,32px); }
html.t-deck .ct2-bar{ font-size:12px; font-weight:500; letter-spacing:.3px; text-transform:uppercase; color:var(--slate-600); border-bottom:1px solid var(--frost); }
html.t-deck .ct2-chip{ padding:2px 10px; border:1px solid var(--slate-900); border-radius:var(--r); background:none; color:var(--slate-900); font-size:12px; font-weight:500; letter-spacing:.3px; text-transform:uppercase; }
html.t-deck .ct2-chip::before{ display:none; }
html.t-deck .ct2-card .field label{ font-size:12px; font-weight:500; letter-spacing:.3px; text-transform:uppercase; color:var(--slate-600); }
html.t-deck .ct2-card .field input, html.t-deck .ct2-card .field select, html.t-deck .ct2-card .field textarea{ background:var(--paper); border:1px solid var(--cloud); border-radius:var(--r); box-shadow:none; transition:border-color .2s ease; }
html.t-deck .ct2-card .field input:focus-visible, html.t-deck .ct2-card .field select:focus-visible, html.t-deck .ct2-card .field textarea:focus-visible{ outline:none; background:var(--paper); border-color:var(--slate-900); box-shadow:none; }
html.t-deck .ct2-card .consent input{ accent-color:var(--slate-900); }
html.t-deck .ct2-side{ gap:0; border-top:1px solid var(--slate-900); }
html.t-deck .ct2-info{ padding:16px 0; border-radius:0; background:none !important; border:0 !important; border-bottom:1px solid var(--frost) !important; box-shadow:none !important; }
html.t-deck .ct2-info b{ font-size:12px; font-weight:500; letter-spacing:.3px; text-transform:uppercase; }
html.t-deck .ct2-note{ margin:14px 0 0; }
html.t-deck .ui.ui-ct2-sent .ct2-ring .v{ stroke:var(--accent-bright); }
html.t-deck .s-hero.ct2-sec{ min-height:0; padding-top:calc(var(--hdr,90px) + 40px); }
html.t-deck .ct2-head .b-lede{ max-width:56ch; }