/* * Legal template overrides — scoped to /legal/[slug] * * Loaded AFTER webflow-page-legal-template.css so these rules win. * * Used by: app/(frontend)/legal/[slug]/page.tsx */ /* TOC anchor scroll offset — matches the 9rem nav offset used by blog * so anchored headings clear the main navbar. */ main .section-privacy h2[id], main .section-privacy h3[id] { scroll-margin-top: 9rem; } /* Legal page body background — production sets `` * which gives the entire viewport a soft gray background that bleeds * through under the footer area. We can't easily set classes per * route in Next.js App Router from a child page, so we use the modern * :has() selector to target when it contains
. * Supported in all current browsers (Chrome 105+, Safari 15.4+, Firefox 121+). */ body:has(main.body-legal) { background-color: var(--_simantic---background-color--background-gray, #f5f5f5); } /* Long URL / unbroken-string wrapping inside legal rich text. * * Legal pages frequently include long URLs (like * https://app.Autymate.com/settings/profile) and email addresses inside * paragraphs. By default browsers don't break mid-word, so on narrow * viewports (mobile portrait, ~375px) the URL pushes the rich text * container wider than its parent and causes horizontal overflow. * * `overflow-wrap: anywhere` is the modern solution used by GitHub, MDN, * Stripe Docs, etc.: normal text still breaks at word boundaries, but * long unbreakable strings (URLs, emails, hashes) break at any character * when — and ONLY when — they would otherwise overflow. This gives the * desired behavior without making body text ugly. */ main .legal-rich-wrapper .blog-rich-text, main .legal-rich-wrapper .blog-rich-text a, main .legal-rich-wrapper .blog-rich-text p, main .legal-rich-wrapper .blog-rich-text li { overflow-wrap: anywhere; /* Legacy alias for older browsers (rare but cheap). */ word-wrap: break-word; } /* Inline link spacing in legal rich text — same workaround as case-studies. * Production preserves whitespace around inline tags inside

, but * our HTML→Lexical migration stripped trailing/leading spaces from text * nodes so links collide with surrounding words. * * TECH DEBT #1: see docs/pact/webflow-migration/tech-debt.md * (re-run rich text migration with whitespace preservation, then remove * this rule + the same fix in webflow-page-case-studies-overrides.css). */ main .legal-rich-wrapper .blog-rich-text a { margin: 0 0.15em; } /* TOC link styles — copied from blog template CSS so the legal sidebar * uses the same Finsweet-style link list look as the blog template. * (Legal template CSS doesn't include these rules.) */ main .privacy-toc-wrapper .fs-toc_link-content { display: grid; grid-template-rows: auto; grid-template-columns: 1fr; grid-auto-columns: 1fr; grid-column-gap: 0.5rem; grid-row-gap: 0.5rem; } main .privacy-toc-wrapper .fs-toc_link-wrapper { color: #f5f5f5; grid-template-rows: auto; grid-template-columns: 1fr; grid-auto-columns: 1fr; padding-right: 0.25rem; overflow: hidden; } main .privacy-toc-wrapper .fs-toc_link-wrapper.is-h2 { grid-column-gap: 1rem; grid-row-gap: 1rem; } main .privacy-toc-wrapper .fs-toc_link-wrapper.is-h3 { padding-left: 1rem; } main .privacy-toc-wrapper .fs-toc_text { border-radius: 0.25rem; } main .privacy-toc-wrapper .fs-toc_link { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; grid-column-gap: 0.75rem; grid-row-gap: 0.75rem; margin-top: 0.25rem; margin-bottom: 0.75rem; font-size: 0.95rem; font-weight: 500; text-decoration: none; color: var(--_simantic---text-color--text-primary, #0c0835); } main .privacy-toc-wrapper .fs-toc_link.is-h3 { font-size: 0.85rem; font-weight: 400; letter-spacing: 0.025rem; } main .privacy-toc-wrapper .fs-toc_link:hover { color: var(--primary-color--blue, #1239ff); }