/* ────────────────────────────────────────────────────────────── Padan Scan — shared stylesheet for prose / legal sub-pages Reuses the product-site brand: warm ember-on-oxblood, Cormorant Garamond body with italic headings, JetBrains Mono labels. Load alongside the Google Fonts in the page . ────────────────────────────────────────────────────────────── */ :root { --base: #170c0c; --base-lift: #21100f; --base-card: #2a1513; --edge: rgba(240, 231, 213, 0.10); --edge-soft: rgba(240, 231, 213, 0.06); --cream: #f0e7d5; --cream-soft: rgba(240, 231, 213, 0.74); --cream-faint: rgba(240, 231, 213, 0.42); --cream-dim: rgba(240, 231, 213, 0.22); --ember: #d8503f; --ember-lit: #ef6a59; --ember-soft: rgba(216, 80, 63, 0.45); --ember-glow: rgba(216, 80, 63, 0.16); --measure: 720px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } html, body { margin: 0; padding: 0; background: var(--base); color: var(--cream); font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size: 19px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; } body { overflow-x: hidden; background: radial-gradient(ellipse 900px 520px at 50% -60px, var(--ember-glow), transparent 70%), var(--base); background-attachment: fixed; min-height: 100vh; } a { color: var(--ember); text-decoration: none; border-bottom: 0.5px solid var(--ember-soft); padding-bottom: 1px; transition: border-bottom-color 160ms ease, color 160ms ease; } a:hover { border-bottom-color: var(--ember); color: var(--ember-lit); } ::selection { background: var(--ember); color: var(--base); } code, .mono { font-family: 'JetBrains Mono', monospace; } code { font-size: 0.82em; color: var(--cream-soft); background: rgba(240,231,213,0.05); border: 0.5px solid var(--edge); border-radius: 4px; padding: 1px 6px; } /* ── eyebrow / mono labels ── */ .eyebrow { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ember); margin: 0 0 18px; } /* ── buttons (matched to the product site) ── */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 6px; padding: 13px 22px; border: 1px solid var(--ember-soft); color: var(--ember); background: transparent; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; } .btn:hover { border-color: var(--ember); background: var(--ember-glow); color: var(--ember-lit); transform: translateY(-1px); } .btn-solid { background: var(--ember); color: var(--base); border-color: var(--ember); } .btn-solid:hover { background: var(--ember-lit); border-color: var(--ember-lit); color: var(--base); } .btn-ghost { border-color: var(--cream-dim); color: var(--cream-soft); } .btn-ghost:hover { border-color: var(--cream-faint); background: rgba(240,231,213,0.04); color: var(--cream); } /* ── slim sticky masthead ── */ .masthead { position: sticky; top: 0; z-index: 50; padding: 14px 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 0.5px solid var(--edge); background: rgba(23, 12, 12, 0.82); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); } .wordmark { font-style: italic; font-weight: 500; font-size: 18px; color: var(--cream); border-bottom: none; letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; } .wordmark:hover { border-bottom: none; color: var(--cream); } .wordmark .mark { width: 25px; height: 25px; border-radius: 6px; display: block; box-shadow: 0 0 0 0.5px var(--edge); } .mast-back { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-soft); border-bottom: 0.5px solid transparent; padding-bottom: 2px; } .mast-back:hover { color: var(--cream); border-bottom-color: var(--cream-faint); } /* ── content column ── */ .doc-wrap { max-width: var(--measure); margin: 0 auto; padding: 72px 40px 40px; } .doc-head { margin-bottom: 44px; } .updated { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream-faint); margin: 14px 0 0; } /* ── headings ── */ h1 { font-style: italic; font-weight: 500; font-size: clamp(32px, 5vw, 46px); line-height: 1.14; letter-spacing: -0.4px; color: var(--cream); margin: 0; } h2 { font-style: italic; font-weight: 500; font-size: clamp(22px, 3vw, 28px); line-height: 1.25; letter-spacing: -0.2px; color: var(--cream); margin: 48px 0 14px; } h3 { font-style: italic; font-weight: 500; font-size: 21px; line-height: 1.3; color: var(--cream); margin: 30px 0 10px; } /* ── prose body ── */ .prose p { margin: 0 0 18px; color: var(--cream-soft); } .prose p.lead { font-style: italic; font-size: 22px; line-height: 1.5; color: var(--cream); margin-bottom: 26px; } .prose strong { color: var(--cream); font-weight: 600; } .prose em { font-style: italic; } .prose a { border-bottom-color: var(--ember-soft); } .prose ul, .prose ol { margin: 0 0 20px; padding-left: 26px; color: var(--cream-soft); } .prose li { margin: 0 0 9px; padding-left: 4px; } .prose li::marker { color: var(--ember); } .prose ul { list-style: none; padding-left: 0; } .prose ul > li { position: relative; padding-left: 26px; margin-bottom: 11px; } .prose ul > li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 12px; height: 0.5px; background: var(--ember); } .prose ol { counter-reset: item; list-style: none; padding-left: 0; } .prose ol > li { position: relative; padding-left: 32px; counter-increment: item; margin-bottom: 11px; } .prose ol > li::before { content: counter(item); position: absolute; left: 0; top: 0; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ember); line-height: 1.9; } /* ── note / confirm callout ── */ .note { display: block; font-style: italic; font-size: 16px; line-height: 1.5; color: var(--cream-faint); border-left: 2px solid var(--ember-soft); padding: 4px 0 4px 16px; margin: 0 0 18px; } .tbc { font-style: italic; color: var(--ember-lit); } /* ── price headline (pricing page) ── */ .price-hero { border: 0.5px solid var(--edge); border-radius: 16px; padding: 40px 36px; margin: 0 0 36px; background: linear-gradient(180deg, var(--base-lift), var(--base)); } .price-hero .amount { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: clamp(34px, 6vw, 52px); letter-spacing: -1px; line-height: 1; color: var(--cream); } .price-hero .amount em { color: var(--ember); font-style: normal; } .price-hero .per { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-faint); margin: 14px 0 0; } .price-cta { margin: 26px 0 8px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .price-cta .secure { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--cream-faint); } /* ── divider ── */ .rule { height: 0.5px; background: var(--edge); border: none; margin: 40px 0; } /* ── footer ── */ footer { border-top: 0.5px solid var(--edge); background: var(--base-lift); padding: 40px 40px 48px; margin-top: 56px; } .foot-inner { max-width: var(--measure); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: baseline; } .foot-inner .foot-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; } .foot-inner a { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-soft); border-bottom: 0.5px solid transparent; padding-bottom: 2px; } .foot-inner a:hover { color: var(--ember-lit); border-bottom-color: var(--cream-faint); } .foot-trace { max-width: var(--measure); margin: 26px auto 0; padding-top: 22px; border-top: 0.5px solid var(--edge); font-style: italic; font-size: 13px; color: var(--cream-dim); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .foot-trace a { color: var(--cream-dim); border-bottom: none; } .foot-trace a:hover { color: var(--cream-faint); } /* ── responsive ── */ @media (max-width: 760px) { .masthead { padding: 13px 22px; } .doc-wrap { padding: 52px 22px 32px; } footer { padding: 36px 22px 44px; } .price-hero { padding: 30px 24px; } } @media (max-width: 480px) { body { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; } }