.gtm-auth /* ===== GTM Gameplan — BASE (structure only). Aesthetics live in theme-*.css ===== */ /* Every color/font/shape is a CSS variable so a theme file can fully reskin this. */ * { box-sizing: border-box; margin: 0; padding: 0; }.gtm-auth { scroll-behavior: smooth; scroll-padding-top: 80px; }.gtm-auth { font-family: var(--font-body); background: var(--bg); color: var(--ink-2); line-height: 1.6; -webkit-font-smoothing: antialiased; }.gtm-auth h1, .gtm-auth h2, .gtm-auth h3, .gtm-auth h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.12; letter-spacing: var(--head-ls); text-transform: var(--head-transform); }.gtm-auth .hero h1, .gtm-auth .h2, .gtm-auth .bigrow__copy h3 { font-family: var(--font-display); }.gtm-auth a { color: inherit; text-decoration: none; }.gtm-auth .container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }.gtm-auth .container--narrow { max-width: 760px; }.gtm-auth /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: var(--btn-radius); border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s, border-color .2s; white-space: nowrap; }.gtm-auth .btn--primary { background: var(--grad); color: var(--primary-ink); box-shadow: 0 8px 22px -10px rgba(0,0,0,.35); }.gtm-auth .btn--primary:hover { transform: translateY(-2px); }.gtm-auth .btn--ghost { background: var(--panel-bg); color: var(--ink); border-color: var(--line); }.gtm-auth .btn--ghost:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }.gtm-auth .btn--outline { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.55); }.gtm-auth .btn--outline:hover { background: rgba(255,255,255,.08); border-color: #fff; transform: translateY(-2px); }.gtm-auth .btn--lg { padding: 14px 26px; font-size: 16px; }.gtm-auth /* Nav */ .nav { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 50; width: calc(100% - 32px); max-width: 1120px; background: #11141b; border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 12px 30px -14px rgba(0,0,0,.65); transition: top .3s ease, max-width .35s ease, box-shadow .3s ease; }.gtm-auth .nav.scrolled { top: 10px; max-width: 1030px; box-shadow: 0 16px 36px -12px rgba(0,0,0,.75); }.gtm-auth .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 20px; padding: 0 12px 0 24px; }.gtm-auth .brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-brand, var(--font-head)); font-weight: var(--head-weight); font-size: 20px; color: var(--ink); letter-spacing: var(--head-ls); text-transform: var(--head-transform); }.gtm-auth .brand__mark { width: 16px; height: 16px; border-radius: calc(var(--btn-radius) - 4px); background: var(--grad); }.gtm-auth .brand__logo { width: 30px; height: 30px; border-radius: 8px; background: #0d0f13; display: grid; place-items: center; flex: none; overflow: hidden; }.gtm-auth .brand__logo img { height: 82%; width: auto; display: block; }.gtm-auth .brand__full { height: 26px; width: auto; display: block; }.gtm-auth .footer .brand__full { height: 24px; }.gtm-auth .brand--light { color: var(--footer-head); }.gtm-auth .nav__links { display: flex; gap: 28px; margin-left: auto; }.gtm-auth .nav__links a { color: var(--ink-2); font-size: 15px; font-weight: 500; }.gtm-auth .nav__links a:hover { color: var(--primary); }.gtm-auth .nav__cta { display: flex; align-items: center; gap: 8px; }.gtm-auth .nav__item { position: relative; }.gtm-auth .nav__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--ink-2); background: transparent; border: 0; padding: 9px 14px; border-radius: 999px; cursor: pointer; transition: color .15s, background .15s; }.gtm-auth .nav__item:hover .nav__link, .gtm-auth a.nav__link:hover { color: var(--ink); background: rgba(255,255,255,.06); }.gtm-auth .nav__link svg { transition: transform .2s ease; }.gtm-auth .nav__item:hover .nav__link svg { transform: rotate(180deg); }.gtm-auth .nav__menu { position: absolute; top: 100%; right: 0; padding-top: 14px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60; }.gtm-auth .nav__item:hover .nav__menu, .gtm-auth .nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }.gtm-auth .nav__menu__inner { min-width: 200px; background: #11141b; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px -16px rgba(0,0,0,.7); padding: 8px; }.gtm-auth .nav__menu a { display: block; padding: 10px 12px; border-radius: 9px; color: var(--ink-2); font-size: 14px; font-weight: 500; }.gtm-auth .nav__menu a:hover { color: var(--ink); background: rgba(255,255,255,.06); }.gtm-auth .nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }.gtm-auth .nav__toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }.gtm-auth /* Mobile hamburger + slide-in drawer (built by nav.js) */ .nav__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 10px; }.gtm-auth .nav__burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }.gtm-auth .navdrawer { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }.gtm-auth .navdrawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(82vw, 320px); background: #11141b; border-left: 1px solid var(--line); box-shadow: -20px 0 50px -20px rgba(0,0,0,.7); transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; padding: 78px 20px 24px; gap: 4px; }.gtm-auth .navdrawer__close { position: absolute; top: 16px; right: 18px; background: none; border: 0; color: var(--ink); font-size: 30px; line-height: 1; cursor: pointer; padding: 4px; }.gtm-auth .navdrawer__link { display: block; padding: 14px 14px; color: var(--ink-2); font-size: 18px; font-weight: 600; border-radius: 12px; }.gtm-auth .navdrawer__link:hover { background: rgba(255,255,255,.06); color: var(--ink); }.gtm-auth .navdrawer__link--cta { margin-top: 10px; background: var(--grad); color: var(--primary-ink); text-align: center; }.gtm-auth .nav-open .navdrawer { opacity: 1; visibility: visible; }.gtm-auth .nav-open .navdrawer__panel { transform: translateX(0); }.gtm-auth .nav-open { overflow: hidden; } @media (max-width: 720px) {.gtm-auth .nav__cta { display: none; }.gtm-auth .nav__burger { display: flex; } }.gtm-auth /* Hero */ .hero { padding: 148px 0 80px; background: var(--hero-bg); }.gtm-auth .hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }.gtm-auth .eyebrow { color: var(--primary); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; }.gtm-auth .hero h1 { font-size: var(--h1-size); font-weight: var(--head-weight); margin-bottom: 20px; }.gtm-auth .hl { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }.gtm-auth .hero__sub { font-size: clamp(16px, 1.7vw, 18px); color: var(--ink-2); max-width: 520px; margin-bottom: 28px; }.gtm-auth .hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }.gtm-auth .hero__note { font-size: 14px; color: var(--muted); font-weight: 500; }.gtm-auth /* Panel (product mock) */ .panel { background: var(--panel-bg); border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); box-shadow: var(--shadow); padding: 22px; }.gtm-auth .panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }.gtm-auth .panel__title { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); text-transform: var(--head-transform); letter-spacing: var(--head-ls); }.gtm-auth .panel__pill { font-size: 11px; font-weight: 700; color: var(--pill-fg); background: var(--pill-bg); border-radius: 999px; padding: 4px 11px; }.gtm-auth /* Rank list */ .ranklist { list-style: none; display: flex; flex-direction: column; }.gtm-auth .ranklist li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }.gtm-auth .ranklist li:first-child { border-top: none; }.gtm-auth .rank__brand { font-weight: 600; color: var(--ink); font-size: 14.5px; flex: 1; }.gtm-auth .rank__why { color: var(--muted); font-size: 12.5px; flex: 1.3; display: none; }.gtm-auth .ranklist__muted { opacity: .5; }.gtm-auth .score { width: 40px; height: 32px; display: grid; place-items: center; border-radius: 8px; font-family: var(--font-num); font-weight: 700; font-size: 14px; flex: none; }.gtm-auth .score--a { background: var(--score-a-bg); color: var(--score-a-fg); }.gtm-auth .score--b { background: var(--score-b-bg); color: var(--score-b-fg); }.gtm-auth .score--c { background: var(--score-c-bg); color: var(--score-c-fg); }.gtm-auth /* Credibility strip */ .cred { background: var(--dark-bg); color: var(--dark-fg); padding: 26px 0; }.gtm-auth .cred__inner { text-align: center; }.gtm-auth .cred p { font-size: clamp(15px, 2vw, 18px); font-weight: 500; color: var(--dark-muted); max-width: 760px; margin: 0 auto; }.gtm-auth /* Sections */ .section { padding: clamp(76px, 8vw, 116px) 0; }.gtm-auth .section--soft { background: var(--soft); }.gtm-auth .lead-block { max-width: 760px; margin-bottom: 44px; }.gtm-auth .lead-block.center { margin-left: auto; margin-right: auto; text-align: center; }.gtm-auth .h2 { font-size: clamp(27px, 3.6vw, 40px); font-weight: var(--head-weight); margin-bottom: 18px; }.gtm-auth .h2.center { text-align: center; }.gtm-auth .lead { font-size: 18px; color: var(--ink-2); }.gtm-auth /* Card grids */ .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }.gtm-auth .grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }.gtm-auth .card { background: var(--panel-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-sm); }.gtm-auth .card h3 { font-size: 19px; margin-bottom: 12px; }.gtm-auth .card p { color: var(--ink-2); font-size: 15px; }.gtm-auth .pain h3 { color: var(--primary); }.gtm-auth /* Big rows */ .bigrow { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 0; }.gtm-auth .bigrow + .bigrow { margin-top: 88px; }.gtm-auth .bigrow--rev .bigrow__copy { order: 2; }.gtm-auth .stepchip { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pill-fg); background: var(--pill-bg); border-radius: 999px; padding: 6px 13px; margin-bottom: 16px; }.gtm-auth .bigrow__copy h3 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 14px; }.gtm-auth .bigrow__copy > p { font-size: 16.5px; color: var(--ink-2); margin-bottom: 18px; }.gtm-auth .ticks { list-style: none; display: flex; flex-direction: column; gap: 14px; }.gtm-auth .ticks li { position: relative; padding-left: 28px; color: var(--ink); font-size: 15px; line-height: 1.5; }.gtm-auth .ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; font-size: 11px; font-weight: 700; color: var(--tick-fg); background: var(--grad); border-radius: 50%; display: grid; place-items: center; }.gtm-auth /* Dossier */ .dossier__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }.gtm-auth .dossier__name { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--ink); }.gtm-auth .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }.gtm-auth .chip { font-size: 12px; font-weight: 500; color: var(--ink-2); background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }.gtm-auth .dossier__why { font-size: 14px; color: var(--ink-2); padding: 14px; background: var(--soft); border-radius: 10px; margin-bottom: 16px; }.gtm-auth .dossier__why strong { color: var(--ink); }.gtm-auth .dossier__contact { display: flex; align-items: center; gap: 12px; }.gtm-auth .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--grad); color: var(--primary-ink); display: grid; place-items: center; font-weight: 700; font-size: 13px; object-fit: cover; flex-shrink: 0; }.gtm-auth .dossier__role { display: block; font-weight: 600; color: var(--ink); font-size: 14px; }.gtm-auth .dossier__email { display: block; font-size: 12px; color: var(--score-a-fg); }.gtm-auth /* Email mock */ .email__row { font-size: 14px; color: var(--ink-2); padding: 4px 0; }.gtm-auth .email__label { display: inline-block; width: 28px; color: var(--muted); font-size: 12px; }.gtm-auth .email hr { border: none; border-top: 1px solid var(--line); margin: 12px 0; }.gtm-auth .email p { font-size: 14.5px; color: var(--ink); margin-bottom: 11px; }.gtm-auth .email__tag { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--pill-fg); background: var(--pill-bg); border-radius: 999px; padding: 4px 12px; }.gtm-auth /* Compare */ .compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; margin: 0 0 44px; }.gtm-auth .compare__vs { justify-self: center; color: var(--muted); font-weight: 700; font-size: 14px; }.gtm-auth .compare__col { border-radius: var(--radius); padding: 26px; border: 1px solid var(--line); background: var(--panel-bg); box-shadow: var(--shadow-sm); }.gtm-auth .compare__col--bad { background: var(--soft); }.gtm-auth .compare__col--good { border-color: var(--primary); border-width: 1.5px; }.gtm-auth .compare__tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }.gtm-auth .compare__col--bad .compare__tag { color: var(--muted); }.gtm-auth .compare__col--good .compare__tag { color: var(--primary); }.gtm-auth .compare__col p { font-size: 15px; color: var(--ink-2); margin-bottom: 16px; font-style: italic; }.gtm-auth .compare__verdict { font-size: 13px; font-weight: 600; }.gtm-auth .compare__col--bad .compare__verdict { color: var(--muted); }.gtm-auth .compare__col--good .compare__verdict { color: var(--score-a-fg); }.gtm-auth /* Versus */ .versus { text-align: center; }.gtm-auth .versus__head { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--ink); margin-bottom: 22px; text-transform: var(--head-transform); }.gtm-auth .versus__brandname { color: var(--ink); }.gtm-auth .versus__row { display: flex; align-items: stretch; justify-content: center; gap: 16px; }.gtm-auth .versus__vs { align-self: center; color: var(--muted); font-weight: 700; font-size: 14px; }.gtm-auth .vcard { flex: 1 1 0; min-width: 0; background: var(--panel-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; text-align: left; box-shadow: var(--shadow-sm); }.gtm-auth .vcard--win { border-color: var(--primary); box-shadow: 0 0 24px -10px rgba(34,197,94,.4), var(--shadow-sm); }.gtm-auth .vcard__role { display: block; font-family: var(--font-num); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }.gtm-auth .vcard--win .vcard__role { color: var(--primary); }.gtm-auth .vcard__fit { display: inline-flex; align-items: center; gap: 7px; }.gtm-auth .vcard__fitlab { font-family: var(--font-head); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }.gtm-auth .vcard__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }.gtm-auth .vcard__prop { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink); }.gtm-auth .vcard__top .score { width: 34px; height: 34px; border-radius: 9px; font-size: 15px; }.gtm-auth .vcard__brandrow { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; margin-bottom: 8px; border-top: 1px solid var(--line); }.gtm-auth .vcard__brandlab { font-family: var(--font-num); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }.gtm-auth .vcard__brand { font-size: 15px; font-weight: 600; color: var(--ink); }.gtm-auth .vcard__why { color: var(--muted); font-size: 13px; }.gtm-auth .diffs .card h3 { color: var(--ink); }.gtm-auth /* Who */ .whogrid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.gtm-auth .who__tile { background: var(--panel-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); transition: transform .2s ease, border-color .2s ease; }.gtm-auth .who__tile:hover { transform: translateY(-3px); border-color: rgba(34,197,94,.4); }.gtm-auth .who__tile .card__icon { margin-bottom: 14px; }.gtm-auth .who__tile h3 { font-size: 17px; color: var(--ink); margin-bottom: 6px; }.gtm-auth .who__tile p { color: var(--muted); font-size: 14px; }.gtm-auth .who__note { text-align: center; color: var(--muted); font-size: 15px; margin-top: 30px; max-width: 640px; margin-left: auto; margin-right: auto; }.gtm-auth /* Trust */ .trust2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }.gtm-auth .trust2__item { background: var(--panel-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }.gtm-auth .trust2__k { display: block; font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 8px; }.gtm-auth .trust2__v { color: var(--ink-2); font-size: 15px; }.gtm-auth /* FAQ */ /* Two independent columns: opening an item only pushes its own column (align-items: start). */ .faqgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; align-items: start; margin-top: 36px; } @media (max-width: 760px) {.gtm-auth .faqgrid { grid-template-columns: 1fr; } }.gtm-auth .faq { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }.gtm-auth .faqgrid .faq { margin-top: 0; }.gtm-auth .faq details { background: var(--panel-bg); border: 1px solid var(--line); border-radius: 12px; padding: 4px 22px; box-shadow: var(--shadow-sm); }.gtm-auth /* Ease the answer open/close instead of snapping (modern browsers; older ones simply snap). */ html { interpolate-size: allow-keywords; }.gtm-auth .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .28s ease, content-visibility .28s allow-discrete; }.gtm-auth .faq details[open]::details-content { block-size: auto; }.gtm-auth .faq summary { cursor: pointer; font-weight: 600; font-size: 16px; color: var(--ink); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }.gtm-auth .faq summary::-webkit-details-marker { display: none; }.gtm-auth .faq summary::after { content: "+"; color: var(--primary); font-size: 22px; font-weight: 400; }.gtm-auth .faq details[open] summary::after { content: "\2212"; }.gtm-auth .faq details p { color: var(--ink-2); font-size: 15px; padding: 0 0 18px; }.gtm-auth /* Image band */ .imgband { position: relative; min-height: 78vh; display: grid; place-items: center; overflow: hidden; background: var(--bg); }.gtm-auth .imgband__photo { position: absolute; inset: 0; background: url('img/stadium-30651230.jpg') center / cover no-repeat; filter: grayscale(1) contrast(1.06) brightness(.92); z-index: 0; }.gtm-auth .imgband__fade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #0d0f13 0%, rgba(13,15,19,0) 24%, rgba(13,15,19,0) 52%, rgba(13,15,19,.85) 86%, #0d0f13 100%), linear-gradient(90deg, #0d0f13 0%, rgba(13,15,19,0) 15%, rgba(13,15,19,0) 85%, #0d0f13 100%), radial-gradient(ellipse 72% 70% at 50% 44%, rgba(13,15,19,.12), rgba(13,15,19,.55)); }.gtm-auth .imgband__inner { position: relative; z-index: 2; text-align: center; max-width: 780px; }.gtm-auth .imgband .eyebrow { color: var(--primary); }.gtm-auth .imgband .h2 { text-shadow: 0 2px 34px rgba(0,0,0,.6); }.gtm-auth .imgband .lead { color: #e6e8ec; margin-top: 14px; text-shadow: 0 1px 16px rgba(0,0,0,.65); }.gtm-auth /* Scan band */ .scanband { position: relative; min-height: 72vh; display: grid; place-items: center; overflow: hidden; background: var(--bg); }.gtm-auth .scanband .sectionfx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }.gtm-auth .scanband__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 66% 74% at 50% 50%, rgba(13,15,19,.28) 0%, rgba(13,15,19,.74) 100%); }.gtm-auth .scanband > .v { position: relative; z-index: 2; width: 100%; }.gtm-auth .scanband .eyebrow { color: var(--primary); }.gtm-auth .scanband .h2 { text-shadow: 0 2px 30px rgba(0,0,0,.55); }.gtm-auth .scanband .lead { text-shadow: 0 1px 12px rgba(0,0,0,.6); }.gtm-auth .scan__a { max-width: 800px; text-align: center; }.gtm-auth .scan__split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; text-align: left; }.gtm-auth .scan__stat { border-left: 2px solid var(--primary); padding-left: 24px; }.gtm-auth .scan__big { display: block; font-family: var(--font-num); font-weight: 700; font-size: clamp(40px,6vw,72px); color: var(--ink); line-height: 1; }.gtm-auth .scan__lab { display: block; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .07em; margin-top: 6px; }.gtm-auth .scan__sub { display: block; color: var(--primary); font-size: 15px; font-weight: 600; margin-top: 14px; }.gtm-auth .scan__center { text-align: center; }.gtm-auth .scan__huge { display: block; font-family: var(--font-num); font-weight: 700; font-size: clamp(64px,12vw,150px); color: var(--ink); line-height: .95; }.gtm-auth .scan__hugelab { font-family: var(--font-head); font-weight: 700; font-size: clamp(18px,2.4vw,26px); color: var(--ink); margin-top: 8px; } @media (max-width: 760px) {.gtm-auth .scan__split { grid-template-columns: 1fr; } }.gtm-auth /* CTA */ .cta { background: var(--dark-bg); color: var(--dark-fg); padding: 92px 0; text-align: center; overflow: hidden; }.gtm-auth .cta .sectionfx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }.gtm-auth .cta__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 78% 84% at 50% 50%, rgba(9,11,15,.08) 0%, rgba(9,11,15,.5) 100%); }.gtm-auth .cta .cta__inner { position: relative; z-index: 2; }.gtm-auth .cta__inner { max-width: 720px; margin: 0 auto; }.gtm-auth .cta h2 { color: var(--dark-fg); font-size: clamp(32px, 5vw, 58px); line-height: 1.05; margin-bottom: 16px; text-shadow: 0 2px 30px rgba(0,0,0,.6); }.gtm-auth .cta__sub { color: var(--dark-muted); font-size: 18px; line-height: 1.5; max-width: 540px; margin: 0 auto 30px; text-shadow: 0 1px 16px rgba(0,0,0,.6); }.gtm-auth .cta__form { display: flex; width: 100%; align-items: center; gap: 8px; max-width: 100%; background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 8px 8px 8px 22px; box-shadow: 0 18px 50px -18px rgba(0,0,0,.7); transition: border-color .2s ease, box-shadow .2s ease; }.gtm-auth .cta__form:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(34,197,94,.18), 0 18px 50px -18px rgba(0,0,0,.7); }.gtm-auth .cta__form input { flex: 1; min-width: 200px; background: transparent; border: 0; color: var(--dark-fg); font-size: 16px; font-family: inherit; padding: 12px 4px; }.gtm-auth .cta__form input::placeholder { color: var(--dark-muted); }.gtm-auth .cta__form input:focus { outline: none; }.gtm-auth .cta__form .btn { flex: none; }.gtm-auth .cta__done { font-size: 20px; color: var(--dark-fg); font-weight: 600; max-width: 520px; margin: 0 auto; }.gtm-auth /* Footer */ .footer { background: var(--footer-bg); color: var(--footer-fg); padding: 54px 0 26px; }.gtm-auth .footer__inner { display: grid; grid-template-columns: 1.4fr 2fr; gap: 40px; }.gtm-auth .footer__brand p { font-size: 14px; margin-top: 12px; max-width: 260px; color: var(--footer-muted); }.gtm-auth .footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }.gtm-auth .footer__cols h4 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--footer-head); margin-bottom: 14px; }.gtm-auth .footer__cols a { display: block; color: var(--footer-muted); font-size: 14px; padding: 5px 0; }.gtm-auth .footer__cols a:hover { color: var(--footer-fg); }.gtm-auth .footer__legal { color: var(--footer-muted); font-size: 13px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--footer-line); }.gtm-auth /* Theme switcher (preview control — intentionally theme-independent) */ .controls { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; max-width: calc(100vw - 24px); }.gtm-auth .themebar, .gtm-auth .fontbar, .gtm-auth .logobar { display: flex; align-items: center; gap: 6px; background: rgba(12,14,24,.95); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 7px 14px; box-shadow: 0 12px 40px -12px rgba(0,0,0,.6); max-width: min(94vw, 980px); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }.gtm-auth .themebar > *, .gtm-auth .fontbar > *, .gtm-auth .logobar > * { flex: 0 0 auto; }.gtm-auth .themebar::-webkit-scrollbar, .gtm-auth .fontbar::-webkit-scrollbar, .gtm-auth .logobar::-webkit-scrollbar { height: 6px; }.gtm-auth .themebar::-webkit-scrollbar-thumb, .gtm-auth .fontbar::-webkit-scrollbar-thumb, .gtm-auth .logobar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 999px; }.gtm-auth .themebar__label { color: #8a90b5; font-family: 'Inter',sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }.gtm-auth .themebar button, .gtm-auth .fontbar button, .gtm-auth .logobar button { font-family: 'Inter',sans-serif; font-size: 13px; font-weight: 600; color: #d7dbf0; background: transparent; border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }.gtm-auth .themebar button:hover, .gtm-auth .fontbar button:hover, .gtm-auth .logobar button:hover { color: #fff; background: rgba(255,255,255,.08); }.gtm-auth .themebar button.is-active, .gtm-auth .fontbar button.is-active, .gtm-auth .logobar button.is-active { color: #0e1020; background: #fff; }.gtm-auth /* Show "why" column on wide hero mock */ @media (min-width: 901px) {.gtm-auth .hero__viz .rank__why { display: block; } }.gtm-auth /* Responsive */ @media (max-width: 900px) {.gtm-auth .nav__links { display: none; }.gtm-auth .nav.open .nav__links { display: flex; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; background: #11141b; border: 1px solid var(--line); border-radius: 16px; padding: 14px 22px; gap: 4px; box-shadow: 0 16px 36px -12px rgba(0,0,0,.7); }.gtm-auth .nav.open .nav__links a { padding: 12px 0; }.gtm-auth .hero__grid { grid-template-columns: 1fr; gap: 40px; }.gtm-auth .bigrow { grid-template-columns: 1fr; gap: 28px; padding: 0; }.gtm-auth .bigrow + .bigrow { margin-top: 56px; }.gtm-auth .bigrow--rev .bigrow__copy { order: 0; }.gtm-auth .grid3, .gtm-auth .grid2, .gtm-auth .whogrid, .gtm-auth .trust2 { grid-template-columns: repeat(2, 1fr); }.gtm-auth .footer__inner { grid-template-columns: 1fr; } } @media (max-width: 600px) {.gtm-auth .grid3, .gtm-auth .grid2, .gtm-auth .whogrid, .gtm-auth .trust2, .gtm-auth .compare { grid-template-columns: 1fr; }.gtm-auth .versus__row { flex-direction: column; }.gtm-auth .section { padding: 60px 0; }.gtm-auth .hero { padding: 92px 0 48px; }.gtm-auth .themebar { gap: 2px; padding: 6px 8px; }.gtm-auth .themebar__label { display: none; }.gtm-auth .themebar button { padding: 6px 10px; font-size: 12px; } }.gtm-auth /* ===== Motion & data-viz (Robinhood-inspired) ===== */ /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }.gtm-auth .reveal.in { opacity: 1; transform: none; }.gtm-auth /* Subtle card hover lift */ .card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }.gtm-auth .card:hover { transform: translateY(-3px); }.gtm-auth /* Hero portfolio card */ .portfolio__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }.gtm-auth .portfolio__label { display: block; font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 4px; }.gtm-auth .portfolio__big { font-family: var(--font-num); font-weight: 700; font-size: 32px; color: var(--ink); letter-spacing: -0.01em; }.gtm-auth .portfolio__trend { font-family: var(--font-head); font-size: 12px; font-weight: 600; color: var(--primary); white-space: nowrap; }.gtm-auth /* Animated sparkline (financial-chart motif) */ .spark { width: 100%; height: 120px; display: block; margin: 10px 0 16px; overflow: hidden; border-radius: 10px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }.gtm-auth .spark__grid line { stroke: rgba(255,255,255,.08); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }.gtm-auth .spark__line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: spark-draw 1.5s cubic-bezier(.4,0,.2,1) .25s forwards; }.gtm-auth .spark__dot { fill: var(--primary); }.gtm-auth .spark__area { fill: url(#sparkgrad); opacity: 0; clip-path: inset(0 0 100% 0); animation: area-load 1s ease .9s forwards; } @keyframes spark-draw {.gtm-auth to { stroke-dashoffset: 0; } } @keyframes area-load {.gtm-auth to { opacity: 1; clip-path: inset(0 0 0 0); } }.gtm-auth /* Category ticker */ .ticker { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; overflow: hidden; }.gtm-auth .ticker__cap { text-align: center; font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: .01em; color: var(--ink-2); margin: 0 0 16px; padding: 0 24px; }.gtm-auth .ticker__cap::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); margin-right: 10px; vertical-align: middle; }.gtm-auth .ticker__track { display: flex; width: max-content; white-space: nowrap; animation: ticker 36s linear infinite; }.gtm-auth .ticker__track span { font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; }.gtm-auth .ticker__track span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); margin: 0 22px; opacity: .55; } @keyframes ticker {.gtm-auth to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) {.gtm-auth .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }.gtm-auth .spark__line { animation: none !important; stroke-dashoffset: 0 !important; }.gtm-auth .spark__area { animation: none !important; opacity: 1 !important; clip-path: none !important; }.gtm-auth .ticker__track { animation: none !important; }.gtm-auth .card { transition: none !important; }.gtm-auth .bars__fill, .gtm-auth .ring__val { transition: none !important; }.gtm-auth .hero .ring__val { animation: none !important; stroke-dashoffset: 9 !important; }.gtm-auth .chip-float--email p.typing::after { display: none !important; } }.gtm-auth /* ===== Typeface options (font switcher) ===== */ html[data-font="instrument"] { --font-display: 'Instrument Serif','Georgia',serif; --head-weight: 400; --head-ls: 0em; }.gtm-auth html[data-font="grotesk"] { --font-display: 'Space Grotesk','Inter',sans-serif; --head-weight: 700; }.gtm-auth html[data-font="jakarta"] { --font-display: 'Plus Jakarta Sans','Inter',sans-serif; --font-head: 'Plus Jakarta Sans','Inter',sans-serif; --head-weight: 800; }.gtm-auth html[data-font="bricolage"] { --font-display: 'Bricolage Grotesque','Inter',sans-serif; --font-head: 'Bricolage Grotesque','Inter',sans-serif; --head-weight: 800; }.gtm-auth /* ===== Bar chart (Find step) ===== */ .bars { list-style: none; display: flex; flex-direction: column; gap: 16px; }.gtm-auth .bars li.ranklist__muted { opacity: .5; }.gtm-auth .bars__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }.gtm-auth .bars__name { font-weight: 600; color: var(--ink); font-size: 14px; }.gtm-auth .bars__score { font-family: var(--font-num); font-weight: 700; font-size: 14px; color: var(--ink); }.gtm-auth .bars__track { display: block; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }.gtm-auth .bars__fill { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 1.1s cubic-bezier(.3,.8,.3,1); }.gtm-auth .bigrow__viz.in .bars__fill { width: var(--w); }.gtm-auth .fill--a { background: var(--primary); }.gtm-auth .fill--b { background: var(--score-b-fg); }.gtm-auth .fill--c { background: var(--muted); }.gtm-auth /* ===== Ring gauge (Research step) ===== */ .ring { position: relative; width: 50px; height: 50px; flex: none; }.gtm-auth .ring svg { width: 50px; height: 50px; transform: rotate(-90deg); }.gtm-auth .ring__bg { fill: none; stroke: var(--line); stroke-width: 4; }.gtm-auth .ring__val { fill: none; stroke: var(--primary); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.3s cubic-bezier(.3,.8,.3,1); }.gtm-auth .bigrow__viz.in .ring__val { stroke-dashoffset: calc(100 - var(--p)); }.gtm-auth .ring__num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-num); font-weight: 700; font-size: 13px; color: var(--ink); }.gtm-auth /* ===== Per-section layout variations ===== */ .section, .gtm-auth .hero, .gtm-auth .cta { position: relative; }.gtm-auth .secvar { position: absolute; top: 12px; right: 14px; z-index: 30; display: flex; align-items: center; gap: 4px; background: var(--panel-bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px; box-shadow: var(--shadow-sm); opacity: .5; transition: opacity .15s; }.gtm-auth .secvar:hover { opacity: 1; }.gtm-auth .secvar__label { font-family: var(--font-head); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 4px; }.gtm-auth .secvar button { font-family: var(--font-num); font-size: 12px; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer; background: transparent; color: var(--ink-2); transition: background .15s, color .15s; }.gtm-auth .secvar button:hover { background: var(--line); }.gtm-auth .secvar button.is-active { background: var(--primary); color: var(--primary-ink); }.gtm-auth /* Hero texture picker */ .tex-pick { position: absolute; bottom: 16px; right: 16px; z-index: 30; display: flex; align-items: center; gap: 4px; background: var(--panel-bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px; box-shadow: var(--shadow-sm); opacity: .5; transition: opacity .15s; }.gtm-auth .tex-pick:hover { opacity: 1; }.gtm-auth .tex-pick__label { font-family: var(--font-head); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 4px; }.gtm-auth .tex-pick button { font-family: var(--font-num); font-size: 11px; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer; background: transparent; color: var(--ink-2); transition: background .15s, color .15s; }.gtm-auth .tex-pick button:hover { background: var(--line); }.gtm-auth .tex-pick button.is-active { background: var(--primary); color: var(--primary-ink); }.gtm-auth /* Hero texture layers */ .hero[data-tex="1"]::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; opacity: .06; mix-blend-mode: overlay; }.gtm-auth .hero[data-tex="2"] { background: var(--hero-bg), radial-gradient(circle, rgba(34,197,94,.07) 1px, transparent 1px); background-size: auto, 28px 28px; }.gtm-auth .hero[data-tex="3"] { background: var(--hero-bg), repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0px, rgba(0,0,0,.18) 1px, transparent 1px, transparent 3px); }.gtm-auth .hero[data-tex="4"] { background: var(--hero-bg), repeating-linear-gradient(-45deg, rgba(34,197,94,.04) 0px, rgba(34,197,94,.04) 1px, transparent 1px, transparent 18px); }.gtm-auth .hero[data-tex="5"] { background: var(--hero-bg), linear-gradient(rgba(34,197,94,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(34,197,94,.05) 1px, transparent 1px); background-size: auto, 40px 40px, 40px 40px; }.gtm-auth /* Hero: A split (default) · B flipped · C centered */ .hero[data-variant="b"] .hero__copy { order: 2; }.gtm-auth .hero[data-variant="c"] .hero__grid { grid-template-columns: 1fr; text-align: center; max-width: 880px; margin: 0 auto; }.gtm-auth .hero[data-variant="c"] .hero__sub { margin-left: auto; margin-right: auto; }.gtm-auth .hero[data-variant="c"] .hero__actions { justify-content: center; }.gtm-auth /* Problem: A cards · B label+text rows · C numbered list */ #problem[data-variant="b"] .grid3 { grid-template-columns: 1fr; }.gtm-auth #problem[data-variant="b"] .pain { display: flex; gap: 24px; align-items: baseline; }.gtm-auth #problem[data-variant="b"] .pain h3 { flex: 0 0 240px; margin: 0; }.gtm-auth #problem[data-variant="c"] .grid3 { grid-template-columns: 1fr; counter-reset: pain; }.gtm-auth #problem[data-variant="c"] .pain { display: flex; gap: 18px; align-items: baseline; }.gtm-auth #problem[data-variant="c"] .pain h3 { margin: 0; }.gtm-auth #problem[data-variant="c"] .pain h3::before { counter-increment: pain; content: counter(pain, decimal-leading-zero); font-family: var(--font-num); color: var(--primary); margin-right: 12px; }.gtm-auth /* How it works: A alternating · B uniform · C stacked */ #how[data-variant="b"] .bigrow--rev .bigrow__copy { order: 0; }.gtm-auth #how[data-variant="c"] .bigrow { grid-template-columns: 1fr; gap: 22px; }.gtm-auth #how[data-variant="c"] .bigrow--rev .bigrow__copy { order: 0; }.gtm-auth #how[data-variant="c"] .bigrow__viz { max-width: 540px; }.gtm-auth /* Personalization: A side by side · B stacked · C emphasize winner */ #personal[data-variant="b"] .compare { grid-template-columns: 1fr; }.gtm-auth #personal[data-variant="c"] .compare { grid-template-columns: 0.82fr 1.18fr; }.gtm-auth /* Differentiators: A 2x2 · B 4-up · C list */ #different[data-variant="b"] .grid2 { grid-template-columns: repeat(4, 1fr); }.gtm-auth #different[data-variant="c"] .grid2 { grid-template-columns: 1fr; }.gtm-auth #different[data-variant="c"] .diffs .card { display: flex; gap: 22px; align-items: baseline; }.gtm-auth #different[data-variant="c"] .diffs .card h3 { flex: 0 0 280px; margin: 0; }.gtm-auth /* Who: A 3-up · B 2-up · C inline pills */ #who[data-variant="b"] .whogrid { grid-template-columns: repeat(2, 1fr); }.gtm-auth #who[data-variant="c"] .whogrid { grid-template-columns: 1fr; }.gtm-auth #who[data-variant="c"] .who__tile { display: flex; align-items: center; gap: 18px; }.gtm-auth #who[data-variant="c"] .who__tile .card__icon { margin-bottom: 0; flex: none; }.gtm-auth /* Trust: A 3-up · B stacked · C 2-up */ #trust[data-variant="b"] .trust2 { grid-template-columns: 1fr; }.gtm-auth #trust[data-variant="c"] .trust2 { grid-template-columns: repeat(2, 1fr); }.gtm-auth /* FAQ: A accordion · B 2-column · C all open */ #faq[data-variant="b"] .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }.gtm-auth #faq[data-variant="c"] .faq details > *:not(summary) { display: block !important; }.gtm-auth #faq[data-variant="c"] .faq summary { pointer-events: none; }.gtm-auth #faq[data-variant="c"] .faq summary::after { content: ""; }.gtm-auth /* CTA: A centered · B left · C boxed */ #demo[data-variant="b"] .cta__inner { background: rgba(255,255,255,.05); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.14); border-radius: 26px; padding: 52px 44px; box-shadow: 0 30px 70px -28px rgba(0,0,0,.75); }.gtm-auth #demo[data-variant="c"] .cta__form { flex-direction: column; align-items: stretch; border-radius: 18px; padding: 14px; gap: 10px; }.gtm-auth #demo[data-variant="c"] .cta__form input { width: 100%; min-width: 320px; text-align: center; }.gtm-auth #demo[data-variant="c"] .cta__form .btn { width: 100%; justify-content: center; } @media (max-width: 560px) {.gtm-auth .cta__form { flex-direction: column; align-items: stretch; border-radius: 18px; padding: 14px; }.gtm-auth .cta__form input { width: 100%; min-width: 0; text-align: center; }.gtm-auth .cta__form .btn { width: 100%; justify-content: center; } } @media (max-width: 900px) {.gtm-auth #different[data-variant="b"] .grid2 { grid-template-columns: repeat(2, 1fr); }.gtm-auth .secvar { opacity: .9; } }.gtm-auth /* ===== Markup-swap variants (.secwrap) ===== */ .secwrap > .v { display: none; }.gtm-auth .secwrap > .v.is-on { display: block; }.gtm-auth .hero .ring__val { animation: hero-ring 1.2s cubic-bezier(.22,.7,.3,1) .15s both; } @keyframes hero-ring {.gtm-auth from { stroke-dashoffset: 100; }.gtm-auth to { stroke-dashoffset: 9; } }.gtm-auth /* Hero 1 — live product, .gtm-auth layered */ .hero__stack { position: relative; }.gtm-auth .chip-float { position: absolute; z-index: 3; background: var(--panel-bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 12px 14px; }.gtm-auth .chip-float--ring { top: -22px; right: -14px; display: flex; align-items: center; gap: 10px; }.gtm-auth .chip-float--email { bottom: -28px; left: -18px; max-width: 250px; }.gtm-auth .chip-float--email p span.cursor { border-right: 2px solid var(--primary); margin-right: -2px; animation: caret .8s steps(1) infinite; } @keyframes caret {.gtm-auth 50% { border-right-color: transparent; } }.gtm-auth .chip-float__k { font-size: 11px; color: var(--muted); font-weight: 600; }.gtm-auth .chip-float__v { font-size: 13px; font-weight: 700; color: var(--ink); }.gtm-auth .chip-float--email p { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; font-style: italic; }.gtm-auth /* Hero 2 — editorial statement */ .hero__editorial { text-align: center; max-width: 940px; margin: 0 auto; }.gtm-auth .hero__huge { font-size: clamp(44px, 7.4vw, 96px); font-weight: var(--head-weight); line-height: 1.04; margin-bottom: 22px; }.gtm-auth .hero__editorial .hero__sub { margin: 0 auto 30px; }.gtm-auth .hero__editorial .hero__actions { justify-content: center; margin-bottom: 48px; }.gtm-auth .statline { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 34px; }.gtm-auth .statline__item { display: flex; flex-direction: column; align-items: center; }.gtm-auth .statline__num { font-family: var(--font-num); font-weight: 700; font-size: clamp(34px, 5vw, 56px); color: var(--ink); line-height: 1; }.gtm-auth .statline__lab { font-size: 12px; color: var(--muted); margin-top: 8px; text-transform: uppercase; letter-spacing: .08em; }.gtm-auth /* Hero 3 — pipeline demo */ .hero__flowwrap { text-align: center; }.gtm-auth .hero__flowcopy { max-width: 820px; margin: 0 auto 44px; }.gtm-auth .hero__mid { font-size: clamp(32px, 4.6vw, 58px); }.gtm-auth .flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 12px; margin-bottom: 40px; }.gtm-auth .flow__node { background: var(--panel-bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 24px; text-align: left; display: flex; flex-direction: column; }.gtm-auth .flow__step { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--primary); }.gtm-auth .flow__viz { margin: 16px 0; min-height: 60px; display: flex; align-items: center; }.gtm-auth .flow__node p { font-size: 14px; color: var(--ink-2); margin-top: auto; }.gtm-auth .flow__arrow { align-self: center; font-size: 22px; color: var(--muted); }.gtm-auth .flow__bars { display: flex; align-items: flex-end; gap: 7px; height: 60px; width: 100%; }.gtm-auth .flow__bars i { flex: 1; background: var(--primary); border-radius: 4px 4px 0 0; }.gtm-auth .flow__lines { display: flex; flex-direction: column; gap: 8px; width: 100%; }.gtm-auth .flow__lines span { height: 8px; border-radius: 999px; background: var(--line); }.gtm-auth .flow__lines span:nth-child(1) { width: 92%; background: var(--primary); }.gtm-auth .flow__lines span:nth-child(2) { width: 70%; }.gtm-auth .flow__lines span:nth-child(3) { width: 82%; }.gtm-auth .hero__actions.center { justify-content: center; } @media (max-width: 780px) {.gtm-auth .flow { grid-template-columns: 1fr; }.gtm-auth .flow__arrow { transform: rotate(90deg); justify-self: center; } } @media (max-width: 600px) {.gtm-auth .chip-float { display: none; }.gtm-auth .hero__stack .portfolio { transform: none; }.gtm-auth .statline { gap: 32px; } }.gtm-auth /* ===== Logo wordmark typeface options ===== */ html[data-logofont="spacegrotesk"] { --font-brand: 'Space Grotesk', sans-serif; }.gtm-auth html[data-logofont="sora"] { --font-brand: 'Sora', sans-serif; }.gtm-auth html[data-logofont="manrope"] { --font-brand: 'Manrope', sans-serif; }.gtm-auth html[data-logofont="outfit"] { --font-brand: 'Outfit', sans-serif; }.gtm-auth html[data-logofont="jakarta"] { --font-brand: 'Plus Jakarta Sans', sans-serif; }.gtm-auth html[data-logofont="archivo"] { --font-brand: 'Archivo', sans-serif; }.gtm-auth html[data-logofont="syne"] { --font-brand: 'Syne', sans-serif; }.gtm-auth html[data-logofont="unbounded"] { --font-brand: 'Unbounded', sans-serif; }.gtm-auth html[data-logofont="bricolage"] { --font-brand: 'Bricolage Grotesque', sans-serif; }.gtm-auth html[data-logofont="hanken"] { --font-brand: 'Hanken Grotesk', sans-serif; }.gtm-auth html[data-logofont="schibsted"] { --font-brand: 'Schibsted Grotesk', sans-serif; }.gtm-auth html[data-logofont="bigshoulders"] { --font-brand: 'Big Shoulders Display', sans-serif; }.gtm-auth html[data-logofont="anton"] { --font-brand: 'Anton', sans-serif; }.gtm-auth html[data-logofont="fraunces"] { --font-brand: 'Fraunces', serif; }.gtm-auth html[data-logofont="instrument"] { --font-brand: 'Instrument Serif', serif; }.gtm-auth html[data-logofont="dmserif"] { --font-brand: 'DM Serif Display', serif; }.gtm-auth html[data-logofont="mono"] { --font-brand: 'Space Mono', monospace; }.gtm-auth html[data-logofont="fredoka"] { --font-brand: 'Fredoka', sans-serif; }.gtm-auth /* Brand name + industry rows */ .rank__id { flex: 1; display: flex; flex-direction: row; align-items: center; gap: 10px; }.gtm-auth .rank__id-text { display: flex; flex-direction: column; gap: 1px; }.gtm-auth .rank__cat { font-size: 12px; color: var(--muted); }.gtm-auth .bars__id { display: flex; flex-direction: row; align-items: center; gap: 10px; }.gtm-auth .bars__id-text { display: flex; flex-direction: column; gap: 1px; }.gtm-auth .bars__cat { font-size: 11px; color: var(--muted); font-weight: 500; }.gtm-auth .dossier__cat { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }.gtm-auth .dossier__brand { display: flex; align-items: center; gap: 10px; }.gtm-auth /* Fake brand logo circles */ .brand-logo { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }.gtm-auth /* Line-art card icons */ .card__icon { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; color: var(--primary); margin-bottom: 18px; background: linear-gradient(150deg, rgba(34,197,94,.18), rgba(34,197,94,.03)); border: 1px solid rgba(34,197,94,.28); box-shadow: 0 10px 26px -14px rgba(34,197,94,.45); }.gtm-auth .card__icon svg { width: 27px; height: 27px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }.gtm-auth .who__tile:hover .card__icon, .gtm-auth .card:hover .card__icon { box-shadow: 0 12px 30px -12px rgba(34,197,94,.6); }.gtm-auth .trust2__item .card__icon { margin-bottom: 14px; }.gtm-auth #problem[data-variant="b"] .card__icon, .gtm-auth #problem[data-variant="c"] .card__icon, .gtm-auth #different[data-variant="c"] .card__icon { margin-bottom: 0; }.gtm-auth /* Case study */ .casestudy { display: grid; grid-template-columns: 1.3fr .9fr; background: var(--panel-bg); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }.gtm-auth .casestudy__main { padding: 44px; }.gtm-auth .casestudy__badge { display: inline-block; font-family: var(--font-head); font-weight: 800; letter-spacing: .04em; font-size: 18px; color: var(--primary); border: 1.5px solid var(--primary); border-radius: 10px; padding: 6px 12px; margin-bottom: 22px; }.gtm-auth .casestudy__quote { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.32; color: var(--ink); margin-bottom: 18px; }.gtm-auth .casestudy__who { color: var(--muted); font-size: 14px; }.gtm-auth .casestudy__link { display: inline-block; margin-top: 22px; color: #C39E6D; font-weight: 600; font-size: 14px; }.gtm-auth .casestudy__link:hover { color: #d8b888; }.gtm-auth .casestudy__stats { background: rgba(34,197,94,.04); border-left: 1px solid var(--line); padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; gap: 26px; }.gtm-auth .cstat__num { display: block; font-family: var(--font-num); font-weight: 700; font-size: clamp(32px, 4vw, 46px); color: #C39E6D; line-height: 1; }.gtm-auth .cstat__lab { display: block; color: var(--muted); font-size: 13px; margin-top: 6px; text-transform: uppercase; letter-spacing: .05em; } @media (max-width: 760px) {.gtm-auth .casestudy { grid-template-columns: 1fr; }.gtm-auth .casestudy__stats { border-left: 0; border-top: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; gap: 24px; } }.gtm-auth .casestudy__note { color: var(--muted); font-size: 13px; margin-top: 10px; font-style: italic; }.gtm-auth /* Case study — warm-toned stadium on the left, .gtm-auth solid #0d0f13 panel on the right, .gtm-auth gold stats */ .casestudy__main, .gtm-auth .casestudy__stats { position: relative; }.gtm-auth .casestudy__main > *, .gtm-auth .casestudy__stats > * { position: relative; z-index: 2; }.gtm-auth .casestudy--pleft { background: var(--bg); }.gtm-auth .casestudy--pleft .casestudy__main::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to bottom, rgba(13,15,19,.2) 0%, rgba(13,15,19,.55) 46%, var(--bg) 84%), url('img/stadium-7151514.jpg') center top / cover no-repeat; /* warm monochrome so the hue matches the rest of the site */ filter: grayscale(1) sepia(.55) brightness(.9) contrast(1.05); }.gtm-auth /* quote on the photo → white text */ .casestudy--pleft .casestudy__quote { color: #fff; text-shadow: 0 2px 26px rgba(0,0,0,.55); }.gtm-auth /* right stats panel: solid #0d0f13, .gtm-auth no image; LAFC gold numbers */ .casestudy--pleft .casestudy__stats { background: var(--bg); border-left-color: var(--line); }.gtm-auth .casestudy--pleft .cstat__num { color: #C39E6D; }.gtm-auth .casestudy--pleft .cstat__lab { color: var(--ink-2); }.gtm-auth /* Quote attribution: headshot + name + title + club */ .casestudy__person { display: flex; align-items: center; gap: 14px; margin-top: 22px; }.gtm-auth .casestudy__avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid #C39E6D; flex: none; }.gtm-auth .casestudy__pmeta { display: flex; flex-direction: column; line-height: 1.34; }.gtm-auth .casestudy__pname { color: #fff; font-weight: 700; font-size: 15px; }.gtm-auth .casestudy__ptitle { color: var(--ink-2); font-size: 13px; }.gtm-auth .casestudy__pclub { color: #C39E6D; font-size: 13px; font-weight: 600; }.gtm-auth /* Newsletter */ .news { background: var(--soft); padding: 80px 0; text-align: center; border-top: 1px solid var(--line); }.gtm-auth .news__inner { max-width: 640px; margin: 0 auto; }.gtm-auth .news .eyebrow { color: var(--primary); }.gtm-auth .news__sub { color: var(--muted); font-size: 17px; margin-top: 12px; margin-bottom: 28px; }.gtm-auth .news__form { display: flex; width: 100%; max-width: 480px; margin: 0 auto; align-items: center; gap: 8px; background: var(--panel-bg); border: 1px solid var(--line); border-radius: 999px; padding: 8px 8px 8px 22px; transition: border-color .2s ease, box-shadow .2s ease; }.gtm-auth .news__form:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(34,197,94,.16); }.gtm-auth .news__form input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ink); font-size: 16px; font-family: inherit; padding: 12px 4px; }.gtm-auth .news__form input::placeholder { color: var(--muted); }.gtm-auth .news__form input:focus { outline: none; }.gtm-auth .news__done { color: var(--ink); font-weight: 600; font-size: 18px; } @media (max-width: 560px) {.gtm-auth .news__form { flex-direction: column; align-items: stretch; border-radius: 18px; padding: 14px; }.gtm-auth .news__form .btn { width: 100%; justify-content: center; } }.gtm-auth .casestudy__logo { height: 68px; width: auto; margin-bottom: 24px; align-self: flex-start; }.gtm-auth /* Email marketing consent checkbox */ .consent-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.5; cursor: pointer; margin-top: 16px; }.gtm-auth .consent-check input[type="checkbox"] { flex: none; width: 15px; height: 15px; margin-top: 2px; accent-color: var(--primary); cursor: pointer; }.gtm-auth .consent-check a { color: var(--primary); text-decoration: underline; }.gtm-auth .consent-check--center { justify-content: center; max-width: 480px; margin-left: auto; margin-right: auto; text-align: left; }.gtm-auth .consent-check--dark { color: rgba(255,255,255,.55); }.gtm-auth .consent-check--dark a { color: var(--primary); }.gtm-auth .news__form-outer { display: flex; flex-direction: column; align-items: center; }.gtm-auth .cta__form-outer { display: flex; flex-direction: column; align-items: center; width: 100%; } .gtm-auth /* ===== Page-scoped styles (merged from individual HTML