/* ========================================================= trust-premium.css — Trust-only luxury (v2.4) Requires: Load AFTER assets/css/styles.css v2.4 changes: ✅ Hero is TRUE full-width (like Impact) ✅ Icons perfectly centered inside circle badges ✅ Right hero card content becomes “stacked compact block” with divider lines ========================================================= */ body.page-trust{ --tr-bg: var(--bg, #06110D); --tr-bg2: var(--bg2, #071812); --tr-text: var(--text, #F4F0E8); --tr-muted: var(--muted, rgba(244,240,232,.72)); --tr-line: var(--line, rgba(244,240,232,.10)); --tr-line-strong: var(--line-strong, rgba(244,240,232,.14)); --tr-gold: var(--gold, #C9A227); --tr-gold2: var(--gold2, #E1C76A); --tr-emerald: var(--emerald, #1F8A70); --tr-shadow: 0 18px 46px rgba(0,0,0,.48); --tr-shadow-soft: 0 10px 26px rgba(0,0,0,.34); --tr-radius: 18px; --tr-radius-lg: 28px; --tr-blur: 12px; --tr-ease: cubic-bezier(.2,.8,.2,1); --tr-serif: "Playfair Display", serif; --tr-sans: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--tr-text); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--tr-bg); background-image: radial-gradient(1100px 520px at 12% -10%, rgba(201,162,39,.085), transparent 62%), radial-gradient(1100px 520px at 92% -10%, rgba(31,138,112,.060), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.012), rgba(244,240,232,0) 45%), linear-gradient(180deg, var(--tr-bg) 0%, var(--tr-bg2) 100%); background-repeat: no-repeat; } /* Museum lighting */ body.page-trust::before{ content:""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(920px 440px at 0% 22%, rgba(201,162,39,.085), transparent 62%), radial-gradient(920px 440px at 100% 32%, rgba(225,199,106,.060), transparent 62%), radial-gradient(880px 380px at 100% 72%, rgba(31,138,112,.050), transparent 62%); opacity: .95; } /* Subtle grain (premium paper) */ body.page-trust::after{ content:""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } @media (min-width: 992px){ body.page-trust{ background-attachment: fixed; } } body.page-trust{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ body.page-trust{ scroll-behavior: auto; } body.page-trust *, body.page-trust *::before, body.page-trust *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } body.page-trust :focus-visible{ outline: none; box-shadow: 0 0 0 .22rem rgba(201,162,39,.18); border-radius: 12px; } /* Links */ body.page-trust a{ text-decoration-thickness: 1px; text-underline-offset: .18em; } body.page-trust a:not(.btn):not(.tr-navlink){ color: var(--tr-gold2) !important; text-decoration-color: rgba(225,199,106,.55); } body.page-trust a:not(.btn):not(.tr-navlink):hover{ color: var(--tr-gold2) !important; text-decoration-thickness: 2px; text-decoration-color: rgba(225,199,106,.85); } /* Width control */ body.page-trust .container, body.page-trust .container-wide{ width: min(1200px, calc(100% - 48px)); margin-left: auto; margin-right: auto; max-width: none; padding-left: 0; padding-right: 0; } body.page-trust section[id]{ scroll-margin-top: 96px; } /* Wider overview ONLY */ body.page-trust #overview .container-wide{ width: min(1380px, calc(100% - 48px)); } body.page-trust .section{ position: relative; padding: 92px 0; border-top: 1px solid var(--tr-line); background: transparent; } body.page-trust .section::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(244,240,232,.018), rgba(244,240,232,0) 58%), radial-gradient(820px 420px at 10% -10%, rgba(201,162,39,.050), transparent 62%), radial-gradient(860px 440px at 110% 0%, rgba(31,138,112,.040), transparent 62%); } body.page-trust .section.alt{ background: rgba(244,240,232,.008); } body.page-trust .section > .container, body.page-trust .section > .container-wide{ position: relative; z-index: 1; } /* Subtle section target glow */ body.page-trust section:target{ outline: 1px solid rgba(201,162,39,.16); outline-offset: 10px; border-radius: 22px; } @media (max-width: 980px){ body.page-trust section:target{ outline-offset: 6px; } } /* ========================================================= HERO — TRUE FULL WIDTH (like Impact) ========================================================= */ body.page-trust .trust-hero{ position: relative; overflow: hidden; padding: 0; border-top: 0; } body.page-trust .trust-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(1200px 560px at 12% 0%, rgba(201,162,39,.16), transparent 62%), radial-gradient(1200px 560px at 92% 0%, rgba(31,138,112,.12), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.018), rgba(244,240,232,0) 55%); } body.page-trust .trust-hero > *{ position: relative; z-index: 1; } /* Make hero container full-bleed even if HTML still uses .container/.container-wide */ body.page-trust .trust-hero .container, body.page-trust .trust-hero .container-wide, body.page-trust .trust-hero .container-fluid{ width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* If your updated HTML uses .trust-hero-inner, this provides the “inset” padding */ body.page-trust .trust-hero-inner{ width: 100%; padding: clamp(18px, 3vw, 54px); } /* HERO grid surface (full width) */ body.page-trust .trust-hero-grid{ position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px; --bs-gutter-x: 0; --bs-gutter-y: 0; margin-left: 0 !important; margin-right: 0 !important; width: 100%; border-radius: 0 0 34px 34px; padding: clamp(16px, 2.2vw, 26px); overflow: hidden; border-left: 0; border-right: 0; border-top: 1px solid rgba(244,240,232,.10); border-bottom: 1px solid rgba(244,240,232,.10); background: radial-gradient(1100px 420px at 10% 0%, rgba(201,162,39,.075), transparent 62%), radial-gradient(1100px 420px at 110% 8%, rgba(31,138,112,.060), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.040), rgba(244,240,232,.012)); box-shadow: inset 0 0 0 1px rgba(244,240,232,.06), 0 22px 70px rgba(0,0,0,.24); } /* corner “foil tick” */ body.page-trust .trust-hero-grid::before{ content:""; position:absolute; left: 16px; top: 16px; width: 92px; height: 2px; border-radius: 99px; background: linear-gradient(90deg, rgba(201,162,39,.78), rgba(225,199,106,.18)); opacity: .95; pointer-events:none; } body.page-trust .trust-hero-grid::after{ content:""; position:absolute; left: 16px; top: 16px; width: 2px; height: 92px; border-radius: 99px; background: linear-gradient(180deg, rgba(201,162,39,.65), rgba(225,199,106,.10)); opacity: .85; pointer-events:none; } /* Prevent long content from forcing wrap */ body.page-trust .trust-hero-grid > .hero-copy, body.page-trust .trust-hero-grid > .trust-panel{ min-width: 0; } /* Desktop: keep right card on the right */ @media (min-width: 992px){ body.page-trust .trust-hero-grid{ flex-wrap: nowrap; } body.page-trust .trust-hero-grid > .hero-copy{ flex: 1 1 0; } body.page-trust .trust-hero-grid > .trust-panel{ flex: 0 0 clamp(360px, 38%, 520px); max-width: 520px; } } /* Badge */ body.page-trust .hero .badge{ display: inline-flex; align-items: center; gap: 8px; padding: .45rem .70rem; border-radius: 999px; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.03); color: rgba(244,240,232,.88); letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; } body.page-trust .trust-hero h1{ font-family: var(--tr-serif); position: relative; display: inline-block; margin-bottom: .35rem; } body.page-trust .trust-hero h1::after{ content:""; display:block; height: 2px; margin-top: .65rem; width: min(260px, 62%); background: linear-gradient(90deg, rgba(201,162,39,.78), rgba(225,199,106,.20)); border-radius: 99px; opacity: .95; } body.page-trust .lead{ line-height: 1.80; color: rgba(244,240,232,.86); max-width: 75ch; } /* Buttons */ body.page-trust .btn{ border-radius: 999px; letter-spacing: .01em; box-shadow: none; transition: transform .16s var(--tr-ease), filter .16s var(--tr-ease), border-color .16s var(--tr-ease), background-color .16s var(--tr-ease); } body.page-trust .btn:hover{ transform: translateY(-1px); } body.page-trust .btn:active{ transform: translateY(0); } body.page-trust .btn-primary{ background: radial-gradient(520px 220px at 18% 0%, rgba(201,162,39,.30), rgba(201,162,39,.10) 55%, rgba(201,162,39,.06)), linear-gradient(180deg, rgba(201,162,39,.18), rgba(201,162,39,.08)); border: 1px solid rgba(201,162,39,.52); color: rgba(244,240,232,.96); } body.page-trust .btn-primary:hover{ border-color: rgba(201,162,39,.70); filter: brightness(1.03); } body.page-trust .btn-secondary{ background: rgba(244,240,232,.04); border: 1px solid rgba(244,240,232,.16); color: rgba(244,240,232,.92); } body.page-trust .btn-secondary:hover{ border-color: rgba(201,162,39,.35); background: rgba(244,240,232,.05); } body.page-trust .btn-outline{ background: transparent; border: 1px solid rgba(244,240,232,.20); color: rgba(244,240,232,.92); } body.page-trust .btn-outline:hover{ border-color: rgba(201,162,39,.45); background: rgba(201,162,39,.08); color: rgba(244,240,232,.96); } body.page-trust .btn-ghost{ background: rgba(244,240,232,.03); border: 1px solid rgba(244,240,232,.14); color: rgba(244,240,232,.92); } body.page-trust .btn-ghost:hover{ border-color: rgba(201,162,39,.35); background: rgba(244,240,232,.05); } body.page-trust .btn.btn-sm{ padding: .45rem .70rem; font-size: .90rem; } /* Premium rule */ body.page-trust .trust-rule{ height: 1px; width: min(1100px, calc(100% - 48px)); margin: 0 auto; background: linear-gradient(90deg, rgba(244,240,232,0), rgba(244,240,232,.22), rgba(201,162,39,.30), rgba(244,240,232,.10), rgba(244,240,232,0) ); opacity: .95; } /* Typography headers */ body.page-trust .trust-head{ margin-bottom: 18px; } body.page-trust .trust-kicker{ letter-spacing: .18em; text-transform: uppercase; font-size: .74rem; color: rgba(244,240,232,.68); margin-bottom: 10px; } body.page-trust .trust-title{ font-family: var(--tr-serif); font-size: clamp(1.65rem, 2.3vw, 2.2rem); line-height: 1.08; margin: 0 0 10px 0; color: rgba(244,240,232,.97); } body.page-trust .trust-lead{ margin: 0; max-width: 85ch; color: rgba(244,240,232,.72); line-height: 1.82; } body.page-trust .trust-h3{ margin: 0 0 .6rem 0; font-size: 1.05rem; letter-spacing: .01em; color: rgba(244,240,232,.96); } /* ========================================================= HERO: proof strip — FIX icon centering in circles ========================================================= */ body.page-trust .trust-proof{ margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; border-top: 1px solid rgba(244,240,232,.12); padding-top: 14px; } body.page-trust .trust-proof-item{ display: grid !important; grid-template-columns: 34px 1fr; column-gap: 12px; row-gap: 2px; align-items: center; padding-left: 12px; border-left: 1px solid rgba(244,240,232,.12); } body.page-trust .trust-proof-item:first-child{ border-left: 0; padding-left: 0; } /* ✅ perfect centering */ body.page-trust .trust-proof-ic{ grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 999px; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(201,162,39,.40); background: radial-gradient(circle at 30% 30%, rgba(225,199,106,.95), rgba(201,162,39,.22) 55%, rgba(201,162,39,.08)); box-shadow: 0 0 0 6px rgba(201,162,39,.10); color: rgba(244,240,232,.92); } body.page-trust .trust-proof-ic i{ display:block; font-size: 1rem; line-height: 1; transform: translateY(.5px); /* optical center */ } body.page-trust .trust-proof-k{ display:block; color: rgba(244,240,232,.66); font-size: .90rem; line-height: 1.15; } body.page-trust .trust-proof-v{ display:block; font-weight: 950; letter-spacing: .01em; color: rgba(244,240,232,.96); line-height: 1.15; } /* ========================================================= HERO: right panel — stacked compact block with divider lines ========================================================= */ body.page-trust .trust-panel{ position: relative; border-radius: 24px; border: 1px solid rgba(244,240,232,.14); background: radial-gradient(760px 320px at 12% 0%, rgba(201,162,39,.10), transparent 62%), radial-gradient(760px 320px at 112% 10%, rgba(31,138,112,.08), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.06), rgba(244,240,232,.02)); box-shadow: 0 18px 48px rgba(0,0,0,.22); overflow: hidden; padding: 1.05rem 1.05rem; isolation: isolate; } /* Hover sheen — soft radial fade */ body.page-trust .trust-panel::after{ content:""; position:absolute; inset:-45% -40%; pointer-events:none; background: radial-gradient(120% 70% at 10% 38%, rgba(244,240,232,.08) 0%, rgba(201,162,39,.14) 26%, rgba(244,240,232,.06) 44%, rgba(244,240,232,0) 70%); opacity: 0; transform: translateX(-24%) rotate(8deg); mix-blend-mode: overlay; transition: opacity .22s var(--tr-ease), transform .55s var(--tr-ease); } body.page-trust .trust-panel:hover::after{ opacity: .92; transform: translateX(10%) rotate(8deg); } @media (hover: none){ body.page-trust .trust-panel:hover::after{ opacity: .55; transform: translateX(2%) rotate(8deg); } } body.page-trust .trust-panel-title{ font-family: var(--tr-serif); margin: .15rem 0 .25rem; font-size: clamp(1.15rem, 1.8vw, 1.55rem); line-height: 1.12; color: rgba(244,240,232,.95); } /* ✅ If your right card uses

... (dt/dd), this converts it into the compact stacked block w/ dividers */ body.page-trust .trust-dl{ margin: 12px 0 0; padding: 0; display: block; /* override old grid-gap look */ border-radius: 16px; overflow: hidden; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.03); } body.page-trust .trust-dl dt{ margin: 0; padding: 12px 12px 0; font-weight: 950; letter-spacing: .01em; color: rgba(244,240,232,.96); display:flex; align-items:center; gap: 10px; } body.page-trust .trust-dl dt:not(:first-of-type){ border-top: 1px solid rgba(244,240,232,.10); padding-top: 12px; } body.page-trust .trust-dl dd{ margin: 0; padding: 0 12px 12px 46px; /* aligns under title when icon is present */ color: rgba(244,240,232,.72); line-height: 1.65; } /* Nice icon pill if dt contains Bootstrap Icons */ body.page-trust .trust-dl dt i.bi, body.page-trust .trust-dl dt .bi{ width: 28px; height: 28px; border-radius: 999px; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(201,162,39,.40); background: rgba(201,162,39,.10); color: rgba(225,199,106,.92); flex: 0 0 auto; } body.page-trust .trust-dl dt i.bi{ line-height: 1; transform: translateY(.5px); } /* Optional: if you used the new HTML block (.trust-stack), keep it styled too */ body.page-trust .trust-stack{ margin-top: 12px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.03); } body.page-trust .trust-stack__item{ padding: 12px 12px; } body.page-trust .trust-stack__item + .trust-stack__item{ border-top: 1px solid rgba(244,240,232,.10); } body.page-trust .trust-stack__top{ display:flex; align-items:center; gap: 10px; font-weight: 950; color: rgba(244,240,232,.96); letter-spacing: .01em; } body.page-trust .trust-stack__icon{ width: 28px; height: 28px; border-radius: 999px; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(201,162,39,.40); background: rgba(201,162,39,.10); color: rgba(225,199,106,.92); flex: 0 0 auto; } body.page-trust .trust-stack__icon i{ line-height: 1; transform: translateY(.5px); } body.page-trust .trust-stack__sub{ margin-top: 4px; margin-left: 38px; color: rgba(244,240,232,.72); line-height: 1.55; } body.page-trust .trust-panel-actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } body.page-trust .trust-panel-foot{ margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(244,240,232,.10); } /* ========================================================= OVERVIEW (premium single panel) ========================================================= */ body.page-trust .trust-overview--premium{ border-radius: 30px; border: 1px solid rgba(201,162,39,.20); background: radial-gradient(960px 360px at 12% 0%, rgba(201,162,39,.070), transparent 62%), radial-gradient(980px 380px at 112% 10%, rgba(31,138,112,.060), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.040), rgba(244,240,232,.012)); box-shadow: inset 0 0 0 1px rgba(244,240,232,.075), 0 20px 60px rgba(0,0,0,.22); padding: 18px 18px; } body.page-trust .trust-overview--premium .trust-overview-head{ display:flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; } body.page-trust .trust-overview--premium .trust-overview-title{ font-family: var(--tr-serif); margin: 0; font-size: clamp(1.20rem, 1.7vw, 1.45rem); letter-spacing: .01em; color: rgba(244,240,232,.96); } body.page-trust .trust-overview--premium .trust-overview-sub{ margin: .25rem 0 0; max-width: 86ch; line-height: 1.70; } body.page-trust .trust-overview--premium .trust-overview-cta{ display:flex; gap: 10px; flex-wrap: wrap; } /* Assurance strip */ body.page-trust .trust-assurance{ margin-top: 12px; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border: 1px solid rgba(244,240,232,.14); border-radius: 16px; padding: 12px 14px; background: linear-gradient(180deg, rgba(244,240,232,.035), rgba(244,240,232,.012)); } body.page-trust .trust-assurance-item{ padding-left: 12px; border-left: 1px solid rgba(244,240,232,.12); } body.page-trust .trust-assurance-item:first-child{ padding-left: 0; border-left: 0; } body.page-trust .trust-assurance-k{ display:block; letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; color: rgba(244,240,232,.68); } body.page-trust .trust-assurance-v{ display:block; margin-top: 2px; font-weight: 950; color: rgba(244,240,232,.96); } /* Verification seal */ body.page-trust .trust-seal{ margin-top: 10px; display:flex; align-items:center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(244,240,232,.16); background: rgba(244,240,232,.02); color: rgba(244,240,232,.78); line-height: 1.6; } body.page-trust .trust-seal a{ color: rgba(225,199,106,.92) !important; text-decoration-color: rgba(225,199,106,.55); } body.page-trust .trust-seal-dot{ width: 10px; height: 10px; border-radius: 999px; border: 1px solid rgba(201,162,39,.45); background: radial-gradient(circle at 30% 30%, rgba(225,199,106,.95), rgba(201,162,39,.22) 55%, rgba(201,162,39,.08)); box-shadow: 0 0 0 6px rgba(201,162,39,.10); flex: 0 0 auto; } body.page-trust .trust-seal-divider{ opacity: .65; } /* Executive rail */ body.page-trust .trust-rail{ margin-top: 12px; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(244,240,232,.14); background: linear-gradient(180deg, rgba(244,240,232,.040), rgba(244,240,232,.012)); } body.page-trust .trust-rail-item{ position: relative; padding: 16px 16px 14px; } body.page-trust .trust-rail-item + .trust-rail-item{ border-left: 1px solid rgba(244,240,232,.10); } body.page-trust .trust-rail-top{ display:flex; align-items:center; gap: 10px; margin-bottom: 10px; } body.page-trust .trust-rail-num{ display:inline-flex; align-items:center; justify-content:center; min-width: 40px; height: 28px; border-radius: 999px; border: 1px solid rgba(201,162,39,.42); background: rgba(201,162,39,.10); color: rgba(225,199,106,.95); font-weight: 950; letter-spacing: .08em; } body.page-trust .trust-rail-label{ letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; font-weight: 900; color: rgba(244,240,232,.70); } body.page-trust .trust-rail-h{ margin: 0 0 8px 0; font-size: 1.02rem; letter-spacing: .01em; color: rgba(244,240,232,.96); } /* Tick bullets */ body.page-trust .trust-bullets--ticks{ list-style: none; margin: 0; padding: 0; color: rgba(244,240,232,.76); line-height: 1.75; } body.page-trust .trust-bullets--ticks li{ position: relative; padding-left: 20px; margin: .18rem 0; } body.page-trust .trust-bullets--ticks li::before{ content:""; position:absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 999px; border: 1px solid rgba(201,162,39,.40); background: radial-gradient(circle at 30% 30%, rgba(225,199,106,.95), rgba(201,162,39,.22) 55%, rgba(201,162,39,.08)); transform: translateY(-50%); box-shadow: 0 0 0 5px rgba(201,162,39,.10); } /* Pledge */ body.page-trust .trust-pledge--tight{ margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed rgba(244,240,232,.14); color: rgba(244,240,232,.86); line-height: 1.78; } body.page-trust .trust-pledge-mark{ color: rgba(225,199,106,.72); font-size: 1.35rem; vertical-align: -2px; } /* ========================================================= TOC RAIL (01–06) ========================================================= */ body.page-trust .trust-toc{ margin-top: 12px; display:flex; flex-wrap: wrap; gap: 0; border-radius: 999px; overflow: hidden; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.02); } body.page-trust .trust-toc__item{ flex: 1 1 auto; min-width: 220px; display:flex; align-items:center; gap: 10px; padding: 11px 14px; text-decoration: none !important; color: rgba(244,240,232,.92) !important; border-right: 1px solid rgba(244,240,232,.10); transition: background-color .16s var(--tr-ease), transform .16s var(--tr-ease); } body.page-trust .trust-toc__item:last-child{ border-right: 0; } body.page-trust .trust-toc__num{ display:inline-flex; align-items:center; justify-content:center; min-width: 42px; height: 28px; border-radius: 999px; border: 1px solid rgba(201,162,39,.40); background: rgba(201,162,39,.10); color: rgba(225,199,106,.95); font-weight: 950; letter-spacing: .08em; font-size: .85rem; } body.page-trust .trust-toc__txt{ font-weight: 900; letter-spacing: .01em; line-height: 1.2; flex: 1 1 auto; } body.page-trust .trust-toc__arrow{ color: rgba(225,199,106,.86); font-weight: 950; transition: transform .16s var(--tr-ease); } body.page-trust .trust-toc__item:hover{ background: rgba(201,162,39,.06); transform: translateY(-1px); } body.page-trust .trust-toc__item:hover .trust-toc__arrow{ transform: translateX(3px); } /* Layouts */ body.page-trust .trust-split{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; } body.page-trust .trust-block{ padding-top: 10px; border-top: 1px solid rgba(244,240,232,.12); } body.page-trust .trust-list{ margin: .35rem 0 0; padding-left: 1.1rem; color: rgba(244,240,232,.76); line-height: 1.75; } body.page-trust .trust-inline-cta{ margin-top: 12px; display:flex; gap: 10px; flex-wrap: wrap; } body.page-trust .trust-note{ margin-top: 14px; padding: 12px 14px; border-left: 3px solid rgba(201,162,39,.55); background: rgba(244,240,232,.03); border-radius: 12px; color: rgba(244,240,232,.84); line-height: 1.70; } /* Steps */ body.page-trust .trust-steps{ margin: 0; padding: 0; list-style: none; border-left: 1px solid rgba(244,240,232,.12); } body.page-trust .trust-steps li{ position: relative; padding: 0 0 14px 18px; margin: 0 0 14px 0; } body.page-trust .trust-steps li::before{ content:""; position:absolute; left: -6px; top: 6px; width: 12px; height: 12px; border-radius: 999px; border: 1px solid rgba(201,162,39,.40); background: rgba(201,162,39,.12); } body.page-trust .trust-step-k{ font-weight: 950; color: rgba(244,240,232,.96); } body.page-trust .trust-step-v{ margin-top: .25rem; color: rgba(244,240,232,.72); line-height: 1.70; } /* Policy rail */ body.page-trust .trust-policy-rail{ list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid rgba(244,240,232,.12); } body.page-trust .trust-policy{ position: relative; display:grid; grid-template-columns: minmax(110px, 150px) 1fr; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid rgba(244,240,232,.10); } body.page-trust .trust-policy-tag{ justify-self: start; display: inline-flex; align-items:center; padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.03); color: rgba(244,240,232,.82); font-weight: 900; font-size: .86rem; } body.page-trust .trust-policy-body h3{ margin: 0 0 6px 0; font-size: 1.06rem; letter-spacing: .01em; } body.page-trust .trust-policy-body p{ margin: 0; } /* Tiles */ body.page-trust .trust-tiles{ margin-top: 12px; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } body.page-trust .trust-tile{ position: relative; border: 1px solid rgba(244,240,232,.12); border-radius: 18px; background: rgba(244,240,232,.03); padding: 14px 14px; transition: transform .16s var(--tr-ease), border-color .16s var(--tr-ease), background-color .16s var(--tr-ease); } body.page-trust .trust-tile:hover{ transform: translateY(-2px); border-color: rgba(201,162,39,.24); background: rgba(244,240,232,.035); } body.page-trust .trust-tile-k{ letter-spacing: .16em; text-transform: uppercase; font-size: .74rem; color: rgba(244,240,232,.70); margin-bottom: 6px; } body.page-trust .trust-tile-h{ font-weight: 950; color: rgba(244,240,232,.96); } body.page-trust .trust-tile-p{ margin-top: .35rem; line-height: 1.70; } /* Verification strip */ body.page-trust .trust-verify{ margin-top: 12px; border-top: 1px solid rgba(244,240,232,.12); padding-top: 12px; } body.page-trust .trust-verify-row{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } body.page-trust .trust-verify-item{ padding-left: 12px; border-left: 1px solid rgba(244,240,232,.12); } body.page-trust .trust-verify-item:first-child{ border-left: 0; padding-left: 0; } body.page-trust .trust-verify-k{ display:block; color: rgba(244,240,232,.66); font-size: .88rem; } body.page-trust .trust-verify-v{ display:block; font-weight: 950; letter-spacing: .01em; margin-top: 2px; color: rgba(244,240,232,.96); } body.page-trust .trust-verify-foot{ margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(244,240,232,.14); display:flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } /* Downloads */ body.page-trust .trust-downloads{ margin-top: 12px; border-top: 1px solid rgba(244,240,232,.12); } body.page-trust .trust-download{ position: relative; display:flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(244,240,232,.10); text-decoration: none !important; color: rgba(244,240,232,.92) !important; transition: transform .16s var(--tr-ease); } body.page-trust .trust-download:hover{ transform: translateY(-1px); } body.page-trust .trust-dl-type{ display:inline-flex; align-items:center; justify-content:center; min-width: 52px; height: 34px; border-radius: 999px; border: 1px solid rgba(201,162,39,.40); background: rgba(201,162,39,.10); color: rgba(225,199,106,.95); font-weight: 950; letter-spacing: .08em; } body.page-trust .trust-dl-body{ flex: 1 1 auto; display:flex; flex-direction: column; gap: 2px; } body.page-trust .trust-dl-title{ font-weight: 950; letter-spacing: .01em; } body.page-trust .trust-dl-arrow{ font-weight: 950; color: rgba(225,199,106,.88); transition: transform .16s var(--tr-ease); } body.page-trust .trust-download:hover .trust-dl-arrow{ transform: translateX(3px); } /* CTA band polish (subtle) */ body.page-trust .tr-cta{ border-top: 1px solid rgba(244,240,232,.12); background: radial-gradient(900px 320px at 12% 0%, rgba(201,162,39,.055), transparent 62%), radial-gradient(900px 320px at 110% 10%, rgba(31,138,112,.050), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.018), rgba(244,240,232,0)); } /* Micro-UX */ body.page-trust .tr-progress{ position: fixed; left: 0; top: 0; width: 100%; height: 3px; z-index: 9999; background: rgba(244,240,232,.06); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(244,240,232,.10); } body.page-trust .tr-progress > span{ display: block; height: 100%; width: 0%; background: linear-gradient(90deg, rgba(201,162,39,.95), rgba(31,138,112,.55)); } body.page-trust .tr-mininav{ position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 10px); z-index: 9997; display:flex; gap: 8px; align-items:center; padding: 10px 10px; border-radius: 999px; border: 1px solid rgba(244,240,232,.18); background: rgba(6,17,13,.62); backdrop-filter: blur(var(--tr-blur)); box-shadow: 0 14px 38px rgba(0,0,0,.30); opacity: 0; pointer-events: none; transition: opacity .2s var(--tr-ease), transform .2s var(--tr-ease); } body.page-trust .tr-mininav.is-show{ opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } body.page-trust .tr-mininav a{ position: relative; display:inline-flex; align-items:center; justify-content:center; padding: 8px 12px; border-radius: 999px; text-decoration:none !important; font-weight: 900; font-size: .88rem; color: rgba(244,240,232,.90) !important; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.03); transition: transform .16s var(--tr-ease), border-color .16s var(--tr-ease), background-color .16s var(--tr-ease); } body.page-trust .tr-mininav a:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.30); background: rgba(201,162,39,.08); } body.page-trust .tr-mininav a.is-active{ border-color: rgba(201,162,39,.45); background: rgba(201,162,39,.10); } body.page-trust .tr-mininav a.is-active::before{ content:""; position:absolute; left: 10px; top: 50%; width: 6px; height: 6px; border-radius: 999px; transform: translateY(-50%); background: rgba(201,162,39,.95); box-shadow: 0 0 0 6px rgba(201,162,39,.12); } body.page-trust .tr-top{ position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 9998; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(244,240,232,.16); background: rgba(6,17,13,.62); backdrop-filter: blur(var(--tr-blur)); color: rgba(244,240,232,.92); font-weight: 950; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .2s var(--tr-ease), transform .2s var(--tr-ease), border-color .2s var(--tr-ease), background-color .2s var(--tr-ease); } body.page-trust .tr-top.is-show{ opacity: 1; pointer-events: auto; transform: translateY(0); } body.page-trust .tr-top:hover{ border-color: rgba(201,162,39,.35); background: rgba(6,17,13,.70); } /* Responsive */ @media (max-width: 980px){ body.page-trust .section{ padding: 74px 0; } body.page-trust .trust-hero-grid{ padding: 14px; border-radius: 0 0 26px 26px; } body.page-trust .trust-hero-grid::before, body.page-trust .trust-hero-grid::after{ left: 12px; top: 12px; } body.page-trust .trust-proof{ grid-template-columns: 1fr; } body.page-trust .trust-proof-item{ border-left: 0; padding-left: 0; border-top: 1px solid rgba(244,240,232,.10); padding-top: 10px; } body.page-trust .trust-proof-item:first-child{ border-top: 0; padding-top: 0; } body.page-trust .trust-assurance{ grid-template-columns: 1fr; } body.page-trust .trust-assurance-item{ border-left: 0; padding-left: 0; border-top: 1px solid rgba(244,240,232,.10); padding-top: 10px; } body.page-trust .trust-assurance-item:first-child{ border-top: 0; padding-top: 0; } body.page-trust .trust-rail{ grid-template-columns: 1fr; } body.page-trust .trust-rail-item + .trust-rail-item{ border-left: 0; border-top: 1px solid rgba(244,240,232,.10); } body.page-trust .trust-split{ grid-template-columns: 1fr; } body.page-trust .trust-tiles{ grid-template-columns: 1fr; } body.page-trust .trust-policy{ grid-template-columns: 1fr; } body.page-trust .trust-verify-row{ grid-template-columns: 1fr; } body.page-trust .trust-verify-item{ border-left: 0; padding-left: 0; border-top: 1px solid rgba(244,240,232,.10); padding-top: 10px; } body.page-trust .trust-verify-item:first-child{ border-top: 0; padding-top: 0; } /* TOC rail stacks neatly */ body.page-trust .trust-toc{ border-radius: 18px; } body.page-trust .trust-toc__item{ min-width: 100%; border-right: 0; border-top: 1px solid rgba(244,240,232,.10); } body.page-trust .trust-toc__item:first-child{ border-top: 0; } } @media (max-width: 560px){ body.page-trust .container, body.page-trust .container-wide{ width: min(1200px, calc(100% - 28px)); } body.page-trust #overview .container-wide{ width: min(1380px, calc(100% - 28px)); } body.page-trust .tr-mininav{ max-width: calc(100% - 90px); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.page-trust .tr-mininav::-webkit-scrollbar{ display:none; } }