/* Source SHA-256: ad9bf547cca79421111ab159eb7f7f9adac95942437bedcacee61849fa4ae61b */
@scope (.cannectra-frontpage) {

:scope{
  --brand:#578b9b;--brand-dark:#365f6b;--brand-accessible:#477887;--brand-soft:#eaf4f6;
  --ink:#1e2a2f;--muted:#5c7078;--line:#d1e1e5;--surface:#fff;--canvas:#f4fafb;
  --accent:#ff8a2a;--content:1540px;--shadow:0 18px 44px rgba(30,42,47,.10);
  --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--category-grid-gap:16px;
  --frontpage-section-gap:clamp(28px,3vw,48px);
  --frontpage-header-stack:calc(var(--cannectra-service-height,34px) + var(--cannectra-header-height,86px) + var(--cannectra-category-height,50px));
}
*{box-sizing:border-box}
:scope{background:#fff;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
:scope{margin:0;background:#fff}
a{color:inherit}button{font:inherit}svg{display:block}
:scope{position:relative;isolation:isolate;background:radial-gradient(ellipse 70% 46% at 8% 10%,rgba(255,255,255,.88),transparent 70%),radial-gradient(ellipse 48% 28% at 92% 14%,rgba(93,147,164,.10),transparent 72%),radial-gradient(ellipse 52% 34% at 16% 88%,rgba(71,120,135,.09),transparent 72%),linear-gradient(180deg,#f7fbfc 0%,#eef6f7 36%,#f7fbfc 72%,#fbfcfc 100%)}

.frontpage-fold{display:grid;gap:var(--frontpage-section-gap)}
.frontpage-opening{position:relative;z-index:4;display:grid;grid-template-rows:auto auto;gap:16px;padding:0;background:transparent}
.opening-inner,.flow-inner{width:min(calc(100% - 40px),var(--content));margin-inline:auto}

.bestseller-panel{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;min-height:70px;padding:11px 20px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:radial-gradient(circle at 83% 18%,rgba(255,138,42,.16),transparent 14rem),linear-gradient(125deg,#315866 0%,#477887 58%,#5d919f 100%);box-shadow:0 10px 24px rgba(54,95,107,.13);color:#fff}
.bestseller-panel-copy{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px;min-width:0}
.bestseller-label{display:inline-flex;align-items:center;gap:9px;margin:0;color:#fff;font-size:clamp(20px,1.65vw,27px);font-weight:850;line-height:1.02;letter-spacing:-.035em;white-space:nowrap}
.bestseller-label::before{content:"";width:22px;height:2px;background:var(--accent)}
.bestseller-panel p{max-width:820px;margin:0;color:#e4f0f2;font-size:12px;line-height:1.4;text-wrap:balance}
.orange-button{display:inline-flex;min-height:38px;align-items:center;justify-content:center;gap:8px;padding:0 15px;border:0;border-radius:999px;background:var(--accent);box-shadow:0 7px 18px rgba(255,138,42,.24);color:#fff;font-size:11.5px;font-weight:850;text-decoration:none;white-space:nowrap;transition:.18s ease}
.orange-button:hover{background:#ef7d1f;box-shadow:0 12px 26px rgba(255,138,42,.34)}
.orange-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}

/* Produkt- und Kategorie-Slider verwenden bewusst denselben Rahmen. */
.slider-shell{position:relative;isolation:isolate;overflow:hidden;padding:17px;border:1px solid rgba(87,139,155,.18);border-radius:34px;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(244,250,251,.89) 58%,rgba(231,243,246,.84));box-shadow:var(--shadow)}
.product-slider-shell{padding:11px 12px}
.product-slider-shell>.slider-meta,.product-slider-shell>.product-rail{position:relative;z-index:1}
.product-slider-shell .slider-meta{margin:0 4px 3px}
.product-slider-shell .slider-progress{height:30px}
.product-slider-shell .slider-control{width:30px;height:30px}
.product-slider-shell .product-rail{padding:4px var(--rail-edge) 5px}
.slider-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin:0 4px 8px}
.slider-progress{position:relative;min-width:0;height:36px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.slider-progress-track{position:relative;width:100%;height:5px;border-radius:999px;background:linear-gradient(90deg,#315866 0%,#365f6b 52%,#477887 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.16),0 1px 4px rgba(49,88,102,.16)}
.slider-progress-segment{display:none}
.slider-progress-thumb{position:absolute;z-index:2;top:50%;left:0;width:34px;height:34px;border:1.5px solid rgba(87,139,155,.98);border-radius:50%;background:transparent;box-shadow:0 0 7px rgba(87,139,155,.46),0 0 16px rgba(54,95,107,.20);backdrop-filter:blur(1.35px) saturate(112%) contrast(105%);-webkit-backdrop-filter:blur(1.35px) saturate(112%) contrast(105%);transform:translateY(-50%);cursor:grab;touch-action:none;will-change:left,border-color,box-shadow;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease}
.slider-progress-thumb::before{content:"";position:absolute;left:0;right:0;top:50%;height:12px;transform:translateY(-50%);border-radius:999px;background:radial-gradient(circle at var(--lens-focus,50%) 50%,rgba(255,255,255,.52) 0%,rgba(220,240,244,.24) 18%,rgba(87,139,155,.08) 34%,transparent 55%),linear-gradient(90deg,#315866 0%,#365f6b 52%,#477887 100%);background-size:100% 100%,var(--lens-track-width,100%) 100%;background-position:center,var(--lens-offset,0px) 50%;background-repeat:no-repeat;opacity:.98;pointer-events:none}
.slider-progress-thumb::after{content:"";position:absolute;inset:1px;border-radius:inherit;border:1px solid rgba(213,235,240,.46);pointer-events:none;transition:border-color .18s ease}
.slider-progress-thumb:hover,.slider-progress-thumb:active,.slider-progress.is-dragging .slider-progress-thumb{border-color:rgba(255,138,42,.98);box-shadow:0 0 7px rgba(255,138,42,.50),0 0 16px rgba(255,138,42,.24)}
.slider-progress-thumb:hover::after,.slider-progress-thumb:active::after,.slider-progress.is-dragging .slider-progress-thumb::after{border-color:rgba(255,218,184,.52)}
.slider-progress-thumb:active,.slider-progress.is-dragging .slider-progress-thumb{cursor:grabbing}
.slider-progress-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.slider-controls{display:flex;gap:7px}
.slider-control{width:34px;height:34px;display:grid;place-items:center;padding:0;border:1px solid var(--brand-dark);border-radius:50%;background:var(--brand-dark);color:#fff;box-shadow:0 0 7px rgba(87,139,155,.24);cursor:pointer;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,color .18s ease}
.slider-control:hover{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 0 7px rgba(255,138,42,.38)}
.slider-control:active{border-color:#ef7d1f;background:#ef7d1f;color:#fff}
.slider-control svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.product-rail,.category-rail,.brand-track{scrollbar-width:none;overscroll-behavior-inline:contain;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
.product-rail::-webkit-scrollbar,.category-rail::-webkit-scrollbar,.brand-track::-webkit-scrollbar{display:none}
.product-rail{--rail-edge:8px;display:flex;align-items:stretch;gap:10px;overflow-x:auto;overflow-y:hidden;padding:8px var(--rail-edge);scroll-padding-inline:var(--rail-edge);scroll-snap-type:none;cursor:grab}
.product-rail.is-dragging,.category-rail.is-dragging,.brand-track.is-dragging{cursor:grabbing;user-select:none}
.product-card{-webkit-user-drag:none;position:relative;isolation:isolate;display:flex;flex-direction:column;flex:0 0 clamp(220px,20vw,300px);overflow:hidden;border:1px solid rgba(76,120,134,.2);border-radius:20px;background:#fff;box-shadow:none;color:var(--ink);text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease}
.product-card:hover{border-color:rgba(87,139,155,.42);box-shadow:0 15px 30px rgba(30,42,47,.11),0 0 0 1px rgba(87,139,155,.055)}
.product-visual{position:relative;flex:none;width:100%;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#edf6f7,#c7dde2)}
.product-badge{position:absolute;left:10px;top:10px;padding:5px 8px;border-radius:999px;background:var(--accent);color:#fff;font-size:9px;font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.product-copy{display:grid;grid-template-rows:1fr auto;flex:1;padding:12px}
.frontpage-product-title{display:block;min-height:2.8em;margin-bottom:10px;color:var(--ink);font-size:12px;font-weight:850;line-height:1.4;overflow-wrap:anywhere;text-decoration:none}
.frontpage-product-title:hover{text-decoration:underline;text-underline-offset:3px}
.product-copy-actions{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px}
.product-copy-action{min-width:0;min-height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:11px;background:#f7fbfc;color:#294952;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
.product-copy-details{padding:0 12px;font-size:11px;font-weight:900;letter-spacing:.01em}
.product-copy-cart{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.product-copy-cart svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.product-copy-action:hover{background:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(255,138,42,.26)}

.flow-stage{position:relative;isolation:isolate;overflow:hidden;background:transparent}
.flow-ambient-field{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none;contain:paint}
.ambient-disc{position:absolute;display:block;pointer-events:none;border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 22px 62px rgba(46,79,89,.055);opacity:.92}
.ambient-disc.level-back{z-index:0;opacity:.62}.ambient-disc.level-mid{z-index:1;opacity:.76}.ambient-disc.level-front{z-index:2;opacity:.88}
.disc-a{width:44%;height:16%;left:-10%;top:5%;border-radius:58% 42% 64% 36%/54% 34% 66% 46%;background:linear-gradient(135deg,rgba(255,255,255,.54),rgba(233,244,246,.26) 52%,rgba(80,131,147,.10));transform:rotate(-8deg)}
.disc-b{width:30%;height:19%;left:24%;top:13%;border-radius:42% 58% 45% 55%/60% 38% 62% 40%;background:linear-gradient(138deg,rgba(96,146,163,.18),rgba(255,255,255,.18) 58%,rgba(67,112,126,.12));transform:rotate(11deg)}
.disc-c{width:56%;height:18%;right:-8%;top:29%;border-radius:64% 36% 58% 42%/38% 56% 44% 62%;background:linear-gradient(132deg,rgba(47,89,101,.18),rgba(91,143,158,.12) 50%,rgba(255,255,255,.16));transform:rotate(-7deg);opacity:.82}
.disc-d{width:48%;height:22%;left:10%;top:43%;border-radius:40% 60% 64% 36%/58% 34% 66% 42%;background:linear-gradient(122deg,rgba(255,255,255,.42),rgba(219,238,242,.22) 55%,rgba(82,132,148,.10));transform:rotate(6deg)}
.disc-e{width:64%;height:20%;left:-12%;top:58%;border-radius:58% 42% 46% 54%/50% 62% 38% 50%;background:linear-gradient(140deg,rgba(255,255,255,.38),rgba(100,149,166,.10) 56%,rgba(54,95,107,.12));transform:rotate(-9deg);opacity:.78}
.disc-f{width:36%;height:18%;right:4%;top:70%;border-radius:66% 34% 57% 43%/44% 64% 36% 56%;background:linear-gradient(138deg,rgba(51,92,104,.16),rgba(83,134,150,.11) 54%,rgba(255,255,255,.20));transform:rotate(8deg);opacity:.8}
.disc-g{width:32%;height:13%;right:18%;top:49%;border-radius:48% 52% 38% 62%/58% 42% 58% 42%;background:linear-gradient(130deg,rgba(255,255,255,.30),rgba(245,249,249,.15) 55%,rgba(255,138,42,.08));transform:rotate(-13deg);opacity:.74}
.disc-h{width:42%;height:16%;left:32%;bottom:4%;border-radius:52% 48% 66% 34%/42% 56% 44% 58%;background:linear-gradient(136deg,rgba(255,255,255,.42),rgba(225,240,243,.22) 48%,rgba(83,134,150,.10));transform:rotate(4deg);opacity:.82}
.ambient-ribbon{position:absolute;z-index:1;pointer-events:none;border:0;background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(92,144,160,.10) 62%,rgba(255,255,255,.16));box-shadow:0 18px 56px rgba(54,95,107,.04);opacity:.58}
.ribbon-a{left:-8%;right:24%;top:36%;height:7%;border-radius:42% 58% 54% 46%/64% 40% 60% 36%;transform:rotate(-5deg)}
.ribbon-b{left:30%;right:-10%;top:62%;height:8%;border-radius:54% 46% 38% 62%/48% 62% 38% 52%;transform:rotate(7deg)}

/* Einheitlicher Abstand zwischen den eigenständigen Frontpage-Sektionen. */
.catalog-transition{position:relative;z-index:3;margin-top:0;padding:var(--frontpage-section-gap) 0 70px;background:transparent}
.catalog-transition>.flow-inner{padding-top:0}
.category-bento{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.18fr) minmax(0,.86fr);grid-template-rows:224px 224px;gap:var(--category-grid-gap);margin-top:0;padding-top:0}
.category-intro,.category-card{position:relative;overflow:hidden;border-radius:26px}
.category-intro{grid-row:1/span 2;display:flex;flex-direction:column;justify-content:space-between;padding:32px;border:1px solid rgba(87,139,155,.18);background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,248,249,.86));box-shadow:0 12px 32px rgba(30,42,47,.06);text-decoration:none;transition:border-color .22s ease,box-shadow .22s ease,background-color .22s ease}
.category-intro:hover,.category-card:hover{box-shadow:0 24px 56px rgba(30,42,47,.16);border-color:rgba(87,139,155,.30)}
.category-kicker{display:inline-flex;align-items:center;gap:9px;color:var(--brand-dark);font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.category-kicker::before{content:"";width:23px;height:2px;background:var(--accent)}
.category-icon{width:51px;height:51px;display:grid;place-items:center;border-radius:17px;background:var(--brand-soft);color:var(--brand-dark)}.category-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.category-intro h3{margin:18px 0 10px;font-size:clamp(31px,3vw,48px);line-height:1;letter-spacing:-.045em}.category-intro p{margin:0;color:var(--muted);font-size:14px;line-height:1.58}.category-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--brand-dark);font-size:12px;font-weight:850}.category-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.category-card{display:flex;padding:25px;border:1px solid rgba(87,139,155,.16);background:#fff;box-shadow:0 10px 26px rgba(30,42,47,.06);text-decoration:none;transition:.22s ease}
.category-card-main{grid-row:1/span 2;padding:34px;color:#fff;background:radial-gradient(circle at 88% 18%,rgba(255,138,42,.35),transparent 13rem),linear-gradient(140deg,#2f5965 0%,#4f8291 54%,#6f9eaa 100%);box-shadow:0 20px 48px rgba(54,95,107,.20)}
.category-card-content{display:flex;flex:1;flex-direction:column;justify-content:space-between}.category-section-card h2{max-width:620px;margin:12px 0 14px;font-size:clamp(38px,4.2vw,64px);line-height:.94;letter-spacing:-.055em;color:#fff}.category-section-card p{max-width:520px;margin:0;color:#f7fcfd;font-size:15px;line-height:1.55}.category-section-card .category-kicker{color:#e6f4f6}.category-section-card .category-intro-link{display:inline-flex;align-items:center;gap:9px;width:max-content;margin-top:26px;padding:11px 15px;border-radius:999px;background:var(--accent);box-shadow:0 10px 24px rgba(255,138,42,.28);color:#fff;font-size:12px;font-weight:850;text-decoration:none;transition:.18s ease}.category-section-card .category-intro-link:hover{background:#ef7d1f;box-shadow:0 12px 26px rgba(255,138,42,.34)}.category-section-card .category-intro-link svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.category-card h3{margin:0 0 8px;font-size:clamp(22px,2vw,34px);line-height:1.05;letter-spacing:-.035em}.category-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.category-card.category-section-card p{max-width:520px;color:#f7fcfd;font-size:15px;line-height:1.55}.tone-orange{background:radial-gradient(circle at 90% 10%,rgba(255,138,42,.15),transparent 9rem),linear-gradient(145deg,#fff 0%,#fff8f1 100%)}.tone-soft{background:radial-gradient(circle at 86% 16%,rgba(87,139,155,.14),transparent 10rem),linear-gradient(145deg,#fff 0%,#f3f9fa 100%)}
.category-rail-shell{margin-top:var(--frontpage-section-gap)}
.category-rail{--rail-edge:8px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(218px,268px);gap:12px;overflow-x:auto;padding:16px var(--rail-edge) 10px;scroll-padding-inline:var(--rail-edge);scroll-snap-type:none;cursor:grab}.rail-card{-webkit-user-drag:none;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:19px;border:1px solid var(--line);border-radius:20px;background:#fff;text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease}.rail-card:hover{border-color:var(--brand);box-shadow:0 14px 28px rgba(30,42,47,.10)}.rail-card h3{margin:0;font-size:18px}.rail-card small{color:var(--muted);font-size:11px}

.brand-section{position:relative;z-index:3;padding:36px 0 40px;margin-top:-18px;background:transparent}.brand-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:16px}.brand-heading h2{margin:10px 0 0;font-size:clamp(32px,4vw,54px);line-height:1;letter-spacing:-.045em}.brand-all-link{display:inline-flex;align-items:center;gap:9px;padding:11px 15px;border:1px solid var(--brand-dark);border-radius:999px;background:var(--brand-dark);box-shadow:0 0 7px rgba(87,139,155,.24);color:#fff;font-size:12px;font-weight:850;text-decoration:none;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,color .18s ease}.brand-all-link:hover{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 0 7px rgba(255,138,42,.38)}.brand-all-link:active{border-color:#ef7d1f;background:#ef7d1f;color:#fff}.brand-shelf{position:relative;overflow:hidden;padding:22px;border-radius:34px;background:radial-gradient(circle at 85% 10%,rgba(255,138,42,.18),transparent 20rem),linear-gradient(135deg,#213941 0%,#315866 48%,#456f7a 100%);box-shadow:0 22px 50px rgba(30,42,47,.18)}.brand-track{display:flex;gap:10px;overflow-x:auto;padding:17px 24px 14px;cursor:grab}.brand-card{-webkit-user-drag:none;position:relative;isolation:isolate;flex:0 0 clamp(220px,19vw,278px);min-height:146px;display:grid;place-items:center;padding:22px 14px;border:1px solid rgba(255,255,255,.11);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.045));color:#fff;text-align:center;text-decoration:none;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.brand-card:hover{border-color:rgba(255,255,255,.20);background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.075));box-shadow:0 12px 28px rgba(15,35,41,.15)}.brand-wordmark{display:block;font-size:clamp(20px,2vw,28px);font-weight:900;letter-spacing:-.045em}.brand-card small{display:block;margin-top:6px;color:#d8e8eb;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}


@media(max-width:900px){
  .opening-inner,.flow-inner{width:min(calc(100% - 26px),var(--content))}
  .bestseller-panel{grid-template-columns:1fr;gap:12px}.bestseller-panel-copy{grid-template-columns:1fr}.bestseller-panel p{font-size:11px}.orange-button{justify-self:start}
  .category-bento{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,86vw);grid-template-columns:none;grid-template-rows:360px;overflow-x:auto;padding:10px 2px 10px;scroll-snap-type:none}.category-bento>*{grid-row:auto!important;}
  .category-rail{grid-auto-columns:minmax(205px,74vw)}
  .brand-heading{align-items:flex-start;flex-direction:column}.brand-card{flex-basis:min(260px,72vw)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.product-card,.category-card,.brand-card{transition:none!important}}


/* ========================================================================== 
   Frontpage FAQ – dom-cards component from the supplied template.
   The original standalone page chrome stays outside this embedded component.
   ========================================================================== */
.frontpage-faq{
  --bg:#f4fafb;
  --paper:#ffffff;
  --paper-2:#f4fafb;
  --ink:#1e2a2f;
  --muted:color-mix(in srgb,var(--ink) 68%,var(--paper));
  --line:color-mix(in srgb,var(--brand) 24%,transparent);
  --brand:#578b9b;
  --brand-dark:#365f6b;
  --brand-deep:#365f6b;
  --brand-soft:color-mix(in srgb,var(--brand) 14%,var(--paper));
  --accent:#ff8a2a;
  --accent-soft:color-mix(in srgb,var(--accent) 11%,var(--paper));
  --ok:var(--brand);
  --shadow:0 20px 58px rgba(30,42,47,.10);
  --shadow-sm:0 9px 26px rgba(30,42,47,.075);
  --radius:22px;
  --radius-sm:13px;
  --ease:cubic-bezier(.2,.7,.2,1);
  position:relative;
  z-index:3;
  padding:0 0 96px;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.frontpage-faq .flow-inner{overflow:visible}
.frontpage-faq .cards-only-view{width:100%;max-width:none;margin:0;padding:0}
.frontpage-faq button{font:inherit}
.frontpage-faq .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.frontpage-faq :focus-visible{outline:3px solid rgba(255,138,42,.42);outline-offset:3px}
@media(max-width:900px){.frontpage-faq{padding-bottom:72px}}

@scope (.frontpage-faq) {
/* ========================================================================== 
   Interactive FAQ workspace
   ========================================================================== */
.faq-workspace {
  position: relative;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow);
}

.workspace-toolbar {
  position: relative;
  z-index: 4;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.workspace-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.workspace-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--brand-dark);
  background: var(--brand-soft);
}

.workspace-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workspace-heading h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.025em;
}

.workspace-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.workspace-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(54, 95, 107, 0.15);
  border-radius: 11px;
  background: var(--paper-2);
  color: var(--muted);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.workspace-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(87, 139, 155, 0.10);
}

.workspace-body {
  position: relative;
  z-index: 1;
  min-height: 760px;
  display: grid;
  grid-template-columns: 3fr 2fr;
  perspective: 1100px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  isolation: isolate;
}

.question-zone,
.answer-zone {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.question-zone {
  display: flex;
  flex-direction: column;
  padding: 28px 30px 30px;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(rgba(87, 139, 155, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87, 139, 155, 0.045) 1px, transparent 1px),
    linear-gradient(145deg, #f4fafb, #f4fafb);
  background-size: 28px 28px, 28px 28px, auto;
}

.zone-label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.zone-label small {
  display: block;
  margin-bottom: 5px;
  color: var(--brand-dark);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.zone-label h3 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 31px);
  line-height: 1.06;
  letter-spacing: -0.038em;
}

.zone-label p {
  max-width: 300px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
  text-align: right;
}

.card-grid {
  position: relative;
  z-index: 2;
  width: min(100%, 650px);
  aspect-ratio: 1;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 13px;
  perspective: 1100px;
  transform-style: preserve-3d;
  touch-action: manipulation;
}

.card-slot {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: 17px;
  transform-style: preserve-3d;
}

/*
   One real DOM node per card. Resting and hover content remains normal live
   browser-rendered HTML. Only after selection, the text layer can switch to a
   pre-rendered high-DPI flight cache while the same real card DOM node performs
   the established 3D exchange. After landing, normal HTML text is restored.
*/
.faq-card {
  --hover-x: 0;
  --hover-y: 0;
  --hover-z: 0;
  --hover-rx: 0rad;
  --hover-ry: 0rad;
  --hover-scale: 1;
  --hover-glow: 0;
  --swap-morph: 0;
  --swap-glow: 0;
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  isolation: isolate;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transform:
    translate3d(calc(var(--hover-x) * 1px), calc(var(--hover-y) * 1px), calc(var(--hover-z) * 1px))
    rotateX(var(--hover-rx))
    rotateY(var(--hover-ry))
    scale(var(--hover-scale));
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.faq-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid color-mix(in srgb, var(--brand-dark) 21%, transparent);
  border-radius: inherit;
  background:
    linear-gradient(145deg, var(--paper), color-mix(in srgb, var(--brand) 5%, var(--paper)));
  box-shadow:
    0 calc(7px + var(--hover-z) * .035px) calc(18px + var(--hover-z) * .11px) rgba(30, 42, 47, calc(.055 + var(--hover-glow) * .07)),
    0 0 calc(var(--hover-glow) * 22px) rgba(87, 139, 155, calc(var(--hover-glow) * .16));
  transform: none;
  transform-origin: center;
  transition: border-color .16s ease;
  pointer-events: none;
}

.faq-card:hover::before,
.faq-card:focus-visible::before {
  border-color: color-mix(in srgb, var(--brand) 58%, transparent);
}

.faq-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 52%, transparent);
  outline-offset: 4px;
}

.faq-card[data-location="answer"] {
  cursor: default;
  border-radius: 20px;
}

.faq-card[data-location="answer"]::before {
  border-color: color-mix(in srgb, var(--brand-dark) 18%, transparent);
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 138, 42, 0.13), transparent 29%),
    radial-gradient(circle at 16% 80%, rgba(87, 139, 155, 0.14), transparent 38%),
    linear-gradient(145deg, var(--paper), var(--bg));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 16px 42px rgba(30, 42, 47, .07);
}

.card-face {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  color: var(--ink);
  pointer-events: none;
  transform-origin: 50% 50%;
}

/* Outside a swap this wrapper is layout-neutral, so resting/hover cards use
   precisely the already accepted flex layout and browser text rendering. */
.card-face-content {
  display: contents;
}

.faq-card[data-location="grid"] .card-face--front,
.faq-card[data-location="answer"] .card-face--back {
  display: flex;
  visibility: visible;
  transform: none;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

.faq-card[data-location="grid"] .card-face--back,
.faq-card[data-location="answer"] .card-face--front {
  display: none;
}

/* Extracted from the auth-card swap: during flight both ORIGINAL DOM faces
   share one 3D card. Backface culling selects the visible side. In v14 the
   semantic text remains in place but is made transparent during flight when a
   current high-DPI text canvas is available; no replacement card is created. */
.faq-card.is-swapping .card-face {
  display: block;
  visibility: visible;
  padding: 0;
  transform-style: flat;
  -webkit-transform-style: flat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.faq-card.is-swapping .card-face-content {
  position: absolute;
  inset: 0 auto auto 0;
  display: flex;
  min-width: 0;
  min-height: 0;
  transform-origin: 0 0;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

.faq-card.is-swapping .card-face--front {
  transform: translateZ(.75px);
}

.faq-card.is-swapping .card-face--back {
  transform: rotateY(180deg) translateZ(.75px);
}

.card-face--front {
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
}

.faq-card.is-swapping .card-face--front .card-face-content {
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
}

.card-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  color: var(--brand-dark);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.card-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--accent);
}

.card-question {
  display: block;
  margin-top: auto;
  font-size: clamp(12px, 1.05vw, 16px);
  font-weight: 780;
  line-height: 1.22;
  letter-spacing: -.025em;
}

.card-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--brand-dark);
  font-size: 8px;
  font-weight: 820;
  letter-spacing: .055em;
  line-height: 1;
  text-transform: uppercase;
}

.card-face--back {
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
}

.faq-card.is-swapping .card-face--back .card-face-content {
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
}

.card-face--back .card-kicker {
  font-size: 10px;
}

.card-answer-title {
  display: block;
  max-width: 440px;
  margin-top: auto;
  font-size: clamp(28px, 3.1vw, 46px);
  font-weight: 820;
  line-height: .99;
  letter-spacing: -.052em;
}

.card-answer-copy {
  display: block;
  max-width: 470px;
  margin-top: 16px;
  color: var(--muted);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 480;
  line-height: 1.68;
}

.card-answer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--brand-dark);
  font-size: 9px;
  font-weight: 820;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.faq-card[data-card-type="placeholder"] .card-answer-title {
  max-width: 390px;
}


.faq-card.is-swapping {
  margin: 0;
  border-radius: 17px;
  cursor: default;
  will-change: transform;
  pointer-events: none;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  isolation: auto;
  contain: none;
  clip-path: none;
  overflow: visible;
}

.faq-card.is-swapping::before {
  inset: calc(var(--swap-morph) * -1.1px);
  border-radius: calc(17px + var(--swap-morph) * 3px);
  box-shadow:
    0 18px 46px rgba(30, 42, 47, calc(.12 + var(--swap-morph) * .045)),
    0 0 calc((var(--swap-morph) + var(--swap-glow)) * 24px) rgba(87, 139, 155, calc(var(--swap-morph) * .08 + var(--swap-glow) * .16));
  transform: none;
}

.answer-zone {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--bg);
}

.answer-zone .zone-label {
  margin-bottom: 18px;
}

.answer-target {
  position: relative;
  flex: 1;
  min-height: 520px;
  border-radius: 20px;
}

.answer-target::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 0;
  border: 1px dashed color-mix(in srgb, var(--brand-dark) 18%, transparent);
  border-radius: 14px;
  pointer-events: none;
}
.interaction-note {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.interaction-note strong {
  color: var(--ink);
}

.note-keys {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.note-key {
  min-width: 28px;
  height: 27px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  border: 1px solid #f4fafb;
  border-bottom-width: 2px;
  border-radius: 7px;
  background: #fff;
  color: #1e2a2f;
  font-size: 9px;
  font-weight: 850;
}

/* ========================================================================== 
   Supporting CTA and footer
   ========================================================================== */
.support-cta {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.support-cta small {
  display: block;
  margin-bottom: 5px;
  color: var(--brand-dark);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.support-cta h2 {
  margin: 0;
  font-size: 23px;
  letter-spacing: -0.035em;
}

.support-cta p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.cta-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid var(--brand-dark);
  border-radius: 12px;
  background: var(--brand-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(54, 95, 107, 0.18);
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease);
}

.cta-button:hover {
  transform: translateY(-2px);
  background: var(--brand-deep);
}

.site-footer {
  position: relative;
  z-index: 3;
  border-top: 1px solid rgba(54, 95, 107, 0.17);
  background: #f4fafb;
  color: var(--ink);
}

.footer-inner {
  width: min(1440px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr repeat(3, 0.75fr);
  gap: 34px;
  padding: 42px 0;
}

.footer-brand p {
  max-width: 330px;
  margin: 16px 0 0;
  color: #1e2a2f;
  font-size: 13px;
  line-height: 1.55;
}

.footer-column h3 {
  margin: 0 0 14px;
  font-size: 14px;
}

.footer-column ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-column a {
  color: #1e2a2f;
  font-size: 12px;
  text-decoration: none;
}

.footer-column a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-bottom {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px max(20px, calc((100vw - 1440px) / 2));
  background: var(--brand);
  color: #f4fafb;
  font-size: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.card-hit {
  cursor: pointer;
}

/* ========================================================================== 
   Responsive layout
   ========================================================================== */
@media (max-width: 1180px) {
  .header-nav {
    display: none;
  }

  .faq-hero {
    grid-template-columns: 1fr;
  }

  .hero-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .workspace-body {
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.8fr);
  }

  .footer-inner {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: 72px;
    --category-h: 46px;
  }

  .site-header {
    height: var(--header-h);
  }

  .header-inner {
    padding: 8px 10px;
  }

  .brand-subline,
  .header-pill {
    display: none;
  }

  .workspace-body {
    grid-template-columns: 1fr;
  }

  .question-zone {
    min-height: 760px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .answer-zone {
    min-height: 620px;
  }

  .answer-target {
    min-height: 520px;
  }

  .footer-inner {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .footer-column:last-child {
    grid-column: 2 / -1;
  }
}

@media (max-width: 640px) {
  :root {
    --announce-h: 30px;
    --header-h: 66px;
  }

  .service-item {
    height: var(--announce-h);
    padding: 0 16px;
    font-size: 9px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .brand-name {
    font-size: 17px;
  }

  .brand-subline,
  .header-button span {
    display: none;
  }

  .header-button {
    width: 42px;
    padding: 0;
    justify-content: center;
  }

  .categorybar-inner {
    padding-inline: 9px;
  }

  main {
    width: min(100% - 18px, 1480px);
    padding-top: 12px;
  }

  .faq-hero {
    min-height: 0;
    padding: 24px 20px;
    border-radius: 20px;
  }

  .faq-hero h1 {
    font-size: 39px;
  }

  .faq-hero p {
    font-size: 12px;
  }

  .hero-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .workspace-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace-status {
    align-self: stretch;
    justify-content: center;
  }

  .question-zone,
  .answer-zone {
    padding: 20px 14px;
  }

  .question-zone {
    min-height: 590px;
  }

  .zone-label {
    align-items: flex-start;
    flex-direction: column;
  }

  .zone-label p {
    max-width: none;
    text-align: left;
  }

  .card-grid {
    gap: 8px;
  }

  .card-slot,
  .faq-card {
    border-radius: 12px;
  }

  .card-face--front {
    padding: 9px;
  }

  .card-kicker {
    gap: 4px;
    font-size: 7px;
    letter-spacing: .045em;
  }

  .card-kicker::before {
    width: 5px;
    height: 5px;
    flex-basis: 5px;
  }

  .card-question {
    font-size: clamp(8px, 2.8vw, 11px);
    line-height: 1.16;
  }

  .card-action {
    display: none;
  }

  .answer-zone {
    min-height: 540px;
  }

  .answer-target {
    min-height: 450px;
  }

  .interaction-note {
    align-items: flex-start;
    flex-direction: column;
  }

  .support-cta {
    grid-template-columns: 1fr;
  }

  .cta-button {
    width: 100%;
  }

  .footer-inner {
    width: min(100% - 28px, 1440px);
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-column:last-child {
    grid-column: auto;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

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


/* ========================================================================== 
   Cannectra opaque metallic FAQ card refinement
   One virtual light field is sampled by every card in viewport coordinates.
   Cards stay fully opaque; only the common specular overlay is translucent.
   ========================================================================== */
.faq-card {
  --card-metal: #477887;
  --card-metal-deep: #365f6b;
  --shine-x: -120;
  --shine-y: -80;
  --shine-strength: .18;
  background: var(--card-metal);
  color: var(--paper-2);
}

.faq-card::before {
  border: 1px solid rgba(244, 250, 251, 0.30);
  background: linear-gradient(145deg, #4c7886 0%, #477887 48%, #365f6b 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(30, 42, 47, 0.20),
    0 calc(9px + var(--hover-z) * .04px) calc(22px + var(--hover-z) * .12px) rgba(30, 42, 47, calc(.11 + var(--hover-glow) * .08)),
    0 0 calc(8px + var(--hover-glow) * 22px) rgba(87, 139, 155, calc(.06 + var(--hover-glow) * .11));
  transition: border-color .18s ease, box-shadow .18s ease;
}

/*
   The two soft ellipses below do not restart at each tile. JavaScript gives
   every card the position of the SAME viewport-space light source relative to
   that card. Values can therefore be far below 0% or above 100%: a remote tile
   receives only the corresponding tail of the one shared field.
*/
.faq-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: calc(17px - 1px);
  background:
    radial-gradient(
      ellipse 270% 230% at calc(var(--shine-x) * 1%) calc(var(--shine-y) * 1%),
      rgba(255, 255, 255, 0.17) 0%,
      rgba(255, 255, 255, 0.095) 20%,
      rgba(255, 255, 255, 0.036) 46%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 360% 74% at calc(var(--shine-x) * 1% + 16%) calc(var(--shine-y) * 1% - 10%),
      rgba(244, 250, 251, 0.09) 0%,
      rgba(244, 250, 251, 0.048) 27%,
      rgba(244, 250, 251, 0.016) 52%,
      transparent 78%
    );
  opacity: calc(.22 + var(--shine-strength) * .68);
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(.35px);
  transition: opacity .18s ease;
}

.faq-card:hover::before,
.faq-card:focus-visible::before {
  border-color: rgba(244, 250, 251, 0.42);
}

.card-face {
  z-index: 2;
  color: var(--paper-2);
  text-shadow: 0 1px 1px rgba(30, 42, 47, 0.15);
}

.card-kicker {
  color: rgba(255, 255, 255, 0.94);
}

.card-kicker::before {
  background: var(--accent);
  box-shadow:
    0 0 0 3px rgba(255, 138, 42, 0.14),
    0 0 12px rgba(255, 138, 42, 0.26);
}

.card-question,
.card-answer-title {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(30, 42, 47, 0.14), 0 4px 18px rgba(30, 42, 47, 0.10);
}

.card-action {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: none;
}

.card-action > span[aria-hidden="true"] {
  color: #ffffff;
}

.card-answer-copy {
  color: rgba(255, 255, 255, 0.91);
}

.card-answer-foot {
  border-top-color: rgba(244, 250, 251, 0.18);
  color: rgba(255, 255, 255, 0.84);
}

.faq-card[data-location="answer"] {
  background: #477887;
}

.faq-card[data-location="answer"]::before {
  border-color: rgba(244, 250, 251, 0.30);
  background: linear-gradient(145deg, #4c7886 0%, #477887 48%, #365f6b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(30, 42, 47, 0.20),
    0 20px 50px rgba(30, 42, 47, 0.13),
    0 0 26px rgba(87, 139, 155, 0.08);
}

.faq-card[data-location="answer"]::after {
  border-radius: calc(20px - 1px);
}

.faq-card.is-swapping::before {
  border-color: rgba(244, 250, 251, 0.38);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(30, 42, 47, 0.18),
    0 18px 46px rgba(30, 42, 47, calc(.17 + var(--swap-morph) * .05)),
    0 0 calc(8px + (var(--swap-morph) + var(--swap-glow)) * 22px) rgba(87, 139, 155, calc(.07 + var(--swap-morph) * .07 + var(--swap-glow) * .11));
}

.faq-card.is-swapping::after {
  opacity: calc(.24 + var(--shine-strength) * .68 + var(--swap-glow) * .035);
  transition: none;
}


/* ========================================================================== 
   Cards-only layout + lighter metallic grid cards
   ========================================================================== */
html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 34px);
  background:
    radial-gradient(circle at 12% 18%, rgba(87, 139, 155, 0.06), transparent 31rem),
    radial-gradient(circle at 88% 82%, rgba(54, 95, 107, 0.07), transparent 29rem),
    linear-gradient(180deg, #eef3f5 0%, #e8eef0 100%);
}

.cards-only-view {
  width: min(100%, 1380px);
}

.faq-workspace {
  margin: 0;
  border-color: rgba(54, 95, 107, 0.13);
  border-radius: 28px;
  background: linear-gradient(180deg, #f4f8f9 0%, #ebf1f3 100%);
  box-shadow: 0 28px 72px rgba(30, 42, 47, 0.12);
}

.workspace-body {
  min-height: 760px;
}

.question-zone,
.answer-zone {
  padding: clamp(22px, 2.8vw, 30px);
}

.question-zone {
  justify-content: center;
  border-right: 1px solid rgba(54, 95, 107, 0.10);
  background:
    linear-gradient(rgba(87, 139, 155, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87, 139, 155, 0.032) 1px, transparent 1px),
    linear-gradient(180deg, #f1f6f7 0%, #edf3f4 100%);
  background-size: 32px 32px, 32px 32px, auto;
}

.answer-zone {
  justify-content: center;
  background: linear-gradient(180deg, #ecf1f3 0%, #e6edf0 100%);
}

.answer-target {
  min-height: 560px;
}

.answer-target::before {
  inset: 10px;
  border-color: rgba(54, 95, 107, 0.12);
}

.card-grid {
  align-self: center;
}

/* Global base remains opaque metallic with the shared light field preserved. */
.faq-card {
  --card-metal: #ccd8db;
  --card-metal-deep: #aebdc1;
  --shine-strength: .18;
  background: var(--card-metal);
}

.faq-card::before {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background:
    repeating-linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.036) 0 1px,
      rgba(255, 255, 255, 0.0) 1px 7px,
      rgba(54, 95, 107, 0.026) 7px 8px,
      rgba(54, 95, 107, 0.0) 8px 14px
    ),
    linear-gradient(145deg, #adb9be 0%, #9eafb5 35%, #8498a0 68%, #70858d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(30, 42, 47, 0.17),
    0 calc(9px + var(--hover-z) * .04px) calc(22px + var(--hover-z) * .12px) rgba(30, 42, 47, calc(.11 + var(--hover-glow) * .08)),
    0 0 calc(8px + var(--hover-glow) * 22px) rgba(87, 139, 155, calc(.05 + var(--hover-glow) * .10));
}

/* Question cards: slightly lighter, with a cool grey-metal surface and a subtle teal cast. */
.faq-card[data-location="grid"] {
  --card-metal: #9fadb2;
  --card-metal-deep: #7b9098;
}

.faq-card[data-location="grid"]::before {
  background:
    repeating-linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.038) 0 1px,
      rgba(255, 255, 255, 0) 1px 7px,
      rgba(54, 95, 107, 0.024) 7px 8px,
      rgba(54, 95, 107, 0) 8px 14px
    ),
    linear-gradient(145deg, #c6d0d3 0%, #b6c3c7 20%, #a8b7bb 42%, #93a6ad 72%, #7c929a 100%);
}

.faq-card[data-location="answer"] {
  --card-metal: #7e959d;
  --card-metal-deep: #687f87;
  background: var(--card-metal);
}

.faq-card[data-location="answer"]::before {
  border-color: rgba(255, 255, 255, 0.26);
  background:
    repeating-linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.03) 0 1px,
      rgba(255, 255, 255, 0) 1px 7px,
      rgba(54, 95, 107, 0.028) 7px 8px,
      rgba(54, 95, 107, 0) 8px 14px
    ),
    linear-gradient(145deg, #9caeb3 0%, #8ea2a9 30%, #7f979f 55%, #69828a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.23),
    inset 0 -1px 0 rgba(30, 42, 47, 0.18),
    0 20px 50px rgba(30, 42, 47, 0.13),
    0 0 26px rgba(87, 139, 155, 0.07);
}

.faq-card.is-swapping::before {
  background:
    repeating-linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.036) 0 1px,
      rgba(255, 255, 255, 0) 1px 7px,
      rgba(54, 95, 107, 0.026) 7px 8px,
      rgba(54, 95, 107, 0) 8px 14px
    ),
    linear-gradient(145deg, #b4c1c5 0%, #a1b0b5 28%, #8fa1a8 60%, #748890 100%);
}

@media (max-width: 980px) {
  body {
    display: block;
  }

  .cards-only-view {
    width: 100%;
  }

  .workspace-body {
    min-height: 0;
  }
}


/* ========================================================================== 
   Final chrome-light refinement: very light turquoise-grey metallic + dark text
   ========================================================================== */
.faq-card {
  --card-metal: #d2dfe1;
  --card-metal-deep: #b8c9cd;
  --shine-strength: .19;
  background: var(--card-metal);
}

.faq-card::before {
  border: 1px solid rgba(255, 255, 255, 0.56);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.08) 14%,
      rgba(255, 255, 255, 0.00) 28%,
      rgba(34, 47, 52, 0.045) 46%,
      rgba(255, 255, 255, 0.17) 65%,
      rgba(255, 255, 255, 0.02) 100%),
    linear-gradient(98deg,
      rgba(255, 255, 255, 0.00) 0%,
      rgba(255, 255, 255, 0.00) 24%,
      rgba(255, 255, 255, 0.15) 36%,
      rgba(255, 255, 255, 0.34) 45%,
      rgba(255, 255, 255, 0.13) 54%,
      rgba(255, 255, 255, 0.00) 68%,
      rgba(255, 255, 255, 0.00) 100%),
    repeating-linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.050) 0 1px,
      rgba(255, 255, 255, 0) 1px 7px,
      rgba(54, 95, 107, 0.016) 7px 8px,
      rgba(54, 95, 107, 0) 8px 15px
    ),
    linear-gradient(145deg, #eef5f6 0%, #e5eff0 16%, #dce8e9 36%, #d0dde0 59%, #bfced2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(30, 42, 47, 0.09),
    inset 0 16px 22px rgba(255, 255, 255, 0.15),
    0 calc(10px + var(--hover-z) * .04px) calc(24px + var(--hover-z) * .12px) rgba(30, 42, 47, calc(.10 + var(--hover-glow) * .07)),
    0 0 calc(8px + var(--hover-glow) * 20px) rgba(155, 193, 201, calc(.04 + var(--hover-glow) * .08));
}

.faq-card::after {
  background:
    radial-gradient(
      ellipse 285% 245% at calc(var(--shine-x) * 1%) calc(var(--shine-y) * 1%),
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 255, 255, 0.18) 18%,
      rgba(255, 255, 255, 0.07) 42%,
      transparent 71%
    ),
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 20%,
      rgba(255, 255, 255, 0.09) 34%,
      rgba(255, 255, 255, 0.24) 45%,
      rgba(255, 255, 255, 0.09) 56%,
      transparent 70%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 390% 84% at calc(var(--shine-x) * 1% + 15%) calc(var(--shine-y) * 1% - 12%),
      rgba(244, 250, 251, 0.14) 0%,
      rgba(244, 250, 251, 0.082) 26%,
      rgba(244, 250, 251, 0.030) 51%,
      transparent 78%
    );
  opacity: calc(.22 + var(--shine-strength) * .58);
}

.faq-card[data-location="grid"] {
  --card-metal: #dde8e9;
  --card-metal-deep: #c4d4d7;
}

.faq-card[data-location="grid"]::before {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.10) 13%,
      rgba(255, 255, 255, 0.00) 27%,
      rgba(34, 47, 52, 0.04) 45%,
      rgba(255, 255, 255, 0.19) 65%,
      rgba(255, 255, 255, 0.02) 100%),
    linear-gradient(98deg,
      rgba(255, 255, 255, 0.00) 0%,
      rgba(255, 255, 255, 0.00) 22%,
      rgba(255, 255, 255, 0.16) 35%,
      rgba(255, 255, 255, 0.36) 45%,
      rgba(255, 255, 255, 0.14) 55%,
      rgba(255, 255, 255, 0.00) 69%,
      rgba(255, 255, 255, 0.00) 100%),
    repeating-linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.054) 0 1px,
      rgba(255, 255, 255, 0) 1px 7px,
      rgba(54, 95, 107, 0.013) 7px 8px,
      rgba(54, 95, 107, 0) 8px 15px
    ),
    linear-gradient(145deg, #f6fbfb 0%, #edf5f6 16%, #e5eff0 35%, #dae6e7 57%, #c9d8db 100%);
}

.faq-card[data-location="answer"] {
  --card-metal: #d0dcde;
  --card-metal-deep: #b7c8cb;
  background: var(--card-metal);
}

.faq-card[data-location="answer"]::before {
  border-color: rgba(255, 255, 255, 0.50);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0.07) 15%,
      rgba(255, 255, 255, 0.00) 30%,
      rgba(34, 47, 52, 0.05) 47%,
      rgba(255, 255, 255, 0.15) 66%,
      rgba(255, 255, 255, 0.02) 100%),
    linear-gradient(98deg,
      rgba(255, 255, 255, 0.00) 0%,
      rgba(255, 255, 255, 0.00) 24%,
      rgba(255, 255, 255, 0.13) 36%,
      rgba(255, 255, 255, 0.30) 45%,
      rgba(255, 255, 255, 0.12) 54%,
      rgba(255, 255, 255, 0.00) 68%,
      rgba(255, 255, 255, 0.00) 100%),
    repeating-linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.046) 0 1px,
      rgba(255, 255, 255, 0) 1px 7px,
      rgba(54, 95, 107, 0.017) 7px 8px,
      rgba(54, 95, 107, 0) 8px 15px
    ),
    linear-gradient(145deg, #ebf3f4 0%, #e0eaeb 18%, #d6e1e3 41%, #cad7da 64%, #bac9cd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    inset 0 -1px 0 rgba(30, 42, 47, 0.10),
    inset 0 14px 20px rgba(255, 255, 255, 0.13),
    0 20px 50px rgba(30, 42, 47, 0.11),
    0 0 24px rgba(155, 193, 201, 0.06);
}

.card-face {
  color: #203036;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

.card-kicker {
  color: #355560;
}

.card-question,
.card-answer-title {
  color: #1d2d33;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
}

.card-action {
  color: #355560;
}

.card-action > span[aria-hidden="true"] {
  color: #28424b;
}

.card-answer-copy {
  color: rgba(29, 45, 51, 0.84);
}

.card-answer-foot {
  border-top-color: rgba(54, 95, 107, 0.12);
  color: rgba(40, 66, 75, 0.82);
}

.faq-card:hover::before,
.faq-card:focus-visible::before {
  border-color: rgba(255, 255, 255, 0.68);
}

.faq-card.is-swapping::before {
  border-color: rgba(255, 255, 255, 0.62);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.43) 0%,
      rgba(255, 255, 255, 0.08) 14%,
      rgba(255, 255, 255, 0.00) 28%,
      rgba(34, 47, 52, 0.045) 46%,
      rgba(255, 255, 255, 0.17) 66%,
      rgba(255, 255, 255, 0.02) 100%),
    linear-gradient(98deg,
      rgba(255, 255, 255, 0.00) 0%,
      rgba(255, 255, 255, 0.00) 22%,
      rgba(255, 255, 255, 0.16) 35%,
      rgba(255, 255, 255, 0.34) 45%,
      rgba(255, 255, 255, 0.13) 55%,
      rgba(255, 255, 255, 0.00) 69%,
      rgba(255, 255, 255, 0.00) 100%),
    repeating-linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.050) 0 1px,
      rgba(255, 255, 255, 0) 1px 7px,
      rgba(54, 95, 107, 0.016) 7px 8px,
      rgba(54, 95, 107, 0) 8px 15px
    ),
    linear-gradient(145deg, #f0f6f7 0%, #e5eff0 18%, #d8e4e5 42%, #cad8db 64%, #bacace 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(30, 42, 47, 0.10),
    inset 0 16px 22px rgba(255, 255, 255, 0.15),
    0 18px 46px rgba(30, 42, 47, calc(.14 + var(--swap-morph) * .04)),
    0 0 calc(8px + (var(--swap-morph) + var(--swap-glow)) * 22px) rgba(155, 193, 201, calc(.05 + var(--swap-morph) * .06 + var(--swap-glow) * .09));
}


/* ========================================================================== 
   v7 refinement: uniform metallic question cards + dark turquoise answer cards
   ========================================================================== */

/* Question cards: more even, fully metallic-grey, darker text */
.faq-card[data-location="grid"] {
  --card-metal: #c8d1d4;
  --card-metal-deep: #a9b6ba;
  background: var(--card-metal);
}

.faq-card[data-location="grid"]::before {
  border-color: rgba(255, 255, 255, 0.58);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.26) 0%,
      rgba(255, 255, 255, 0.06) 18%,
      rgba(255, 255, 255, 0.00) 34%,
      rgba(30, 42, 47, 0.03) 58%,
      rgba(255, 255, 255, 0.08) 78%,
      rgba(255, 255, 255, 0.01) 100%),
    repeating-linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.032) 0 1px,
      rgba(255, 255, 255, 0) 1px 8px,
      rgba(54, 95, 107, 0.012) 8px 9px,
      rgba(54, 95, 107, 0) 9px 16px
    ),
    linear-gradient(145deg, #e4eaec 0%, #dbe2e4 22%, #cfd7d9 46%, #bec9cc 72%, #adbabf 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    inset 0 -1px 0 rgba(30, 42, 47, 0.08),
    inset 0 10px 14px rgba(255, 255, 255, 0.08),
    0 calc(10px + var(--hover-z) * .04px) calc(24px + var(--hover-z) * .12px) rgba(30, 42, 47, calc(.10 + var(--hover-glow) * .07)),
    0 0 calc(8px + var(--hover-glow) * 20px) rgba(155, 193, 201, calc(.03 + var(--hover-glow) * .07));
}

.faq-card[data-location="grid"] .card-face {
  color: #223137;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.26);
}

.faq-card[data-location="grid"] .card-kicker {
  color: #40575e;
}

.faq-card[data-location="grid"] .card-question {
  color: #1f2d33;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.30);
}

.faq-card[data-location="grid"] .card-action {
  color: #40575e;
}

.faq-card[data-location="grid"] .card-action > span[aria-hidden="true"] {
  color: #2d434a;
}

/* Answer cards: back to dark turquoise with light text */
.faq-card[data-location="answer"] {
  --card-metal: #477887;
  --card-metal-deep: #365f6b;
  background: var(--card-metal);
  color: #f4fafb;
}

.faq-card[data-location="answer"]::before {
  border-color: rgba(244, 250, 251, 0.34);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.04) 16%,
      rgba(255, 255, 255, 0.00) 32%,
      rgba(30, 42, 47, 0.08) 54%,
      rgba(255, 255, 255, 0.08) 75%,
      rgba(255, 255, 255, 0.01) 100%),
    repeating-linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.026) 0 1px,
      rgba(255, 255, 255, 0) 1px 8px,
      rgba(30, 42, 47, 0.020) 8px 9px,
      rgba(30, 42, 47, 0) 9px 16px
    ),
    linear-gradient(145deg, #5b8e9e 0%, #4f8190 20%, #477887 48%, #3f6d7a 72%, #365f6b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(30, 42, 47, 0.20),
    0 20px 50px rgba(30, 42, 47, 0.13),
    0 0 24px rgba(87, 139, 155, 0.08);
}

.faq-card[data-location="answer"]::after {
  background:
    radial-gradient(
      ellipse 285% 245% at calc(var(--shine-x) * 1%) calc(var(--shine-y) * 1%),
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.10) 18%,
      rgba(255, 255, 255, 0.032) 42%,
      transparent 71%
    ),
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 22%,
      rgba(255, 255, 255, 0.06) 35%,
      rgba(255, 255, 255, 0.18) 45%,
      rgba(255, 255, 255, 0.06) 55%,
      transparent 68%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 390% 84% at calc(var(--shine-x) * 1% + 15%) calc(var(--shine-y) * 1% - 12%),
      rgba(244, 250, 251, 0.10) 0%,
      rgba(244, 250, 251, 0.050) 26%,
      rgba(244, 250, 251, 0.016) 51%,
      transparent 78%
    );
  opacity: calc(.20 + var(--shine-strength) * .56);
}

.faq-card[data-location="answer"] .card-face {
  color: #f4fafb;
  text-shadow: 0 1px 1px rgba(30, 42, 47, 0.15);
}

.faq-card[data-location="answer"] .card-kicker {
  color: rgba(255, 255, 255, 0.94);
}

.faq-card[data-location="answer"] .card-question,
.faq-card[data-location="answer"] .card-answer-title {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(30, 42, 47, 0.14), 0 4px 18px rgba(30, 42, 47, 0.10);
}

.faq-card[data-location="answer"] .card-action {
  color: rgba(255, 255, 255, 0.92);
}

.faq-card[data-location="answer"] .card-action > span[aria-hidden="true"] {
  color: #ffffff;
}

.faq-card[data-location="answer"] .card-answer-copy {
  color: rgba(255, 255, 255, 0.91);
}

.faq-card[data-location="answer"] .card-answer-foot {
  border-top-color: rgba(244, 250, 251, 0.18);
  color: rgba(255, 255, 255, 0.84);
}


/* ========================================================================== 
   v8 fix: flight cards already use the destination surface while rotating
   ========================================================================== */
.faq-card.is-swapping[data-flight-location="grid"] {
  --card-metal: #c8d1d4;
  --card-metal-deep: #a9b6ba;
  background: var(--card-metal);
  color: #223137;
}

.faq-card.is-swapping[data-flight-location="grid"]::before {
  border-color: rgba(255, 255, 255, 0.58);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.26) 0%,
      rgba(255, 255, 255, 0.06) 18%,
      rgba(255, 255, 255, 0.00) 34%,
      rgba(30, 42, 47, 0.03) 58%,
      rgba(255, 255, 255, 0.08) 78%,
      rgba(255, 255, 255, 0.01) 100%),
    repeating-linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.032) 0 1px,
      rgba(255, 255, 255, 0) 1px 8px,
      rgba(54, 95, 107, 0.012) 8px 9px,
      rgba(54, 95, 107, 0) 9px 16px
    ),
    linear-gradient(145deg, #e4eaec 0%, #dbe2e4 22%, #cfd7d9 46%, #bec9cc 72%, #adbabf 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    inset 0 -1px 0 rgba(30, 42, 47, 0.08),
    inset 0 10px 14px rgba(255, 255, 255, 0.08),
    0 18px 46px rgba(30, 42, 47, calc(.14 + var(--swap-morph) * .04)),
    0 0 calc(8px + (var(--swap-morph) + var(--swap-glow)) * 22px) rgba(155, 193, 201, calc(.05 + var(--swap-morph) * .06 + var(--swap-glow) * .09));
}

.faq-card.is-swapping[data-flight-location="grid"] .card-face {
  color: #223137;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.26);
}

.faq-card.is-swapping[data-flight-location="grid"] .card-kicker {
  color: #40575e;
}

.faq-card.is-swapping[data-flight-location="grid"] .card-question,
.faq-card.is-swapping[data-flight-location="grid"] .card-answer-title {
  color: #1f2d33;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.30);
}

.faq-card.is-swapping[data-flight-location="grid"] .card-action {
  color: #40575e;
}

.faq-card.is-swapping[data-flight-location="grid"] .card-action > span[aria-hidden="true"] {
  color: #2d434a;
}

.faq-card.is-swapping[data-flight-location="grid"] .card-answer-copy {
  color: rgba(31, 45, 51, 0.84);
}

.faq-card.is-swapping[data-flight-location="grid"] .card-answer-foot {
  border-top-color: rgba(54, 95, 107, 0.12);
  color: rgba(45, 67, 74, 0.82);
}

.faq-card.is-swapping[data-flight-location="answer"] {
  --card-metal: #477887;
  --card-metal-deep: #365f6b;
  background: var(--card-metal);
  color: #f4fafb;
}

.faq-card.is-swapping[data-flight-location="answer"]::before {
  border-color: rgba(244, 250, 251, 0.34);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.04) 16%,
      rgba(255, 255, 255, 0.00) 32%,
      rgba(30, 42, 47, 0.08) 54%,
      rgba(255, 255, 255, 0.08) 75%,
      rgba(255, 255, 255, 0.01) 100%),
    repeating-linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.026) 0 1px,
      rgba(255, 255, 255, 0) 1px 8px,
      rgba(30, 42, 47, 0.020) 8px 9px,
      rgba(30, 42, 47, 0) 9px 16px
    ),
    linear-gradient(145deg, #5b8e9e 0%, #4f8190 20%, #477887 48%, #3f6d7a 72%, #365f6b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(30, 42, 47, 0.20),
    0 18px 46px rgba(30, 42, 47, calc(.14 + var(--swap-morph) * .04)),
    0 0 calc(8px + (var(--swap-morph) + var(--swap-glow)) * 22px) rgba(87, 139, 155, calc(.06 + var(--swap-morph) * .07 + var(--swap-glow) * .10));
}

.faq-card.is-swapping[data-flight-location="answer"]::after {
  background:
    radial-gradient(
      ellipse 285% 245% at calc(var(--shine-x) * 1%) calc(var(--shine-y) * 1%),
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.10) 18%,
      rgba(255, 255, 255, 0.032) 42%,
      transparent 71%
    ),
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 22%,
      rgba(255, 255, 255, 0.06) 35%,
      rgba(255, 255, 255, 0.18) 45%,
      rgba(255, 255, 255, 0.06) 55%,
      transparent 68%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 390% 84% at calc(var(--shine-x) * 1% + 15%) calc(var(--shine-y) * 1% - 12%),
      rgba(244, 250, 251, 0.10) 0%,
      rgba(244, 250, 251, 0.050) 26%,
      rgba(244, 250, 251, 0.016) 51%,
      transparent 78%
    );
  opacity: calc(.20 + var(--shine-strength) * .56);
}

.faq-card.is-swapping[data-flight-location="answer"] .card-face {
  color: #f4fafb;
  text-shadow: 0 1px 1px rgba(30, 42, 47, 0.15);
}

.faq-card.is-swapping[data-flight-location="answer"] .card-kicker {
  color: rgba(255, 255, 255, 0.94);
}

.faq-card.is-swapping[data-flight-location="answer"] .card-question,
.faq-card.is-swapping[data-flight-location="answer"] .card-answer-title {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(30, 42, 47, 0.14), 0 4px 18px rgba(30, 42, 47, 0.10);
}

.faq-card.is-swapping[data-flight-location="answer"] .card-action {
  color: rgba(255, 255, 255, 0.92);
}

.faq-card.is-swapping[data-flight-location="answer"] .card-action > span[aria-hidden="true"] {
  color: #ffffff;
}

.faq-card.is-swapping[data-flight-location="answer"] .card-answer-copy {
  color: rgba(255, 255, 255, 0.91);
}

.faq-card.is-swapping[data-flight-location="answer"] .card-answer-foot {
  border-top-color: rgba(244, 250, 251, 0.18);
  color: rgba(255, 255, 255, 0.84);
}


/* ========================================================================== 
   v9 correction: surface belongs to the CARD FACE, not the flight destination.
   Front/question face = light metallic grey. Back/answer face = dark turquoise.
   During a 3D swap the visible material therefore changes only as the card turns.
   ========================================================================== */
.faq-card.is-swapping[data-flight-location="grid"],
.faq-card.is-swapping[data-flight-location="answer"] {
  background: transparent;
}

/* The flying card itself only carries depth/shadow. Its two faces own the fill. */
.faq-card.is-swapping[data-flight-location="grid"]::before,
.faq-card.is-swapping[data-flight-location="answer"]::before {
  border-color: transparent;
  background: transparent;
  box-shadow:
    0 18px 46px rgba(30, 42, 47, calc(.14 + var(--swap-morph) * .04)),
    0 0 calc(8px + (var(--swap-morph) + var(--swap-glow)) * 22px)
      rgba(87, 139, 155, calc(.04 + var(--swap-morph) * .045 + var(--swap-glow) * .07));
}

/* Disable the old whole-card specular layer during flight; each face gets the
   same shared viewport-space light field independently below. */
.faq-card.is-swapping[data-flight-location="grid"]::after,
.faq-card.is-swapping[data-flight-location="answer"]::after {
  opacity: 0;
}

.faq-card.is-swapping .card-face {
  overflow: hidden;
  border-radius: calc(17px + var(--swap-morph) * 3px);
  isolation: isolate;
}

.faq-card.is-swapping .card-face-content {
  z-index: 2;
}

.faq-card.is-swapping .card-face::before,
.faq-card.is-swapping .card-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.faq-card.is-swapping .card-face::before {
  z-index: 0;
}

.faq-card.is-swapping .card-face::after {
  z-index: 1;
  background:
    radial-gradient(
      ellipse 285% 245% at calc(var(--shine-x) * 1%) calc(var(--shine-y) * 1%),
      rgba(255, 255, 255, 0.23) 0%,
      rgba(255, 255, 255, 0.12) 18%,
      rgba(255, 255, 255, 0.04) 42%,
      transparent 71%
    ),
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 22%,
      rgba(255, 255, 255, 0.07) 35%,
      rgba(255, 255, 255, 0.19) 45%,
      rgba(255, 255, 255, 0.07) 55%,
      transparent 68%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 390% 84% at calc(var(--shine-x) * 1% + 15%) calc(var(--shine-y) * 1% - 12%),
      rgba(244, 250, 251, 0.09) 0%,
      rgba(244, 250, 251, 0.045) 26%,
      rgba(244, 250, 251, 0.014) 51%,
      transparent 78%
    );
  opacity: calc(.18 + var(--shine-strength) * .52 + var(--swap-glow) * .02);
}

/* FRONT = question side: always light metallic, regardless of flight direction. */
.faq-card.is-swapping .card-face--front::before {
  border: 1px solid rgba(255, 255, 255, 0.58);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.26) 0%,
      rgba(255, 255, 255, 0.06) 18%,
      rgba(255, 255, 255, 0.00) 34%,
      rgba(30, 42, 47, 0.03) 58%,
      rgba(255, 255, 255, 0.08) 78%,
      rgba(255, 255, 255, 0.01) 100%),
    repeating-linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.032) 0 1px,
      rgba(255, 255, 255, 0) 1px 8px,
      rgba(54, 95, 107, 0.012) 8px 9px,
      rgba(54, 95, 107, 0) 9px 16px
    ),
    linear-gradient(145deg, #e4eaec 0%, #dbe2e4 22%, #cfd7d9 46%, #bec9cc 72%, #adbabf 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    inset 0 -1px 0 rgba(30, 42, 47, 0.08),
    inset 0 10px 14px rgba(255, 255, 255, 0.08);
}

.faq-card.is-swapping .card-face--front,
.faq-card.is-swapping .card-face--front .card-kicker,
.faq-card.is-swapping .card-face--front .card-question,
.faq-card.is-swapping .card-face--front .card-action,
.faq-card.is-swapping .card-face--front .card-action > span[aria-hidden="true"] {
  color: #223137;
}

.faq-card.is-swapping .card-face--front .card-kicker,
.faq-card.is-swapping .card-face--front .card-action {
  color: #40575e;
}

.faq-card.is-swapping .card-face--front .card-question {
  color: #1f2d33;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* BACK = answer side: always dark Cannectra turquoise, regardless of direction. */
.faq-card.is-swapping .card-face--back::before {
  border: 1px solid rgba(244, 250, 251, 0.34);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.04) 16%,
      rgba(255, 255, 255, 0.00) 32%,
      rgba(30, 42, 47, 0.08) 54%,
      rgba(255, 255, 255, 0.08) 75%,
      rgba(255, 255, 255, 0.01) 100%),
    repeating-linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.026) 0 1px,
      rgba(255, 255, 255, 0) 1px 8px,
      rgba(30, 42, 47, 0.020) 8px 9px,
      rgba(30, 42, 47, 0) 9px 16px
    ),
    linear-gradient(145deg, #5b8e9e 0%, #4f8190 20%, #477887 48%, #3f6d7a 72%, #365f6b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(30, 42, 47, 0.20);
}

.faq-card.is-swapping .card-face--back::after {
  opacity: calc(.16 + var(--shine-strength) * .48 + var(--swap-glow) * .016);
}

.faq-card.is-swapping .card-face--back,
.faq-card.is-swapping .card-face--back .card-kicker,
.faq-card.is-swapping .card-face--back .card-answer-title,
.faq-card.is-swapping .card-face--back .card-answer-copy,
.faq-card.is-swapping .card-face--back .card-answer-foot {
  color: #f4fafb;
}

.faq-card.is-swapping .card-face--back .card-kicker {
  color: rgba(255, 255, 255, 0.94);
}

.faq-card.is-swapping .card-face--back .card-answer-title {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(30, 42, 47, 0.14), 0 4px 18px rgba(30, 42, 47, 0.10);
}

.faq-card.is-swapping .card-face--back .card-answer-copy {
  color: rgba(255, 255, 255, 0.91);
}

.faq-card.is-swapping .card-face--back .card-answer-foot {
  border-top-color: rgba(244, 250, 251, 0.18);
  color: rgba(255, 255, 255, 0.84);
}


/* ========================================================================== 
   v10 layout refinement: answer title top, answer copy centered
   ========================================================================== */
.card-face--back,
.faq-card.is-swapping .card-face--back .card-face-content {
  justify-content: flex-start;
  align-items: stretch;
}

.card-answer-title {
  width: 100%;
  max-width: none;
  margin-top: 10px;
  margin-bottom: 0;
}

.card-answer-copy {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.card-answer-foot {
  margin-top: 0;
}

.faq-card[data-card-type="placeholder"] .card-answer-title {
  max-width: none;
}


/* ========================================================================== 
   v12 native-sharp hover text
   Keep the established magnetic spring/tilt values and swap choreography.
   On resting grid cards only, scaling is split by rendering responsibility:
   - metallic surface: compositor 3D transform + scale (smooth GPU motion)
   - semantic front text: native layout/raster size (no transform scale)
   This avoids magnifying an already-rasterized glyph texture.
   ========================================================================== */

/* The button remains the semantic/click target. For idle grid cards it carries
   translation + 3D tilt only; scale is delegated to the visual surface. */
.faq-card[data-location="grid"]:not(.is-swapping):not(.measure-flight) {
  transform:
    translate3d(calc(var(--hover-x) * 1px), calc(var(--hover-y) * 1px), calc(var(--hover-z) * 1px))
    rotateX(var(--hover-rx))
    rotateY(var(--hover-ry));
}

/* The opaque metallic skin keeps the exact established hover scale. */
.faq-card[data-location="grid"]:not(.is-swapping):not(.measure-flight)::before {
  transform: scale(var(--hover-scale));
  transform-origin: 50% 50%;
}

.faq-card[data-location="grid"]:not(.is-swapping):not(.measure-flight)::after {
  transform: translateZ(.35px) scale(var(--hover-scale));
  transform-origin: 50% 50%;
}

/* Native text raster: no scale(), zoom hack, filter hack or permanent
   will-change layer. Font metrics are updated from the same spring scale in JS. */
.faq-card[data-location="grid"]:not(.is-swapping) .card-face--front {
  --front-pad: 15px;
  --front-kicker-size: 9px;
  --front-question-size: 14px;
  --front-action-size: 8px;
  padding: var(--front-pad);
  contain: layout style;
  text-rendering: auto;
  -webkit-font-smoothing: auto;
  font-kerning: normal;
  font-optical-sizing: auto;
}

.faq-card[data-location="grid"]:not(.is-swapping) .card-face--front .card-kicker {
  font-size: var(--front-kicker-size);
}

.faq-card[data-location="grid"]:not(.is-swapping) .card-face--front .card-question {
  font-size: var(--front-question-size);
}

.faq-card[data-location="grid"]:not(.is-swapping) .card-face--front .card-action {
  font-size: var(--front-action-size);
}

/* Measurement-only state. It exists for a single synchronous JS measurement
   before a swap, is never painted, and reproduces the original full-card
   transform so the flight still starts at the exact transformed geometry. */
.faq-card[data-location="grid"].measure-flight:not(.is-swapping) {
  transform:
    translate3d(calc(var(--hover-x) * 1px), calc(var(--hover-y) * 1px), calc(var(--hover-z) * 1px))
    rotateX(var(--hover-rx))
    rotateY(var(--hover-ry))
    scale(var(--hover-scale));
}

@media (max-width: 640px) {
  .faq-card[data-location="grid"]:not(.is-swapping) .card-face--front {
    --front-pad: 9px;
    --front-kicker-size: 7px;
    --front-question-size: 10px;
    --front-action-size: 8px;
  }
}


/* ========================================================================== 
   v13 raster-stable interaction layers
   Keep normal grid text out of a persistent transformed compositor layer.
   3D transforms exist only while the magnetic spring is actually moving.
   During pinch zoom, native text stays on the ordinary document paint path.
   ========================================================================== */

.card-grid {
  touch-action: pan-x pan-y pinch-zoom;
}

/* Resting cards are deliberately NOT transformed. A transform with all-zero
   values is still a transform and can keep a cached compositor raster alive. */
.faq-card[data-location="grid"]:not(.is-swapping):not(.measure-flight) {
  transform: none;
}

.faq-card[data-location="grid"]:not(.is-swapping):not(.measure-flight)::before,
.faq-card[data-location="grid"]:not(.is-swapping):not(.measure-flight)::after {
  transform: none;
}

/* The established hover transform is reinstated only while its spring has
   non-trivial energy. Physics values themselves are unchanged. */
.faq-card[data-location="grid"].is-hover-3d:not(.is-swapping):not(.measure-flight) {
  transform:
    translate3d(calc(var(--hover-x) * 1px), calc(var(--hover-y) * 1px), calc(var(--hover-z) * 1px))
    rotateX(var(--hover-rx))
    rotateY(var(--hover-ry));
}

.faq-card[data-location="grid"].is-hover-3d:not(.is-swapping):not(.measure-flight)::before {
  transform: scale(var(--hover-scale));
  transform-origin: 50% 50%;
}

.faq-card[data-location="grid"].is-hover-3d:not(.is-swapping):not(.measure-flight)::after {
  transform: translateZ(.35px) scale(var(--hover-scale));
  transform-origin: 50% 50%;
}

/* A pinch gesture must never accidentally activate the magnetic 3D layer via
   touch-generated pointer events. This also makes layer teardown deterministic. */
html.viewport-zoom-active .faq-card[data-location="grid"]:not(.is-swapping):not(.measure-flight),
html.viewport-zoom-active .faq-card[data-location="grid"]:not(.is-swapping):not(.measure-flight)::before,
html.viewport-zoom-active .faq-card[data-location="grid"]:not(.is-swapping):not(.measure-flight)::after {
  transform: none !important;
}

/* One-frame containment teardown after pinch completion deliberately rebuilds
   the front-face paint record at the browser's settled page scale. No visual
   property, font size or geometry changes during this refresh. */
html.viewport-raster-refresh .faq-card[data-location="grid"]:not(.is-swapping) .card-face--front {
  contain: none;
}


/* ========================================================================== 
   v14 unclipped flight + high-DPI flight-text cache
   --------------------------------------------------------------------------
   Resting/hovering question text remains ordinary live HTML. A transparent
   high-resolution canvas is prepared out of view and is only exposed while a
   card is actually swapping. The physical card node and all established motion
   values remain unchanged.
   ========================================================================== */

/* The outer card frame must never clip the 3D flight path. Static zone surfaces
   receive their own corner radii so the workspace still reads as one rounded box. */
.faq-workspace {
  overflow: visible;
}

.question-zone {
  border-radius: 27px 0 0 27px;
}

.answer-zone {
  border-radius: 0 27px 27px 0;
}

/* Flight text cache: hidden in every non-flight state. */
.flight-text-raster {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  image-rendering: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* During flight, only text is replaced. Layout remains the original DOM layout,
   so borders, spacing and semantic geometry do not jump. */
.faq-card.is-swapping .card-face.flight-raster-active .flight-text-raster {
  display: block;
  opacity: 1;
}

.faq-card.is-swapping .card-face.flight-raster-active .card-face-content,
.faq-card.is-swapping .card-face.flight-raster-active .card-face-content * {
  color: transparent !important;
  text-shadow: none !important;
}

.faq-card.is-swapping .card-face.flight-raster-active .card-kicker::before {
  opacity: 0 !important;
  box-shadow: none !important;
}

/* Preserve structural decoration while the semantic glyphs are transparent. */
.faq-card.is-swapping .card-face.flight-raster-active .card-answer-foot {
  border-top-color: rgba(244, 250, 251, 0.18) !important;
}

/* Off-screen measurement is only used for the currently hidden face. It never
   creates another card and never becomes paint-visible. */
.faq-card.raster-measuring .card-face.raster-measure-face {
  display: block !important;
  visibility: hidden !important;
  position: fixed !important;
  inset: auto !important;
  left: -20000px !important;
  top: 0 !important;
  width: var(--raster-measure-w) !important;
  height: var(--raster-measure-h) !important;
  padding: 0 !important;
  transform: none !important;
  border-radius: 17px !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  pointer-events: none !important;
  contain: layout style paint;
}

.faq-card.raster-measuring .card-face.raster-measure-face .card-face-content {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  transform-origin: 0 0 !important;
  visibility: hidden !important;
  box-sizing: border-box;
}

.faq-card.raster-measuring .card-face--front.raster-measure-face .card-face-content {
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
}

.faq-card.raster-measuring .card-face--back.raster-measure-face .card-face-content {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: clamp(24px, 3vw, 34px);
}

/* Hidden-front measurements must use the exact question-side typography. */
.faq-card.raster-measuring .card-face--front.raster-measure-face,
.faq-card.raster-measuring .card-face--front.raster-measure-face .card-kicker,
.faq-card.raster-measuring .card-face--front.raster-measure-face .card-question,
.faq-card.raster-measuring .card-face--front.raster-measure-face .card-action,
.faq-card.raster-measuring .card-face--front.raster-measure-face .card-action > span[aria-hidden="true"] {
  color: #223137 !important;
}

.faq-card.raster-measuring .card-face--front.raster-measure-face .card-kicker,
.faq-card.raster-measuring .card-face--front.raster-measure-face .card-action {
  color: #40575e !important;
}

.faq-card.raster-measuring .card-face--front.raster-measure-face .card-question {
  color: #1f2d33 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.30) !important;
}

/* Hidden-back measurements must use the exact answer-side typography. */
.faq-card.raster-measuring .card-face--back.raster-measure-face,
.faq-card.raster-measuring .card-face--back.raster-measure-face .card-kicker,
.faq-card.raster-measuring .card-face--back.raster-measure-face .card-answer-title,
.faq-card.raster-measuring .card-face--back.raster-measure-face .card-answer-copy,
.faq-card.raster-measuring .card-face--back.raster-measure-face .card-answer-foot {
  color: #f4fafb !important;
}

.faq-card.raster-measuring .card-face--back.raster-measure-face .card-kicker {
  color: rgba(255,255,255,.94) !important;
}

.faq-card.raster-measuring .card-face--back.raster-measure-face .card-answer-title {
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(30,42,47,.14), 0 4px 18px rgba(30,42,47,.10) !important;
}

.faq-card.raster-measuring .card-face--back.raster-measure-face .card-answer-copy {
  color: rgba(255,255,255,.91) !important;
}

.faq-card.raster-measuring .card-face--back.raster-measure-face .card-answer-foot {
  color: rgba(255,255,255,.84) !important;
  border-top-color: rgba(244,250,251,.18) !important;
}

@media (max-width: 980px) {
  .question-zone {
    border-radius: 27px 27px 0 0;
  }
  .answer-zone {
    border-radius: 0 0 27px 27px;
  }
}

@media (max-width: 640px) {
  .faq-card.raster-measuring .card-face--front.raster-measure-face .card-face-content {
    padding: 9px;
  }
}


/* native-text paint characteristics; hover geometry untouched */
.faq-card[data-location="grid"]:not(.is-swapping) .card-face--front {
 contain:none !important;
 text-rendering:auto !important;
 -webkit-font-smoothing:auto !important;
 font-kerning:normal;
 font-optical-sizing:auto;
 filter:none;
 opacity:1;
 will-change:auto;
 backface-visibility:visible;
 -webkit-backface-visibility:visible;
}
.faq-card .card-face-content, .faq-card .card-face-content *{
 text-rendering:auto !important;
 -webkit-font-smoothing:auto !important;
 text-shadow:none !important;
 filter:none;
}


/* ========================================================================== 
   Final typography refinement: Montserrat SemiBold 600 + one size step up
   Hover/physics/transform logic intentionally untouched.
   ========================================================================== */
.faq-card,
.faq-card .card-face,
.faq-card .card-face-content,
.faq-card .card-kicker,
.faq-card .card-question,
.faq-card .card-action,
.faq-card .card-answer-title,
.faq-card .card-answer-copy,
.faq-card .card-answer-foot {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
}

/* Grid/front typography: one restrained step larger, preserving the existing
   native-sharp variable path and therefore the established hover geometry. */
.faq-card[data-location="grid"]:not(.is-swapping) .card-face--front {
  --front-kicker-size: 11px;
  --front-question-size: 16px;
  --front-action-size: 10px;
}

/* Swap/answer typography uses the same family/weight and a matching size step. */
.card-face--back .card-kicker {
  font-size: 12px;
}

.card-answer-title {
  font-size: clamp(32px, 3.4vw, 52px);
}

.card-answer-copy {
  font-size: clamp(14px, 1.2vw, 17px);
}

.card-answer-foot {
  font-size: 11px;
}

/* Keep the mobile hierarchy one step above the previous values without
   changing card geometry, hover transforms, or animation code. */
@media (max-width: 640px) {
  .faq-card[data-location="grid"]:not(.is-swapping) .card-face--front {
    --front-kicker-size: 9px;
    --front-question-size: 12px;
    --front-action-size: 10px;
  }

  .card-face--back .card-kicker {
    font-size: 11px;
  }

  .card-answer-title {
    font-size: clamp(29px, 8.4vw, 41px);
  }

  .card-answer-copy {
    font-size: clamp(14px, 3.6vw, 16px);
  }

  .card-answer-foot {
    font-size: 11px;
  }
}


/* ========================================================================== 
   Preloaded continuous-pose text + exact flight geometry
   --------------------------------------------------------------------------
   One high-resolution text texture is prepared per logical face before the
   section becomes interactive. The same texture is reused continuously for
   every hover/flight transform, so no text re-layout or re-raster happens in
   an animation frame. Semantic DOM text stays in place for layout/a11y.
   ========================================================================== */
#faq-experience[data-preload-state="pending"] {
  opacity: 0;
  pointer-events: none;
}

#faq-experience[data-preload-state="ready"] {
  opacity: 1;
  transition: opacity .12s ease;
}

/* The same front metrics must be used when a front face is visible, hidden for
   preloading, or participating in a swap. */
.faq-card .card-face--front {
  --front-kicker-size: 11px;
  --front-question-size: 16px;
  --front-action-size: 10px;
}

.faq-card .card-face--front .card-kicker { font-size: var(--front-kicker-size); }
.faq-card .card-face--front .card-question { font-size: var(--front-question-size); }
.faq-card .card-face--front .card-action { font-size: var(--front-action-size); }

.card-face.text-raster-ready .flight-text-raster {
  display: block;
  opacity: 1;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Keep the semantic tree in the exact same layout box, but let the already
   prepared high-DPI texture provide the visible glyphs. */
.card-face.text-raster-ready .card-face-content,
.card-face.text-raster-ready .card-face-content * {
  text-shadow: none !important;
}

.card-face.text-raster-ready .card-face-content > :not(.flight-text-raster),
.card-face.text-raster-ready .card-face-content > :not(.flight-text-raster) * {
  color: transparent !important;
  text-shadow: none !important;
}

.card-face.text-raster-ready .card-kicker::before {
  opacity: 0 !important;
  box-shadow: none !important;
}

/* Preserve structural decoration while the glyphs are supplied by the cache. */
.card-face.text-raster-ready .card-answer-foot {
  border-top-color: inherit;
}

/* Hover keeps the original card motion. Only the preloaded text texture takes
   the same established hover scale as the metallic surface. No layout writes. */
.faq-card[data-location="grid"].is-hover-3d:not(.is-swapping)
  .card-face--front.text-raster-ready .flight-text-raster {
  transform: scale(var(--hover-scale));
}

/* Flight geometry now changes the real card box instead of anisotropically
   scaling it. One real radius therefore applies to card + both faces at every
   frame, matching the static source and destination cards exactly. */
.faq-card.is-swapping,
.faq-card.is-swapping .card-face {
  border-radius: calc(var(--flight-radius, 17) * 1px) !important;
}

.faq-card.is-swapping .card-face::before,
.faq-card.is-swapping .card-face::after {
  border-radius: inherit !important;
}

@media (max-width: 640px) {
  .faq-card .card-face--front {
    --front-kicker-size: 9px;
    --front-question-size: 12px;
    --front-action-size: 10px;
  }
}

/* Targeted stability fixes: keep the original motion model untouched. */
.flight-text-raster {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

/* The preloaded high-DPI text no longer needs its own hover transform.
   Scale the complete card once, so surface and text share one compositor path. */
.faq-card[data-location="grid"].is-hover-3d:not(.is-swapping):not(.measure-flight) {
  transform:
    translate3d(calc(var(--hover-x) * 1px), calc(var(--hover-y) * 1px), calc(var(--hover-z) * 1px))
    rotateX(var(--hover-rx))
    rotateY(var(--hover-ry))
    scale(var(--hover-scale));
}

.faq-card[data-location="grid"].is-hover-3d:not(.is-swapping):not(.measure-flight)::before {
  transform: none;
}

.faq-card[data-location="grid"].is-hover-3d:not(.is-swapping):not(.measure-flight)::after {
  transform: translateZ(.35px);
}

.faq-card[data-location="grid"].is-hover-3d:not(.is-swapping)
  .card-face--front.text-raster-ready .flight-text-raster {
  transform: none;
  will-change: auto;
}

/* Clip the complete painted face (surface, highlight and text) to the same
   real radius. The opposite face is additionally culled in JS at the edge-on
   crossing, so Chromium cannot leak light-face corner pixels on the return. */
.faq-card.is-swapping .card-face {
  overflow: hidden;
  clip-path: inset(0 round calc(var(--flight-radius, 17) * 1px));
}

/* Text is carried by a uniformly scaled natural-size face-content plane.
   Never apply a second X/Y correction to the raster itself. */
.faq-card.is-swapping .card-face.text-raster-ready .flight-text-raster {
  transform: none;
  transform-origin: 0 0;
  will-change: auto;
}


/* Targeted return-flight corner fix only.
   Keep front/back faces coplanar during swap so the hidden light face cannot
   parallax beyond the visible rounded face near the end of the return flight. */
.faq-card.is-swapping .card-face--front {
  transform: translateZ(0) !important;
}

.faq-card.is-swapping .card-face--back {
  transform: rotateY(180deg) translateZ(0) !important;
}


/* ========================================================================== 
   Answer text formatting only
   Keep all hover, flight, radius, preload and physics behavior untouched.
   ========================================================================== */
.card-face--back,
.faq-card.is-swapping .card-face--back .card-face-content {
  justify-content: flex-start;
  align-items: stretch;
}

.card-answer-title {
  width: min(100%, 18ch);
  max-width: 18ch;
  margin: 10px 0 0;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.card-answer-copy {
  flex: 0 0 auto;
  display: block;
  width: min(100%, 46ch);
  max-width: 46ch;
  margin: clamp(22px, 3.2vh, 34px) 0 0;
  color: rgba(255, 255, 255, 0.91);
  line-height: 1.58;
  letter-spacing: -0.008em;
  text-align: left;
  text-wrap: pretty;
}

.card-answer-foot {
  margin-top: auto;
  padding-top: 16px;
}

.faq-card[data-card-type="placeholder"] .card-answer-title {
  width: min(100%, 16ch);
  max-width: 16ch;
}

.faq-card[data-card-type="placeholder"] .card-answer-copy {
  width: min(100%, 44ch);
  max-width: 44ch;
}

@media (max-width: 640px) {
  .card-answer-title {
    width: min(100%, 16ch);
    max-width: 16ch;
    line-height: 1.08;
  }

  .card-answer-copy,
  .faq-card[data-card-type="placeholder"] .card-answer-copy {
    width: 100%;
    max-width: none;
    margin-top: 18px;
    line-height: 1.52;
  }

  .card-answer-foot {
    padding-top: 13px;
  }
}


/* ========================================================================== 
   3x2 balanced layout + centered answer copy
   Only grid geometry and answer text alignment are changed here.
   ========================================================================== */
.workspace-body {
  min-height: 0;
}

.question-zone,
.answer-zone {
  min-height: 0;
}

.card-grid {
  width: min(100%, 675px);
  aspect-ratio: 3 / 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.answer-target {
  flex: 0 0 auto;
  min-height: 0;
  height: calc(var(--faq-grid-height, 442px) + 56px);
}

@media (max-width: 640px) {
  .answer-target {
    height: calc(var(--faq-grid-height, 442px) + 42px);
  }
}

.card-face--back,
.faq-card.is-swapping .card-face--back .card-face-content {
  justify-content: flex-start;
  align-items: stretch;
}

.card-answer-title {
  flex: 0 0 auto;
}

.card-answer-copy {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 46ch);
  max-width: 46ch;
  margin: 0 auto;
  text-align: center;
}

.faq-card[data-card-type="placeholder"] .card-answer-copy {
  width: min(100%, 44ch);
  max-width: 44ch;
}

.card-answer-foot {
  flex: 0 0 auto;
  margin-top: 0;
}

@media (max-width: 640px) {
  .card-grid {
    width: 100%;
    aspect-ratio: 3 / 2;
  }

  .card-answer-copy,
  .faq-card[data-card-type="placeholder"] .card-answer-copy {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    text-align: center;
  }
}



/* ========================================================================== 
   Final material implementation from brushed-metal-3d-cards(1).html
   --------------------------------------------------------------------------
   Question/front face only:
   - the previous FAQ texture is fully replaced by the reference surface
   - the previous cursor-position light field is not used for the reflection
   - the reflection is derived from the card's actual rotateX/rotateY pose
   Answer/back face:
   - no specular light strip
   ========================================================================== */

/* Keep the question area flat: no checker/grid background. */
.question-zone {
  background: linear-gradient(180deg, #f1f6f7 0%, #edf3f4 100%);
  background-size: auto;
}

/* Reference defaults. JavaScript updates these from the card rotation only. */
.faq-card {
  --metal-shine-pos-x: 24%;
  --metal-shine-pos-y: 48%;
  --metal-shine-angle: 105deg;
  --metal-shine-opacity: .46;
  --metal-shine-blur: 26px;
  --metal-frame-x: 50%;
  --metal-frame-y: 50%;
  --metal-frame-strength: .05;
  --metal-frame-opacity: .78;
}

/* QUESTION CARD SURFACE
   Exact surface texture/background recipe from .metal-card__surface. The old
   FAQ metallic gradients/grain are completely superseded on the front card. */
.faq-card[data-location="grid"]:not(.is-swapping)::before {
  border: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.13) 0,
      rgba(255,255,255,.13) .7px,
      rgba(38,47,50,.055) 1.25px,
      rgba(255,255,255,.025) 2px,
      rgba(38,47,50,.022) 2.7px,
      rgba(255,255,255,.06) 3.4px
    ),
    linear-gradient(
      115deg,
      #dde2e3 0%,
      #d1d7d8 34%,
      #e2e6e6 54%,
      #cbd1d2 75%,
      #d9dedf 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(30,42,47,.18),
    inset 1px 0 0 rgba(255,255,255,.42),
    inset -1px 0 0 rgba(30,42,47,.08),
    0 calc(9px + var(--hover-z) * .04px)
      calc(22px + var(--hover-z) * .12px)
      rgba(30,42,47,calc(.11 + var(--hover-glow) * .08));
  filter: none;
}

/* Inner line from .metal-card__surface::before. This pseudo-element no longer
   carries any former FAQ texture or light field. */
.faq-card[data-location="grid"]:not(.is-swapping)::after {
  content: "";
  position: absolute;
  inset: .34rem;
  z-index: 0;
  border: 1px solid rgba(54,95,107,.15);
  border-radius: .9rem;
  background: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 1px 0 rgba(255,255,255,.28);
  opacity: 1;
  filter: none;
  transform: none;
  pointer-events: none;
}

/* The answer card must not inherit the old whole-card light/texture pseudo. */
.faq-card[data-location="answer"]:not(.is-swapping)::after {
  content: none;
  background: none;
  box-shadow: none;
  opacity: 0;
  filter: none;
}

/* Exact masked proximity frame from the reference template. */
.metal-proximity-frame {
  position: absolute;
  inset: 0;
  z-index: 12;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--metal-frame-opacity);
  background:
    radial-gradient(
      circle at var(--metal-frame-x) var(--metal-frame-y),
      rgba(54,95,107, calc(var(--metal-frame-strength) * 1.00)) 0%,
      rgba(54,95,107, calc(var(--metal-frame-strength) * .98)) 10%,
      rgba(54,95,107, calc(var(--metal-frame-strength) * .86)) 20%,
      rgba(54,95,107, calc(var(--metal-frame-strength) * .60)) 32%,
      rgba(125,163,173, calc(var(--metal-frame-strength) * .66)) 43%,
      rgba(205,221,225, calc(.30 + var(--metal-frame-strength) * .34)) 54%,
      rgba(255,255,255, calc(.82 + var(--metal-frame-strength) * .10)) 68%,
      rgba(255,255,255, .96) 100%
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.22))
    drop-shadow(0 0 1.6px rgba(54,95,107,.18));
  transition:
    opacity 180ms ease,
    background-position 180ms ease;
  will-change: background;
}

/* Answer-card frame: fully colored, static and independent of pointer proximity. */
.faq-card[data-location="answer"] > .metal-proximity-frame {
  opacity: 1;
  background: #578b9b;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.16))
    drop-shadow(0 0 1.8px rgba(54,95,107,.24));
  transition: none;
  will-change: auto;
}

/* Static question-card reflection clip. The pseudo-element inside it is the
   exact .metal-card__surface::after specular strip from the reference. */
.metal-light-reflection {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.metal-light-reflection::after {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    linear-gradient(
      var(--metal-shine-angle),
      transparent 0%,
      transparent 28%,
      rgba(255,255,255,.03) 34%,
      rgba(255,255,255,.12) 40%,
      rgba(255,255,255,.36) 47%,
      rgba(255,255,255,.70) 50%,
      rgba(255,255,255,.34) 54%,
      rgba(255,255,255,.10) 61%,
      rgba(255,255,255,.025) 67%,
      transparent 73%,
      transparent 100%
    );
  background-size: 58% 145%;
  background-repeat: no-repeat;
  background-position:
    var(--metal-shine-pos-x)
    var(--metal-shine-pos-y);
  opacity: var(--metal-shine-opacity);
  filter: blur(var(--metal-shine-blur));
  mix-blend-mode: screen;
  pointer-events: none;
  transition:
    background-position 120ms linear,
    opacity 120ms linear,
    filter 120ms linear;
  will-change: background-position, opacity, filter;
}

/* No strip on any answer card, including the initial placeholder. */
.faq-card[data-location="answer"] > .metal-light-reflection {
  display: none !important;
}

/* During a swap the root reflection is disabled. Each face owns its material. */
.faq-card.is-swapping > .metal-light-reflection,
.faq-card.is-swapping > .metal-proximity-frame,
.faq-card.is-swapping::after {
  display: none !important;
  content: none !important;
}

/* QUESTION/FRONT FACE IN FLIGHT: the same exact metal surface. */
.faq-card.is-swapping .card-face--front::before {
  border: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.13) 0,
      rgba(255,255,255,.13) .7px,
      rgba(38,47,50,.055) 1.25px,
      rgba(255,255,255,.025) 2px,
      rgba(38,47,50,.022) 2.7px,
      rgba(255,255,255,.06) 3.4px
    ),
    linear-gradient(
      115deg,
      #dde2e3 0%,
      #d1d7d8 34%,
      #e2e6e6 54%,
      #cbd1d2 75%,
      #d9dedf 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(30,42,47,.18),
    inset 1px 0 0 rgba(255,255,255,.42),
    inset -1px 0 0 rgba(30,42,47,.08);
  filter: none;
}

/* QUESTION/FRONT FACE IN FLIGHT: exact reference reflection, clipped by the
   already-hidden-overflow front face. Its variables are updated from flight
   rotation, never from pointer coordinates. */
.faq-card.is-swapping .card-face--front::after {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 1;
  background:
    linear-gradient(
      var(--metal-shine-angle),
      transparent 0%,
      transparent 28%,
      rgba(255,255,255,.03) 34%,
      rgba(255,255,255,.12) 40%,
      rgba(255,255,255,.36) 47%,
      rgba(255,255,255,.70) 50%,
      rgba(255,255,255,.34) 54%,
      rgba(255,255,255,.10) 61%,
      rgba(255,255,255,.025) 67%,
      transparent 73%,
      transparent 100%
    );
  background-size: 58% 145%;
  background-repeat: no-repeat;
  background-position:
    var(--metal-shine-pos-x)
    var(--metal-shine-pos-y);
  box-shadow: none;
  opacity: var(--metal-shine-opacity);
  filter: blur(var(--metal-shine-blur));
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ANSWER/BACK FACE IN FLIGHT: explicitly no light strip. */
.faq-card.is-swapping .card-face--back::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
}

/* Answer hierarchy and reading direction retained from the accepted refinement. */
.card-face--back,
.faq-card.is-swapping .card-face--back .card-face-content {
  justify-content: flex-start;
  align-items: stretch;
}

.card-answer-title {
  width: min(100%, 22ch);
  max-width: 22ch;
  margin: 10px 0 0;
  font-size: clamp(22px, 2.1vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.026em;
  text-align: left;
  text-wrap: balance;
}

.card-answer-copy,
.faq-card[data-card-type="placeholder"] .card-answer-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: .72em;
  width: min(100%, 52ch);
  max-width: 52ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.91);
  line-height: 1.58;
  letter-spacing: -0.008em;
  text-align: left;
  text-wrap: pretty;
}

.answer-paragraph,
.answer-list,
.answer-list-item {
  display: block;
}

.answer-list {
  display: grid;
  gap: .34em;
}

/* Lists: the bullet itself starts on the same left edge as normal paragraphs;
   list text is indented to the right of the bullet. */
.answer-list-item {
  position: relative;
  padding-left: 1.08em;
  text-indent: 0;
}

.answer-list-bullet {
  position: absolute;
  left: 0;
  width: .68em;
  text-align: left;
}

@media (max-width: 640px) {
  .card-answer-title {
    width: min(100%, 20ch);
    max-width: 20ch;
    font-size: clamp(20px, 5.7vw, 28px);
  }

  .card-answer-copy,
  .faq-card[data-card-type="placeholder"] .card-answer-copy {
    width: 100%;
    max-width: none;
    gap: .62em;
    margin: 0;
    text-align: left;
  }
}



/* v5 micro-refinement: clearly visible orange-dot glow; geometry unchanged. */
.hero-eyebrow i,
.card-kicker::before {
  box-shadow:
    0 0 0 3px rgba(255, 138, 42, 0.28),
    0 0 9px 3px rgba(255, 138, 42, 0.88),
    0 0 20px 7px rgba(255, 138, 42, 0.56),
    0 0 34px 12px rgba(255, 138, 42, 0.26);
}
}

/* The standalone template centers its own body and limits the card view to 1380px.
   Embedded on the frontpage, the existing flow-inner owns the page width instead. */
.frontpage-faq .cards-only-view{width:100%!important;max-width:none!important}
/* Match the established frontpage content shadow used by the surrounding panels. */
.frontpage-faq .faq-workspace{box-shadow:0 18px 44px rgba(30,42,47,.10)}
body.card-hit{cursor:pointer}
.category-section-card .category-kicker::before{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(255,138,42,.55);flex-shrink:0}


/* ========================================================================== 
   Top hero / bento grid ported from index.html frontpage reference.
   Isolated selectors avoid collisions with the existing rail sliders below.
   ========================================================================== */
.top-grid-section{
  width:min(calc(100% - 40px),var(--content));
  margin-inline:auto;
  padding:18px 0 0;
  background:transparent;
}
@media(min-width:1181px){
  .frontpage-fold .top-grid-section{padding:12px 0 0}
  /* Own screen-adapted hero height; product rail/card height never feeds this value. */
  .frontpage-fold .top-grid{height:calc(clamp(280px,calc(100dvh - var(--frontpage-header-stack) - 180px),570px) * 1.15);min-height:0}
  .frontpage-fold .top-grid-slide.is-active{height:100%;min-height:0}
}
/* The compact desktop header and wrapping bestseller copy need a larger fold reserve. */
@media(min-width:1181px) and (max-width:1399px) and (max-height:900px){
  .frontpage-fold .top-grid{height:min(calc(clamp(280px,calc(100dvh - var(--frontpage-header-stack) - 180px),570px) * 1.15),max(322px,calc(100dvh - var(--frontpage-header-stack) - 300px)))}
}
@media(min-width:1181px) and (max-height:740px){
  .frontpage-fold .top-grid-content{padding-block:24px}
  .frontpage-fold .top-grid-title{font-size:clamp(32px,3.4vw,54px)}
  .frontpage-fold .top-grid-description{font-size:14px;margin-bottom:14px}
}
.top-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:minmax(0,1.1fr) repeat(2,minmax(0,.95fr));
  gap:12px;
  min-height:570px;
}
.top-grid-slider{
  --top-slider-interval:6000ms;
  position:relative;
  grid-column:1 / 8;
  grid-row:1 / 4;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(76,120,134,.12);
  border-radius:18px;
  background:var(--brand-dark);
  box-shadow:0 14px 36px rgba(30,42,47,.10);
  color:#fff;
}
.top-grid-slides{height:100%}
.top-grid-slide{
  position:absolute;
  inset:0;
  display:grid;
  opacity:0;
  visibility:hidden;
  transition:opacity 500ms cubic-bezier(.2,.7,.2,1),visibility 500ms;
}
.top-grid-slide.is-active{position:relative;min-height:570px;opacity:1;visibility:visible}
.top-grid-art{position:absolute;inset:0;width:100%;height:100%}
.top-grid-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(48,91,103,.97) 0%,rgba(76,120,134,.88) 42%,rgba(76,120,134,.22) 78%,rgba(76,120,134,.06) 100%);
}
.top-grid-content{
  position:relative;
  z-index:2;
  align-self:center;
  width:min(600px,75%);
  padding:clamp(28px,4.6vw,58px);
}
.top-grid-eyebrow{
  display:block;
  margin-bottom:6px;
  color:#DDEDEF;
  font-size:9px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.top-grid-title{
  max-width:630px;
  margin:0 0 13px;
  color:#fff;
  font-size:clamp(39px,4.8vw,64px);
  line-height:.98;
  letter-spacing:-.045em;
}
.top-grid-description{
  max-width:530px;
  margin:0 0 22px;
  color:#E8F1F3;
  font-size:clamp(14px,1.35vw,17px);
  line-height:1.6;
}
.top-grid-button{
  display:inline-flex;
  min-height:42px;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:10px;
  background:var(--accent);
  box-shadow:0 5px 14px rgba(255,138,42,.18);
  color:#fff;
  font-size:12px;
  font-weight:850;
  text-decoration:none;
  transition:background .15s ease,box-shadow .15s ease;
}
.top-grid-button:hover,.top-grid-button:focus-visible{background:#ef7d1f;box-shadow:0 7px 18px rgba(239,125,31,.22)}
.top-grid-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.top-grid-controls{
  position:absolute;
  z-index:5;
  left:18px;
  right:18px;
  bottom:17px;
  display:grid;
  grid-template-columns:auto minmax(90px,1fr) auto;
  align-items:center;
  gap:9px;
  width:auto;
  min-height:34px;
  padding:0;
  border:0;
  border-radius:17px;
  background:transparent;
  box-shadow:none;
  isolation:isolate;
}
.top-grid-controls::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-3px;
  right:-6px;
  bottom:-3px;
  left:-6px;
  border-radius:20px;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(234,244,246,.035));
  backdrop-filter:blur(24px) saturate(1.34);
  -webkit-backdrop-filter:blur(24px) saturate(1.34);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0%,#000 58%,rgba(0,0,0,.88) 72%,rgba(0,0,0,.46) 86%,transparent 100%);
  mask-image:radial-gradient(ellipse at center,#000 0%,#000 58%,rgba(0,0,0,.88) 72%,rgba(0,0,0,.46) 86%,transparent 100%);
  pointer-events:none;
}
.top-grid-position{
  display:flex;
  height:34px;
  min-height:34px;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-width:54px;
  padding:0 9px;
  border:1px solid var(--brand-dark);
  border-radius:17px;
  background:var(--brand-dark);
  box-shadow:0 0 7px rgba(87,139,155,.24);
  color:rgba(255,255,255,.78);
  font-size:10px;
  font-variant-numeric:tabular-nums;
}
.top-grid-position strong{color:#fff;font-size:14px;font-weight:900}
.top-grid-dots{display:flex;align-items:center;gap:6px;width:100%;margin:0;padding:0 2px}
.top-grid-dot{position:relative;display:block;flex:1 1 0;width:auto;height:5px;min-width:18px;padding:0;overflow:hidden;border:0;border-radius:999px;background:rgba(54,95,107,.17);box-shadow:inset 0 1px 1px rgba(54,95,107,.08);cursor:pointer}
.top-grid-dot::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left center}
.top-grid-dot:hover{background:rgba(255,138,42,.20)}
.top-grid-dot[aria-current="true"]::after{animation:top-grid-progress var(--top-slider-interval) linear forwards}
.top-grid-slider.is-paused .top-grid-dot[aria-current="true"]::after,.top-grid-slider.is-hover-paused .top-grid-dot[aria-current="true"]::after{animation-play-state:paused}
.top-grid-slider.indicator-reset .top-grid-dot[aria-current="true"]::after{animation:none!important}
.top-grid-nav{display:flex;align-items:center;gap:7px}
.top-grid-nav-button{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  padding:0;
  border:1px solid var(--brand-dark);
  border-radius:50%;
  background:var(--brand-dark);
  box-shadow:0 0 7px rgba(87,139,155,.24);
  color:#fff;
  cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,color .18s ease;
}
.top-grid-nav-button:hover,.top-grid-nav-button:focus-visible{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 0 7px rgba(255,138,42,.38);outline:0}
.top-grid-nav-button:active{border-color:#ef7d1f;background:#ef7d1f;color:#fff}
.top-grid-nav-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.top-grid-toggle{color:#fff}
@keyframes top-grid-progress{to{transform:scaleX(1)}}

.top-grid-tile{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  padding:22px;
  border:1px solid rgba(76,120,134,.12);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(30,42,47,.05);
  color:var(--ink);
  text-decoration:none;
  isolation:isolate;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.top-grid-tile::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.34),transparent 52%)}
.top-grid-tile:hover,.top-grid-tile:focus-visible{border-color:rgba(76,120,134,.24);box-shadow:0 11px 28px rgba(30,42,47,.075)}
.top-grid-tile h3{position:relative;z-index:2;max-width:66%;margin:11px 0 6px;font-size:clamp(20px,1.7vw,29px);line-height:1.08;letter-spacing:-.032em}
.top-grid-tile p{position:relative;z-index:2;max-width:60%;margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.top-grid-kicker{position:relative;z-index:3;display:inline-flex;align-items:center;min-height:23px;padding:3px 8px;border:1px solid rgba(76,120,134,.15);border-radius:7px;background:rgba(255,255,255,.46);color:var(--brand-dark);font-size:9px;font-weight:900;letter-spacing:.075em;text-transform:uppercase;backdrop-filter:blur(6px)}
.top-grid-link{position:absolute;z-index:2;left:22px;bottom:20px;display:inline-flex;align-items:center;gap:7px;color:var(--brand-dark);font-size:11px;font-weight:850}
.top-grid-tile:hover .top-grid-link{text-decoration:underline;text-underline-offset:4px}
.top-grid-tile-art{position:absolute;right:-6%;bottom:-7%;width:55%;max-height:92%}
.top-grid-vape{grid-column:8 / 13;grid-row:1;background:linear-gradient(145deg,#E9F2F4,#DDEBED)}
.top-grid-vape .top-grid-tile-art{right:1%;bottom:-14%;width:43%}
.top-grid-cbd{grid-column:8 / 11;grid-row:2 / 4;background:linear-gradient(145deg,#EDF5F2,#DCEBE5)}
.top-grid-cbd h3{max-width:92%}.top-grid-cbd p{max-width:88%}.top-grid-cbd .top-grid-tile-art{right:-18%;bottom:-5%;width:91%}
.top-grid-deal{grid-column:11 / 13;grid-row:2;background:linear-gradient(145deg,#F9EFE4,#F2DFC9)}
.top-grid-reorder{grid-column:11 / 13;grid-row:3;background:linear-gradient(145deg,#EEF3F6,#D9E8ED)}
.top-grid-compact{padding:17px}
.top-grid-compact h3{max-width:96%;margin-top:8px;font-size:clamp(17px,1.25vw,21px)}
.top-grid-compact p{display:none}
.top-grid-compact .top-grid-link{left:17px;bottom:14px;font-size:9.5px}
.top-grid-compact .top-grid-tile-art{right:-19%;bottom:-28%;width:72%;opacity:.82}

@media(max-width:1180px){
  .top-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto 220px 220px 185px;min-height:0}
  .top-grid-slider{grid-column:1 / -1;grid-row:1}.top-grid-slide.is-active{min-height:500px}
  .top-grid-vape{grid-column:1 / -1;grid-row:2}.top-grid-cbd{grid-column:1;grid-row:3}.top-grid-deal{grid-column:2;grid-row:3}.top-grid-reorder{grid-column:1 / -1;grid-row:4}
  .top-grid-reorder p{display:block;max-width:50%}.top-grid-reorder .top-grid-tile-art{right:0;bottom:-35%;width:37%}
}
@media(max-width:820px){
  .top-grid-section{width:min(calc(100% - 26px),var(--content));padding-top:14px}
  .top-grid{grid-template-rows:auto 205px 205px 175px}
  .top-grid-slide.is-active{min-height:470px}
  .top-grid-title{font-size:clamp(36px,8vw,52px)}
}
@media(max-width:560px){
  .top-grid-section{width:min(calc(100% - 18px),var(--content));padding-top:10px}
  .top-grid{grid-template-columns:1fr;grid-template-rows:auto;grid-auto-rows:minmax(175px,auto);gap:9px}
  .top-grid-slider,.top-grid-vape,.top-grid-cbd,.top-grid-deal,.top-grid-reorder{grid-column:1;grid-row:auto}
  .top-grid-slide.is-active{min-height:445px}
  .top-grid-content{width:100%;padding:26px 22px 78px}
  .top-grid-cbd{min-height:220px}
  .top-grid-tile{padding:20px}.top-grid-tile h3{max-width:58%;font-size:23px}.top-grid-tile p{max-width:55%}
  .top-grid-controls{left:10px;right:10px;bottom:10px;grid-template-columns:auto 1fr auto}.top-grid-position{min-width:48px;height:31px;min-height:31px;padding-inline:6px}.top-grid-nav-button{width:31px;height:31px}
}
@media(prefers-reduced-motion:reduce){
  .top-grid-slide{transition:none}.top-grid-dot[aria-current="true"]::after{animation:none;transform:scaleX(1)}
}



		.cn-matrix {
			--cn-brand: #578b9b;
			--cn-brand-dark: #365f6b;
			--cn-ink: #1e2a2f;
			--cn-muted: #5c7078;
			--cn-line: #d1e1e5;
			--cn-canvas: #f4fafb;
			--cn-surface: #ffffff;
			--cn-accent: #ff8a2a;
			--mx: 68%;
			--my: 42%;

			position: relative;
			width: min(calc(100% - 40px), var(--content));
			margin: 0 auto 26px;
			color: var(--cn-ink);
			font-family:
				Inter,
				ui-sans-serif,
				system-ui,
				-apple-system,
				BlinkMacSystemFont,
				"Segoe UI",
				sans-serif;
			isolation: isolate;
		}

		.cn-matrix *,
		.cn-matrix *::before,
		.cn-matrix *::after {
			box-sizing: border-box;
		}

		.cn-matrix__stage {
			position: relative;
			height: 750px;
			overflow: hidden;
			padding-bottom: 0;
			border: 1px solid rgba(76, 120, 134, 0.16);
			border-radius: clamp(20px, 2vw, 30px);
			box-shadow: 0 18px 44px rgba(30, 42, 47, 0.10);
			background:
				radial-gradient(
					circle at var(--mx) var(--my),
					rgba(87, 139, 155, 0.1),
					transparent 32rem
				),
				linear-gradient(
					180deg,
					rgba(255, 255, 255, 0.92),
					rgba(244, 250, 251, 0.78)
				);
		}

		.cn-matrix__stage::before {
			position: absolute;
			inset: 0;
			z-index: -2;
			background-image:
				linear-gradient(rgba(76, 120, 134, 0.03) 1px, transparent 1px),
				linear-gradient(90deg, rgba(76, 120, 134, 0.03) 1px, transparent 1px);
			background-size: 48px 48px;
			mask-image: linear-gradient(
				90deg,
				rgba(0, 0, 0, 0.56),
				rgba(0, 0, 0, 0.22) 68%,
				transparent
			);
			content: "";
			pointer-events: none;
		}

		.cn-matrix__stage::after {
			position: absolute;
			inset: 0;
			z-index: -1;
			background:
				linear-gradient(
					110deg,
					rgba(255, 255, 255, 0.26),
					transparent 40%
				);
			content: "";
			pointer-events: none;
		}

		.cn-matrix__columns {
			display: flex;
			height: 748px;
		}

		.cn-service {
			position: relative;
			z-index: 0;
			display: grid;
			grid-template-rows: 1fr 1fr;
			flex: 1 1 0;
			min-width: 0;
			min-height: 0;
			border-left: 1px solid rgba(76, 120, 134, 0.14);
			transition:
				flex-grow 620ms cubic-bezier(.16, 1, .3, 1),
				opacity 360ms ease,
				background-color 360ms ease;
		}

		.cn-service:first-child {
			border-left: 0;
		}

		.cn-service::before {
			position: absolute;
			top: 0;
			left: 0;
			width: 1px;
			height: 0;
			background: linear-gradient(
				to bottom,
				var(--cn-accent),
				rgba(255, 138, 42, 0.1)
			);
			box-shadow: 0 0 14px rgba(255, 138, 42, 0.34);
			content: "";
			transition: height 560ms cubic-bezier(.16, 1, .3, 1);
		}

		.cn-service:hover::before {
			height: 100%;
		}

		.cn-service:hover {
			flex-grow: 1.28;
			background: rgba(255, 255, 255, 0.34);
			outline: none;
		}

		.cn-pane {
			position: relative;
			min-width: 0;
			min-height: 0;
			padding: clamp(20px, 2.2vw, 32px);
		}

		.cn-pane--bottom {
			border-top: 0;
		}

		.cn-pane--top.cn-pane--text {
			justify-content: flex-end;
			padding-bottom: 8px;
		}

		.cn-pane--bottom.cn-pane--text {
			justify-content: flex-start;
			padding-top: 8px;
		}


		.cn-service:nth-child(2) .cn-pane--bottom.cn-pane--text {
			padding-top: 48px;
		}

		.cn-pane--top.cn-pane--visual {
			align-items: end;
		}

		.cn-pane--bottom.cn-pane--visual {
			align-items: start;
		}

		.cn-pane--top.cn-pane--visual .cn-visual {
			transform: translateY(18%);
		}

		.cn-pane--bottom.cn-pane--visual .cn-visual {
			transform: translateY(-18%);
		}

		.cn-service:hover .cn-pane--top.cn-pane--visual .cn-visual {
			transform: translateY(18%);
		}

		.cn-service:hover .cn-pane--bottom.cn-pane--visual .cn-visual {
			transform: translateY(-18%);
		}

		.cn-service:nth-child(2) .cn-pane--top.cn-pane--visual .cn-visual,
		.cn-service:nth-child(2):hover .cn-pane--top.cn-pane--visual .cn-visual {
			transform: translateY(-10%);
		}

		.cn-pane--text {
			position: relative;
			z-index: 3;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: clamp(18px, 2vw, 28px);
		}

		.cn-pane--text::before {
			display: block;
			width: 26px;
			height: 2px;
			margin-bottom: 14px;
			border-radius: 999px;
			background: var(--cn-accent);
			content: "";
			transform: scaleX(.48);
			transform-origin: left center;
			transition: transform 520ms cubic-bezier(.16, 1, .3, 1);
		}

		.cn-service:hover .cn-pane--text::before {
			transform: scaleX(1.55);
		}

		.cn-pane--text h2 {
			max-width: 14ch;
			margin: 0;
			font-size: clamp(1.85rem, 2.35vw, 2.9rem);
			font-weight: 850;
			letter-spacing: -.05em;
			line-height: .98;
			text-wrap: balance;
		}

		.cn-copy {
			max-width: 36rem;
			max-height: 4.9em;
			margin-top: 16px;
			overflow: hidden;
			color: var(--cn-muted);
			font-size: clamp(.95rem, 1vw, 1.08rem);
			line-height: 1.68;
			mask-image: linear-gradient(
				to bottom,
				#000 0,
				#000 50%,
				transparent 100%
			);
			opacity: .58;
			transition:
				max-height 620ms cubic-bezier(.16, 1, .3, 1),
				opacity 300ms ease,
				mask-image 300ms ease;
		}

		.cn-copy p {
			margin: 0;
		}

		.cn-copy p + p {
			margin-top: 7px;
		}

		.cn-service:hover .cn-copy,
		.cn-service:focus-within .cn-copy {
			max-height: 40em;
			mask-image: none;
			opacity: 1;
		}

		.cn-service:hover,
		.cn-service:focus-within {
			grid-template-rows: auto minmax(0, 1fr);
		}

		.cn-service:nth-child(2):hover,
		.cn-service:nth-child(2):focus-within {
			grid-template-rows: minmax(0, 1fr) auto;
		}

		.cn-service:focus-visible {
			outline: 2px solid var(--cn-accent);
			outline-offset: -2px;
		}

		.cn-pane--visual {
			display: grid;
			place-items: center;
			overflow: visible;
			padding: 0;
			z-index: 1;
			pointer-events: none;
		}

		.cn-visual {
			position: relative;
			width: min(132%, 455px);
			aspect-ratio: 1;
			transition:
				opacity 260ms ease,
				filter 320ms ease;
		}

		.cn-service:hover .cn-visual {
			width: min(132%, 455px);
		}

		.cn-visual::before {
			position: absolute;
			inset: 12%;
			border: 0;
			border-radius: 50%;
			background: rgba(87, 139, 155, 0.055);
			box-shadow: none;
			content: "";
			opacity: 1;
			transform: scale(1);
			transition:
				transform 760ms cubic-bezier(.16, 1, .3, 1),
				opacity 280ms ease;
		}

		.cn-service:hover .cn-visual::before {
			opacity: 1;
			transform: scale(1.015);
		}

		.cn-visual svg {
			position: absolute;
			inset: 0;
			z-index: 2;
			width: 100%;
			height: 100%;
			overflow: visible;
		}

		.cn-art-line {
			fill: none;
			stroke: rgba(54, 95, 107, .78);
			stroke-width: 1.8;
			stroke-linecap: round;
			stroke-linejoin: round;
			vector-effect: non-scaling-stroke;
		}

		.cn-art-soft {
			fill: none;
			stroke: rgba(87, 139, 155, .12);
			stroke-width: 1;
			vector-effect: non-scaling-stroke;
		}

		.cn-art-fill {
			fill: rgba(87, 139, 155, .075);
			stroke: rgba(54, 95, 107, .28);
			stroke-width: 1.2;
			vector-effect: non-scaling-stroke;
		}

		.cn-art-route {
			fill: none;
			stroke: var(--cn-accent);
			stroke-width: 1.75;
			stroke-linecap: round;
			stroke-dasharray: 4 8;
			vector-effect: non-scaling-stroke;
			animation: cn-route 4.6s linear infinite;
		}

		.cn-art-pulse {
			transform-box: fill-box;
			transform-origin: center;
			animation: cn-pulse 2.6s ease-in-out infinite;
		}

		.cn-art-float {
			transform-box: fill-box;
			transform-origin: center;
			animation: cn-float 6s ease-in-out infinite;
		}

		.cn-art-accent {
			fill: var(--cn-accent);
		}

		@keyframes cn-route {
			to {
				stroke-dashoffset: -32;
			}
		}

		@keyframes cn-pulse {
			0%,
			100% {
				transform: scale(.88);
				opacity: .58;
			}
			50% {
				transform: scale(1.18);
				opacity: 1;
			}
		}

		@keyframes cn-float {
			0%,
			100% {
				transform: translateY(0);
			}
			50% {
				transform: translateY(-5px);
			}
		}

		.cn-meta {
			position: absolute;
			right: clamp(26px, 3vw, 42px);
			bottom: 18px;
			left: clamp(26px, 3vw, 42px);
			z-index: 4;
			display: flex;
			align-items: center;
			gap: 8px;
			color: rgba(54, 95, 107, .56);
			font-size: 8px;
			font-weight: 900;
			letter-spacing: .16em;
			text-transform: uppercase;
			pointer-events: none;
		}

		.cn-meta::before {
			width: 5px;
			height: 5px;
			border-radius: 50%;
			background: var(--cn-accent);
			box-shadow: 0 0 0 5px rgba(255, 138, 42, .09);
			content: "";
		}

		@media (max-width: 1080px) {
			.cn-matrix__stage {
				height: 692px;
				padding-bottom: 0;
			}

			.cn-matrix__columns {
				height: 690px;
			}

			.cn-pane {
				padding: 20px;
			}

			.cn-pane--text h2 {
				font-size: clamp(1.55rem, 2.3vw, 2.25rem);
			}

			.cn-visual {
				width: min(130%, 420px);
			}

			.cn-service:hover .cn-visual {
				width: min(130%, 420px);
			}
		}

		@media (max-width: 900px) {
			.cn-matrix {
				width: min(calc(100% - 26px), var(--content));
			}
		}

		@media (max-width: 820px) {
			.cn-pane--top.cn-pane--visual .cn-visual,
			.cn-pane--bottom.cn-pane--visual .cn-visual,
			.cn-service:hover .cn-pane--top.cn-pane--visual .cn-visual,
			.cn-service:hover .cn-pane--bottom.cn-pane--visual .cn-visual {
				transform: none;
			}

			.cn-matrix__stage {
				height: auto;
				padding-bottom: 0;
				border: 1px solid rgba(76, 120, 134, 0.16);
				border-radius: 20px;
			}

			.cn-matrix__columns {
				display: block;
				height: auto;
				min-height: 0;
			}

			.cn-service {
				display: grid;
				grid-template-columns: minmax(0, 1fr);
				grid-template-rows: auto auto;
				border-left: 0;
				border-top: 1px solid rgba(76, 120, 134, 0.14);
				opacity: 1 !important;
			}

			.cn-service:hover,
			.cn-service:focus-within,
			.cn-service:nth-child(2):hover,
			.cn-service:nth-child(2):focus-within {
				grid-template-rows: auto auto;
			}

			.cn-service:first-child {
				border-top: 0;
			}

			.cn-pane--text h2 {
				max-width: 18ch;
				font-size: clamp(1.75rem, 7vw, 2.4rem);
			}

			.cn-copy,
			.cn-service:hover .cn-copy,
			.cn-service:focus-within .cn-copy {
				max-height: none;
				mask-image: none;
				opacity: 1;
			}

			.cn-visual,
			.cn-service:hover .cn-visual {
				width: min(92vw, 360px);
				transform: none;
			}

			.cn-meta {
				position: relative;
				right: auto;
				bottom: auto;
				left: auto;
				padding: 0 24px 24px;
			}
		}

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