/* FyreFlow — shared styling for the legal pages (privacy / terms / accessibility) and the site-wide footer. Reuses the landing page's design tokens so the pages read as part of the same site. Load the same Google Fonts in each page's . */ :root{ --sky:#9cc1e7; --cream:#f4f1ee; --cream-2:#f0eae5; --bg:#eef3f8; --ink:#1a1615; --ink-soft:#3f3a37; --muted:#6a655f; --white:#fff; --amber:#e8852d; --amber-ink:#8c4e18; --line:rgba(26,22,21,.09); --line-2:rgba(26,22,21,.06); --shadow-s:0 1px 2px rgba(26,22,21,.05), 0 4px 12px -6px rgba(26,22,21,.10); --shadow-m:0 12px 30px -14px rgba(26,22,21,.20); --font:"Rubik",-apple-system,system-ui,sans-serif; --font-display:"Varela Round","Rubik",sans-serif; } /* ---------- legal document pages ---------- */ .legal-page{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); line-height:1.75; -webkit-font-smoothing:antialiased; } .legal-page *{box-sizing:border-box} .legal-top{ position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px clamp(16px,4vw,40px); background:rgba(238,243,248,.82); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line-2); } .legal-top .brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)} .legal-top .brand img{width:34px; height:34px; display:block} .legal-top .brand b{font-family:var(--font-display); font-weight:400; font-size:20px; letter-spacing:0} .legal-top .back{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--ink-soft); font-size:14.5px; font-weight:500; background:var(--white); border:1px solid var(--line); padding:8px 15px; border-radius:999px; box-shadow:var(--shadow-s); transition:color .15s,border-color .15s; } .legal-top .back:hover{color:var(--ink); border-color:var(--sky)} .legal-top .back svg{width:15px; height:15px} .legal-wrap{max-width:760px; margin:0 auto; padding:clamp(28px,6vw,64px) clamp(16px,4vw,40px) 80px} .legal-head{margin-bottom:34px} .legal-head h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(32px,5.5vw,50px); line-height:1.08; letter-spacing:-.01em; margin:0; } .legal-head .meta{margin-top:14px; color:var(--muted); font-size:14.5px; font-weight:500} .legal-card{ background:var(--white); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-m); padding:clamp(22px,4vw,44px); } .legal-card h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(21px,3vw,27px); line-height:1.2; letter-spacing:-.01em; margin:38px 0 12px; padding-top:8px; } .legal-card h2:first-child{margin-top:0} .legal-card h2 .n{color:var(--amber); font-size:.82em; margin-inline-end:.35em; font-variant-numeric:tabular-nums} .legal-card h3{font-size:17.5px; font-weight:600; margin:22px 0 8px; color:var(--ink)} .legal-card p{margin:0 0 14px; color:var(--ink-soft); font-size:16.5px} .legal-card ul,.legal-card ol{margin:0 0 16px; padding-inline-start:1.35em; color:var(--ink-soft); font-size:16.5px} .legal-card li{margin-bottom:8px} .legal-card li::marker{color:var(--amber)} .legal-card a{color:var(--amber-ink); text-decoration:underline; text-underline-offset:2px; font-weight:500} .legal-card a:hover{color:var(--amber)} .legal-card strong{color:var(--ink); font-weight:600} .legal-card hr{border:none; border-top:1px solid var(--line-2); margin:30px 0} .legal-card .note{ background:var(--cream); border:1px solid var(--line-2); border-radius:14px; padding:14px 18px; margin:18px 0; font-size:15px; color:var(--muted); } .legal-card table{width:100%; border-collapse:collapse; margin:8px 0 18px; font-size:15.5px} .legal-card th,.legal-card td{text-align:start; padding:10px 12px; border-bottom:1px solid var(--line-2); vertical-align:top} .legal-card th{color:var(--ink); font-weight:600} .legal-card td{color:var(--ink-soft)} /* ---------- shared site footer ---------- */ .site-footer{ background:var(--ink); color:#e9e4df; padding:clamp(34px,5vw,52px) clamp(16px,4vw,40px) 26px; font-family:var(--font); } .site-footer a{color:#e9e4df; text-decoration:none; transition:color .15s} .site-footer a:hover{color:#fff} .sf-inner{ max-width:1080px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:28px 40px; } .sf-brand{display:flex; align-items:center; gap:12px; text-decoration:none} .sf-brand img{width:40px; height:40px; display:block} .sf-brandtext{display:flex; flex-direction:column} .sf-name{font-family:var(--font-display); font-weight:400; font-size:21px; color:#fff; line-height:1} .sf-tag{font-size:14px; color:#a9a29b; margin-top:6px} .sf-col{display:flex; flex-direction:column; gap:10px} .sf-col .sf-h{font-size:12.5px; font-weight:600; letter-spacing:.04em; color:#8f8880; text-transform:none; margin-bottom:2px} .sf-col a,.sf-col span{font-size:15px} .site-footer .sf-legal{ max-width:1080px; margin:30px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.10); font-size:13.5px; color:#8f8880; text-align:center; } @media (max-width:560px){ .sf-inner{flex-direction:column; gap:24px} }