@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap");

/* Amélie Beerens: CSS components. Every value comes from tokens.css. */
body { margin: 0; background: var(--surface); color: var(--text); font-family: var(--font-sans); font-size: 18px; line-height: 30px; -webkit-font-smoothing: antialiased; }
.ab-pad { padding: 24px 32px; }
.ab-serif { font-family: var(--font-serif); font-optical-sizing: auto; }
:where(.ab-btn, .ab-link, .ab-signup input, .ab-form input, .ab-form textarea):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Button */
.ab-btn { display: inline-flex; align-items: center; gap: 8px; font: 500 16px/24px var(--font-sans); color: var(--on-accent); background: var(--accent); border: 0; border-radius: var(--radius-button); padding: 14px 24px; cursor: pointer; text-decoration: none; transition: background-color .2s ease-out, color .2s ease-out; }
.ab-btn:hover { background: var(--tint); color: var(--text); }
[data-theme="brazen"] .ab-btn:hover { background: var(--surface-alt); }
.ab-btn--on-band { background: var(--on-band); color: var(--band); }
.ab-btn--on-band:hover { background: var(--surface); color: var(--text); }

/* Text link */
.ab-link { color: var(--text); text-decoration: none; font-weight: 500; padding-bottom: 4px; background: var(--signature-gradient) left bottom / 100% 2px no-repeat; transition: background-size .2s ease-out; }
.ab-link:hover { background-size: 100% 4px; }
[data-theme="brazen"] .ab-link { background-image: linear-gradient(var(--ink), var(--ink)); }

/* Signup field */
.ab-signup { display: flex; align-items: flex-end; gap: 16px; max-width: 560px; }
.ab-signup label { display: block; flex: 1; }
.ab-signup .ab-label { display: block; font: 500 13px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.ab-signup input { width: 100%; box-sizing: border-box; font: 400 18px/30px var(--font-sans); color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--rule-strong); border-radius: 0; padding: 8px 0; }
.ab-signup input::placeholder { color: var(--text-muted); }
.ab-consent { font: 400 14px/20px var(--font-sans); color: var(--text-muted); margin: 12px 0 0; }

/* Situation form */
.ab-form { display: grid; gap: 24px; max-width: 640px; }
.ab-form label { display: grid; gap: 8px; font: 500 16px/24px var(--font-sans); }
.ab-form input, .ab-form textarea { font: 400 18px/30px var(--font-sans); color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--rule-strong); border-radius: 0; padding: 8px 0; resize: vertical; }
.ab-form ::placeholder { color: var(--text-muted); }
.ab-form .ab-email { font: 400 18px/30px var(--font-sans); margin: 0; }

/* Situation list */
.ab-situations { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ab-situations li { display: grid; grid-template-columns: 72px 1fr; gap: 0 24px; padding: 32px 0; border-bottom: 1px solid var(--rule); }
.ab-situations .ab-num { font: 400 30px/36px var(--font-serif); color: var(--accent); }
.ab-situations h3 { font: 500 30px/36px var(--font-serif); margin: 0 0 8px; }
.ab-situations p { margin: 0 0 12px; max-width: 68ch; }

/* Receipts strip */
.ab-receipts { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 24px 0; }
.ab-receipts ul { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0; padding: 0; font: 500 16px/24px var(--font-sans); }
.ab-receipts p { margin: 12px 0 0; font: 400 14px/20px var(--font-sans); color: var(--text-muted); }

/* Testimonial */
.ab-quote { margin: 0; max-width: 720px; padding: 32px 40px; background: var(--tint); }
.ab-quote blockquote { margin: 0; font: italic 400 26px/36px var(--font-serif); }
.ab-quote figcaption { margin-top: 16px; font: 400 14px/20px var(--font-sans); color: var(--text); }
.ab-quote figcaption strong { font-weight: 500; }
.ab-outcome { font: 500 76px/80px var(--font-serif); color: var(--signal); margin: 0; }

/* Tool card */
.ab-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
.ab-tool { display: flex; flex-direction: column; gap: 12px; padding: 24px 0; border-top: 1px solid var(--rule-strong); }
.ab-tool h3 { font: 500 30px/36px var(--font-serif); margin: 0; }
.ab-tool p { margin: 0; flex: 1; }
.ab-tool hr { border: 0; border-top: 1px solid var(--rule); width: 100%; margin: 4px 0; }
.ab-tool .ab-next { font: 500 13px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); padding: 18px 0; }

/* Closing band */
[data-theme="brazen"] .ab-band { background-image: none; }
.ab-band { background: var(--band); background-image: var(--signature-gradient); color: var(--on-band); padding: 64px 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.ab-band h2 { font: 500 48px/54px var(--font-serif); margin: 0; }
.ab-band a.ab-mail { color: var(--on-band); font: 500 16px/24px var(--font-sans); text-underline-offset: 6px; }
.ab-band .ab-actions { display: flex; align-items: center; gap: 32px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }