/* ═══════════════════════════════════════════════════════════════════════ FAQ (#faq) — landing page 2026-08-03 (Caleb): the section used to live on a 5% gutter with full-bleed rows and a 48px left-aligned headline, so it broke the 1180px margin every other section holds and read as the loudest block on the page. It now sits in the shared container with a calmer centred header, and only the first five questions show until "Show all" is pressed. Row anatomy (badge / question / + toggle / sliding answer) is unchanged — the six landing-*.css skins tint it and still match on every selector. ═══════════════════════════════════════════════════════════════════════ */ #faq { background:rgba(255,255,255,0.04); padding:92px 0 104px; } /* the shared landing container — 1228 - 2x24 padding = a 1180px content box, the same width as the demo frame, the testimonials and the final CTA, so the row hairlines start and end on exactly their edges */ .faq-wrap { max-width:1228px; margin:0 auto; padding:0 24px; } .faq-head { text-align:center; max-width:720px; margin:0 auto 44px; } .faq-eyebrow { display:block; margin-bottom:12px; font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); } .faq-title { margin:0; font-family:'Inter',sans-serif; /* was clamp(30px,4vw,48px) — trimmed so it reads as a section title rather than a second hero */ font-size:clamp(26px,2.6vw,36px); font-weight:700; line-height:1.12; letter-spacing:-0.022em; color:var(--ink); text-wrap:balance; } #faq-list { border-top:1.5px solid var(--border); } .faq-row { border-bottom:1.5px solid var(--border); transition:background .28s ease; } /* premium: the whole row lifts on hover, not just the words */ .faq-btn:hover .faq-toggle { transform:rotate(90deg); } .faq-row.open .faq-btn:hover .faq-toggle { transform:rotate(45deg); } .faq-btn { width:100%; background:none; border:none; cursor:pointer; /* was 26px 5% — the 5% gutter belonged to the old full-bleed layout; inside the container the badge sits flush with the left margin */ padding:22px 4px; display:flex; align-items:center; gap:18px; text-align:left; outline:none; -webkit-tap-highlight-color:transparent; box-sizing:border-box; } .faq-badge { flex-shrink:0; width:62px; height:62px; border-radius:16px; background:#EFF6FF; display:flex; align-items:center; justify-content:center; font-family:'Inter',sans-serif; font-size:17px; font-weight:650; color:#93AEDD; letter-spacing:.04em; transition:background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease; } .faq-question { flex:1; font-family:'Inter',sans-serif; font-size:clamp(16px,1.45vw,19px); font-weight:600; color:var(--ink); line-height:1.4; transition:color 0.2s ease; user-select:none; } .faq-toggle { flex-shrink:0; width:30px; height:30px; display:flex; align-items:center; justify-content:center; transition:transform 0.38s cubic-bezier(0.34,1.56,0.64,1); } .faq-toggle svg { width:23px; height:23px; stroke:#94A3B8; transition:stroke 0.22s ease; } .faq-btn:hover .faq-badge { background:#DBEAFE; color:#2563EB; transform:translateY(-1px); } .faq-btn:hover .faq-question { color:var(--blue); } .faq-btn:hover .faq-toggle svg { stroke:var(--blue); } .faq-row.open .faq-badge { background:var(--blue); color:#fff; } .faq-row.open .faq-question { color:var(--blue); } .faq-row.open .faq-toggle { transform:rotate(45deg); } .faq-row.open .faq-toggle svg { stroke:var(--blue); } .faq-row.open .faq-btn { padding-bottom:8px; } .faq-panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows 0.4s cubic-bezier(0.4,0,0.2,1); } .faq-row.open .faq-panel { grid-template-rows:1fr; } .faq-panel-inner { overflow:hidden; } .faq-answer { /* indented under the question, not the badge (62px badge + 18px gap) */ padding:2px 4px 28px 84px; font-family:'Inter',sans-serif; font-size:15.5px; font-weight:500; color:var(--sub); line-height:1.72; max-width:74ch; opacity:0; transform:translateY(-4px); transition:opacity 0.3s ease 0.06s, transform 0.3s ease 0.06s; } .faq-row.open .faq-answer { opacity:1; transform:translateY(0); } /* ── "Show all questions" expander ──────────────────────────────────── 13 questions stacked open-ended was the longest scroll on the page. Five show by default; the rest stay display:none until the button is pressed, then fade up into place. script.js tags + wires them. */ .faq-row--extra { display:none; } #faq-list.is-expanded .faq-row--extra { display:block; animation:faqRowIn .34s cubic-bezier(0.22,1,0.36,1) both; } @keyframes faqRowIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } } /* 2026-08-03 (Caleb: "'Show all questions +8' is too bold — make it nicer and less weight, it's too heavy; that border around it can be connected to the colour and designed nice, but I want it clean and thin and professional and premium"). What changed: weight 650 → 500 (the label was the heaviest thing in the whole section), border 1.5px grey → 1px in a soft tint of the theme colour, the filled pill around the count is gone (it read as a second button inside the button) — the count is now just the theme colour set in plain text, and the drop shadow and hover lift are gone too. Nothing here shouts; it reads as a quiet line of type in a thin ring. */ .faq-more-wrap { display:flex; justify-content:center; margin-top:30px; } .faq-more { display:inline-flex; align-items:center; gap:9px; padding:11px 26px; border-radius:999px; background:#fff; border:1px solid var(--border); font-family:'Inter',sans-serif; font-size:14px; font-weight:500; letter-spacing:.005em; color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .24s ease, color .24s ease, background .24s ease; } .faq-more:hover { border-color:#C7D7F3; } .faq-more:focus-visible { outline:2px solid var(--blue); outline-offset:3px; } /* the count sits as plain coloured type, not a chip */ .faq-more__n { font-size:13.5px; font-weight:500; color:var(--blue); letter-spacing:.008em; transition:color .24s ease; } .faq-more__chev { width:14px; height:14px; color:#A9B6C9; stroke-width:2; transition:transform .3s cubic-bezier(0.34,1.56,0.64,1), color .24s ease; } .faq-more:hover .faq-more__chev { color:var(--blue); } .faq-more[aria-expanded="true"] .faq-more__chev { transform:rotate(180deg); } .faq-fine { text-align:center; margin:26px 0 0; font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink); opacity:.75; } .faq-fine a { color:var(--blue); font-weight:700; text-decoration:none; white-space:nowrap; } /* the lead-in and the links are two thoughts — keep them on separate lines (the
in the markup handles it on phones) */ .faq-fine__br { display:none; } @media (max-width:640px){ #faq { padding:68px 0 76px; } .faq-wrap { padding:0 20px; } .faq-head { margin-bottom:32px; } .faq-btn { padding:18px 2px; gap:14px; } .faq-badge { width:48px; height:48px; border-radius:13px; font-size:15px; } /* no badge-width indent on phones — it squeezed the answer into a ~260px column. Full width, the number above still anchors it. */ .faq-answer { padding:6px 2px 24px 2px; font-size:15px; } /* Caleb 2026-08-04: this line read as a jumble on phones — "Privacy Policy" split across lines mid-link and the centred rag looked accidental. Now: question on line one, the three links on line two, no link ever broken, and a narrower measure so the rag is even. */ .faq-fine { font-size:13.5px; line-height:1.6; max-width:26em; margin-left:auto; margin-right:auto; text-wrap:balance; } .faq-fine__br { display:inline; } } @media (prefers-reduced-motion:reduce){ #faq-list.is-expanded .faq-row--extra { animation:none; } }