/*!
 * ============================================================================
 * DIALEDRIDE™ | DIALEDRIDE KINEMETRIC™
 * Biomechanical Telemetry & Trigonometric Coordinate Engine
 *
 * Copyright (c) 2025–2026 John Gould, trading as DialedRide. All rights reserved.
 * @license Proprietary
 *
 * PROPRIETARY AND CONFIDENTIAL.
 * This software, including its algorithms, analytical models, scoring methods,
 * thresholds and interface designs, is the intellectual property of John Gould
 * and contains confidential information and trade secrets.
 *
 * Use is licensed only under the DialedRide KineMetric Terms of Use or a separate
 * written licence. Copying, modifying, distributing, decompiling or reverse
 * engineering this software is not permitted, except where the law allows it.
 * ============================================================================
 */
 :root { --paper: #f4f7f4; --surface: #ffffff; --surface-soft: #edf3ef; --ink: #18221c; --muted: #5f6d65; /**/ --faint: #616e67; --line: #d8e1db; --green: #164e38; --green-2: #245b41; --green-soft: #e1eee5; --lime: #c9f85d; --violet: #6757d9; --violet-soft: #eeebff; --shadow: 0 22px 60px rgba(24, 34, 28, 0.11); --shadow-soft: 0 12px 34px rgba(24, 34, 28, 0.07); --radius: 18px; --shell: 1180px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 88px; } body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; text-rendering: optimizeLegibility; } body.menu-open { overflow: hidden; } button, a, summary { -webkit-tap-highlight-color: transparent; } button, input, select, textarea { font: inherit; } a { color: inherit; text-decoration: none; } img, canvas { display: block; max-width: 100%; } h1, h2, h3, p, ol, ul, dl, dd { margin-top: 0; } h1, h2, h3 { color: var(--ink); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; } h1 { max-width: 720px; margin-bottom: 24px; font-size: clamp(3rem, 6.4vw, 5.9rem); } h2 { margin-bottom: 18px; font-size: clamp(2.15rem, 4.2vw, 3.75rem); } h3 { margin-bottom: 12px; font-size: 1.25rem; letter-spacing: -0.02em; } p { color: var(--muted); } code, .metric-value { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; } .skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; transform: translateY(-160%); border-radius: 8px; background: var(--ink); color: #fff; padding: 10px 14px; font-weight: 700; transition: transform 160ms ease; } .skip-link:focus { transform: translateY(0); } .section-shell, .site-header__inner, .mobile-nav, .site-footer__inner { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; } .site-header { position: sticky; z-index: 50; top: 0; border-bottom: 1px solid rgba(216, 225, 219, 0.82); background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 24px rgba(24, 34, 28, 0.035); backdrop-filter: blur(16px); } .site-header__inner { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 24px; } .brand, .site-footer__brand { display: inline-flex; align-items: center; gap: 12px; } .brand__mark { display: inline-flex; width: 40px; height: 40px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 11px; background: var(--green); color: var(--lime); font-size: 20px; transform: rotate(-3deg); } .brand__copy { display: grid; gap: 0; line-height: 1.1; } .brand__copy strong { color: var(--green); font-size: 16px; letter-spacing: 0.04em; } .brand__copy small { margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; } .desktop-nav { display: flex; align-items: center; gap: 4px; } .desktop-nav a, .site-footer nav a { border-radius: 8px; color: var(--muted); font-size: 14px; font-weight: 600; padding: 9px 11px; transition: background-color 160ms ease, color 160ms ease; } .desktop-nav a:hover, .site-footer nav a:hover { background: var(--green-soft); color: var(--green); } .site-header__actions { display: flex; align-items: center; gap: 10px; } .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--green); cursor: pointer; font-size: 20px; } .mobile-nav { display: none; padding-block: 10px 18px; } .mobile-nav>a:not(.button) { display: block; border-radius: 8px; color: var(--muted); font-weight: 600; padding: 11px 8px; } .mobile-nav>a:not(.button):hover { background: var(--green-soft); color: var(--green); } .mobile-nav .button { width: 100%; margin-top: 8px; } .button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 10px; padding: 12px 20px; font-size: 15px; font-weight: 700; line-height: 1; transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease; } .button:hover { transform: translateY(-2px); } .button--small { min-height: 42px; padding: 10px 16px; font-size: 14px; } .button--primary { background: var(--green); color: #fff; box-shadow: 0 10px 20px rgba(22, 78, 56, 0.18); } .button--primary:hover { background: var(--green-2); box-shadow: 0 14px 28px rgba(22, 78, 56, 0.23); } .button--secondary { border-color: var(--line); background: rgba(255, 255, 255, 0.7); color: var(--green); } .button--secondary:hover { background: #fff; box-shadow: var(--shadow-soft); } .button--light { background: #fff; color: var(--green); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14); } .eyebrow { margin-bottom: 16px; color: var(--green-2); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; } .hero { position: relative; overflow: hidden; padding: clamp(76px, 10vw, 128px) 0 clamp(72px, 9vw, 112px); background: radial-gradient(circle at 92% 10%, rgba(103, 87, 217, 0.11), transparent 29%), radial-gradient(circle at 65% 92%, rgba(36, 91, 65, 0.10), transparent 33%), linear-gradient(180deg, #fff 0%, var(--paper) 100%); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.78fr); align-items: center; gap: clamp(48px, 7vw, 92px); } .hero__copy .eyebrow { display: inline-flex; border: 1px solid #cfe0d4; border-radius: 999px; background: rgba(255, 255, 255, 0.74); padding: 7px 11px; } .hero__copy h1::after { content: ""; display: inline-block; width: 0.18em; height: 0.18em; margin-left: 0.09em; border-radius: 50%; background: var(--violet); } .hero__copy h1 { max-width: 780px; font-size: clamp(2.8rem, 4.85vw, 4.8rem); letter-spacing: -0.04em; line-height: 1.03; } .hero__lede { max-width: 64ch; margin-bottom: 0; font-size: clamp(1.06rem, 1.7vw, 1.25rem); line-height: 1.68; } .hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .hero__note { display: flex; align-items: center; gap: 8px; margin: 24px 0 0; color: var(--faint); font-size: 14px; } .hero__note i { color: var(--green-2); font-size: 18px; } .status-preview { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 22px; background: var(--green); box-shadow: 0 30px 70px rgba(22, 78, 56, 0.24); color: #fff; padding: clamp(24px, 4vw, 36px); } .status-preview::after { position: absolute; top: -90px; right: -60px; width: 210px; height: 210px; border-radius: 50%; background: rgba(201, 248, 93, 0.08); content: ""; } .status-preview__header { display: flex; position: relative; z-index: 1; align-items: flex-start; justify-content: space-between; gap: 18px; } .status-preview__header div { display: grid; gap: 4px; } .status-preview__header span:not(.status-pill) { color: rgba(255, 255, 255, 0.62); font-size: 13px; } .status-preview__header strong { font-size: 23px; letter-spacing: -0.025em; } .status-pill { display: inline-flex; flex: 0 0 auto; border-radius: 999px; background: rgba(201, 248, 93, 0.16); color: #d9ff82; padding: 7px 10px; font-size: 12px; font-weight: 700; line-height: 1; } .status-list { display: grid; position: relative; z-index: 1; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; } .status-list li { display: flex; align-items: center; gap: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 19px 0; } .status-list__icon, .card__icon { display: inline-flex; width: 42px; height: 42px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 12px; background: var(--green-soft); color: var(--green); font-size: 19px; } .status-list__icon { background: rgba(201, 248, 93, 0.13); color: var(--lime); } .status-list__icon--violet, .card__icon--violet { background: var(--violet-soft); color: var(--violet); } .status-list__icon--violet { background: rgba(185, 177, 255, 0.16); color: #c8c2ff; } .status-list li div { display: grid; gap: 3px; } .status-list li strong { font-size: 16px; } .status-list li div span { color: rgba(255, 255, 255, 0.62); font-size: 14px; } .hero__insight-list { margin-top: 0; } .hero__insight-list li { align-items: flex-start; padding: 14px 0; } .hero__insight-list li:first-child { border-top: 0; padding-top: 0; } .hero__insight-list li:last-child { padding-bottom: 0; } .hero__insight-list .status-list__icon { width: 38px; height: 38px; border-radius: 10px; font-size: 17px; } .hero__insight-list li div span { line-height: 1.45; } .status-preview__footer { display: grid; position: relative; z-index: 1; grid-template-columns: auto 1fr auto auto 1fr; align-items: center; gap: 9px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); padding: 14px; } .status-preview__footer span { color: rgba(255, 255, 255, 0.55); font-size: 11px; font-weight: 700; } .status-preview__footer code { color: #fff; font-size: 12px; } .status-preview__footer i { color: var(--lime); } .section { padding: clamp(76px, 9vw, 116px) 0; background: #fff; } .section--soft { background: var(--surface-soft); } .section-heading { max-width: 690px; margin-bottom: 44px; } .section-heading>p:last-child { max-width: 62ch; margin-bottom: 0; font-size: 18px; } /**/ .section-heading>p.section-deck { max-width: 62ch; margin-bottom: 12px; color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1.08; } .section-heading--split { display: grid; max-width: none; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); align-items: end; gap: 48px; } .section-heading--split>p { margin-bottom: 8px; } .benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .smart-standard { max-width: 48rem; margin-top: 2rem; } .smart-standard>h3 { margin: 0; font-size: 1rem; font-weight: 700; } .smart-standard>p { margin: 0.4rem 0 0; } .smart-standard__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; padding: 0; list-style: none; } .smart-standard__list li { padding-top: 0.75rem; border-top: 2px solid var(--colour-border, #d9dfdb); } .smart-standard__list strong { display: block; margin-bottom: 0.2rem; color: var(--colour-accent, #276348); font-size: 1.25rem; line-height: 1; } .smart-standard__list span { color: var(--colour-text, #17211c); font-size: 0.95rem; font-weight: 600; } .smart-standard__summary { max-width: 44rem; color: var(--colour-text-muted, #657069); line-height: 1.65; } @media (max-width: 700px) { .smart-standard__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); } .benefit-card { padding: 28px; } .benefit-card h3 { margin-top: 24px; } .benefit-card p { max-width: 42ch; margin-bottom: 0; } .workflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .workflow li { position: relative; padding: 0 28px 0 0; } .workflow li:not(:last-child)::after { position: absolute; top: 22px; right: 10px; left: 54px; height: 1px; background: #bfd0c4; content: ""; } .workflow__number { display: inline-flex; position: relative; z-index: 1; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid #bfd0c4; border-radius: 50%; background: var(--surface-soft); color: var(--green); font-size: 15px; font-weight: 800; } .workflow h3 { margin-top: 22px; } .workflow p { margin-bottom: 0; font-size: 15px; } .section-link { margin: 42px 0 0; font-size: 15px; } .section-link a, .text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-weight: 700; } .section-link a { margin-left: 5px; } .text-link:hover, .section-link a:hover { color: var(--violet); } .faq-copy .text-link { margin-top: 12px; } .section--green { background: var(--green); } .section--green h2, .section--green h3, .section--green .section-heading>p, .section--green .eyebrow { color: #fff; } .section--green .eyebrow { color: var(--lime); } .section-heading--light>p:last-child { color: rgba(255, 255, 255, 0.7); } .trust-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; } .trust-list article { display: flex; gap: 16px; } .trust-list article>i { color: var(--lime); font-size: 25px; } .trust-list article p { margin-bottom: 0; color: rgba(255, 255, 255, 0.68); font-size: 15px; } .faq-layout { display: grid; grid-template-columns: minmax(300px, 0.68fr) minmax(480px, 1fr); gap: 30px 82px; } .faq-copy { grid-column: 1; margin: 0; } .faq-list { display: grid; grid-column: 2; gap: 10px; } .faq-list details, .faq-group details { border: 1px solid var(--line); border-radius: 12px; background: #fff; } .faq-list summary, .faq-group summary { display: flex; min-height: 60px; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; padding: 16px 18px; color: var(--ink); font-weight: 700; list-style: none; } .faq-list summary::-webkit-details-marker, .faq-group summary::-webkit-details-marker { display: none; } .faq-list summary i, .faq-group summary i { flex: 0 0 auto; color: var(--green-2); transition: transform 160ms ease; } .faq-list details[open] summary i, .faq-group details[open] summary i { transform: rotate(180deg); } .faq-list details p, .faq-group details p { max-width: 68ch; margin: 0; padding: 0 18px 18px; font-size: 15px; } .final-cta { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 36px; margin-top: 54px; border-radius: 22px; background: var(--violet); padding: clamp(28px, 5vw, 52px); } .final-cta>div { max-width: 670px; } .final-cta .eyebrow { /**/ color: #efeeff; } .final-cta h2 { margin-bottom: 12px; color: #fff; font-size: clamp(2rem, 3.7vw, 3.1rem); } .final-cta p:last-child { margin-bottom: 0; /**/ color: rgba(255, 255, 255, 0.9); } .final-cta .button { flex: 0 0 auto; } .site-footer { border-top: 1px solid var(--line); background: #fff; padding: 34px 0; } .site-footer__inner { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; align-items: center; gap: 30px; } .site-footer__brand div { display: grid; } .site-footer__brand strong { color: var(--green); font-size: 14px; } .site-footer__brand div span { color: var(--faint); font-size: 12px; } .site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; } .site-footer__inner>p { margin: 0; color: var(--faint); font-size: 12px; text-align: right; } /**/ .guide-page { background: #fff; } .guide-hero { padding: clamp(68px, 8vw, 104px) 0 52px; background: radial-gradient(circle at 90% 14%, rgba(103, 87, 217, 0.10), transparent 30%), var(--paper); } .guide-hero__copy { max-width: 800px; } .guide-hero h1 { font-size: clamp(2.8rem, 5.6vw, 5rem); } .guide-hero__copy>p:last-of-type { max-width: 66ch; font-size: 19px; } .guide-index { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; } .guide-index a { border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--green); padding: 9px 13px; font-size: 14px; font-weight: 700; } .guide-index a:hover { border-color: #b9c9bf; background: var(--green-soft); } .guide-section { padding: clamp(66px, 8vw, 96px) 0; border-top: 1px solid var(--line); background: #fff; } .guide-section--soft { background: var(--paper); } .guide-section__intro { max-width: 760px; margin-bottom: 38px; } .guide-section__intro>p:last-child { max-width: 67ch; margin-bottom: 0; font-size: 17px; } .reference-grid, .price-grid, .guide-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .reference-card, .price-card, .guide-note, .case-panel, .sandbox-panel { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-soft); } .reference-card, .price-card { padding: 24px; } .reference-card p, .price-card p { margin-bottom: 0; font-size: 15px; } .price-card__label { display: inline-flex; margin-bottom: 18px; border-radius: 999px; background: var(--green-soft); color: var(--green); padding: 6px 9px; font-size: 12px; font-weight: 700; } .price-card strong.metric-value { display: block; margin: 18px 0 8px; color: var(--green); font-size: 24px; } .guide-note { margin-top: 18px; border-left: 4px solid var(--violet); padding: 20px 22px; } .guide-note strong { display: block; margin-bottom: 6px; } .guide-note p { margin-bottom: 0; } .detailed-workflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); padding: 0; list-style: none; } .detailed-workflow li { min-height: 190px; background: #fff; padding: 24px; } .detailed-workflow span { display: inline-flex; margin-bottom: 28px; color: var(--violet); font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600; } .detailed-workflow p { margin-bottom: 0; font-size: 14px; } .durability-layout, .sandbox-layout, .case-layout, .privacy-layout { display: grid; grid-template-columns: minmax(280px, 0.72fr) minmax(460px, 1.15fr); gap: clamp(40px, 7vw, 82px); align-items: start; } .durability-card { overflow: hidden; border-radius: var(--radius); background: var(--green); color: #fff; box-shadow: var(--shadow); } .durability-card__chart { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 12px; height: 270px; padding: 34px 30px 26px; } .durability-bar { display: grid; align-items: end; gap: 8px; height: 100%; } .durability-bar span { border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--lime), #6fae58); } .durability-bar small { color: rgba(255, 255, 255, 0.62); font-family: "IBM Plex Mono", monospace; font-size: 10px; text-align: center; } .durability-card__footer { display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); padding: 20px 30px; } .durability-card__footer span { color: rgba(255, 255, 255, 0.64); font-size: 12px; } .durability-card__footer strong { color: var(--lime); font-family: "IBM Plex Mono", monospace; font-size: 13px; } .sandbox-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .profile-button, .case-button { min-height: 44px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--green); cursor: pointer; padding: 10px 14px; font-weight: 700; } .profile-button[aria-pressed="true"], .case-button[aria-selected="true"] { border-color: var(--green); background: var(--green); color: #fff; } .sandbox-panel { overflow: hidden; padding: 26px; } .sandbox-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; } .sandbox-metrics div { border-radius: 10px; background: var(--paper); padding: 14px; } .sandbox-metrics span { display: block; color: var(--faint); font-size: 11px; font-weight: 700; } .sandbox-metrics strong { display: block; margin-top: 7px; color: var(--ink); font-family: "IBM Plex Mono", monospace; font-size: 15px; } .chart-wrap { position: relative; height: 340px; } .chart-summary { margin: 18px 0 0; border-left: 3px solid var(--violet); padding-left: 13px; font-size: 14px; } .case-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 18px; } .case-panel { padding: 26px; } .case-panel h3 { font-size: 26px; } .case-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0; } .case-metrics div { border-radius: 10px; background: var(--paper); padding: 14px; } .case-metrics span, .case-metrics strong { display: block; } .case-metrics span { color: var(--faint); font-size: 12px; } .case-metrics strong { margin-top: 7px; color: var(--green); font-family: "IBM Plex Mono", monospace; font-size: 16px; } .case-panel>p:last-child { margin-bottom: 0; } .guide-trust-grid article { border-top: 3px solid var(--green); padding: 20px 0 0; } .guide-trust-grid p { margin-bottom: 0; font-size: 15px; } .faq-groups { display: grid; gap: 40px; } .faq-group h3 { margin-bottom: 16px; font-size: 26px; } .faq-group>div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; align-items: start; } .guide-footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; border-radius: var(--radius); background: var(--green); padding: 30px; } .guide-footer-cta h2, .guide-footer-cta p { color: #fff; } .guide-footer-cta h2 { margin-bottom: 8px; font-size: 31px; } .guide-footer-cta p { margin-bottom: 0; color: rgba(255, 255, 255, 0.7); } @media (max-width: 1000px) { .hero__grid, .durability-layout, .sandbox-layout, .case-layout, .privacy-layout { grid-template-columns: 1fr; } .hero__grid { gap: 58px; } .status-preview, .durability-card, .sandbox-panel, .case-panel { width: min(100%, 720px); } .workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 0; } .workflow li:nth-child(2)::after { content: none; } .faq-layout { grid-template-columns: 1fr; gap: 30px; } .faq-copy, .faq-list { grid-column: 1; } .faq-copy { max-width: 680px; } .site-footer__inner { grid-template-columns: 1fr auto; } .site-footer__inner>p { grid-column: 1 / -1; text-align: left; } } @media (max-width: 900px) { .desktop-nav, .desktop-cta { display: none; } .nav-toggle, .mobile-nav { display: flex; } .mobile-nav { flex-direction: column; } .benefit-grid, .trust-list, .reference-grid, .price-grid, .guide-trust-grid { grid-template-columns: 1fr; } .benefit-card { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; } .benefit-card .card__icon { grid-row: 1 / 3; } .benefit-card h3 { margin-top: 0; } .trust-list { gap: 26px; } .reference-card, .price-card { max-width: 720px; } .detailed-workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .section-shell, .site-header__inner, .mobile-nav, .site-footer__inner { width: min(calc(100% - 28px), var(--shell)); } h1 { font-size: clamp(2.65rem, 13vw, 4.2rem); } h2 { font-size: clamp(2rem, 9vw, 3rem); } .hero, .section, .guide-section { padding-block: 68px; } .hero__grid { grid-template-columns: minmax(0, 1fr); } .hero__actions, .hero__actions .button { width: 100%; } .status-preview { border-radius: 17px; padding: 22px; } .status-preview__footer { grid-template-columns: auto 1fr; } .status-preview__footer i { display: none; } .section-heading--split { grid-template-columns: 1fr; gap: 10px; } .benefit-card { display: block; } .benefit-card h3 { margin-top: 22px; } .workflow { grid-template-columns: 1fr; gap: 0; } .workflow li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 0 0 30px; } .workflow li:not(:last-child)::after { top: 44px; right: auto; bottom: 0; left: 21px; width: 1px; height: auto; content: ""; } .workflow h3 { margin-top: 2px; } .section-link a { margin: 6px 0 0; } .final-cta, .guide-footer-cta { align-items: flex-start; flex-direction: column; } .final-cta .button, .guide-footer-cta .button { width: 100%; } .site-footer__inner { grid-template-columns: 1fr; } .site-footer nav { justify-content: flex-start; } .site-footer__inner>p { grid-column: auto; } .detailed-workflow, .faq-group>div { grid-template-columns: 1fr; } .detailed-workflow li { min-height: 0; } .sandbox-metrics, .case-metrics { grid-template-columns: 1fr; } .chart-wrap { height: 280px; } .durability-card__chart { height: 230px; gap: 7px; padding-inline: 18px; } .durability-bar small { font-size: 8px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /**/ .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.92fr); gap: clamp(42px, 5vw, 72px); } .hero__copy h1 { max-width: 760px; font-size: clamp(2.8rem, 4.5vw, 4.55rem); } .hero__narrative { max-width: 68ch; } .hero__narrative p { margin-bottom: 15px; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.66; } .hero__narrative p:first-child { color: var(--ink); font-size: clamp(1.08rem, 1.45vw, 1.22rem); font-weight: 700; } /**/ .studio-shot { /**/ align-self: start; min-width: 0; margin: 0; border: 1px solid #cfdad3; border-radius: 22px; background: #fff; box-shadow: 0 32px 72px rgba(22, 78, 56, 0.18); padding: 10px; } .studio-shot__panel { overflow: hidden; border: 1px solid #dbe4de; border-radius: 14px; background: var(--surface); } .studio-shot__chrome { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); background: var(--surface-soft); padding: 11px 16px; } .studio-shot__dots { display: flex; flex: 0 0 auto; gap: 5px; } .studio-shot__dots i { width: 8px; height: 8px; border-radius: 50%; background: #c6d2cb; } .studio-shot__crumb { overflow: hidden; color: var(--faint); font-size: 12px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .studio-shot__body { padding: clamp(20px, 2.4vw, 26px); } .studio-shot__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .studio-shot__eyebrow { margin: 0 0 3px; color: var(--violet); font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; } .studio-shot__title { margin: 0; color: var(--ink); font-size: clamp(1.15rem, 1.5vw, 1.32rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; } .studio-shot__verdict { display: inline-flex; flex: 0 0 auto; border-radius: 999px; background: var(--green-soft); color: var(--green); padding: 6px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; } .studio-shot__score { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; border-radius: 12px; background: var(--surface-soft); padding: 16px 18px; } .studio-shot__value { margin: 0; color: var(--green); font-family: "IBM Plex Mono", monospace; font-weight: 600; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; } .studio-shot__value strong { font-size: clamp(2.4rem, 3.4vw, 2.9rem); font-weight: 600; } .studio-shot__value span { color: var(--muted); font-size: 1.05rem; } .studio-shot__trend { display: grid; flex: 0 1 148px; justify-items: end; gap: 6px; } .studio-shot__trend svg { width: 100%; height: 40px; } .studio-shot__trend-area { fill: rgba(22, 78, 56, 0.1); } .studio-shot__trend-line { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .studio-shot__trend p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; } .studio-shot__trend b { color: var(--green); } .studio-shot__legend { display: flex; justify-content: flex-end; gap: 26px; margin: 20px 0 6px; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /**/ .studio-shot__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .studio-shot__legend span:first-child { margin-right: 6px; } .studio-shot__metrics { margin: 0; border-top: 1px solid var(--line); } .studio-shot__metrics>div { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding: 11px 0; } .studio-shot__metrics dt { color: var(--ink); font-size: 13.5px; font-weight: 700; line-height: 1.3; } .studio-shot__metrics dd { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; margin: 0; } .studio-shot__metrics code { display: inline-flex; align-items: center; color: var(--ink); font-family: "IBM Plex Mono", monospace; font-size: 14px; font-weight: 600; white-space: nowrap; } .studio-shot__metrics code i { color: var(--green-2); padding: 0 7px; font-style: normal; } .studio-shot__delta { flex: 0 0 auto; min-width: 66px; border-radius: 999px; background: var(--green-soft); color: var(--green); padding: 4px 9px; font-size: 11px; font-weight: 700; text-align: center; } .studio-shot__delta--flat { background: var(--surface-soft); color: var(--muted); } .studio-shot__read { margin: 18px 0 0; border-left: 3px solid var(--violet); background: var(--violet-soft); padding: 12px 14px; font-size: 13.5px; line-height: 1.5; } .studio-shot figcaption { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 7px 2px; color: var(--faint); font-size: 12px; font-weight: 700; } .studio-shot figcaption span:first-child { color: var(--green); } .section-heading--wide { max-width: 850px; } .analysis-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--line); box-shadow: var(--shadow-soft); gap: 1px; } .analysis-matrix article { display: flex; min-height: 390px; flex-direction: column; background: #fff; padding: clamp(26px, 4vw, 42px); } .analysis-matrix article:last-child { background: linear-gradient(145deg, #fff 0%, #f5f2ff 100%); } .analysis-matrix__heading { display: flex; align-items: flex-start; gap: 16px; } .analysis-matrix__heading h3 { margin: 3px 0 5px; font-size: clamp(1.2rem, 2vw, 1.55rem); text-transform: uppercase; } .analysis-matrix__heading p { margin: 0; color: var(--faint); font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .analysis-matrix ul { display: grid; gap: 14px; margin: 32px 0; padding: 0; list-style: none; } .analysis-matrix li { position: relative; padding-left: 24px; color: var(--ink); font-weight: 600; } .analysis-matrix li::before { position: absolute; top: 0.72em; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); content: ""; } .analysis-matrix article:last-child li::before { background: var(--violet); } .analysis-matrix__note { margin: auto 0 0; border-top: 1px solid var(--line); padding-top: 18px; color: var(--faint); font-size: 13px; font-style: italic; font-weight: 700; } .analysis-matrix__note--accent { color: var(--violet); } .coexistence-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; max-width: 940px; margin-top: 42px; border-left: 4px solid var(--green); background: var(--green-soft); padding: 26px 28px; } .coexistence-note__icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; background: var(--green); color: var(--lime); font-size: 22px; } .coexistence-note h3 { margin-top: 2px; } .coexistence-note p:last-child { margin-bottom: 0; } .pillar-grid { align-items: stretch; } .pillar-card { position: relative; overflow: hidden; padding-top: 34px; } .pillar-card::after { position: absolute; right: -26px; bottom: -44px; width: 130px; height: 130px; border-radius: 50%; background: var(--green-soft); opacity: 0.55; content: ""; } .pillar-card:nth-child(2)::after { background: var(--violet-soft); } .pillar-card__number { position: absolute; top: 18px; right: 22px; color: #b9c6be; font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 700; } .pillar-card h3, .pillar-card p, .pillar-card .card__icon { position: relative; z-index: 1; } .pillar-card__quote { min-height: 3.3em; color: var(--green) !important; font-weight: 700; } .pillar-card:nth-child(2) .pillar-card__quote { color: var(--violet) !important; } .u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /**/ .report-studio-layout { display: grid; grid-template-columns: minmax(0, 1fr); } .report-studio-layout .section-heading { margin-bottom: 26px; } .pipeline-lead { max-width: 76ch; margin-bottom: 22px; } .pipeline-lead strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 20px; letter-spacing: -0.02em; line-height: 1.15; } .pipeline-lead span { font-size: 16px; font-style: italic; } .pipeline-outro { max-width: 62ch; margin: 34px 0 18px; font-size: 18px; } .pipeline-card { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); overflow: hidden; margin: 0; } /**/ .pipeline-card figcaption { grid-column: 1 / -1; border-top: 1px solid var(--line); background: var(--surface-soft); padding: 13px clamp(20px, 2.4vw, 28px); color: var(--faint); font-size: 13px; } /**/ .pipeline-in { display: flex; flex-direction: column; gap: 16px; background: linear-gradient(168deg, #1d2a24 0%, #101815 100%); padding: clamp(22px, 2.6vw, 30px); } .pipeline-panel__label { margin: 0; color: var(--lime); font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } .pipeline-panel__label--out { color: var(--green-2); } .pipeline-panel__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: -8px 0 0; color: rgba(255, 255, 255, 0.66); font-size: 13px; } .pipeline-panel__meta span+span::before { margin-right: 12px; color: rgba(255, 255, 255, 0.3); content: "|"; } .pipeline-panel__meta code { color: rgba(255, 255, 255, 0.86); font-size: 12.5px; } .pipeline-in__chart { border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 12px; background: rgba(255, 255, 255, 0.03); padding: 14px 14px 10px; } .pipeline-in__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; font-size: 12px; font-weight: 600; } .pipeline-in__legend span { display: inline-flex; align-items: center; gap: 7px; } .pipeline-in__legend i { width: 14px; height: 3px; border-radius: 2px; background: currentcolor; } .pipeline-in__legend .is-left { color: var(--lime); } .pipeline-in__legend .is-right { color: #a9a0ff; } .pipeline-in__legend .is-axis { margin-left: auto; color: rgba(255, 255, 255, 0.5); } .pipeline-in__chart svg { width: 100%; height: clamp(112px, 12vw, 150px); } .pipeline-in__axis { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; vector-effect: non-scaling-stroke; } .pipeline-in__trace { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .pipeline-in__trace--left { stroke: var(--lime); } .pipeline-in__trace--right { stroke: #a9a0ff; } .pipeline-in__status { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 0; list-style: none; } .pipeline-in__status li { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; background: rgba(201, 248, 93, 0.15); color: #dcff96; padding: 7px 12px; font-size: 12px; font-weight: 700; line-height: 1; } .pipeline-in__status li+li { background: rgba(255, 255, 255, 0.09); color: rgba(255, 255, 255, 0.84); } /**/ .pipeline-bridge { display: grid; align-content: center; justify-items: center; gap: 12px; width: 150px; border-right: 1px solid var(--line); background: var(--surface); padding: 20px 16px; text-align: center; } .pipeline-bridge__arrow { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 20px; } .pipeline-bridge__badge { border-radius: 999px; border: 1px solid var(--line); background: var(--surface-soft); color: var(--green-2); padding: 6px 10px; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.35; text-transform: uppercase; } /**/ .pipeline-out { display: flex; flex-direction: column; gap: 14px; background: var(--surface); padding: clamp(22px, 2.6vw, 30px); } .pipeline-out__title { margin: -6px 0 0; font-size: 21px; } .pipeline-out__title span { display: block; margin-top: 4px; color: var(--faint); font-size: 14px; font-weight: 600; letter-spacing: 0; } .pipeline-out__rows { margin: 0; border-top: 1px solid var(--line); } /**/ .pipeline-out__rows>div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 14px; border-bottom: 1px solid var(--line); padding: 13px 0; } .pipeline-out__rows dt { color: var(--ink); font-size: 14px; font-weight: 700; } .pipeline-out__rows dd { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; } .pipeline-out__rows code { color: var(--faint); font-size: 14px; font-weight: 600; } .pipeline-out__rows code.is-after { color: var(--ink); } .pipeline-out__rows dd>i { color: var(--green-2); font-size: 13px; } .pipeline-out__delta { margin-left: auto; border-radius: 999px; background: var(--green-soft); color: var(--green); padding: 5px 10px; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; } .pipeline-out__narrative { margin: auto 0 0; border-left: 3px solid var(--violet); border-radius: 0 10px 10px 0; background: var(--violet-soft); padding: 13px 16px; } .pipeline-out__narrative-label { display: block; margin-bottom: 5px; color: var(--violet); font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .pipeline-out__narrative p { margin: 0; color: #3f3a63; font-size: 14px; font-style: italic; } .report-templates { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .report-templates article { border-top: 3px solid var(--green); background: #fff; box-shadow: var(--shadow-soft); padding: 26px; } .report-templates article:nth-child(2) { border-color: var(--violet); } .report-templates__label { display: inline-flex; margin-bottom: 16px; border-radius: 999px; background: var(--green-soft); color: var(--green); padding: 6px 9px; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 700; text-transform: uppercase; } .report-templates article:nth-child(2) .report-templates__label { background: var(--violet-soft); color: var(--violet); } .report-templates p { margin-bottom: 0; font-size: 15px; } .final-cta--trust { border: 1px solid var(--line); background: linear-gradient(135deg, #f8faf8 0%, #edf4ef 100%); box-shadow: var(--shadow-soft); } .final-cta--trust .eyebrow { color: var(--green-2); } .final-cta--trust h2 { color: var(--ink); } .final-cta--trust p:last-child { color: var(--muted); } .final-cta__actions { display: flex; max-width: 360px; flex: 0 0 auto; flex-direction: column; gap: 10px; } .final-cta__actions .button { width: 100%; } @media (max-width: 1100px) { .hero__grid { grid-template-columns: 1fr; } .studio-shot { width: min(100%, 680px); } } @media (max-width: 980px) { /**/ .pipeline-card { grid-template-columns: minmax(0, 1fr); } .pipeline-bridge { width: auto; grid-auto-flow: column; align-items: center; justify-content: center; gap: 14px; border-right: 0; border-bottom: 1px solid var(--line); padding: 15px 16px; } .pipeline-bridge__arrow { width: 38px; height: 38px; transform: rotate(90deg); font-size: 18px; } } @media (max-width: 900px) { .analysis-matrix, .report-templates { grid-template-columns: 1fr; } .analysis-matrix article { min-height: 0; } } @media (max-width: 560px) { .pipeline-out__rows>div { grid-template-columns: 1fr; } /**/ .pipeline-out__delta { flex-basis: 100%; margin-left: 0; } .pipeline-in__legend .is-axis { margin-left: 0; } } @media (max-width: 700px) { .hero__narrative p { font-size: 1rem; } .studio-shot__score { flex-direction: column; align-items: stretch; gap: 12px; } .studio-shot__trend { flex-basis: auto; grid-auto-flow: column; align-items: center; justify-items: stretch; gap: 12px; } .studio-shot__trend svg { height: 32px; } .studio-shot__metrics>div { align-items: flex-start; flex-direction: column; gap: 7px; } .studio-shot__metrics dd { width: 100%; justify-content: space-between; } .studio-shot__legend { display: none; } .studio-shot figcaption, .coexistence-note { grid-template-columns: 1fr; } .studio-shot figcaption { align-items: flex-start; flex-direction: column; gap: 2px; } .coexistence-note { padding: 22px; } .final-cta__actions { width: 100%; max-width: none; } }