/* FDEaaS pages (T-0064). Palette and type match the previous homepage. */
* { box-sizing: border-box; }
body { margin: 0; font-family: 'IBM Plex Sans', sans-serif; color: #1A2433; background: #F6F3EC; line-height: 1.6; }
img { max-width: 100%; display: block; }
.f-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
h1, h2 { font-family: 'Source Serif 4', serif; font-weight: 600; letter-spacing: -0.4px; line-height: 1.1; margin: 0 0 16px; }
h1 { font-size: clamp(34px, 6vw, 58px); max-width: 860px; }
h2 { font-size: clamp(26px, 4vw, 38px); }
p { margin: 0 0 16px; }

.f-nav { position: sticky; top: 0; z-index: 10; background: #F6F3ECf2; border-bottom: 1px solid #E3DDCE; backdrop-filter: blur(10px); }
.f-nav-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 10px; padding-bottom: 10px; }
.f-logo img { height: 32px; width: auto; }
.f-links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; font-weight: 500; order: 3; width: 100%; }
.f-links a { color: #5C6470; text-decoration: none; }
.f-links a:hover, .f-links a[aria-current] { color: #1A2433; }
.f-nav .f-btn-sm { margin-left: auto; }
@media (min-width: 860px) { .f-links { order: 0; width: auto; margin-left: 8px; } }

.f-btn { display: inline-block; background: #2E5E4E; color: #F6F3EC; font-weight: 600; font-size: 16px; padding: 14px 24px; border-radius: 6px; text-decoration: none; border: 1.5px solid #2E5E4E; }
.f-btn:hover { background: #234A3D; }
.f-btn-sm { font-size: 14px; padding: 9px 16px; }
.f-btn-ghost { background: transparent; color: #1A2433; border-color: #1A2433; }
.f-btn-ghost:hover { background: #1A2433; color: #F6F3EC; }
.f-link { color: #2E5E4E; font-weight: 600; text-decoration: none; }
.f-link::after { content: ' →'; }
.f-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.f-hero { padding: clamp(48px, 9vw, 110px) 0 clamp(40px, 6vw, 72px); }
.f-lede { font-size: clamp(17px, 2.2vw, 20px); color: #5C6470; max-width: 680px; margin-bottom: 28px; }
.f-sec { padding: clamp(40px, 6vw, 72px) 0; }
.f-alt { background: #EFEAE0; }
.f-dark { background: #14202F; color: #F6F3EC; }
.f-dark .f-lede { color: #B8C2CE; }
.f-dark .f-btn-ghost { color: #F6F3EC; border-color: #5B6B80; }

.f-steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 24px; display: grid; gap: 18px; }
.f-steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 2px 14px; }
.f-steps li::before { content: counter(s); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: #2E5E4E; color: #F6F3EC; font-family: 'IBM Plex Mono', monospace; display: flex; align-items: center; justify-content: center; }
.f-steps span { color: #5C6470; }
.f-list { padding-left: 20px; margin: 0; display: grid; gap: 10px; max-width: 720px; }

.f-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-bottom: 24px; }
@media (min-width: 640px) { .f-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .f-grid { grid-template-columns: 1fr 1fr 1fr; } }
.f-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #E3DDCE; border-radius: 10px; overflow: hidden; color: #1A2433; text-decoration: none; padding-bottom: 18px; }
.f-card:hover { border-color: #2E5E4E; }
.f-card img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-bottom: 1px solid #E3DDCE; }
.f-card strong, .f-card span { padding: 0 18px; }
.f-card span { color: #5C6470; font-size: 15px; }

.f-shot { margin: 24px 0 0; }
.f-shot img { border: 1px solid #E3DDCE; border-radius: 10px; }
.f-shot figcaption { font-size: 13px; color: #8A8472; margin-top: 8px; font-family: 'IBM Plex Mono', monospace; }

.f-faq { display: grid; gap: 12px; max-width: 820px; }
.f-faq details { background: #fff; border: 1px solid #E3DDCE; border-radius: 10px; padding: 16px 20px; }
.f-faq summary { font-weight: 600; cursor: pointer; }
.f-faq p { color: #5C6470; margin: 10px 0 0; }

.f-foot { border-top: 1px solid #E3DDCE; padding: 32px 0; }
.f-foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.f-foot-row img { height: 24px; width: auto; opacity: 0.8; }
.f-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.f-foot-links a { color: #8A8472; text-decoration: none; }
.f-copy { margin-left: auto; font-size: 13px; color: #8A8472; }