Spaces:
Running
Running
| :root { | |
| color-scheme: dark; | |
| --ink: #f3ede2; | |
| --ink-soft: #b7b8b1; | |
| --ink-faint: #7d837d; | |
| --ground: #090b0a; | |
| --surface: #111411; | |
| --surface-raised: #171b18; | |
| --line: #2c312d; | |
| --line-bright: #444a44; | |
| --amber: #e3a45f; | |
| --amber-bright: #f2c987; | |
| --amber-dim: #8c5b32; | |
| --green: #74a980; | |
| --red: #d57b70; | |
| --max-width: 1180px; | |
| --radius: 20px; | |
| --shadow: 0 28px 80px rgba(0, 0, 0, 0.35); | |
| --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| --font-display: Georgia, "Times New Roman", serif; | |
| --font-code: "Cascadia Code", "SFMono-Regular", Consolas, monospace; | |
| font-family: var(--font-body); | |
| font-synthesis: none; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| background: var(--ground); | |
| } | |
| body { | |
| margin: 0; | |
| min-width: 320px; | |
| color: var(--ink); | |
| background: | |
| radial-gradient(circle at 78% -6%, rgba(176, 105, 52, 0.16), transparent 33rem), | |
| radial-gradient(circle at 8% 32%, rgba(72, 103, 76, 0.09), transparent 28rem), | |
| var(--ground); | |
| line-height: 1.6; | |
| text-rendering: optimizeLegibility; | |
| } | |
| body::before { | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| content: ""; | |
| pointer-events: none; | |
| opacity: 0.18; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration-color: rgba(227, 164, 95, 0.56); | |
| text-underline-offset: 0.2em; | |
| } | |
| a:hover { | |
| color: var(--amber-bright); | |
| } | |
| img, | |
| svg { | |
| display: block; | |
| max-width: 100%; | |
| } | |
| button, | |
| input { | |
| font: inherit; | |
| } | |
| button, | |
| a { | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| :focus-visible { | |
| outline: 3px solid rgba(242, 201, 135, 0.8); | |
| outline-offset: 3px; | |
| } | |
| .skip-link { | |
| position: fixed; | |
| top: 12px; | |
| left: 12px; | |
| z-index: 100; | |
| padding: 10px 14px; | |
| color: #121411; | |
| background: var(--amber-bright); | |
| border-radius: 8px; | |
| transform: translateY(-160%); | |
| } | |
| .skip-link:focus { | |
| transform: translateY(0); | |
| } | |
| .shell { | |
| width: min(calc(100% - 40px), var(--max-width)); | |
| margin-inline: auto; | |
| } | |
| .site-header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 40; | |
| border-bottom: 1px solid rgba(57, 63, 58, 0.7); | |
| background: rgba(9, 11, 10, 0.82); | |
| backdrop-filter: blur(18px); | |
| } | |
| .nav { | |
| display: flex; | |
| min-height: 72px; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 24px; | |
| } | |
| .brand { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 11px; | |
| color: var(--ink); | |
| font-size: 1.08rem; | |
| font-weight: 680; | |
| letter-spacing: 0.02em; | |
| text-decoration: none; | |
| } | |
| .brand img { | |
| width: 34px; | |
| height: 34px; | |
| } | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 28px; | |
| color: var(--ink-soft); | |
| font-size: 0.94rem; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| } | |
| .button { | |
| display: inline-flex; | |
| min-height: 46px; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 9px; | |
| padding: 0 18px; | |
| color: #161713; | |
| background: linear-gradient(135deg, var(--amber-bright), #cf8240); | |
| border: 1px solid transparent; | |
| border-radius: 11px; | |
| box-shadow: 0 10px 28px rgba(190, 111, 52, 0.16); | |
| font-size: 0.93rem; | |
| font-weight: 700; | |
| text-decoration: none; | |
| transition: transform 160ms ease, filter 160ms ease, border-color 160ms ease; | |
| } | |
| .button:hover { | |
| color: #10120f; | |
| filter: brightness(1.06); | |
| transform: translateY(-1px); | |
| } | |
| .button.secondary { | |
| color: var(--ink); | |
| background: rgba(18, 21, 19, 0.72); | |
| border-color: var(--line-bright); | |
| box-shadow: none; | |
| } | |
| .button.secondary:hover { | |
| color: var(--amber-bright); | |
| border-color: var(--amber-dim); | |
| } | |
| .button.compact { | |
| min-height: 38px; | |
| padding-inline: 14px; | |
| font-size: 0.86rem; | |
| } | |
| .button.disabled, | |
| .button[aria-disabled="true"] { | |
| color: #8d8e89; | |
| background: #292c29; | |
| border-color: #343834; | |
| box-shadow: none; | |
| cursor: not-allowed; | |
| pointer-events: none; | |
| } | |
| .eyebrow { | |
| margin: 0 0 18px; | |
| color: var(--amber); | |
| font-size: 0.75rem; | |
| font-weight: 740; | |
| letter-spacing: 0.16em; | |
| text-transform: uppercase; | |
| } | |
| .hero { | |
| padding: 108px 0 72px; | |
| overflow: hidden; | |
| } | |
| .hero-grid { | |
| display: grid; | |
| grid-template-columns: minmax(0, 0.93fr) minmax(460px, 1.2fr); | |
| align-items: center; | |
| gap: 68px; | |
| } | |
| .hero h1, | |
| .page-hero h1 { | |
| max-width: 760px; | |
| margin: 0; | |
| color: #f7f1e7; | |
| font-family: var(--font-display); | |
| font-size: clamp(3.3rem, 7vw, 6.7rem); | |
| font-weight: 470; | |
| letter-spacing: -0.055em; | |
| line-height: 0.93; | |
| } | |
| .hero h1 em { | |
| color: var(--amber-bright); | |
| font-style: normal; | |
| } | |
| .hero-lede { | |
| max-width: 590px; | |
| margin: 28px 0 0; | |
| color: var(--ink-soft); | |
| font-size: clamp(1.04rem, 1.8vw, 1.24rem); | |
| line-height: 1.7; | |
| } | |
| .hero-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| margin-top: 34px; | |
| } | |
| .hero-note { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px 20px; | |
| margin: 22px 0 0; | |
| color: var(--ink-faint); | |
| font-size: 0.84rem; | |
| } | |
| .hero-note span::before { | |
| margin-right: 7px; | |
| color: var(--green); | |
| content: "•"; | |
| } | |
| .hero-visual { | |
| position: relative; | |
| } | |
| .hero-visual::before { | |
| position: absolute; | |
| inset: 8% 4%; | |
| z-index: -1; | |
| content: ""; | |
| background: rgba(203, 122, 57, 0.18); | |
| border-radius: 50%; | |
| filter: blur(78px); | |
| } | |
| .app-frame { | |
| width: 760px; | |
| max-width: none; | |
| border: 1px solid rgba(100, 104, 96, 0.32); | |
| border-radius: 18px; | |
| box-shadow: var(--shadow); | |
| transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); | |
| } | |
| .trust-strip { | |
| border-block: 1px solid var(--line); | |
| background: rgba(17, 20, 17, 0.54); | |
| } | |
| .trust-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| } | |
| .trust-item { | |
| padding: 28px; | |
| border-left: 1px solid var(--line); | |
| } | |
| .trust-item:last-child { | |
| border-right: 1px solid var(--line); | |
| } | |
| .trust-item strong, | |
| .trust-item span { | |
| display: block; | |
| } | |
| .trust-item strong { | |
| margin-bottom: 4px; | |
| color: var(--ink); | |
| font-size: 0.98rem; | |
| } | |
| .trust-item span { | |
| color: var(--ink-faint); | |
| font-size: 0.82rem; | |
| } | |
| .section { | |
| padding: 112px 0; | |
| } | |
| .section.tight { | |
| padding-block: 78px; | |
| } | |
| .section-heading { | |
| display: grid; | |
| grid-template-columns: minmax(0, 0.8fr) minmax(360px, 1fr); | |
| align-items: end; | |
| gap: 50px; | |
| margin-bottom: 52px; | |
| } | |
| .section-heading h2, | |
| .content h2, | |
| .cta-panel h2 { | |
| margin: 0; | |
| color: #f5eee3; | |
| font-family: var(--font-display); | |
| font-size: clamp(2.35rem, 5vw, 4.5rem); | |
| font-weight: 470; | |
| letter-spacing: -0.045em; | |
| line-height: 1.03; | |
| } | |
| .section-heading p { | |
| max-width: 600px; | |
| margin: 0; | |
| color: var(--ink-soft); | |
| font-size: 1.03rem; | |
| } | |
| .card-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 16px; | |
| } | |
| .card { | |
| min-height: 286px; | |
| padding: 30px; | |
| background: linear-gradient(145deg, rgba(24, 28, 25, 0.9), rgba(14, 17, 15, 0.94)); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| } | |
| .card-number { | |
| display: inline-flex; | |
| width: 40px; | |
| height: 40px; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 42px; | |
| color: var(--amber-bright); | |
| background: rgba(216, 145, 78, 0.09); | |
| border: 1px solid rgba(216, 145, 78, 0.26); | |
| border-radius: 50%; | |
| font-family: var(--font-display); | |
| } | |
| .card h3, | |
| .feature-copy h3, | |
| .step h3 { | |
| margin: 0 0 12px; | |
| color: var(--ink); | |
| font-size: 1.16rem; | |
| font-weight: 650; | |
| } | |
| .card p, | |
| .feature-copy p, | |
| .step p { | |
| margin: 0; | |
| color: var(--ink-soft); | |
| } | |
| .feature-panel { | |
| display: grid; | |
| grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1.18fr); | |
| gap: 0; | |
| overflow: hidden; | |
| background: #121512; | |
| border: 1px solid var(--line); | |
| border-radius: 28px; | |
| box-shadow: var(--shadow); | |
| } | |
| .feature-copy { | |
| padding: clamp(36px, 6vw, 72px); | |
| } | |
| .feature-copy h2 { | |
| max-width: 480px; | |
| margin: 0 0 24px; | |
| font-family: var(--font-display); | |
| font-size: clamp(2.5rem, 4.6vw, 4.6rem); | |
| font-weight: 470; | |
| letter-spacing: -0.05em; | |
| line-height: 1; | |
| } | |
| .feature-list { | |
| display: grid; | |
| gap: 18px; | |
| padding: 0; | |
| margin: 34px 0 0; | |
| list-style: none; | |
| } | |
| .feature-list li { | |
| display: grid; | |
| grid-template-columns: 25px 1fr; | |
| gap: 12px; | |
| color: var(--ink-soft); | |
| } | |
| .feature-list li::before { | |
| display: grid; | |
| width: 21px; | |
| height: 21px; | |
| place-items: center; | |
| margin-top: 2px; | |
| color: #151714; | |
| background: var(--amber); | |
| border-radius: 50%; | |
| content: "✓"; | |
| font-size: 0.74rem; | |
| font-weight: 900; | |
| } | |
| .feature-art { | |
| position: relative; | |
| min-height: 620px; | |
| overflow: hidden; | |
| background: | |
| radial-gradient(circle at 62% 34%, rgba(227, 164, 95, 0.42), transparent 12%), | |
| radial-gradient(circle at 50% 28%, rgba(186, 111, 62, 0.38), transparent 38%), | |
| linear-gradient(145deg, #3e2824, #152019 58%, #0c0f0d); | |
| } | |
| .feature-art::before { | |
| position: absolute; | |
| inset: 8%; | |
| content: ""; | |
| border: 1px solid rgba(243, 237, 226, 0.12); | |
| border-radius: 50% 50% 45% 55%; | |
| transform: rotate(-12deg); | |
| } | |
| .feature-art::after { | |
| position: absolute; | |
| inset: 18% 28% 14%; | |
| content: ""; | |
| background: linear-gradient(180deg, rgba(238, 184, 126, 0.7), rgba(49, 37, 32, 0.7)); | |
| border: 1px solid rgba(255, 224, 181, 0.28); | |
| border-radius: 46% 54% 44% 46%; | |
| box-shadow: 0 38px 90px rgba(0, 0, 0, 0.36); | |
| } | |
| .art-quote { | |
| position: absolute; | |
| right: 8%; | |
| bottom: 9%; | |
| z-index: 2; | |
| width: min(360px, 76%); | |
| padding: 22px 24px; | |
| color: #e8dfd0; | |
| background: rgba(11, 14, 12, 0.76); | |
| border: 1px solid rgba(228, 199, 155, 0.2); | |
| border-radius: 16px; | |
| backdrop-filter: blur(14px); | |
| } | |
| .art-quote span { | |
| display: block; | |
| margin-top: 8px; | |
| color: var(--amber); | |
| font-size: 0.78rem; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| } | |
| .steps { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| border-top: 1px solid var(--line-bright); | |
| } | |
| .step { | |
| position: relative; | |
| padding: 34px 36px 6px 0; | |
| } | |
| .step + .step { | |
| padding-left: 36px; | |
| border-left: 1px solid var(--line); | |
| } | |
| .step-label { | |
| margin-bottom: 26px; | |
| color: var(--amber); | |
| font-size: 0.75rem; | |
| font-weight: 720; | |
| letter-spacing: 0.13em; | |
| text-transform: uppercase; | |
| } | |
| .callout { | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| align-items: center; | |
| gap: 30px; | |
| margin-top: 48px; | |
| padding: 22px 26px; | |
| color: var(--ink-soft); | |
| background: rgba(28, 31, 27, 0.7); | |
| border: 1px solid var(--line); | |
| border-radius: 15px; | |
| } | |
| .callout strong { | |
| color: var(--ink); | |
| } | |
| .provider-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-top: 34px; | |
| } | |
| .provider-row span { | |
| padding: 9px 13px; | |
| color: #b9bcb7; | |
| background: #151815; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| font-size: 0.84rem; | |
| } | |
| .faq { | |
| max-width: 860px; | |
| margin-inline: auto; | |
| } | |
| .faq details { | |
| border-top: 1px solid var(--line-bright); | |
| } | |
| .faq details:last-child { | |
| border-bottom: 1px solid var(--line-bright); | |
| } | |
| .faq summary { | |
| position: relative; | |
| padding: 24px 46px 24px 0; | |
| color: var(--ink); | |
| cursor: pointer; | |
| font-size: 1.06rem; | |
| font-weight: 610; | |
| list-style: none; | |
| } | |
| .faq summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .faq summary::after { | |
| position: absolute; | |
| top: 24px; | |
| right: 3px; | |
| color: var(--amber); | |
| content: "+"; | |
| font-size: 1.45rem; | |
| font-weight: 300; | |
| } | |
| .faq details[open] summary::after { | |
| content: "−"; | |
| } | |
| .faq details p { | |
| max-width: 760px; | |
| padding: 0 42px 26px 0; | |
| margin: 0; | |
| color: var(--ink-soft); | |
| } | |
| .cta-panel { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| align-items: center; | |
| gap: 42px; | |
| padding: clamp(38px, 7vw, 76px); | |
| overflow: hidden; | |
| background: | |
| radial-gradient(circle at 88% 20%, rgba(235, 173, 105, 0.16), transparent 19rem), | |
| linear-gradient(135deg, #1a1e1a, #101310); | |
| border: 1px solid var(--line-bright); | |
| border-radius: 28px; | |
| } | |
| .cta-panel p { | |
| max-width: 620px; | |
| margin: 18px 0 0; | |
| color: var(--ink-soft); | |
| } | |
| .site-footer { | |
| padding: 72px 0 40px; | |
| color: var(--ink-faint); | |
| font-size: 0.88rem; | |
| } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| gap: 40px; | |
| padding-top: 38px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .footer-brand p { | |
| max-width: 440px; | |
| margin: 16px 0 0; | |
| } | |
| .footer-links { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: flex-start; | |
| gap: 16px 24px; | |
| } | |
| .footer-links a { | |
| text-decoration: none; | |
| } | |
| .footer-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 30px; | |
| padding-top: 30px; | |
| margin-top: 30px; | |
| border-top: 1px solid rgba(44, 49, 45, 0.7); | |
| font-size: 0.78rem; | |
| } | |
| .page-hero { | |
| padding: 106px 0 68px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .page-hero h1 { | |
| max-width: 900px; | |
| font-size: clamp(3rem, 7vw, 6rem); | |
| } | |
| .page-hero p { | |
| max-width: 720px; | |
| margin: 26px 0 0; | |
| color: var(--ink-soft); | |
| font-size: 1.08rem; | |
| } | |
| .content-layout { | |
| display: grid; | |
| grid-template-columns: 220px minmax(0, 760px); | |
| gap: 72px; | |
| padding-block: 72px 110px; | |
| } | |
| .side-nav { | |
| position: sticky; | |
| top: 104px; | |
| align-self: start; | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .side-nav a { | |
| padding: 8px 11px; | |
| color: var(--ink-faint); | |
| border-left: 2px solid var(--line); | |
| text-decoration: none; | |
| } | |
| .side-nav a:hover { | |
| color: var(--amber-bright); | |
| border-color: var(--amber); | |
| } | |
| .content > section { | |
| scroll-margin-top: 110px; | |
| } | |
| .content > section + section { | |
| padding-top: 56px; | |
| margin-top: 56px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .content h2 { | |
| margin-bottom: 22px; | |
| font-size: clamp(2rem, 4vw, 3.1rem); | |
| } | |
| .content h3 { | |
| margin: 34px 0 12px; | |
| color: var(--ink); | |
| font-size: 1.16rem; | |
| } | |
| .content p, | |
| .content li { | |
| color: var(--ink-soft); | |
| } | |
| .content p:first-of-type { | |
| margin-top: 0; | |
| } | |
| .content ul, | |
| .content ol { | |
| padding-left: 1.2rem; | |
| } | |
| .content li + li { | |
| margin-top: 9px; | |
| } | |
| .notice { | |
| padding: 20px 22px; | |
| margin: 28px 0; | |
| color: var(--ink-soft); | |
| background: rgba(227, 164, 95, 0.07); | |
| border: 1px solid rgba(227, 164, 95, 0.25); | |
| border-radius: 13px; | |
| } | |
| .notice strong { | |
| color: var(--amber-bright); | |
| } | |
| .download-card { | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| align-items: center; | |
| gap: 28px; | |
| padding: 28px; | |
| margin: 28px 0; | |
| background: var(--surface-raised); | |
| border: 1px solid var(--line-bright); | |
| border-radius: 18px; | |
| } | |
| .download-card h2, | |
| .download-card h3 { | |
| margin: 0 0 7px; | |
| font-family: inherit; | |
| font-size: 1.14rem; | |
| letter-spacing: 0; | |
| } | |
| .download-card p { | |
| margin: 0; | |
| color: var(--ink-faint); | |
| font-size: 0.9rem; | |
| } | |
| .checksum { | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| gap: 12px; | |
| align-items: center; | |
| margin-top: 12px; | |
| } | |
| .checksum code, | |
| .code-block { | |
| overflow-wrap: anywhere; | |
| color: #d7d2c8; | |
| font-family: var(--font-code); | |
| font-size: 0.78rem; | |
| } | |
| .code-block { | |
| display: block; | |
| padding: 16px; | |
| overflow-x: auto; | |
| background: #0b0e0c; | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| white-space: pre; | |
| } | |
| .copy-button { | |
| min-height: 34px; | |
| padding: 0 11px; | |
| color: var(--ink-soft); | |
| background: #171a17; | |
| border: 1px solid var(--line-bright); | |
| border-radius: 8px; | |
| cursor: pointer; | |
| } | |
| .copy-button:hover { | |
| color: var(--amber-bright); | |
| border-color: var(--amber-dim); | |
| } | |
| .spec-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .spec-table th, | |
| .spec-table td { | |
| padding: 16px 12px; | |
| border-bottom: 1px solid var(--line); | |
| text-align: left; | |
| vertical-align: top; | |
| } | |
| .spec-table th { | |
| width: 34%; | |
| color: var(--ink); | |
| font-size: 0.9rem; | |
| } | |
| .spec-table td { | |
| color: var(--ink-soft); | |
| } | |
| .legal-date { | |
| margin-top: 18px; | |
| color: var(--ink-faint); | |
| font-size: 0.84rem; | |
| } | |
| @media (max-width: 980px) { | |
| .hero { | |
| padding-top: 80px; | |
| } | |
| .hero-grid, | |
| .section-heading, | |
| .feature-panel { | |
| grid-template-columns: 1fr; | |
| } | |
| .hero-grid { | |
| gap: 60px; | |
| } | |
| .app-frame { | |
| width: 100%; | |
| transform: none; | |
| } | |
| .trust-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .trust-item:nth-child(2) { | |
| border-right: 1px solid var(--line); | |
| } | |
| .trust-item:nth-child(n + 3) { | |
| border-top: 1px solid var(--line); | |
| } | |
| .card-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .feature-art { | |
| min-height: 460px; | |
| } | |
| .content-layout { | |
| grid-template-columns: 180px minmax(0, 1fr); | |
| gap: 44px; | |
| } | |
| } | |
| @media (max-width: 720px) { | |
| .shell { | |
| width: min(calc(100% - 28px), var(--max-width)); | |
| } | |
| .nav { | |
| min-height: 64px; | |
| } | |
| .nav-links a:not(.button) { | |
| display: none; | |
| } | |
| .hero { | |
| padding: 72px 0 54px; | |
| } | |
| .hero h1 { | |
| font-size: clamp(3.1rem, 16vw, 5rem); | |
| } | |
| .hero-grid { | |
| gap: 48px; | |
| } | |
| .hero-actions .button { | |
| width: 100%; | |
| } | |
| .hero-note { | |
| display: grid; | |
| } | |
| .section { | |
| padding: 78px 0; | |
| } | |
| .section-heading { | |
| gap: 22px; | |
| margin-bottom: 34px; | |
| } | |
| .trust-grid, | |
| .card-grid, | |
| .steps, | |
| .cta-panel, | |
| .footer-grid, | |
| .content-layout, | |
| .download-card { | |
| grid-template-columns: 1fr; | |
| } | |
| .trust-item, | |
| .trust-item:last-child, | |
| .trust-item:nth-child(2) { | |
| border-right: 1px solid var(--line); | |
| } | |
| .trust-item:nth-child(n + 2) { | |
| border-top: 1px solid var(--line); | |
| } | |
| .card { | |
| min-height: 0; | |
| } | |
| .card-number { | |
| margin-bottom: 30px; | |
| } | |
| .feature-copy { | |
| padding: 34px 28px 42px; | |
| } | |
| .feature-art { | |
| min-height: 400px; | |
| } | |
| .step, | |
| .step + .step { | |
| padding: 30px 0; | |
| border-left: 0; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .callout { | |
| grid-template-columns: 1fr; | |
| } | |
| .cta-panel { | |
| padding: 36px 26px; | |
| } | |
| .cta-panel .button { | |
| width: 100%; | |
| } | |
| .footer-meta { | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .page-hero { | |
| padding: 72px 0 50px; | |
| } | |
| .side-nav { | |
| position: static; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| padding-bottom: 26px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .checksum { | |
| grid-template-columns: 1fr; | |
| } | |
| .copy-button { | |
| justify-self: start; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| html { | |
| scroll-behavior: auto; | |
| } | |
| *, | |
| *::before, | |
| *::after { | |
| scroll-behavior: auto ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |