/* ========================================================================== Primarch — site styles Palette per brand brief. Global accent is off-white; the Malachite page opts into the green product accent via [data-accent="malachite"] on . ========================================================================== */ :root { /* Surfaces */ --bg-primary: #101312; --bg-secondary: #161a18; --bg-tertiary: #1d221f; --surface: #202622; --surface-hover: #27302b; /* Type */ --text-primary: #f3f5f3; --text-secondary: #b8c0bb; --text-muted: #858e88; /* Lines */ --border: #303833; --border-strong: #414b45; /* Accent — off-white on the parent brand */ --accent: #f3f5f3; --accent-hover: #ffffff; --accent-strong: #d6dbd7; --accent-soft: rgba(243, 245, 243, 0.09); --accent-line: rgba(243, 245, 243, 0.22); --on-accent: #101312; /* Product accents */ --malachite: #199b68; --malachite-bright: #29a77d; --danger: #c66d6d; --warning: #c79a5a; /* Type scale */ --font-display: clamp(2.6rem, 5.4vw, 4.15rem); --font-h1: clamp(2.4rem, 5vw, 3.9rem); --font-h2: clamp(1.75rem, 3.2vw, 2.6rem); --font-h3: clamp(1.15rem, 1.6vw, 1.35rem); --font-body-lg: 1.0625rem; --font-body: 1rem; --font-small: 0.875rem; --font-xs: 0.78rem; /* Radii */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; /* Layout */ --container: 1240px; --gutter: clamp(20px, 4vw, 40px); --section-y: clamp(64px, 9vw, 116px); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --speed: 180ms; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.65); --shadow-lg: 0 40px 80px -40px rgba(0, 0, 0, 0.9); --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-heading: "Manrope", var(--font-sans); --font-brand: "Montserrat", var(--font-sans); } /* Malachite product accent scope */ [data-accent="malachite"] { --accent: #29a77d; --accent-hover: #3dbc91; --accent-strong: #199b68; --accent-soft: rgba(41, 167, 125, 0.13); --accent-line: rgba(41, 167, 125, 0.34); --on-accent: #06120c; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; } body { margin: 0; background: var(--bg-primary); color: var(--text-secondary); font-family: var(--font-sans); font-size: var(--font-body); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--text-primary); line-height: 1.12; letter-spacing: -0.022em; margin: 0 0 0.5em; font-weight: 600; text-wrap: balance; } h1 { font-size: var(--font-h1); } h2 { font-size: var(--font-h2); } h3 { font-size: var(--font-h3); line-height: 1.3; } h4 { font-size: 1rem; letter-spacing: -0.01em; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; transition: color var(--speed) var(--ease); } a:hover { color: var(--accent-hover); } img, svg { max-width: 100%; } img { height: auto; display: block; } ul, ol { margin: 0; padding: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text-primary); } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 12px 20px; background: var(--accent); color: var(--on-accent); border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; transition: top var(--speed) var(--ease); } .skip-link:focus { top: 16px; color: var(--on-accent); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Layout primitives -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(48px, 6vw, 76px); } .section--alt { background: var(--bg-secondary); } .section--line { border-top: 1px solid var(--border); } .stack > * + * { margin-top: var(--stack-gap, 20px); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: var(--font-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 20px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent-line); } .lede { font-size: var(--font-body-lg); color: var(--text-secondary); max-width: 62ch; } .section-head { max-width: 66ch; margin-bottom: clamp(36px, 4vw, 56px); } .section-head h2 { margin-bottom: 18px; } .grid { display: grid; gap: clamp(16px, 1.6vw, 22px); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* -------------------------------------------------------------------------- Buttons, badges, pills -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 12px 22px; border: 1px solid transparent; border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease), transform var(--speed) var(--ease); } .btn:active { transform: translateY(1px); } .btn svg { width: 17px; height: 17px; flex: none; } .btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); } .btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); } .btn--secondary:hover { background: var(--surface); border-color: var(--accent-line); color: var(--text-primary); } .btn--ghost { background: transparent; color: var(--text-secondary); border-color: transparent; padding-inline: 8px; } .btn--ghost:hover { color: var(--text-primary); } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg-tertiary); font-family: var(--font-heading); font-size: var(--font-xs); font-weight: 600; color: var(--text-secondary); letter-spacing: 0.01em; white-space: nowrap; } .badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; } .badge--accent { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; text-decoration: none; color: var(--accent); } .link-arrow svg { width: 16px; height: 16px; transition: transform var(--speed) var(--ease); } .link-arrow:hover svg { transform: translateX(4px); } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg-primary) 88%, transparent); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease); } .site-header.is-stuck { border-bottom-color: var(--border); background: color-mix(in srgb, var(--bg-primary) 96%, transparent); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; } .brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; } .brand img { height: 46px; width: auto; } .nav { display: flex; align-items: center; gap: 4px; } .nav a { padding: 9px 16px; border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: color var(--speed) var(--ease), background var(--speed) var(--ease); } .nav a:hover { color: var(--text-primary); background: var(--accent-soft); } .nav a[aria-current="page"] { color: var(--text-primary); } .header-actions { display: flex; align-items: center; gap: 10px; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer; } .nav-toggle svg { width: 20px; height: 20px; } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } .nav-toggle[aria-expanded="true"] .icon-menu { display: none; } .mobile-nav { display: none; border-top: 1px solid var(--border); background: var(--bg-secondary); padding: 16px var(--gutter) 26px; } .mobile-nav[data-open="true"] { display: block; } .mobile-nav a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--border); font-family: var(--font-heading); font-size: 1.05rem; font-weight: 500; color: var(--text-primary); text-decoration: none; } .mobile-nav .btn { width: 100%; margin-top: 20px; } /* Product sub-navigation strip */ .subnav { position: sticky; top: 76px; z-index: 90; background: color-mix(in srgb, var(--bg-secondary) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block: 1px solid var(--border); } .subnav__inner { display: flex; align-items: center; gap: 20px; min-height: 60px; overflow-x: auto; scrollbar-width: none; } .subnav__inner::-webkit-scrollbar { display: none; } .subnav__brand { display: inline-flex; align-items: center; gap: 12px; flex: none; text-decoration: none; } .subnav__brand img { height: 20px; width: auto; } .subnav__links { display: flex; gap: 4px; margin-left: auto; flex: none; } .subnav__links a { padding: 8px 14px; border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); text-decoration: none; white-space: nowrap; } .subnav__links a:hover { color: var(--text-primary); background: var(--accent-soft); } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { position: relative; padding-block: clamp(56px, 7vw, 104px) clamp(64px, 8vw, 112px); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -30% -10% auto; height: 620px; background: radial-gradient(58% 60% at 22% 40%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%), radial-gradient(45% 55% at 78% 30%, rgba(111, 159, 134, 0.09), transparent 72%); pointer-events: none; z-index: 0; } .hero > * { position: relative; z-index: 1; } .hero__grid { display: grid; grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr); gap: clamp(32px, 5vw, 64px); align-items: center; } .hero__copy h1 { margin-bottom: 24px; font-size: var(--font-display); } .hero__copy .lede { max-width: 52ch; } .hero__copy .btn-row { margin-top: 32px; } .hero__meta { margin-top: 28px; } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .card { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 30px); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); transition: transform var(--speed) var(--ease), border-color var(--speed) var(--ease), background var(--speed) var(--ease); } .card:hover { transform: translateY(-3px); border-color: var(--border-strong); background: var(--bg-tertiary); } .card h3 { margin-bottom: 10px; } .card p { color: var(--text-secondary); font-size: 0.95rem; } .card--static:hover { transform: none; } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 20px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); flex: none; } .card__icon svg { width: 20px; height: 20px; } /* Numbered approach / workflow steps */ .steps { counter-reset: step; } .step { position: relative; } .step__num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 18px; border-radius: 50%; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; } /* Feature list with ticks */ .tick-list { list-style: none; display: grid; gap: 12px; } .tick-list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: 0.95rem; color: var(--text-secondary); } .tick-list svg { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); } /* -------------------------------------------------------------------------- Product feature panel (home page) -------------------------------------------------------------------------- */ .product-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(26px, 3.2vw, 44px); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); } .product-panel__logo { height: 34px; width: auto; margin-bottom: 22px; } .product-panel__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; } .product-panel__head img { height: 30px; width: auto; } .product-panel figure { margin: 0; } .product-panel figure img { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } /* -------------------------------------------------------------------------- Diagram (home hero visual) -------------------------------------------------------------------------- */ .diagram { position: relative; padding: clamp(20px, 2.4vw, 30px); background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary)); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .diagram::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient(rgba(243, 245, 243, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(243, 245, 243, 0.028) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%); pointer-events: none; } .diagram > * { position: relative; z-index: 1; } .diagram svg { display: block; width: 100%; height: auto; } .dash-flow { stroke-dasharray: 4 6; animation: flow 3.2s linear infinite; } @keyframes flow { to { stroke-dashoffset: -40; } } /* -------------------------------------------------------------------------- App mockup (Malachite) -------------------------------------------------------------------------- */ .mockup { --mk-line: #2a322d; --mk-bg: #121614; --mk-panel: #171d1a; --mk-panel-2: #1c2320; background: var(--mk-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden; font-size: 11px; line-height: 1.4; color: var(--text-secondary); user-select: none; } .mockup__bar { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--mk-line); background: var(--mk-panel); } .mockup__bar img { height: 15px; width: auto; } .mockup__tabs { display: flex; gap: 4px; margin-left: 8px; } .mockup__tabs span { padding: 4px 10px; border-radius: 6px; color: var(--text-muted); font-size: 10.5px; } .mockup__tabs .is-active { background: var(--malachite); color: #06120c; font-weight: 600; } .mockup__avatar { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--mk-line); border-radius: var(--radius-pill); font-size: 10px; color: var(--text-muted); } .mockup__avatar i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--malachite-bright); color: #06120c; font-style: normal; font-weight: 700; font-size: 10px; } .mockup__body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; } .mockup__panel { border: 1px solid var(--mk-line); border-radius: 10px; background: var(--mk-panel); overflow: hidden; } .mockup__panel h4 { margin: 0; padding: 10px 13px; border-bottom: 1px solid var(--mk-line); font-size: 11.5px; font-weight: 600; color: var(--text-primary); letter-spacing: 0; } .mockup__panel-body { padding: 12px 13px; display: grid; gap: 9px; } .mockup__drop { display: grid; place-items: center; gap: 4px; padding: 22px 10px; border: 1px dashed var(--mk-line); border-radius: 8px; text-align: center; color: var(--text-muted); font-size: 10.5px; } .mockup__drop strong { color: var(--text-secondary); font-weight: 600; font-size: 11px; } .mockup__row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--mk-line); border-left: 3px solid var(--malachite); border-radius: 7px; background: var(--mk-panel-2); } .mockup__row--file { border-left-color: var(--warning); } .mockup__row strong { display: block; color: var(--text-primary); font-size: 11px; font-weight: 600; } .mockup__row span { color: var(--text-muted); font-size: 10px; } .mockup__row .mk-count { margin-left: auto; color: var(--text-muted); font-size: 10px; white-space: nowrap; } .mockup__chip { display: grid; place-items: center; width: 30px; height: 22px; border: 1px solid var(--mk-line); border-radius: 4px; font-size: 8px; letter-spacing: 0.06em; color: var(--text-muted); flex: none; } .mockup__select { display: flex; align-items: center; justify-content: space-between; padding: 7px 11px; border: 1px solid var(--mk-line); border-radius: 7px; background: var(--mk-panel-2); color: var(--text-primary); font-size: 10.5px; } .mockup__note { color: var(--text-muted); font-size: 10px; } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .field { display: grid; gap: 7px; } .field label { font-family: var(--font-heading); font-size: var(--font-small); font-weight: 600; color: var(--text-primary); } .field .hint { font-size: var(--font-xs); color: var(--text-muted); } .input, .select, .textarea { width: 100%; min-height: 46px; padding: 12px 14px; background: var(--bg-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-sans); font-size: 0.95rem; transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease); } .input::placeholder, .textarea::placeholder { color: var(--text-muted); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); background: var(--bg-secondary); } .textarea { min-height: 150px; resize: vertical; line-height: 1.6; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23858e88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .select option { background: var(--bg-secondary); color: var(--text-primary); } .field[data-invalid="true"] .input, .field[data-invalid="true"] .select, .field[data-invalid="true"] .textarea { border-color: var(--danger); } .field__error { display: none; align-items: center; gap: 6px; font-size: var(--font-xs); color: var(--danger); } .field[data-invalid="true"] .field__error { display: flex; } .form-grid { display: grid; gap: 18px; } @media (min-width: 720px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } } .form-status { display: none; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--bg-tertiary); font-size: var(--font-small); color: var(--text-secondary); } .form-status[data-state="success"], .form-status[data-state="info"], .form-status[data-state="error"] { display: flex; } .form-status[data-state="success"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text-primary); } .form-status[data-state="error"] { border-color: var(--danger); color: #e2b3b3; } .form-status svg { width: 18px; height: 18px; flex: none; margin-top: 1px; } /* Inline mailing-list form */ .signup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .signup .btn { height: 100%; } .signup-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(26px, 3.4vw, 44px); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); } .signup-panel h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 12px; } /* -------------------------------------------------------------------------- CTA band -------------------------------------------------------------------------- */ .cta-band { position: relative; padding: clamp(36px, 5vw, 64px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: radial-gradient(90% 140% at 12% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 62%), var(--bg-secondary); overflow: hidden; } .cta-band h2 { max-width: 20ch; } .cta-band p { max-width: 58ch; } .cta-band .btn-row { margin-top: 28px; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-secondary); padding-block: clamp(44px, 5vw, 68px) 28px; font-size: var(--font-small); } .site-footer__top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); padding-bottom: 36px; } .site-footer img.brand-img { height: 52px; width: auto; margin-bottom: 20px; } .site-footer h4 { font-size: var(--font-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; } .site-footer ul { list-style: none; display: grid; gap: 10px; } .site-footer a { color: var(--text-secondary); text-decoration: none; } .site-footer a:hover { color: var(--text-primary); } .site-footer__bottom { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--font-xs); } .site-footer__bottom nav { display: flex; gap: 22px; flex-wrap: wrap; } /* -------------------------------------------------------------------------- Motion — fade & rise on scroll -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); } [data-reveal].is-visible { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 1080px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { .nav, .header-actions .btn { display: none; } .nav-toggle { display: inline-flex; } .hero__grid { grid-template-columns: minmax(0, 1fr); } .hero__visual { order: 2; } .product-panel, .signup-panel { grid-template-columns: minmax(0, 1fr); } .subnav { top: 68px; } .site-header__inner { min-height: 68px; } .mockup__body { grid-template-columns: 1fr; } } @media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } /* The architecture diagram's labels stop being legible below this width — drop the decoration rather than shrink it into noise. */ .diagram { display: none; } /* Let the app mockup's tab bar fade out where it overflows, so the clipped edge reads as a continuing interface rather than a broken layout. */ .mockup__bar { mask-image: linear-gradient(90deg, #000 84%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); } .signup { grid-template-columns: minmax(0, 1fr); } .btn-row .btn { width: 100%; } .subnav__brand span { display: none; } .site-footer__top { grid-template-columns: minmax(0, 1fr); gap: 30px; } .hero { padding-top: 40px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-reveal] { opacity: 1; transform: none; } }