.how-page { --how-cyan: #16c8ee; --how-ice: #e1eaf1; --how-muted: #9db1c1; --how-line: rgba(150, 204, 224, 0.16); --how-surface: rgba(7, 22, 37, 0.54); color: var(--how-ice); font-family: var(--font-body, "IBM Plex Sans", sans-serif); } .how-page main { overflow: clip; } .how-hero, .how-section, .how-final-cta, .how-toc { width: min(1240px, calc(100% - 48px)); margin-inline: auto; } .how-hero { padding: 166px 0 84px; text-align: center; } .how-hero .cdp-eyebrow, .how-section .cdp-eyebrow, .how-final-cta .cdp-eyebrow { margin: 0 0 20px; color: var(--how-cyan); font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.15em; } .how-hero h1, .how-section h2, .how-final-cta h2 { margin: 0; color: var(--how-ice); font-family: var(--font-display, Fraunces, Georgia, serif); font-weight: 900; letter-spacing: 0; } .how-hero h1 { max-width: 15ch; margin-inline: auto; font-size: clamp(3rem, 6vw, 5.8rem); line-height: 0.98; } .how-hero h1 em, .how-section h2 span { color: var(--how-cyan); font-style: italic; } .how-hero-copy { max-width: 64ch; margin: 26px auto 0; color: var(--how-muted); font-size: 1.08rem; line-height: 1.72; } .how-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; } .how-hero-actions .cta-btn { min-height: 46px; border-radius: 7px; box-shadow: none; } .how-hero-actions .cta-btn.secondary { border-color: rgba(22, 200, 238, 0.34); background: rgba(22, 200, 238, 0.08); color: var(--how-ice); } .how-toc { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 96px; border-top: 1px solid var(--how-line); border-bottom: 1px solid var(--how-line); } .how-toc a { position: relative; padding: 15px clamp(14px, 2.4vw, 30px); color: var(--how-muted); font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .how-toc a:hover, .how-toc a:focus-visible { color: var(--how-cyan); } .how-toc a + a::before { position: absolute; left: 0; top: 50%; width: 1px; height: 15px; background: var(--how-line); content: ""; transform: translateY(-50%); } .how-section { padding: 104px 0 0; } .how-section-intro { max-width: 840px; } .how-section-intro h2, .how-feature-copy h2, .how-trust h2, .how-final-cta h2 { max-width: 15ch; font-size: clamp(2.15rem, 3.15vw, 3.7rem); line-height: 1.08; } .how-section-intro > p:last-child, .how-feature-copy > p:not(.how-index), .how-trust > p:not(.cdp-eyebrow), .how-final-cta > p:not(.cdp-eyebrow) { max-width: 62ch; margin: 22px 0 0; color: var(--how-muted); font-size: 1.03rem; line-height: 1.72; } .how-workflow { padding-top: 0; } .how-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 54px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--how-line); } .how-flow li { position: relative; min-height: 168px; padding: 25px 24px 0 0; } .how-flow li + li { padding-left: 24px; border-left: 1px solid var(--how-line); } .how-flow li::before { position: absolute; top: -5px; left: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--how-cyan); box-shadow: 0 0 18px rgba(22, 200, 238, 0.36); content: ""; } .how-flow li:first-child::before { left: 0; } .how-flow span, .how-index, .how-report-uses span { display: block; color: var(--how-cyan); font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 0.73rem; font-weight: 700; letter-spacing: 0.13em; } .how-flow strong { display: block; margin-top: 16px; color: var(--how-ice); font-size: 1.17rem; line-height: 1.22; } .how-flow small { display: block; margin-top: 10px; color: var(--how-muted); font-size: 0.94rem; line-height: 1.55; } .how-feature { display: grid; grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(36px, 7vw, 112px); } .how-feature--import { padding-top: 82px; } .how-feature--structure { grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); } .how-feature--structure .how-feature-copy { grid-column: 2; grid-row: 1; } .how-feature--structure .how-product-shot { grid-column: 1; grid-row: 1; } .how-index { margin: 0 0 18px; } .how-product-shot { position: relative; margin: 0; border: 1px solid rgba(22, 200, 238, 0.22); border-radius: 8px; background: #071421; box-shadow: 0 28px 64px rgba(0, 0, 0, 0.34); overflow: hidden; } .how-product-shot::before { position: absolute; z-index: 1; top: 0; left: 0; width: 62px; height: 2px; background: var(--how-cyan); content: ""; } .how-product-shot img { display: block; width: 100%; height: auto; } .how-product-shot--import { max-width: 714px; } .how-product-shot--wide { margin-top: 42px; } .how-section-intro--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.7fr); align-items: end; gap: 44px; max-width: none; } .how-section-intro--split > p:last-child { margin: 0; } .how-inline-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 30px; } .how-inline-points p { position: relative; margin: 0; padding: 16px 0 0 30px; border-top: 1px solid var(--how-line); } .how-inline-points span { position: absolute; top: 16px; left: 0; color: var(--how-cyan); font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 0.7rem; } .how-inline-points strong, .how-report-uses h3 { display: block; color: var(--how-ice); font-size: 1rem; } .how-inline-points small, .how-report-uses p { display: block; margin-top: 8px; color: var(--how-muted); font-size: 0.92rem; line-height: 1.58; } .how-feature--sai { display: block; } .how-quiet-note { max-width: 70ch; margin: 22px 0 0; color: var(--how-muted); font-size: 0.93rem; line-height: 1.58; } .how-report-life { padding-top: 132px; } .how-report-object { display: grid; grid-template-columns: 0.8fr 1.5fr 1fr; align-items: center; gap: 24px; margin-top: 48px; padding: 26px 0; border-top: 1px solid rgba(22, 200, 238, 0.34); border-bottom: 1px solid var(--how-line); } .how-report-object__label { margin: 0; color: var(--how-cyan); font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.13em; } .how-report-formats { display: flex; flex-wrap: wrap; gap: 9px; } .how-report-formats span { padding: 10px 13px; border: 1px solid rgba(22, 200, 238, 0.32); border-radius: 999px; color: var(--how-ice); font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 0.85rem; } .how-report-formats em { color: var(--how-cyan); font-style: normal; } .how-report-object > p:last-child { margin: 0; color: var(--how-muted); font-size: 0.93rem; line-height: 1.55; } .how-report-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 26px; } .how-report-uses > div { padding-top: 16px; border-top: 1px solid var(--how-line); } .how-report-uses h3 { margin: 13px 0 0; } .how-report-uses p { margin-bottom: 0; } .how-text-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; color: var(--how-cyan); font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 0.81rem; font-weight: 700; letter-spacing: 0.04em; } .how-text-link::after { content: "→"; transition: transform 0.18s ease; } .how-text-link:hover::after, .how-text-link:focus-visible::after { transform: translateX(3px); } .how-text-link--center { display: flex; justify-content: center; } .how-trust { max-width: 860px; padding-top: 132px; } .how-final-cta { padding: 132px 0 108px; text-align: center; } .how-final-cta h2, .how-final-cta > p:not(.cdp-eyebrow) { margin-inline: auto; } .how-final-cta h2, .how-final-cta > p:not(.cdp-eyebrow) { text-align: center; } .how-final-cta .how-hero-actions { margin-top: 30px; } html[data-color-mode="light"] .how-page { --how-ice: #102235; --how-muted: #506579; --how-line: rgba(16, 34, 53, 0.16); --how-surface: rgba(255, 255, 255, 0.7); } html[data-color-mode="light"] .how-product-shot { background: #eef5f9; box-shadow: 0 22px 54px rgba(16, 34, 53, 0.14); } @media (max-width: 900px) { .how-feature, .how-feature--structure, .how-section-intro--split { grid-template-columns: 1fr; } .how-feature--structure .how-feature-copy, .how-feature--structure .how-product-shot { grid-column: auto; grid-row: auto; } .how-product-shot--import { max-width: none; } .how-section-intro--split > p:last-child { margin-top: 0; } } @media (max-width: 720px) { .how-hero, .how-section, .how-final-cta, .how-toc { width: min(100% - 32px, 1240px); } .how-hero { padding: 124px 0 60px; } .how-hero h1 { font-size: clamp(2.7rem, 13vw, 4.1rem); } .how-toc { justify-content: flex-start; overflow-x: auto; margin-bottom: 62px; scrollbar-width: none; } .how-toc::-webkit-scrollbar { display: none; } .how-toc a { flex: 0 0 auto; padding-inline: 15px; } .how-section { padding-top: 74px; } .how-section-intro h2, .how-feature-copy h2, .how-trust h2, .how-final-cta h2 { font-size: clamp(2.15rem, 10.5vw, 3.1rem); } .how-flow, .how-inline-points, .how-report-uses { grid-template-columns: 1fr; } .how-flow { margin-top: 38px; } .how-flow li, .how-flow li + li { min-height: auto; padding: 20px 0 22px 27px; border-left: 0; border-bottom: 1px solid var(--how-line); } .how-flow li::before, .how-flow li:first-child::before { top: 26px; left: 0; } .how-report-object { grid-template-columns: 1fr; gap: 17px; } .how-product-shot--wide { margin-top: 28px; } .how-hero-actions { align-items: stretch; } .how-hero-actions .cta-btn { width: 100%; } .how-final-cta { padding: 94px 0 78px; } }