/* ════════════════════════════════════════════════════════════════ NOVA TRADING — ARTICLE / PRODUCT PAGE STYLESHEET Loaded on all 12 product + guide pages (NOT the homepage). Navbar, footer, tokens, and reset come from base.css already — this file only has the things specific to these pages: hero, article layout, cards, buttons, badges, tables, FAQ, animations. ════════════════════════════════════════════════════════════════ */ body{overflow-x:hidden} /* ── Rec 6: Compact B2B typography — 14px body, 1.5 line-height ── */ p{font-size:.875rem;line-height:1.5} /* ── Page width: articles are narrower (1100px) than category/product pages (1320px, to match the home page's section width). Add class="is-wide" to for the wider product-category pages. ── */ .si{max-width:1100px;margin:0 auto;padding:0 40px;position:relative;z-index:1} .is-wide .si{max-width:1320px} .gold{color:var(--gold-dark)} .navy{color:var(--navy)} /* ── Hero (unified — every product/guide page uses class="hero-page", with its own decorative background set via the --hero-art custom property inline on the element, e.g. style="--hero-art:url('...')") ── */ .hero-page{overflow:hidden;position:relative;padding:100px 0 60px;background:linear-gradient(135deg,rgba(249,115,22,.06) 0%,transparent 60%)} .hero-page::before{ content:'';position:absolute;inset:0; background-image:var(--hero-art,none); background-repeat:no-repeat;background-position:right center;background-size:cover; pointer-events:none; } .hero-page > .si{position:relative;z-index:1} .hero-page > .si > .breadcrumb, .hero-page > .si > h1, .hero-page > .si > [style*="font-size"], .hero-page > .si > p, .hero-page > .si > .hero-actions, .hero-page > .si > div:last-of-type{animation-fill-mode:both} .hero-page > .si > .breadcrumb{animation:sp-badge-in .35s var(--ease-expo) .05s both} .hero-page > .si > h1, .hero-page > .si > [style*="font-size"]{animation:sp-hero-in .42s var(--ease-expo) .12s both} .hero-page > .si > p{animation:sp-hero-in .4s var(--ease-expo) .18s both} .hero-page > .si > .hero-actions, .hero-page > .si > div:last-of-type{animation:sp-hero-in .4s var(--ease-expo) .24s both} /* ── Real-photo hero treatment (class="hero-page has-photo", with --hero-photo:url('/images/xyz.webp') set inline). The base .hero-page::before above stays untouched for the 3 pages that still use abstract SVG line-art instead of a photo. ── */ .hero-page.has-photo::before{ background-image: linear-gradient(100deg, var(--cream) 0%, var(--cream) 30%, rgba(250,250,245,.78) 46%, rgba(250,250,245,.18) 66%, transparent 82%), linear-gradient(to top, rgba(15,23,42,.20) 0%, transparent 38%), var(--hero-photo); background-size: auto, auto, cover; background-position: right center; opacity: 1; } @media(max-width:768px){ .hero-page.has-photo::before{ background-image: linear-gradient(rgba(250,250,245,.90), rgba(250,250,245,.74)), var(--hero-photo); background-size: cover; background-position: center 32%; opacity: 1; } } /* ── Feature photo: the "scroll down" image break used mid-article ── */ .feature-photo{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(15,23,42,.12);max-height:440px;margin:8px 0} .feature-photo img{width:100%;height:100%;max-height:440px;object-fit:cover;display:block;transition:transform .6s var(--ease-expo)} .feature-photo:hover img{transform:scale(1.035)} .feature-photo-cap{position:absolute;left:0;right:0;bottom:0;padding:18px 26px;background:linear-gradient(to top,rgba(15,23,42,.68) 0%,transparent 100%);color:#fff;font-size:.78rem;letter-spacing:.04em;line-height:1.4} .feature-photo-cap strong{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.66rem;color:var(--gold-light,#FDBA74);display:block;margin-bottom:3px} .feature-photo-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .feature-photo-row .feature-photo{max-height:300px} .feature-photo-row .feature-photo img{max-height:300px} @media(max-width:768px){ .feature-photo{max-height:260px} .feature-photo img{max-height:260px} .feature-photo-row{grid-template-columns:1fr} } .breadcrumb{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)} .breadcrumb a{color:var(--muted-2);transition:color .2s ease} .breadcrumb a:hover{color:var(--gold-dark)!important} /* ── Buttons (these pages use a base .btn + modifier, unlike home.css's standalone .btn-primary — keep separate so the two systems never collide) ── */ .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:6px;font-family:'DM Sans',sans-serif;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;border:none;cursor:pointer;transition:background .22s ease,transform .28s var(--ease-spring),box-shadow .28s ease;text-decoration:none;position:relative;overflow:hidden;touch-action:manipulation} .btn-primary{background:var(--navy);color:var(--cream)} .btn-primary:hover{background:var(--navy-soft);transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,23,42,.22)} .btn-wa{background:var(--wa);color:#fff} .btn-wa:hover{background:var(--wa-hover);transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,211,102,.28)} .btn:active{transform:scale(.97)} .btn-primary::after,.btn-wa::after{content:'';display:block;position:absolute;inset:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:translateX(-100%) skewX(-12deg);right:unset;left:0;border-radius:0;pointer-events:none} .btn-primary:hover::after,.btn-wa:hover::after{animation:sp-shimmer .65s ease forwards} /* ── Badges / tags ── */ .badge{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:999px;transition:transform .22s var(--ease-spring)} .badge:hover{transform:scale(1.05)} .badge-green{background:rgba(22,163,74,.1);color:var(--green)} .badge-gold{background:rgba(249,115,22,.1);color:var(--gold-dark);border:1px solid rgba(249,115,22,.3);animation:sp-pulse-gold 3s ease-in-out infinite} .tag{display:inline-block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:999px;margin-bottom:8px} .tag-gold{background:rgba(249,115,22,.15);color:var(--gold)} .tag-navy{background:rgba(15,23,42,.08);color:var(--navy)} .tag-green{background:rgba(22,163,74,.1);color:var(--green)} .tag-red{background:rgba(220,38,38,.08);color:#dc2626} /* ── Sections ── */ .section{padding:64px 0} .section-alt{padding:64px 0;background:rgba(15,23,42,.03)} /* ── Cards ── */ .card{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.78));border:1px solid rgba(15,23,42,.08);border-radius:20px;padding:30px;box-shadow:0 18px 55px rgba(15,23,42,.06);transition:transform .35s var(--ease-spring),box-shadow .35s ease;cursor:default} .card:hover{transform:translateY(-3px);box-shadow:0 28px 65px rgba(15,23,42,.1)} .card-gold{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.82));border:2px solid rgba(249,115,22,.35);border-radius:20px;padding:30px;box-shadow:0 18px 55px rgba(15,23,42,.06);transition:transform .35s var(--ease-spring),box-shadow .35s ease;cursor:default} .card-gold:hover{transform:translateY(-4px);box-shadow:0 28px 65px rgba(15,23,42,.12)} .price-card{transition:transform .35s var(--ease-spring),box-shadow .35s ease,border-color .3s ease;cursor:default;will-change:transform} .price-card:hover{transform:translateY(-4px);box-shadow:0 28px 65px rgba(15,23,42,.12);border-color:rgba(249,115,22,.3)} .quick-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:16px 0 4px} .quick-fact{background:linear-gradient(180deg,rgba(255,248,228,.72) 0%,rgba(249,115,22,.08) 100%);border:1px solid rgba(249,115,22,.18);border-radius:16px;padding:14px 16px;box-shadow:0 12px 26px rgba(15,23,42,.05);transition:transform .32s var(--ease-spring),box-shadow .32s ease,border-color .28s ease;cursor:default;will-change:transform} .quick-fact:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(15,23,42,.1);border-color:rgba(249,115,22,.4)} .quick-fact strong{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px;transition:color .25s ease} .quick-fact:hover strong{color:var(--gold-dark)} .quick-fact span{font-size:1rem;color:var(--navy);font-weight:500} .use-case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:24px} .use-case-item{background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(250,248,243,.98) 100%);border:1px solid rgba(249,115,22,.18);border-radius:18px;padding:22px;border-left:3px solid var(--gold);box-shadow:0 18px 40px rgba(15,23,42,.06);transition:transform .35s var(--ease-spring),box-shadow .35s ease,border-left-color .3s ease;cursor:default;will-change:transform} .use-case-item:hover{transform:translateY(-4px);box-shadow:0 22px 52px rgba(15,23,42,.1);border-left-color:var(--gold-light)} .use-where{background:rgba(15,23,42,.03);border-radius:12px;padding:20px 24px;margin-top:16px;font-size:.86rem;color:var(--navy-soft);line-height:1.8} .use-where strong{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:8px} .pipe-header{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;color:var(--navy);margin-bottom:4px} .pipe-sub{font-size:.82rem;color:var(--muted-2);margin-bottom:16px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px} .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px} /* ── FAQ ── */ .faq-item{border-bottom:1px solid rgba(15,23,42,.08);padding:22px 0;border-radius:8px;transition:background .22s ease,padding-left .22s ease} .faq-item:hover{background:rgba(249,115,22,.04);padding-left:10px} .faq-q{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:600;color:var(--navy);margin-bottom:8px} .faq-a{font-size:.88rem;color:var(--muted-3);line-height:1.75} /* ── CTA strip ── */ .cta-strip{background:linear-gradient(135deg,var(--navy),var(--navy-deep));padding:64px 0;text-align:center;color:var(--cream);border-radius:28px;margin:0 40px;box-shadow:0 20px 55px rgba(15,23,42,.16);transition:box-shadow .4s ease,transform .4s var(--ease-spring)} .cta-strip:hover{box-shadow:0 28px 70px rgba(15,23,42,.28);transform:translateY(-2px)} .pros-cons{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:.88rem;color:var(--navy-soft);line-height:1.6} .pros-cons li{padding-left:4px} .verdict-box{background:linear-gradient(180deg,rgba(249,115,22,.12),rgba(249,115,22,.05));border:2px solid rgba(249,115,22,.35);border-radius:18px;padding:24px 28px;margin-top:32px;box-shadow:0 14px 40px rgba(15,23,42,.05)} /* ── Priority / ranking list (numbered capsule rows) ────────── Used for "true priority ranking" and similar ordered lists. .gold-rank on the number marks the top, highest-priority items. */ .rank-row{ display:flex; align-items:flex-start; gap:18px; padding:18px 4px; border-bottom:1px solid rgba(15,23,42,.08); transition:background .2s ease; } .rank-row:hover{background:rgba(232,103,14,.035)} .rank-row:first-child{padding-top:6px} .rank-num{ flex-shrink:0; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:700; font-size:1.15rem; color:var(--navy); background:#fff; border:1.5px solid rgba(15,23,42,.16); box-shadow:0 2px 6px rgba(15,23,42,.06); margin-top:2px; } .rank-num.gold-rank{ color:#fff; background:linear-gradient(135deg,var(--gold-light),var(--gold-dark)); border-color:transparent; box-shadow:0 6px 16px rgba(232,103,14,.35); } .rank-content{flex:1;min-width:0} .rank-title{ font-family:'DM Sans',sans-serif; font-weight:700; font-size:1rem; color:var(--navy); margin-bottom:4px; letter-spacing:-.005em; } .rank-desc{ font-size:.88rem; color:var(--navy-soft); line-height:1.65; } /* ── Spec box — labeled fact card used inside spec/feature grids ── */ .spec-box{ background:#fff; border:1px solid rgba(15,23,42,.08); border-left:3px solid var(--gold); border-radius:10px; padding:14px 18px; margin-bottom:12px; font-size:.86rem; color:var(--navy-soft); line-height:1.6; box-shadow:0 1px 3px rgba(15,23,42,.04); } .spec-box:last-child{margin-bottom:0} .spec-box strong{ display:block; font-family:'DM Sans',sans-serif; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); font-weight:700; margin-bottom:5px; } /* ── Warning / callout box ── */ .warning-box{ display:flex; align-items:flex-start; gap:14px; background:linear-gradient(180deg,rgba(232,103,14,.09),rgba(232,103,14,.03)); border:1.5px solid rgba(232,103,14,.3); border-radius:14px; padding:18px 22px; margin:20px 0; font-size:.9rem; color:var(--navy-soft); line-height:1.65; box-shadow:0 8px 24px rgba(15,23,42,.05); } .warning-box strong{color:var(--navy)} .warning-box .ic{font-size:1.3rem;margin-top:1px} /* ── Tables ── */ table{width:100%;border-collapse:collapse} th{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:400;padding:10px 12px;text-align:left;background:rgba(15,23,42,.04);border-bottom:2px solid rgba(15,23,42,.08)} td{padding:12px 12px;font-size:.86rem;color:var(--navy-soft);border-bottom:1px solid rgba(15,23,42,.05)} td:first-child{font-weight:500;color:var(--navy)} .overflow-x,.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .table-scroll tbody tr{transition:background .18s ease} .table-scroll tbody tr:hover{background:rgba(249,115,22,.05)} tbody tr{transition:background .18s ease} tbody tr:hover{background:rgba(249,115,22,.05)} /* ── Related-card style links (cards using inline border-radius:16px) ── */ [style*="border-radius:16px"],[style*="border-radius: 16px"]{transition:transform .32s var(--ease-spring),box-shadow .32s ease} [style*="border-radius:16px"]:hover,[style*="border-radius: 16px"]:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(15,23,42,.1)} .mob-section-label{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark);padding:6px 0 2px;font-weight:500;border-top:1px solid rgba(15,23,42,.1);margin-top:2px} .mob-sub-link{padding-left:12px;font-size:.78rem} .btn,.breadcrumb a,.badge{cursor:pointer} /* ── Scroll-reveal + entrance animation engine ── */ @keyframes sp-hero-in{from{opacity:0;transform:translateY(22px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}} @keyframes sp-badge-in{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}} @keyframes sp-shimmer{0%{transform:translateX(-100%) skewX(-12deg)}100%{transform:translateX(200%) skewX(-12deg)}} @keyframes sp-ripple{from{transform:scale(0);opacity:.32}to{transform:scale(4);opacity:0}} @keyframes sp-pulse-gold{0%,100%{box-shadow:0 0 0 rgba(249,115,22,0)}50%{box-shadow:0 0 18px rgba(249,115,22,.22)}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} .sp-reveal{opacity:0;transform:translateY(22px);transition:opacity .45s var(--ease-expo),transform .45s var(--ease-expo)} .sp-reveal.sp-visible{opacity:1;transform:translateY(0)} .sp-stagger > *{opacity:0;transform:translateY(18px);transition:opacity .38s var(--ease-expo),transform .38s var(--ease-expo)} .sp-stagger.sp-visible > *:nth-child(1){opacity:1;transform:none;transition-delay:.00s} .sp-stagger.sp-visible > *:nth-child(2){opacity:1;transform:none;transition-delay:.04s} .sp-stagger.sp-visible > *:nth-child(3){opacity:1;transform:none;transition-delay:.08s} .sp-stagger.sp-visible > *:nth-child(4){opacity:1;transform:none;transition-delay:.12s} .sp-stagger.sp-visible > *:nth-child(5){opacity:1;transform:none;transition-delay:.16s} .sp-stagger.sp-visible > *:nth-child(6){opacity:1;transform:none;transition-delay:.20s} @media(prefers-reduced-motion:reduce){ .hero-page > .si > *{animation:none!important;opacity:1!important;transform:none!important;filter:none!important} .sp-reveal,.sp-stagger > *{opacity:1!important;transform:none!important;transition:none!important} } @media(max-width:768px){ .si{padding:0 20px} .hero-page{padding:92px 0 52px} .hero-page::before{background-size:var(--hero-art-size-mobile,170%);background-position:var(--hero-art-pos-mobile,122% 18%);opacity:var(--hero-art-opacity-mobile,.34)} .grid2,.grid3{grid-template-columns:1fr} h1{font-size:2.2rem!important} h2{font-size:1.7rem!important} .cta-strip{margin:0 16px} .price-card{padding:18px 16px 14px} .table-scroll table{min-width:620px} .table-scroll th,.table-scroll td{padding:9px 10px;font-size:.78rem} .quick-facts{grid-template-columns:1fr 1fr} } /* ═══════════════════════════════════════════════════════════════ B2B CONSISTENCY OVERRIDE — aligns article/product pages with the homepage's B2B supplier aesthetic so both look like the same brand, not two different sites. ═══════════════════════════════════════════════════════════════ */ /* ── Shared color tokens (match homepage override) ── */ :root { --gold: #E8670E; --gold-light: #F07820; --gold-dark: #B8420C; --gold-pale: #FEF0E0; --border: rgba(232,103,14,0.18); --r: 8px; } /* ── Typography: match homepage's DM Sans + bold headings ── */ h1, h2, h3, h4 { font-family: 'DM Sans', sans-serif !important; font-weight: 700; letter-spacing: -.01em; } /* ── Cards: flat white instead of gradient/frosted glass ── */ .card, .card-gold { background: #fff !important; border: 1px solid rgba(15,23,42,.1) !important; border-radius: 10px !important; box-shadow: 0 4px 16px rgba(15,23,42,.06) !important; backdrop-filter: none !important; } .card:hover, .card-gold:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 28px rgba(15,23,42,.1) !important; border-color: rgba(232,103,14,.28) !important; } /* ── Hero pages: consistent label + heading treatment ── */ .breadcrumb { color: var(--muted); } .breadcrumb a:hover { color: var(--gold-dark) !important; } /* Section labels — same as homepage */ .sec-lbl, [style*="letter-spacing:.22em"], [style*="letter-spacing: .22em"] { color: var(--gold-dark) !important; } /* ── Quick facts: flat instead of gradient ── */ .quick-fact { background: #F8FAFC !important; border: 1px solid rgba(15,23,42,.08) !important; border-radius: 8px !important; box-shadow: none !important; } .quick-fact:hover { background: var(--gold-pale) !important; border-color: rgba(232,103,14,.28) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(15,23,42,.08) !important; } /* ── Tables: match homepage table look ── */ th { background: var(--navy) !important; color: #fff !important; font-size: .72rem !important; letter-spacing: .12em; border-bottom: none !important; } td { font-size: .85rem !important; } tbody tr:hover { background: var(--gold-pale) !important; } /* ── FAQ: clean, consistent ── */ .faq-q { font-family: 'DM Sans', sans-serif !important; font-weight: 700; } .faq-item:hover { background: rgba(232,103,14,.04); padding-left: 8px; } /* ── CTA strip: match homepage's navy treatment ── */ .cta-strip { border-radius: 12px !important; margin: 0 !important; } /* ── Buttons: same style as homepage ── */ .btn { border-radius: 6px !important; } /* ── Body text: match homepage base size ── */ p { font-size: .88rem; line-height: 1.65; } /* ── Image + Content side-by-side layout ── */ .img-content-pair { display: grid; grid-template-columns: 1fr 1.6fr; gap: 28px; align-items: center; margin: 28px 0; } .img-content-pair.flip { grid-template-columns: 1.6fr 1fr; } .img-content-pair .feature-photo { margin: 0; } @media(max-width:768px) { .img-content-pair, .img-content-pair.flip { grid-template-columns: 1fr; } .img-content-pair.flip .feature-photo { order: -1; } } /* ── Stat strip: big-number highlights ── */ .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 28px 0; } .stat-item { background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 10px; padding: 20px 18px; text-align: center; box-shadow: 0 4px 16px rgba(15,23,42,.05); transition: transform .25s ease, box-shadow .25s ease; } .stat-item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,.1); } .stat-num { font-family: 'DM Sans', sans-serif; font-size: 2rem; font-weight: 700; color: var(--gold-dark); line-height: 1; display: block; margin-bottom: 6px; } .stat-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); line-height: 1.4; } /* ── Section image banner (full-width-ish pull image) ── */ .section-image-banner { border-radius: 16px; overflow: hidden; margin: 24px 0 32px; box-shadow: 0 20px 50px rgba(15,23,42,.1); position: relative; } .section-image-banner img { width: 100%; height: 340px; object-fit: cover; display: block; transition: transform .5s ease; } .section-image-banner:hover img { transform: scale(1.02); } .section-image-banner-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 24px; background: linear-gradient(to top, rgba(15,23,42,.72) 0%, transparent 100%); color: #fff; font-size: .78rem; line-height: 1.5; } .section-image-banner-cap strong { display: block; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #FDBA74; margin-bottom: 2px; } @media(max-width:768px) { .section-image-banner img { height: 210px; } .stat-strip { grid-template-columns: 1fr 1fr; } } /* ═══════════════════════════════════════════════════════════════ ICON SYSTEM — replaces emoji glyphs (✅❌⚠️🚿🍳☀️🏗️📋💡🔋🚗🏠📡🌡️) with crisp, consistently-weighted line icons. Color via class; size inherits from font-size on the parent text. ═══════════════════════════════════════════════════════════════ */ .ic{display:inline-block;width:1em;height:1em;vertical-align:-0.16em;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;flex-shrink:0;line-height:1} .ic-check{color:var(--green,#16a34a);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22/%3E%3C/svg%3E")} .ic-cross{color:#dc2626;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22/%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22/%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22/%3E%3C/svg%3E")} .ic-warn{color:var(--gold-dark);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.29%203.86L1.82%2018a2%202%200%200%200%201.71%203h16.94a2%202%200%200%200%201.71-3L13.71%203.86a2%202%200%200%200-3.42%200z%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%229%22%20x2%3D%2212%22%20y2%3D%2213%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2217%22%20x2%3D%2212.01%22%20y2%3D%2217%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.29%203.86L1.82%2018a2%202%200%200%200%201.71%203h16.94a2%202%200%200%200%201.71-3L13.71%203.86a2%202%200%200%200-3.42%200z%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%229%22%20x2%3D%2212%22%20y2%3D%2213%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2217%22%20x2%3D%2212.01%22%20y2%3D%2217%22/%3E%3C/svg%3E")} .ic-star{color:#C2410C;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpolygon%20points%3D%2212%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpolygon%20points%3D%2212%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202%22/%3E%3C/svg%3E")} .ic-droplet{color:#0284c7;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.69l5.66%205.66a8%208%200%201%201-11.31%200z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.69l5.66%205.66a8%208%200%201%201-11.31%200z%22/%3E%3C/svg%3E")} .ic-flame{color:#C2410C;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202c-1.5%203-5%206-5%2010a5%205%200%200%200%2010%200c0-1.5-1-2.5-1.5-3%20.8.8%201.5%202%201.5%203.5A6.5%206.5%200%200%201%2012%2019a6.5%206.5%200%200%201-6.5-6.5C5.5%208%209%205%2012%202z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202c-1.5%203-5%206-5%2010a5%205%200%200%200%2010%200c0-1.5-1-2.5-1.5-3%20.8.8%201.5%202%201.5%203.5A6.5%206.5%200%200%201%2012%2019a6.5%206.5%200%200%201-6.5-6.5C5.5%208%209%205%2012%202z%22/%3E%3C/svg%3E")} .ic-sun{color:#C2410C;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%223%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2221%22%20x2%3D%2212%22%20y2%3D%2223%22/%3E%3Cline%20x1%3D%224.22%22%20y1%3D%224.22%22%20x2%3D%225.64%22%20y2%3D%225.64%22/%3E%3Cline%20x1%3D%2218.36%22%20y1%3D%2218.36%22%20x2%3D%2219.78%22%20y2%3D%2219.78%22/%3E%3Cline%20x1%3D%221%22%20y1%3D%2212%22%20x2%3D%223%22%20y2%3D%2212%22/%3E%3Cline%20x1%3D%2221%22%20y1%3D%2212%22%20x2%3D%2223%22%20y2%3D%2212%22/%3E%3Cline%20x1%3D%224.22%22%20y1%3D%2219.78%22%20x2%3D%225.64%22%20y2%3D%2218.36%22/%3E%3Cline%20x1%3D%2218.36%22%20y1%3D%225.64%22%20x2%3D%2219.78%22%20y2%3D%224.22%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%223%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2221%22%20x2%3D%2212%22%20y2%3D%2223%22/%3E%3Cline%20x1%3D%224.22%22%20y1%3D%224.22%22%20x2%3D%225.64%22%20y2%3D%225.64%22/%3E%3Cline%20x1%3D%2218.36%22%20y1%3D%2218.36%22%20x2%3D%2219.78%22%20y2%3D%2219.78%22/%3E%3Cline%20x1%3D%221%22%20y1%3D%2212%22%20x2%3D%223%22%20y2%3D%2212%22/%3E%3Cline%20x1%3D%2221%22%20y1%3D%2212%22%20x2%3D%2223%22%20y2%3D%2212%22/%3E%3Cline%20x1%3D%224.22%22%20y1%3D%2219.78%22%20x2%3D%225.64%22%20y2%3D%2218.36%22/%3E%3Cline%20x1%3D%2218.36%22%20y1%3D%225.64%22%20x2%3D%2219.78%22%20y2%3D%224.22%22/%3E%3C/svg%3E")} .ic-layers{color:var(--navy);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2212%202%202%207%2012%2012%2022%207%2012%202%22/%3E%3Cpolyline%20points%3D%222%2017%2012%2022%2022%2017%22/%3E%3Cpolyline%20points%3D%222%2012%2012%2017%2022%2012%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2212%202%202%207%2012%2012%2022%207%2012%202%22/%3E%3Cpolyline%20points%3D%222%2017%2012%2022%2022%2017%22/%3E%3Cpolyline%20points%3D%222%2012%2012%2017%2022%2012%22/%3E%3C/svg%3E")} .ic-clipboard{color:var(--navy);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M9%2012h6M9%2016h6%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M9%2012h6M9%2016h6%22/%3E%3C/svg%3E")} .ic-bulb{color:var(--gold-dark);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018h6M10%2022h4M12%202a7%207%200%200%200-4%2012.74V17h8v-2.26A7%207%200%200%200%2012%202z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018h6M10%2022h4M12%202a7%207%200%200%200-4%2012.74V17h8v-2.26A7%207%200%200%200%2012%202z%22/%3E%3C/svg%3E")} .ic-battery{color:var(--navy);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22%20ry%3D%222%22/%3E%3Cline%20x1%3D%2223%22%20y1%3D%2213%22%20x2%3D%2223%22%20y2%3D%2211%22/%3E%3Cline%20x1%3D%225%22%20y1%3D%2210%22%20x2%3D%225%22%20y2%3D%2214%22/%3E%3Cline%20x1%3D%229%22%20y1%3D%2210%22%20x2%3D%229%22%20y2%3D%2214%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22%20ry%3D%222%22/%3E%3Cline%20x1%3D%2223%22%20y1%3D%2213%22%20x2%3D%2223%22%20y2%3D%2211%22/%3E%3Cline%20x1%3D%225%22%20y1%3D%2210%22%20x2%3D%225%22%20y2%3D%2214%22/%3E%3Cline%20x1%3D%229%22%20y1%3D%2210%22%20x2%3D%229%22%20y2%3D%2214%22/%3E%3C/svg%3E")} .ic-car{color:var(--navy);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2011l1.5-4.5A2%202%200%200%201%208.4%205h7.2a2%202%200%200%201%201.9%201.5L19%2011M3%2011h18v6H3z%22/%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2217%22%20r%3D%221.5%22/%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2217%22%20r%3D%221.5%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2011l1.5-4.5A2%202%200%200%201%208.4%205h7.2a2%202%200%200%201%201.9%201.5L19%2011M3%2011h18v6H3z%22/%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2217%22%20r%3D%221.5%22/%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2217%22%20r%3D%221.5%22/%3E%3C/svg%3E")} .ic-home{color:var(--navy);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209l9-7%209%207v11a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22/%3E%3Cpolyline%20points%3D%229%2022%209%2012%2015%2012%2015%2022%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209l9-7%209%207v11a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22/%3E%3Cpolyline%20points%3D%229%2022%209%2012%2015%2012%2015%2022%22/%3E%3C/svg%3E")} .ic-wifi{color:var(--navy);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.55a11%2011%200%200%201%2014.08%200%22/%3E%3Cpath%20d%3D%22M1.42%209a16%2016%200%200%201%2021.16%200%22/%3E%3Cpath%20d%3D%22M8.53%2016.11a6%206%200%200%201%206.95%200%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2220%22%20x2%3D%2212.01%22%20y2%3D%2220%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.55a11%2011%200%200%201%2014.08%200%22/%3E%3Cpath%20d%3D%22M1.42%209a16%2016%200%200%201%2021.16%200%22/%3E%3Cpath%20d%3D%22M8.53%2016.11a6%206%200%200%201%206.95%200%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2220%22%20x2%3D%2212.01%22%20y2%3D%2220%22/%3E%3C/svg%3E")} .ic-thermo{color:var(--navy);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2014.76V3.5a2.5%202.5%200%200%200-5%200v11.26a4.5%204.5%200%201%200%205%200z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2014.76V3.5a2.5%202.5%200%200%200-5%200v11.26a4.5%204.5%200%201%200%205%200z%22/%3E%3C/svg%3E")} /* Inline icon sizing tweaks for specific contexts */ .faq-a .ic,li .ic,td .ic,p .ic,strong .ic{margin-right:2px} .ic-warn{width:1.05em;height:1.05em}