/* site/glass.css - the owner-approved glass look (2026-10-12) for marketing pages other than the homepage.
   Opt in with <html class="tyg">. The homepage keeps its own inline copy (site/index.html) because it is
   the reference build; keep the tokens below in step with it. site.css still owns .snav and .sfoot.

   Rules carried over from the homepage:
   - Text sits on a fill of at least .80, so contrast never depends on what is behind the card.
   - The glow ring marks the ONE next action per zone. Never on a price (Magnuson UPP), a partner logo,
     a review, or the mobile bar.
   - Partner marks sit unaltered on a white .brand-plate. */
html.tyg{
  --g-ink:#3A2E26; --g-brown:#5B4B42; --g-muted:#6B5D54; --g-blue:#B3D0D9; --g-blue-d:#3F6B7A; --g-sand:#DFC4B5;
  --g-gold:#9A6A1F; --g-ground:#E3E7E8; --g-orange:#E85D2A;
  --g-fill:rgba(250,249,247,.80); --g-fill-strong:rgba(250,249,247,.90); --g-edge:rgba(255,255,255,.70); --g-hi:rgba(255,255,255,.85);
  --g-drop:0 18px 44px -22px rgba(42,52,58,.45); --g-hairline:rgba(91,75,66,.14);
  --g-display:'Spectral', Georgia, 'Times New Roman', serif; --g-body:'Lato', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --g-r-card:22px; --g-r-pill:999px;
  background:
    radial-gradient(circle at 92% 18%, rgba(179,208,217,.95), transparent 38%),
    radial-gradient(circle at 4% 58%, rgba(223,196,181,.75), transparent 36%),
    radial-gradient(circle at 80% 94%, rgba(179,208,217,.75), transparent 42%),
    var(--g-ground) fixed}
html.tyg body{background:transparent;font-family:var(--g-body);color:var(--g-ink)}

.tyg .glass{background:var(--g-fill);border:1px solid var(--g-edge);border-radius:var(--g-r-card);box-shadow:inset 0 1px 0 var(--g-hi), var(--g-drop)}
.tyg .blur{-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
@media (prefers-reduced-transparency: reduce){.tyg .glass{background:#FAF9F7}.tyg .blur{-webkit-backdrop-filter:none;backdrop-filter:none}}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.tyg .blur{background:var(--g-fill-strong)}}

.tyg .g-eyebrow{font:900 12px/1.2 var(--g-body);letter-spacing:.16em;text-transform:uppercase;color:var(--g-muted)}
.tyg .g-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--g-r-pill);
  font:900 15.5px/1 var(--g-body);letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer;border:0;transition:transform .15s ease, background .15s ease}
.tyg .g-btn:active{transform:translateY(1px)}
.tyg .g-ink{background:var(--g-ink);color:#FAF9F7;box-shadow:0 10px 24px -12px rgba(58,46,38,.7)}
.tyg .g-ink:hover{background:#4A3B31}
.tyg .g-ghost{background:rgba(255,255,255,.62);color:var(--g-ink);border:1px solid rgba(58,46,38,.22)}
.tyg .g-ghost:hover{background:#fff}
.tyg .g-chip{font:700 13.5px/1.2 var(--g-body);color:var(--g-ink);background:rgba(179,208,217,.42);border:1px solid rgba(63,107,122,.2);
  padding:9px 14px;border-radius:var(--g-r-pill);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.tyg .g-chip:hover{background:rgba(179,208,217,.7)}
.tyg .brand-plate{align-self:flex-start;display:inline-flex;align-items:center;background:#fff;border-radius:12px;padding:12px 16px;box-shadow:0 1px 0 rgba(58,46,38,.06), 0 6px 16px -10px rgba(42,52,58,.35)}
.tyg .brand-plate img{display:block;height:40px;width:auto;max-width:100%}

/* Premium border: the spinning ring from site.css (.glow-ring), tuned to the homepage palette.
   Spins only while on screen when glass.js has added html.io and toggled .in-view. */
.tyg .g-glow{position:relative;isolation:isolate}
.tyg .g-glow .glow-ring{padding:2px;background:rgba(58,46,38,.14)}
.tyg .g-glow .glow-ring::before{background:conic-gradient(transparent 0 40%,var(--g-orange) 58%,var(--g-sand) 72%,var(--g-blue) 86%,transparent 100%)}
.tyg .g-btn.g-glow .glow-ring{background:rgba(232,93,42,.18)}
.tyg .g-btn.g-glow .glow-ring::before{animation-duration:5s}
.tyg .g-glow:hover .glow-ring::before,.tyg .g-glow:focus-visible .glow-ring::before,html.tyg.io .g-glow:not(.in-view) .glow-ring::before{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.tyg .g-glow .glow-ring::before{animation:none}}

/* ---------- Page adapters (2026-10-12): the older landing-page components (lp-*, ott-*, fq-*, gh-*, tf-*, ag-*)
   take the glass surface on any page that opts in with html.tyg, so each page only adds the class and the links.
   Fill stays >= .80 (no blur on these: there are dozens per page and the fill alone reads as frosted). */
.tyg :is(.lp-answer,.ott-answer,.ott-feat,.lp-fq,.lp-step,.scv,.gen,.step,.captbl-wrap,.gh-card,.fq-item,.vg-guides,.tf-proof,.tf-optin,.tf-trust,.tf-inst,.tf-slot,.tf-nextdate,.tf-waitlist,.fluid,.bundle,.order,.asx-card){
  background:var(--g-fill);border:1px solid var(--g-edge);border-radius:var(--g-r-card);box-shadow:inset 0 1px 0 var(--g-hi), var(--g-drop)}
.tyg :is(.lp-answer,.ott-answer){background:var(--g-fill-strong);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.tyg :is(.lp-fq,.fq-item){border-radius:18px}
.tyg :is(.lp-fq.open,.fq-item.open){box-shadow:0 0 0 3px rgba(179,208,217,.65), var(--g-drop);border-color:rgba(63,107,122,.35)}
/* Closing CTA bands become a glass card with a soft blue/sand wash. */
.tyg :is(.ott-final,.fq-foot,.lp-final-card){background:linear-gradient(135deg,rgba(250,249,247,.9),rgba(236,243,245,.86));border:1px solid var(--g-edge);border-radius:var(--g-r-card);box-shadow:inset 0 1px 0 var(--g-hi), var(--g-drop)}
/* Dark panels stay ink, with the glass edge and drop so they sit in the same family. */
.tyg :is(.ott-why,.lp-sc,.fq-hero,.convert){border-radius:var(--g-r-card);border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.08), var(--g-drop)}
/* Tables: one glass card, hairline rows. */
.tyg :is(.lp table,.ott table,main table:not(.captbl):not(.mtab):not(.htab)){background:var(--g-fill-strong);border:1px solid var(--g-edge);border-radius:var(--g-r-card);box-shadow:inset 0 1px 0 var(--g-hi), var(--g-drop)}
.tyg main table th{background:transparent}
/* Chips and pills. */
.tyg :is(.ott-veh a,.lp-veh a,.ag-veh a,.ag-chip,.asx-chip,.fq-chip){background:rgba(179,208,217,.30);border:1px solid rgba(63,107,122,.22);box-shadow:none;color:var(--g-ink)}
.tyg :is(.ott-veh a,.lp-veh a,.ag-veh a,.ag-chip,.asx-chip,.fq-chip):hover{background:rgba(179,208,217,.6);color:var(--g-ink)}
.tyg :is(.fq-chip.on,.asx-chip.on){background:var(--g-ink);color:#FAF9F7;border-color:var(--g-ink)}
/* Buttons: outline buttons read as glass ghosts. */
.tyg .btn.outline{background:rgba(255,255,255,.62);border:1px solid rgba(58,46,38,.22);color:var(--g-ink)}
.tyg .btn.outline:hover{background:#fff;color:var(--g-ink)}
.tyg main select{background:rgba(255,255,255,.9);border:1px solid rgba(63,107,122,.28);border-radius:12px}

/* .btn.glow (site.css) on glass pages: the homepage's orange/sand/blue sweep, and it rests while off screen. */
.tyg .btn.glow::before{background:conic-gradient(transparent 0 40%,var(--g-orange) 58%,var(--g-sand) 72%,var(--g-blue) 86%,transparent 100%);animation-duration:5s}
html.tyg.io .btn.glow:not(.in-view)::before{animation-play-state:paused}
/* amsoil-garage never defined .btn (site.css only carries its transitions), so its three CTAs, including the
   Preferred Customer enrollment, rendered as default blue links; blue on the ink .convert band was near
   unreadable. A glow also needs this: overflow:hidden does not clip an inline box. */
.tyg :is(.ag-shopall .btn,.convert .btn,a#full-catalog){display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;
  border-radius:var(--g-r-pill);font:900 15.5px/1.2 var(--g-body);text-decoration:none;text-align:center}
.tyg .ag-shopall .btn.primary{background:var(--g-ink);color:#FAF9F7;box-shadow:0 10px 24px -12px rgba(58,46,38,.7)}
.tyg .ag-shopall .btn.primary:hover{background:#4A3B31}
.tyg .convert .btn.primary{background:#FAF9F7;color:var(--g-ink)}
.tyg .convert .btn.primary:hover{background:#fff}
.tyg .convert .btn.outline{background:transparent;border:1.5px solid #F3EFEA;color:#F3EFEA}
.tyg .convert .btn.outline:hover{background:rgba(255,255,255,.12);color:#fff}
/* ott-tune's closing row was 440px, which wrapped "Call / Text (612) 406-7117" onto two lines. */
.tyg .ott-final .row{max-width:540px}
/* banks-products' category list (.hcats) never got the chip styles the AMSOIL pages carry, so it rendered as a
   run-on line of browser-blue links; table links on banks-products and job-kit were browser blue too. */
.tyg .hcats{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.tyg .hcats a{font:700 13.5px/1.2 var(--g-body);color:var(--g-ink);background:rgba(179,208,217,.30);border:1px solid rgba(63,107,122,.22);
  padding:9px 14px;border-radius:var(--g-r-pill);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.tyg .hcats a:hover{background:rgba(179,208,217,.6)}
.tyg :is(main,.lp) table a:not(.btn){color:var(--g-ink);text-decoration-color:rgba(58,46,38,.35);text-underline-offset:2px}
.tyg table a:not(.btn):hover{text-decoration-color:var(--g-ink)}
/* Base link colour for glass pages that never set one (banks-products sits in .lp with no <main>, job-kit). :where() keeps it at (0,1,1) so
   any page rule for its own links still wins. */
:where(html.tyg main,html.tyg .lp) a:not([class]){color:var(--g-ink);text-underline-offset:2px}

/* ---------- Brand hero (2026-10-13): the partner-line landing pages (/supercharger, /amsoil-garage, /banks-products)
   lead with the partner's name. One glass card carries the premium border; the partner mark sits unaltered on its own
   white .brand-plate with nothing else in the lockup (Magnuson Dealer Policy 13.1/13.4). The ring frames the card, never
   the logo or a price. Copy column + media column from 880px; stacked below. */
.tyg .g-hero{max-width:1120px;margin:22px auto 0;padding:0 16px}
.tyg .g-hero-card{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:center;padding:clamp(20px,3.4vw,40px);border-radius:28px}
@media (min-width:880px){.tyg .g-hero-card{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.tyg .g-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.tyg .g-hero .brand-plate{padding:12px 18px}
.tyg .g-hero .brand-plate img{height:clamp(30px,3.2vw,42px)}
.tyg .g-hero h1{font-family:var(--g-display);font-weight:600;font-size:clamp(31px,4.4vw,50px);line-height:1.06;letter-spacing:-.015em;color:var(--g-ink);margin:0;text-wrap:balance}
.tyg .g-hero-lede{font-size:clamp(16px,1.45vw,18px);line-height:1.55;color:var(--g-brown);max-width:54ch;margin:0}
.tyg .g-hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.tyg .g-hero-proof{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:2px 0 0;padding:0}
.tyg .g-hero-proof li,.tyg .g-hero-proof a{font:700 13px/1.25 var(--g-body);color:var(--g-ink);background:rgba(255,255,255,.72);border:1px solid var(--g-hairline);
  border-radius:var(--g-r-pill);padding:8px 13px;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.tyg .g-hero-proof a{text-decoration:underline;text-decoration-color:rgba(58,46,38,.35);text-underline-offset:3px}
.tyg .g-hero-proof a:hover{background:#fff;text-decoration-color:var(--g-ink)}
.tyg .g-hero-proof li:has(> a){background:none;border:0;padding:0}  /* a linked chip is the <a>; do not double the pill */
.tyg .g-hero-media{position:relative;margin:0;border-radius:20px;overflow:hidden;background:#2B3034;box-shadow:0 22px 40px -24px rgba(42,52,58,.6);aspect-ratio:4/3}
.tyg .g-hero-media img{display:block;width:100%;height:100%;object-fit:cover}
.tyg .g-hero-media figcaption{position:absolute;left:12px;bottom:12px;right:12px;font:700 12.5px/1.3 var(--g-body);color:#fff;
  background:rgba(30,26,22,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:7px 11px;border-radius:10px;width:fit-content;max-width:calc(100% - 24px)}
/* Character art (Rocky) sits on a soft wash instead of a photo frame. */
.tyg .g-hero-media.art{background:radial-gradient(circle at 50% 60%,rgba(179,208,217,.75),rgba(223,196,181,.45) 60%,transparent 78%);box-shadow:none;aspect-ratio:auto;display:flex;justify-content:center}
.tyg .g-hero-media.art img{width:auto;max-width:100%;height:auto;max-height:420px;object-fit:contain}
/* Manufacturer product shot (white studio background): show the whole part, never crop it. */
.tyg .g-hero-media.product{background:#fff;aspect-ratio:1;max-width:440px;justify-self:center;width:100%}
.tyg .g-hero-media.product img{object-fit:contain;padding:6%}
.tyg .g-hero-media.product figcaption{background:rgba(30,26,22,.72)}
/* A hero whose action is a search field: the field takes the hero's full width under the copy. */
.tyg .g-hero-search{grid-column:1/-1;min-width:0}
.tyg .g-hero-search #hresults{margin:8px 0 0}
.tyg .g-hero-search .htab{background:rgba(255,255,255,.9);border-radius:16px;overflow:hidden}
.tyg .g-hero-search #hsearch,.tyg .g-hero-search input[type=search]{width:100%;min-height:52px;padding:0 18px;font:400 16px/1 var(--g-body);color:var(--g-ink);background:rgba(255,255,255,.92);
  border:1.5px solid rgba(63,107,122,.35);border-radius:var(--g-r-pill);margin:0}
.tyg .g-hero-search #hsearch:focus,.tyg .g-hero-search input[type=search]:focus{outline:none;border-color:var(--g-blue-d);box-shadow:0 0 0 4px rgba(179,208,217,.6)}
@media (max-width:879px){.tyg .g-hero-media.art img{max-height:260px}}
.tyg .g-hero-fine{font-size:12.5px;line-height:1.5;color:var(--g-muted);margin:0;max-width:60ch}
/* A hero inside a narrow page column (amsoil-garage's 820px .ag) breaks out to the hero width. */
.tyg .g-hero.bleed{width:min(1088px,calc(100vw - 32px));margin:6px 0 22px 50%;padding:0;transform:translateX(-50%)}