/* ============================================================================ Tiina — THE ONE FOOTER. This is the single source of truth for footer styling across the ENTIRE site (homepage, all landing pages, blog index, every blog post, 404). It is linked LAST in on every page, and every rule is scoped under `footer` so it overrides any older per-page footer CSS and touches nothing else. Do NOT add footer styling anywhere but this file. ========================================================================== */ /* Canvas rules (footer.css is the only stylesheet on every page). The canvas (html background) must be CREAM, not footer-dark: a dark canvas shows as a broken-looking dark gutter on ANY pinch-zoom, top overscroll, or accidental horizontal overflow (Marcus 2026-07-16 mobile incident). The dark region below the footer comes from the footer's own box-shadow instead — see the footer rule further down. overflow-x:clip means nothing can EVER widen the page sideways; clip (not hidden) so html stays a normal scroll container and position:sticky keeps working. */ html{background-color:#FDF8F3;overflow-x:clip} /* Belt AND braces (Marcus, 2026-07-15, round two): the html background above only recolors the canvas; on short pages / tall screens some browsers still showed a pale band because the FOOTER box itself ended mid-viewport. Flex column + margin-top:auto pins the footer to the true bottom of every viewport, in every browser, so the dark footer box IS the bottom. */ body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh} footer{margin-top:auto} /* Shared CTA-pair styling so EVERY page matches the homepage's primary+secondary CTA (footer.css is the only stylesheet on every page). The primary keeps its page's own .cta-button/.btn-primary; the secondary is an outlined "Hear Tiina's voice" that opens the homepage demo (/#demo). Mirrors next.css .hero-ctas + .btn-secondary. See the CTA-parity standard. (Marcus 2026-07-15) */ .cta-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center} .cta-row>.cta-button{width:auto} /* NOTE: NOT .cta-secondary — that class is already the blog "Not ready?" text link on 67 pages. This outlined "Hear Tiina's voice" button is .cta-outline. */ .cta-outline{background:transparent;color:#A85D40;border:2px solid #C67B5C} .cta-outline:hover{background:rgba(198,123,92,.08);color:#A85D40;box-shadow:none} @media(max-width:767px){.cta-row>.cta-button{width:100%}} /* The box-shadow paints #2B2B2B for 100vh BELOW the footer (offset+spread trick, no layout impact) so bottom rubber-band overscroll reads as the footer's dark, while the canvas above stays cream. Replaces the old html{background:#2B2B2B}, which darkened the whole canvas. */ footer{background:#2B2B2B;color:#FAF7F2;padding:64px 32px;text-align:center;display:block;font-size:16px;box-shadow:0 50vh 0 50vh #2B2B2B} footer .section-inner{max-width:760px;margin:0 auto;text-align:center} footer p{color:#FAF7F2;margin:0 auto} footer .footer-logo-link{display:inline-block;line-height:0;margin:0 auto 20px} footer .footer-lockup{height:48px;width:auto;display:block;margin:0;opacity:.9;transition:opacity .15s ease} footer .footer-logo-link:hover .footer-lockup{opacity:1} footer .legal-text{margin:0 auto 16px;font-size:16px;opacity:1;line-height:1.6} footer .legal-text a{color:#FAF7F2;text-decoration:none;margin:0 6px;transition:opacity .15s ease} footer .legal-text a:hover{text-decoration:underline;color:#FAF7F2} footer .disclaimer{max-width:600px;margin:0 auto 20px;font-size:15px;line-height:1.6;opacity:.9} footer .copyright{font-size:15px;opacity:.85;margin:0 auto} footer .privacy-choices{margin-top:12px} footer .privacy-choices a{display:inline-flex;align-items:center;gap:6px;color:#FAF7F2;font-size:15px;opacity:.85;text-decoration:none;transition:opacity .15s ease} footer .privacy-choices a:hover{opacity:1;text-decoration:underline} footer .privacy-choices svg{flex-shrink:0} /* ---- Option A column footer (Marcus-approved 2026-07-07) ---- Static markup lives in each page's