html{scroll-behavior:auto;}
  body{background:#f3fffd;color:#06392f;font-family:'Vazirmatn',sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
  ::-webkit-scrollbar{width:0;height:0;}
  .no-scrollbar::-webkit-scrollbar{display:none;}
  .no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}

  @keyframes kb{ from{transform:scale(1.12);} to{transform:scale(1);} }
  .swiper-slide-active .kb{ animation:kb 8s ease-out forwards; }
  @keyframes spin360{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
  .spin-slow{ animation:spin360 12s linear infinite; }

  .glass{background:rgba(243,255,253,0.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,0.5);}

  .reveal-mask{position:relative;overflow:hidden;}
  /* default HIDDEN so images are visible even if JS never runs; GSAP re-arms it */
  .mask-panel{position:absolute;inset:0;background:#06392f;transform-origin:left;transform:scaleX(0);}

  .grid-shadow{box-shadow:0 50px 100px -35px rgba(0,0,0,0.45);}
  .morph-cell{overflow:hidden;background:#14453b;}
  .morph-cell .ov{background:linear-gradient(195deg, rgba(6,57,47,0) 40%, rgba(6,57,47,0.85) 100%);}

  /* The hover lift transitions transform, which fights GSAP while a card is
     revealing. Suppress it until the reveal has finished and cleared its props. */
  .lift{transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;}
  .lift[style*="transform"]{transition:box-shadow .4s;}
  .lift:hover{transform:translateY(-6px);box-shadow:0 24px 48px -20px rgba(0,0,0,.24);}

  /* nav solid state — set in CSS because the arbitrary-opacity utility didn't apply via CDN */
  .nav-solid{background:rgba(243,255,253,0.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(6,57,47,.07);}

  /* Official client-supplied wordmark. It is dark green on light surfaces and
     inverted only while the navigation is floating over the dark hero. */
  .brand-logo-link{width:clamp(112px,10vw,154px);height:34px;}
  .brand-logo{display:block;width:100%;height:auto;filter:brightness(0) invert(1);transition:filter .3s ease;}
  .nav-solid .brand-logo,#nav[data-solid="1"] .brand-logo{filter:none;}

  /* keep anchored headings clear of the fixed nav */
  section[id]{scroll-margin-top:90px;}

  /* energy bars fill from the right in RTL */
  #cardBars{flex-direction:row-reverse;}

  .swiper-pagination-bullet{background:#f3fffd !important;opacity:.4;width:26px !important;height:3px !important;border-radius:2px !important;transition:opacity .3s;}
  .swiper-pagination-bullet-active{opacity:1 !important;background:#37be3e !important;}

  /* Cinematic home-page hero. The MP4 contains the narrative typography and
     scene changes; this layer only adds functional site controls and edge
     contrast for the fixed navigation. */
  .brand-film-hero{height:min(100vh,960px);min-height:680px;}
  .brand-film-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#06392f;}
  .brand-film-edge{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(6,57,47,.5),transparent 20%,transparent 72%,rgba(6,57,47,.68));}
  .brand-film-ui{position:absolute;z-index:5;right:5%;bottom:68px;display:flex;align-items:center;gap:12px;}
  .brand-film-cta,.brand-film-toggle{min-height:48px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 22px;font:inherit;font-size:13.5px;font-weight:600;transition:transform .25s,background .25s;}
  .brand-film-cta{background:#f3fffd;color:#06392f;}.brand-film-cta:hover{background:#c8dbd8;transform:translateY(-2px);}
  .brand-film-toggle{border:1px solid rgba(243,255,253,.28);background:rgba(6,57,47,.45);color:#f3fffd;cursor:pointer;backdrop-filter:blur(10px);}
  .brand-film-toggle:hover{background:rgba(6,57,47,.72);}.brand-film-toggle .film-play{display:none;}.brand-film-toggle.is-paused .film-pause{display:none;}.brand-film-toggle.is-paused .film-play{display:block;}
  .brand-film-scroll{position:absolute;z-index:5;left:5%;bottom:77px;display:flex;align-items:center;gap:12px;color:rgba(243,255,253,.76);font-size:11px;letter-spacing:.16em;}
  .brand-film-scroll span{display:block;width:38px;height:1px;background:rgba(243,255,253,.52);}
  @media(max-width:700px){
    .brand-film-hero{height:76vh;min-height:560px;}.brand-film-media{object-position:62% center;}
    .brand-film-ui{right:5%;left:5%;bottom:34px;}.brand-film-cta{flex:1;}.brand-film-toggle{width:48px;padding:0;}.brand-film-toggle span{display:none;}
    .brand-film-scroll{display:none;}
  }

  /* reels marquee */
  .marquee-track{display:flex;gap:20px;width:max-content;will-change:transform;}
  #reelsViewport:hover .marquee-track{animation-play-state:paused;}

/* ══════════════════════════════════════════════════════════════════════════
   PHILMORE signature system — see DIRECTION.md
   The catalogue has no product photography, so the unit of the design is the
   spec plate: a product rendered as a typographic data object.
   ══════════════════════════════════════════════════════════════════════════ */

/* Brand lanes. PHILMORE takes the CTA green, TDK a grey-green from the same
   family; the lane is a rule and a label, never a large fill, so the two never
   fight for the page. */
.lane{--lane:#08440b;--lane-soft:rgba(8,68,11,.10);}
.lane-tdk{--lane:#577c75;--lane-soft:rgba(87,124,117,.12);}
/* On the primary-green ground the CTA green is 1.13:1 and disappears, so both
   lanes switch to values that actually read there. */
.on-dark .lane{--lane:#37be3e;--lane-soft:rgba(55,190,62,.14);}
.on-dark .lane-tdk{--lane:#81a09a;--lane-soft:rgba(129,160,154,.16);}
.lane-bar{background:var(--lane);}
.lane-text{color:var(--lane);}
.lane-soft{background:var(--lane-soft);}

/* The catalogue voice: SKUs and labels set in tracked latin caps. */
.sku{font-variant-numeric:tabular-nums;letter-spacing:.2em;text-transform:uppercase;}

/* Prices are the largest typographic element of any plate. */
.price{font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.price-unit{font-weight:400;letter-spacing:0;}

/* Out of stock: a stamp instead of a number, so the eye never hunts for a price. */
.stamp{border:1px solid currentColor;letter-spacing:.14em;text-transform:uppercase;}

/* Spec plate frame. When a product photo eventually exists it drops in behind
   .plate-field at low opacity — no part of this layout has to change. */
.plate{position:relative;isolation:isolate;}
.plate-field{position:absolute;inset:0;z-index:-1;opacity:.16;object-fit:cover;width:100%;height:100%;}
.plate-rule{height:1px;background:linear-gradient(to left,currentColor,transparent);opacity:.22;}

/* Signature motion: the SKU tracks open and the rule draws as a plate enters.
   Both are set to their final state here so a JS failure leaves them readable. */
.plate-enter .sku{letter-spacing:.2em;}
.plate-enter .plate-rule{transform:scaleX(1);transform-origin:right;}

/* Hero ground: a faint plotting grid instead of a lifestyle photograph.
   Costs no asset, reinforces the catalogue identity, and stays legible while
   product photography does not exist. */
.plot{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px),
    radial-gradient(ellipse 80% 60% at 78% 15%, rgba(55,190,62,.20), transparent 70%);
  background-size:56px 56px, 56px 56px, 100% 100%;
}

/* ── Hero ────────────────────────────────────────────────────────────────────
   Image-led, but composed as frame-in-frame: a wide room behind the headline
   and a portrait detail frame over it. Pakshoma's hero is a single bed with a
   small floating card; this is a different composition, not a restyled one. */

.hero-ground{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);will-change:transform;
  /* The brand scrim is a mid-dark green, not near-black. Over a bright room it
     would wash out to a green haze, so the photograph is dropped and desaturated
     first and the scrim then reads as colour rather than fog. */
  filter:saturate(.5) brightness(.55) contrast(1.06);}

/* RTL: the headline sits at the right, so the ink weight has to build to the
   right, opposite of an LTR hero. */
.hero-scrim{position:absolute;inset:0;}
.hero-scrim::before,.hero-scrim::after{content:'';position:absolute;inset:0;}
/* the headline column must read at any photograph brightness, so the ink is
   heavy and opaque under it rather than a light tint */
.hero-scrim::before{background:linear-gradient(
  to left,
  rgba(6,57,47,.34) 0%,
  rgba(6,57,47,.72) 26%,
  rgba(6,57,47,.95) 56%,
  rgba(6,57,47,.99) 78%,
  rgba(6,57,47,1) 100%);}
/* and a vertical pass so the nav and the catalogue strip both sit on ink */
.hero-scrim::after{background:linear-gradient(
  to bottom,
  rgba(6,57,47,.72) 0%,
  rgba(6,57,47,.10) 26%,
  rgba(6,57,47,.20) 62%,
  rgba(6,57,47,.80) 100%);}

/* The plotting grid returns as a faint overlay on the photograph — it ties the
   hero to the catalogue sections further down the page. */
.hero-plot{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to left, rgba(0,0,0,.9), transparent 65%);
          mask-image:linear-gradient(to left, rgba(0,0,0,.9), transparent 65%);}

/* Signature move: an ink panel wipes off the detail frame and a lane-coloured
   scanline rides its edge, so the photograph "develops" downward.
   Both default to their finished state — with no JS the photograph is simply
   there, which is the same guarantee the approved design's mask-panel made. */
.frame-mask{position:absolute;inset:0;z-index:1;background:#06392f;
  transform:scaleY(0);transform-origin:bottom;}
.scanline{position:absolute;left:0;right:0;top:0;height:2px;z-index:2;opacity:0;
  background:linear-gradient(to right, transparent, var(--lane,#08440b), transparent);
  box-shadow:0 0 20px 3px var(--lane,#08440b);}

.hero-frame{transform-origin:center;}

/* Title reveal is a per-line clip, so it wipes rather than fades. */
.hero-title span{display:inline-block;}

/* Neutral frame for a category with no honest stand-in photograph. Deliberately
   graphic rather than a wrong-subject stock photo. */
.frame-blank{
  background:
    radial-gradient(ellipse 90% 70% at 50% 18%, rgba(55,190,62,.30), transparent 68%),
    linear-gradient(to bottom, #14453b, #06392f);
  position:relative;}
.frame-blank::after{content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:40px 40px;}

/* Contact fields. Written as real CSS for the same reason .nav-solid is: the
   opacity-modifier utilities do not reliably generate under the Tailwind play
   CDN, and an input that fails to get one falls back to the browser's solid
   white default — which is very visible on a dark panel. */
.field{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  color:#f3fffd;
  font-size:14px;
  padding:12px 20px;
  width:100%;
  transition:border-color .25s, background .25s;
}
.field::placeholder{color:rgba(243,255,253,.38);}
.field:focus{outline:none;border-color:#37be3e;background:rgba(255,255,255,.10);}
.field-pill{border-radius:9999px;}
.field-area{border-radius:1.25rem;resize:none;}

/* Nav button surfaces. Real CSS again, because these are the opacity-modifier
   utilities that do not reliably generate under the Tailwind play CDN. */
.nav-btn{border:1px solid transparent;transition:background .3s,border-color .3s,color .3s;}
.nav-btn-dark{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);}
.nav-btn-light{background:rgba(6,57,47,.06);border-color:rgba(6,57,47,.12);}
.nav-btn-dark:hover{background:rgba(255,255,255,.2);}
.nav-btn-light:hover{background:rgba(6,57,47,.1);}

.mobile-menu{position:fixed;inset:0;z-index:190;background:rgba(6,57,47,.985);color:#f3fffd;
  padding:28px 7vw;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;
  transform:translateY(-12px);transition:opacity .28s,visibility .28s,transform .28s;}
.mobile-menu.is-open{opacity:1;visibility:visible;transform:none;}
.mobile-menu>button{position:absolute;top:22px;left:5vw;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:50%;font-size:28px;line-height:1;color:#f3fffd;}
.mobile-menu nav{display:flex;flex-direction:column;text-align:center;gap:20px;font-size:clamp(22px,7vw,34px);font-weight:700;}
.mobile-menu nav a{transition:color .2s}.mobile-menu nav a:hover{color:#37be3e}.menu-open{overflow:hidden;}
.mobile-search{display:flex;gap:7px;margin-top:12px;padding:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:999px}
.mobile-search input{min-width:0;width:190px;padding:7px 13px;background:transparent;color:#f3fffd;font:inherit;font-size:13px;outline:0}.mobile-search button{padding:7px 14px;border-radius:999px;background:#f3fffd;color:#06392f;font-size:12px}

#nav[data-solid="1"]{background:rgba(243,255,253,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(6,57,47,.07);}

/* Accent on the dark ground. bg-signal / text-signal are the light-ground pair;
   these are their counterparts, applied inside .on-dark sections. */
.on-dark .accent-text{color:#37be3e;}
.on-dark .accent-rule{background:rgba(55,190,62,.5);}
.accent-text{color:#08440b;}
.accent-rule{background:rgba(8,68,11,.45);}

/* Primary button. On the light ground it is the CTA green; on the dark ground
   the CTA green is invisible, so the button inverts to the light colour. */
.btn-primary{background:#08440b;color:#f3fffd;transition:background .3s;}
.btn-primary:hover{background:#2e6232;}
.on-dark .btn-primary{background:#f3fffd;color:#06392f;}
.on-dark .btn-primary:hover{background:#c8dbd8;}

/* Ground-aware accents. Each of these appears on both the light and the dark
   ground, and the CTA green cannot be used on the dark one. */
.link-accent:hover{color:#08440b;}
.on-dark .link-accent:hover, .nav-solid ~ * .link-accent:hover{color:#37be3e;}
#navLinks a:hover{color:#37be3e;}
.nav-solid #navLinks a:hover{color:#08440b;}

.lane-dot{background:#08440b;}
.lane-dot.lane-tdk{background:#577c75;}
.on-dark .lane-dot{background:#37be3e;}
.on-dark .lane-dot.lane-tdk{background:#81a09a;}

.morph-cta .cell-built{background:#f3fffd;color:#06392f;}
.morph-cta:hover .cell-built{background:#c8dbd8;}

.btn-buy{background:#06392f;color:#f3fffd;transition:background .3s;}
.btn-buy:hover{background:#2e6232;}

.link-social:hover{background:#37be3e;color:#06392f;}

/* Category tile with no photograph: the brand's own line icon on a green field.
   The icons are dark green artwork, so they are inverted to the light colour to
   sit on the dark tile. */
.icon-field{background:linear-gradient(160deg,#14453b 0%,#06392f 100%);}
.icon-mark{filter:brightness(0) saturate(100%) invert(96%) sepia(11%) saturate(300%) hue-rotate(96deg) brightness(103%);}

/* Product spec table */
.specs{border-collapse:collapse;}
.specs th,.specs td{padding:13px 20px;text-align:right;border-bottom:1px solid #e2f1ef;}
.specs th{color:#577c75;font-weight:500;white-space:nowrap;width:38%;}
.specs td{color:#06392f;font-weight:500;}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0;}
.specs tr:nth-child(even) th,.specs tr:nth-child(even) td{background:rgba(8,68,11,.025);}

/* visually hidden, still read out */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── Checkout form ───────────────────────────────────────────────────────────
   Written as real CSS for the same reason the contact fields are: the play
   CDN's opacity utilities are unreliable and a bare <input> falls back to the
   browser's own chrome. */
.field-wrap{display:flex;flex-direction:column;gap:7px;}
.field-wrap label{font-size:12.5px;color:#577c75;}
.field-wrap .req{color:#08440b;}
.field-wrap input,.field-wrap select,.field-wrap textarea{
  width:100%;background:#f3fffd;border:1px solid #c8dbd8;border-radius:14px;
  padding:12px 15px;font:inherit;font-size:14px;color:#06392f;
  transition:border-color .25s,background .25s;
}
.field-wrap textarea{resize:vertical;min-height:88px;}
.field-wrap select{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,#577c75 50%),
  linear-gradient(135deg,#577c75 50%,transparent 50%);
  background-position:calc(0% + 18px) calc(50% + 1px), calc(0% + 23px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-left:38px;}
.field-wrap input:focus,.field-wrap select:focus,.field-wrap textarea:focus{
  outline:none;border-color:#08440b;background:#fff;
}
.field-wrap.has-error input,.field-wrap.has-error select,.field-wrap.has-error textarea{
  border-color:#a33b2a;background:rgba(163,59,42,.04);
}
.field-err{font-size:11.5px;color:#a33b2a;line-height:1.6;}
.note-err{color:#a33b2a;}
.note-ok{color:#08440b;}

/* Product gallery thumbnails */
.gal-thumb{border:2px solid transparent;transition:border-color .25s,opacity .25s;opacity:.72;cursor:pointer;padding:0;}
.gal-thumb:hover{opacity:1;}
.gal-thumb.is-on{border-color:#08440b;opacity:1;}

/* ── Two brand lanes ─────────────────────────────────── */
.lane-split{position:relative;display:grid;gap:18px;}
@media(min-width:880px){.lane-split{grid-template-columns:1fr 1fr;gap:46px;}}

/* the seam only means something once the panels sit side by side */
.lane-seam{display:none;}
@media(min-width:880px){
  .lane-seam{
    display:block;position:absolute;top:6%;bottom:6%;right:50%;width:1px;
    background:linear-gradient(180deg,transparent,rgba(87,124,117,.34) 18%,rgba(87,124,117,.34) 82%,transparent);
    transform:scaleY(0);transform-origin:50% 0;
  }
}

.lane-panel{position:relative;}
/* GSAP owns the panel's transform; hover lift lives on the inner wrapper so the
   two never fight over the same property. See DIRECTION.md §6.9. */
.lane-panel-in{
  background:#fff;border-radius:1.75rem;padding:34px 30px;height:100%;
  display:flex;flex-direction:column;
  border:1px solid transparent;
  transition:border-color .3s,box-shadow .4s,transform .45s cubic-bezier(.2,.8,.2,1);
}
.lane-panel:hover .lane-panel-in{
  border-color:var(--lane,#08440b);transform:translateY(-4px);
  box-shadow:0 18px 40px -28px rgba(6,57,47,.55);
}

.lane-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
.lane-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--lane-soft,rgba(8,68,11,.10));color:#06392f;
  border-radius:9999px;padding:8px 13px;font-size:12.5px;line-height:1;
  transition:background-color .25s,color .25s;
}
.lane-chip:hover{background:var(--lane,#08440b);color:#f3fffd;}
.lane-chip-i{opacity:.58;transition:opacity .25s,filter .25s;}
.lane-chip:hover .lane-chip-i{opacity:1;filter:brightness(0) invert(1);}
.lane-chip-n{color:var(--lane,#08440b);font-size:11px;opacity:.75;}
.lane-chip:hover .lane-chip-n{color:#f3fffd;opacity:.8;}

.lane-go{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  color:var(--lane,#08440b);font-size:12.5px;font-weight:600;
  border-bottom:1px solid transparent;padding-bottom:3px;transition:border-color .25s;
}
.lane-go span{transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.lane-go:hover{border-color:var(--lane,#08440b);}
.lane-go:hover span{transform:translateX(-5px);}

/* Product rail: desktop is a direction-aware pinned sequence; touch screens
   use native horizontal scrolling so the page never pins into an empty frame. */
.product-rail-viewport{background:#f3fffd;overscroll-behavior:none;}
.product-rail-track{width:max-content;max-width:none;}
@media(max-width:899px){
  .product-rail-viewport{height:auto!important;min-height:0;display:block;overflow-x:auto!important;
    padding:24px 0 56px;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;
    scrollbar-width:thin;scrollbar-color:#08440b #e2f1ef;}
  .product-rail-track{padding-inline:5vw;will-change:auto;}
  .product-rail-track>.rail-card,.product-rail-track>div{scroll-snap-align:start;}
}
@media(max-width:480px){.product-rail-track>.rail-card,.product-rail-track>div{width:82vw;}}

.faq-item summary::-webkit-details-marker{display:none}.prose-fa{font-size:16px;line-height:2.15;}
.catalog-search{max-width:680px;display:flex;gap:8px;padding:6px;background:#fff;border:1px solid #e2f1ef;border-radius:999px;}
.catalog-search input{min-width:0;flex:1;padding:10px 18px;background:transparent;color:#06392f;font:inherit;font-size:14px;outline:none;}
.catalog-search button{padding:10px 23px;border-radius:999px;background:#08440b;color:#f3fffd;font:inherit;font-size:13px;font-weight:600;}
.product-attribute-filters{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px solid #c8dbd8;}
.product-attribute-filters label{display:grid;gap:5px;min-width:155px;color:#577c75;font-size:11.5px;}
.product-attribute-filters select{min-height:40px;padding:0 12px;border:1px solid #c8dbd8;border-radius:11px;background:#fff;color:#06392f;font-family:inherit;font-size:12.5px;}
.product-attribute-filters button{min-height:40px;padding:0 18px;border:0;border-radius:999px;background:#08440b;color:#f3fffd;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;}
.product-attribute-filters>a{min-height:40px;display:flex;align-items:center;color:#577c75;font-size:12px;}
@media(max-width:600px){.product-attribute-filters label{width:calc(50% - 5px);min-width:0}.product-attribute-filters button{width:100%}}

/* ── Quick comparison ───────────────────────────────────────────────────────
   A single composed tool that uses the same ink, bone, signal-green, radii
   and subtle technical grid already established across the storefront. */
.quick-compare-section{background:#e2f1ef;padding:80px 5%;}
.quick-compare-shell{
  position:relative;isolation:isolate;overflow:hidden;
  max-width:1152px;margin:0 auto;padding:52px;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:center;
  color:#f3fffd;background-color:#06392f;
  background-image:linear-gradient(90deg,rgba(6,57,47,.52),rgba(6,57,47,.93) 47%,#06392f 78%),var(--compare-photo);
  background-size:cover;background-position:left center;border-radius:32px;
}
.quick-compare-shell::before{
  content:'';position:absolute;z-index:-1;inset:-45% auto auto -8%;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(151,243,156,.13),rgba(151,243,156,0) 68%);
}
.quick-compare-shell::after{
  content:'';position:absolute;z-index:-1;inset:0;
  background-image:linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:48px 48px;mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.75));pointer-events:none;
}
.quick-compare-kicker{display:flex;align-items:center;gap:12px;margin-bottom:20px;color:#37be3e;font-size:13px;letter-spacing:.12em;}
.quick-compare-kicker span{width:28px;height:1px;background:rgba(55,190,62,.6);}
.quick-compare-copy h2{margin:0 0 20px;font-size:clamp(32px,4vw,50px);font-weight:900;line-height:1.17;}
.quick-compare-copy p{max-width:430px;margin:0;color:rgba(243,255,253,.62);font-size:16px;line-height:2;}
.quick-compare-points{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;}
.quick-compare-points span{padding:7px 13px;border:1px solid rgba(255,255,255,.13);border-radius:999px;color:rgba(243,255,253,.74);font-size:13px;}
.quick-compare-form{padding:26px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.12);border-radius:24px;backdrop-filter:blur(8px);}
.quick-compare-choice{position:relative;padding:18px 20px 20px;background:rgba(6,57,47,.58);border:1px solid rgba(255,255,255,.1);border-radius:17px;}
.quick-compare-choice label{display:block;margin:0 0 10px;color:rgba(243,255,253,.62);font-size:14px;}
.quick-compare-number{position:absolute;top:17px;left:18px;color:#37be3e;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.12em;}
.quick-compare-choice select{
  width:100%;min-height:48px;padding:0 14px 0 42px;border:1px solid rgba(255,255,255,.16);border-radius:12px;
  color:#06392f;background:#f3fffd;font-family:inherit;font-size:14px;cursor:pointer;
}
.quick-compare-choice select:focus{outline:3px solid rgba(55,190,62,.24);border-color:#37be3e;}
.quick-compare-versus{height:42px;display:grid;grid-template-columns:1fr auto 1fr;gap:13px;align-items:center;color:#37be3e;}
.quick-compare-versus span{height:1px;background:rgba(255,255,255,.11);}
.quick-compare-submit{
  width:100%;min-height:52px;margin-top:18px;padding:0 21px;border:0;border-radius:999px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  color:#06392f;background:#f3fffd;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;
  transition:background .25s,transform .25s;
}
.quick-compare-submit:hover{background:#c8dbd8;transform:translateY(-2px);}
.quick-compare-submit:focus-visible{outline:3px solid #37be3e;outline-offset:3px;}
@media(max-width:850px){
  .quick-compare-section{padding:64px 5%;}
  .quick-compare-shell{grid-template-columns:1fr;gap:34px;padding:36px 26px;border-radius:24px;}
  .quick-compare-copy h2{font-size:clamp(30px,9vw,43px);}
  .quick-compare-form{padding:18px;}
}