/* ========================================================================== Automatik — Privacy Policy / Terms of Service Only loaded by /privacy and /terms. Those two pages reuse the site's header, footer and design tokens but drop Framer's route hydration, so everything between the two is styled here rather than by generated classes. Tokens (already declared on by Framer's stylesheet): …f815 black …e2f white …a59 #999 grey …e89 hairline ========================================================================== */ .ak-legal { --ak-white: var(--token-9811e40b-3ed8-4237-98e5-61535bb22d2f, #fff); --ak-grey: var(--token-af1df47b-ea84-448e-bdf0-a5ce0f875a59, #999); --ak-line: var(--token-01c07c7e-a9ae-45ca-a79a-cc49e2fa5e89, rgba(187, 187, 187, .2)); --ak-black: var(--token-2d91bfb1-1bb0-467e-bf37-8ef020f4f815, #000); display: block; width: 100%; max-width: 1480px; margin: 0 auto; padding-top: 130px; /* clears the fixed header */ background: var(--ak-black); font-family: "Inter Display", "Inter Display Placeholder", sans-serif; -webkit-font-smoothing: antialiased; } /* ---- White label strip: the site's signature divider ------------------- */ .ak-legal-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 14px 24px; background: var(--ak-white); color: #000; font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; } /* ---- Masthead --------------------------------------------------------- */ .ak-legal-head { padding: 100px 24px 60px; } .ak-legal-kicker { margin: 0 0 28px; color: var(--ak-grey); font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .ak-legal-title { margin: 0; color: var(--ak-white); font-size: clamp(52px, 11vw, 166px); font-weight: 600; line-height: .9; letter-spacing: -.045em; font-feature-settings: "ss01" on, "ss02" on, "ss03" on, "ss04" on, "ss07" on, "salt" on; } .ak-legal-updated { margin: 36px 0 0; color: var(--ak-grey); font-size: 16px; line-height: 1.5; } .ak-legal-lede { max-width: 620px; margin: 28px 0 0; color: var(--ak-white); font-size: 19px; line-height: 1.5; letter-spacing: -.2px; } /* ---- Numbered sections: mirrors the Services page rhythm -------------- */ .ak-legal-body { padding: 0 24px 140px; } .ak-legal-section { display: grid; grid-template-columns: 60px minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: start; padding: 60px 0; border-top: 1px solid var(--ak-line); } .ak-legal-section:first-child { border-top: 0; } .ak-legal-num { color: var(--ak-grey); font-size: 14px; font-weight: 600; line-height: 1.4; padding-top: 6px; } .ak-legal-section > h2 { margin: 0; color: var(--ak-white); font-size: 30px; font-weight: 500; line-height: 1.1; letter-spacing: -.9px; } .ak-legal-copy { max-width: 620px; color: var(--ak-grey); font-size: 16px; line-height: 1.6; } /* Flow spacing. Both selectors are (0,1,1) so the first-child reset needs the extra pseudo-class to win — a bare `> * + *` rule would lose to these. */ .ak-legal-copy > p, .ak-legal-copy > ul { margin: 18px 0 0; } .ak-legal-copy > :first-child { margin-top: 0; } .ak-legal-copy ul { padding-left: 0; list-style: none; } .ak-legal-copy li { position: relative; padding-left: 20px; } .ak-legal-copy li + li { margin-top: 10px; } .ak-legal-copy li::before { content: ""; position: absolute; top: 11px; left: 2px; width: 6px; height: 1px; background: var(--ak-grey); } .ak-legal-copy strong { color: var(--ak-white); font-weight: 500; } .ak-legal-copy a { color: var(--ak-white); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); transition: border-color .2s ease; } .ak-legal-copy a:hover { border-bottom-color: var(--ak-white); } /* ---- Closing note ----------------------------------------------------- */ .ak-legal-note { margin: 0 24px; padding: 40px 0 0; border-top: 1px solid var(--ak-line); color: var(--ak-grey); font-size: 14px; line-height: 1.6; } /* ========================================================================== TABLET (810–1199px) ========================================================================== */ @media (max-width: 1199px) { .ak-legal-section { grid-template-columns: 48px minmax(0, 240px) minmax(0, 1fr); gap: 28px; } .ak-legal-section > h2 { font-size: 26px; } } /* ========================================================================== PHONE (<= 809px) ========================================================================== */ @media (max-width: 809px) { .ak-legal { padding-top: 100px; } .ak-legal-strip { padding: 12px 20px; font-size: 11px; } /* Four labels will not fit at 375px — same call the hero band makes. */ .ak-legal-strip span:nth-child(n + 3) { display: none; } .ak-legal-head { padding: 56px 20px 40px; } .ak-legal-kicker { margin-bottom: 20px; font-size: 12px; } .ak-legal-updated { margin-top: 24px; font-size: 14px; } .ak-legal-lede { font-size: 17px; } .ak-legal-body { padding: 0 20px 90px; } .ak-legal-section { grid-template-columns: 1fr; gap: 14px; padding: 40px 0; } .ak-legal-num { padding-top: 0; font-size: 12px; } .ak-legal-section > h2 { font-size: 24px; letter-spacing: -.6px; } .ak-legal-copy { font-size: 15px; } .ak-legal-note { margin: 0 20px; padding-top: 32px; font-size: 13px; } }