/* ========================================================================== Falah Wave — landing page styles Depends on tokens.css (imported first in ). No colour literals here. Layout uses logical properties throughout so /ar (dir="rtl") mirrors free. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fonts (self-hosted, latin subset, variable — design-system §3.1) -------------------------------------------------------------------------- */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url("../fonts/archivo-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/newsreader-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 500; font-display: swap; src: url("../fonts/newsreader-italic-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* -------------------------------------------------------------------------- 2. Reset + base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: calc(var(--fw-nav-h) + var(--fw-space-4)); } body { margin: 0; background: var(--fw-cream); color: var(--fw-ink-700); font-family: var(--fw-font-sans); font-size: var(--fw-text-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--fw-focus); outline-offset: 2px; } .fw-on-dark :focus-visible { outline-color: var(--fw-on-dark); } ::selection { background: var(--fw-saffron-tint); } .fw-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .fw-skip-link { position: absolute; inset-block-start: var(--fw-space-2); inset-inline-start: var(--fw-space-2); z-index: 200; transform: translateY(-200%); background: var(--fw-ink-900); color: var(--fw-on-dark); padding: var(--fw-space-3) var(--fw-space-5); font-size: var(--fw-text-sm); font-weight: 600; text-decoration: none; border-radius: var(--fw-radius-control); } .fw-skip-link:focus { transform: translateY(0); } /* -------------------------------------------------------------------------- 3. Layout primitives -------------------------------------------------------------------------- */ .fw-container { inline-size: 100%; max-inline-size: var(--fw-container); margin-inline: auto; padding-inline: var(--fw-gutter); } .fw-container--wide { max-inline-size: var(--fw-container-wide); } .fw-section { padding-block: var(--fw-section-y); position: relative; } .fw-section--cream { background: var(--fw-cream); } .fw-section--sand { background: var(--fw-sand-200); } .fw-section--dark { background: var(--fw-ink-900); color: var(--fw-on-dark); } .fw-section--hairline { border-block-start: var(--fw-border) solid var(--fw-line); } /* Left-edge marker on dark sections — cycles paprika -> olive down the page */ .fw-section--dark::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--fw-edge-marker); background: var(--fw-marker, var(--fw-paprika)); } .fw-grid { display: grid; gap: var(--fw-space-5); grid-template-columns: repeat(12, minmax(0, 1fr)); } @media (max-width: 1023px) { .fw-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (max-width: 767px) { .fw-grid { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- 4. Type styles -------------------------------------------------------------------------- */ .fw-display { font-family: var(--fw-font-serif); font-size: var(--fw-text-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; color: var(--fw-ink-900); } .fw-h2 { font-family: var(--fw-font-serif); font-size: var(--fw-text-h2); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; color: var(--fw-ink-900); max-inline-size: 20ch; } .fw-h3 { font-family: var(--fw-font-serif); font-size: var(--fw-text-h3); font-weight: 600; line-height: 1.18; letter-spacing: -0.015em; color: var(--fw-ink-900); } .fw-h4 { font-family: var(--fw-font-sans); font-size: var(--fw-text-h4); font-weight: 600; line-height: 1.3; color: var(--fw-ink-900); } .fw-eyebrow { font-family: var(--fw-font-sans); font-size: var(--fw-text-xs); font-weight: 600; line-height: 1.2; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fw-paprika); margin-block-end: var(--fw-space-4); } .fw-eyebrow--olive { color: var(--fw-olive); } .fw-lead { font-size: var(--fw-text-lead); line-height: 1.5; color: var(--fw-ink-700); max-inline-size: 55ch; } .fw-body { max-inline-size: 68ch; } .fw-small { font-size: var(--fw-text-sm); color: var(--fw-ink-500); } .fw-footnote { font-size: var(--fw-text-xs); line-height: 1.45; color: var(--fw-ink-500); } .fw-pullquote { font-family: var(--fw-font-serif); font-size: var(--fw-text-h3); font-style: italic; font-weight: 400; line-height: 1.35; color: var(--fw-ink-900); max-inline-size: 30ch; } /* Colour inversions inside dark sections */ .fw-on-dark .fw-h2, .fw-on-dark .fw-h3, .fw-on-dark .fw-h4, .fw-on-dark .fw-display, .fw-on-dark .fw-pullquote { color: var(--fw-on-dark); } .fw-on-dark .fw-eyebrow { color: var(--fw-saffron); } .fw-on-dark .fw-lead, .fw-on-dark .fw-body { color: var(--fw-on-dark-muted); } /* on-dark-faint measures 4.2:1 on espresso — non-text only. Small copy on dark uses on-dark-muted (7.4:1). */ .fw-on-dark .fw-small, .fw-on-dark .fw-footnote { color: var(--fw-on-dark-muted); } /* Paprika is 4.85:1 on cream but only 4.29:1 on sand-200, which fails AA for normal text. On sand grounds the darker paprika-hover (5.4:1) carries it. */ .fw-section--sand .fw-eyebrow, .fw-section--sand .fw-step__n, .fw-section--sand .fw-table thead .fw-col-us { color: var(--fw-paprika-hover); } .fw-section__head { margin-block-end: var(--fw-space-8); } .fw-section__head .fw-lead { margin-block-start: var(--fw-space-5); } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .fw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--fw-space-2); min-block-size: 44px; padding: var(--fw-space-3) var(--fw-space-5); font-family: var(--fw-font-sans); font-size: var(--fw-text-body); font-weight: 600; letter-spacing: 0.01em; line-height: 1; text-align: center; text-decoration: none; border: var(--fw-border) solid transparent; border-radius: var(--fw-radius-control); cursor: pointer; transition: background-color var(--fw-dur-fast) var(--fw-ease), border-color var(--fw-dur-fast) var(--fw-ease), color var(--fw-dur-fast) var(--fw-ease), transform var(--fw-dur-fast) var(--fw-ease); } .fw-btn--lg { padding: var(--fw-space-4) var(--fw-space-6); } .fw-btn--sm { padding: 9px var(--fw-space-4); font-size: var(--fw-text-sm); min-block-size: 40px; } .fw-btn--primary { background: var(--fw-paprika); color: var(--fw-cream); } .fw-btn--primary:hover { background: var(--fw-paprika-hover); } .fw-btn--primary:active { background: var(--fw-paprika-active); transform: translateY(1px); } .fw-btn--secondary { background: transparent; color: var(--fw-ink-900); border-color: var(--fw-ink-900); } .fw-btn--secondary:hover { background: var(--fw-paprika-tint); } .fw-btn--secondary:active { transform: translateY(1px); } .fw-btn--dark { background: var(--fw-saffron); color: var(--fw-ink-900); } .fw-btn--dark:hover { background: var(--fw-saffron-hover); } .fw-btn--dark:active { transform: translateY(1px); } .fw-btn--dark-ghost { background: transparent; color: var(--fw-on-dark); border-color: var(--fw-line-dark); } .fw-btn--dark-ghost:hover { border-color: var(--fw-line-dark-strong); background: var(--fw-on-dark-fill); } .fw-btn[disabled], .fw-btn[aria-disabled="true"] { background: var(--fw-sand-300); color: var(--fw-ink-300); border-color: transparent; cursor: not-allowed; transform: none; } .fw-link { color: var(--fw-paprika); font-weight: 600; text-decoration: none; border-block-end: var(--fw-border) solid transparent; transition: border-color var(--fw-dur-fast) var(--fw-ease); } .fw-link:hover { border-block-end-color: currentColor; } .fw-on-dark .fw-link { color: var(--fw-saffron); } .fw-actions { display: flex; flex-wrap: wrap; gap: var(--fw-space-3); margin-block-start: var(--fw-space-6); } /* -------------------------------------------------------------------------- 6. Navigation -------------------------------------------------------------------------- */ .fw-nav { position: sticky; inset-block-start: 0; z-index: 100; background: transparent; transition: background-color var(--fw-dur-base) var(--fw-ease), box-shadow var(--fw-dur-base) var(--fw-ease); } .fw-nav[data-scrolled="true"] { background: var(--fw-cream); box-shadow: var(--fw-shadow-nav); } .fw-nav__inner { display: flex; align-items: center; gap: var(--fw-space-6); block-size: var(--fw-nav-h); } .fw-wordmark { font-family: var(--fw-font-sans); font-size: var(--fw-text-sm); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fw-ink-900); text-decoration: none; white-space: nowrap; } .fw-nav__links { display: none; align-items: center; gap: var(--fw-space-5); margin-inline-start: auto; } .fw-nav__link { font-size: var(--fw-text-sm); font-weight: 500; letter-spacing: 0.01em; color: var(--fw-ink-700); text-decoration: none; padding-block: var(--fw-space-2); border-block-end: 2px solid transparent; transition: color var(--fw-dur-fast) var(--fw-ease), border-color var(--fw-dur-fast) var(--fw-ease); } .fw-nav__link:hover { color: var(--fw-ink-900); border-block-end-color: var(--fw-paprika); } .fw-nav__end { display: none; align-items: center; gap: var(--fw-space-4); } .fw-lang { font-size: var(--fw-text-sm); font-weight: 500; color: var(--fw-ink-700); text-decoration: none; padding: var(--fw-space-2); white-space: nowrap; } .fw-lang:hover { color: var(--fw-ink-900); } .fw-nav__toggle { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; margin-inline-start: auto; background: transparent; border: var(--fw-border) solid var(--fw-line); border-radius: var(--fw-radius-control); color: var(--fw-ink-900); cursor: pointer; } .fw-nav__toggle svg { inline-size: 22px; block-size: 22px; } @media (min-width: 768px) { .fw-nav__links { display: flex; } .fw-nav__end { display: flex; } .fw-nav__toggle { display: none; } } .fw-mobile-menu { position: fixed; inset: 0; z-index: 150; background: var(--fw-cream); padding: var(--fw-space-5) var(--fw-gutter) var(--fw-space-8); display: flex; flex-direction: column; overflow-y: auto; } .fw-mobile-menu[hidden] { display: none; } .fw-mobile-menu__head { display: flex; align-items: center; justify-content: space-between; min-block-size: var(--fw-nav-h); } .fw-mobile-menu__links { display: flex; flex-direction: column; margin-block-start: var(--fw-space-5); } .fw-mobile-menu__link { font-family: var(--fw-font-serif); font-size: var(--fw-text-h3); font-weight: 600; letter-spacing: -0.015em; color: var(--fw-ink-900); text-decoration: none; padding-block: var(--fw-space-4); border-block-end: var(--fw-border) solid var(--fw-line-soft); } .fw-mobile-menu__foot { margin-block-start: auto; display: grid; gap: var(--fw-space-4); padding-block-start: var(--fw-space-7); } .fw-mobile-menu__foot .fw-btn { inline-size: 100%; } /* -------------------------------------------------------------------------- 7. Hero -------------------------------------------------------------------------- */ .fw-hero { padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem) var(--fw-section-y); background: var(--fw-cream); } .fw-hero__grid { align-items: center; row-gap: var(--fw-space-8); } .fw-hero__copy { grid-column: 1 / -1; } .fw-hero__visual { grid-column: 1 / -1; } @media (min-width: 1024px) { .fw-hero__copy { grid-column: span 7; } .fw-hero__visual { grid-column: 9 / span 5; } } .fw-hero__lead { margin-block-start: var(--fw-space-5); } .fw-hero__reassure { margin-block-start: var(--fw-space-4); font-size: var(--fw-text-sm); color: var(--fw-ink-500); } /* Representative product UI — the forecast-to-action strip */ .fw-panel { background: var(--fw-cream-raised); border: var(--fw-border) solid var(--fw-line); } .fw-panel__bar { block-size: var(--fw-accent-bar); background: var(--fw-paprika); } .fw-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fw-space-3); flex-wrap: wrap; padding: var(--fw-space-4) var(--fw-space-5); border-block-end: var(--fw-border) solid var(--fw-line-soft); } .fw-panel__label { font-size: var(--fw-text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fw-ink-500); } .fw-panel__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--fw-space-3); align-items: baseline; padding: var(--fw-space-4) var(--fw-space-5); border-block-end: var(--fw-border) solid var(--fw-line-soft); } .fw-panel__k { font-size: var(--fw-text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fw-ink-500); } .fw-panel__t { font-size: var(--fw-text-sm); color: var(--fw-ink-700); margin-block-start: var(--fw-space-1); } .fw-panel__v { font-family: var(--fw-font-serif); font-size: var(--fw-text-h4); font-weight: 600; color: var(--fw-ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; } .fw-panel__v--paprika { color: var(--fw-paprika); } .fw-panel__v--olive { color: var(--fw-olive); } .fw-panel__foot { padding: var(--fw-space-3) var(--fw-space-5); background: var(--fw-sand-100); } /* -------------------------------------------------------------------------- 8. Problem -------------------------------------------------------------------------- */ .fw-problem__grid { row-gap: var(--fw-space-7); } .fw-problem__head { grid-column: 1 / -1; } .fw-problem__list { grid-column: 1 / -1; } .fw-problem__quote { grid-column: 1 / -1; padding-block-start: var(--fw-space-6); } @media (min-width: 1024px) { .fw-problem__head { grid-column: span 5; } .fw-problem__list { grid-column: 7 / span 6; } .fw-problem__quote { grid-column: 7 / span 6; } } .fw-rule-list > li { padding-block: var(--fw-space-4); border-block-start: var(--fw-border) solid var(--fw-line); max-inline-size: 62ch; } .fw-rule-list > li:last-child { border-block-end: var(--fw-border) solid var(--fw-line); } /* -------------------------------------------------------------------------- 9. Steps (how it works) -------------------------------------------------------------------------- */ .fw-steps { display: grid; } .fw-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fw-space-3) var(--fw-space-5); padding-block: var(--fw-space-6); border-block-start: var(--fw-border) solid var(--fw-line); } .fw-step:last-child { border-block-end: var(--fw-border) solid var(--fw-line); } .fw-step__n { font-family: var(--fw-font-sans); font-size: var(--fw-text-sm); font-weight: 600; letter-spacing: 0.14em; color: var(--fw-paprika); padding-block-start: 0.4em; min-inline-size: 3ch; } .fw-step__t { grid-column: 2; } .fw-step__p { grid-column: 2; max-inline-size: 62ch; } @media (min-width: 1024px) { .fw-step { grid-template-columns: 4rem 15rem minmax(0, 1fr); align-items: start; } .fw-step__t { grid-column: 2; } .fw-step__p { grid-column: 3; } } /* -------------------------------------------------------------------------- 10. Cards -------------------------------------------------------------------------- */ .fw-cards { display: grid; gap: var(--fw-space-5); grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1023px) { .fw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .fw-cards { grid-template-columns: minmax(0, 1fr); } } .fw-card { position: relative; background: var(--fw-cream-raised); border: var(--fw-border) solid var(--fw-line); border-radius: var(--fw-radius-card); padding: var(--fw-space-6); display: flex; flex-direction: column; gap: var(--fw-space-3); } @media (max-width: 767px) { .fw-card { padding: var(--fw-space-5); } } .fw-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: var(--fw-accent-bar); background: var(--fw-accent, var(--fw-paprika)); } .fw-card--olive { --fw-accent: var(--fw-olive); } .fw-card--saffron { --fw-accent: var(--fw-saffron); } .fw-card__icon { color: var(--fw-accent, var(--fw-paprika)); } .fw-card__icon svg { inline-size: 32px; block-size: 32px; } .fw-card p { color: var(--fw-ink-700); } .fw-card--span2 { grid-column: span 2; } @media (max-width: 767px) { .fw-card--span2 { grid-column: 1 / -1; } } .fw-card--dark { background: var(--fw-ink-900); border-color: var(--fw-ink-900); --fw-accent: var(--fw-saffron); } .fw-card--dark .fw-h3, .fw-card--dark .fw-h4 { color: var(--fw-on-dark); } /* `li` matters here: the Enterprise plan's feature list would otherwise inherit ink-700 body colour onto espresso (1.8:1). */ .fw-card--dark p, .fw-card--dark li { color: var(--fw-on-dark-muted); } .fw-card--dark .fw-eyebrow { color: var(--fw-saffron); } .fw-card--dark .fw-card__icon { color: var(--fw-saffron); } .fw-card--dark .fw-tag { background: var(--fw-on-dark-fill); color: var(--fw-saffron); border-color: var(--fw-line-dark); } .fw-tag { align-self: flex-start; display: inline-block; font-size: var(--fw-text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: var(--fw-space-1) var(--fw-space-3); background: var(--fw-saffron-tint); color: var(--fw-saffron-text); border: var(--fw-border) solid var(--fw-line-soft); } /* Copilot conversation lines inside the espresso card */ .fw-ask { display: grid; gap: var(--fw-space-4); margin-block-start: var(--fw-space-2); } .fw-ask li { font-family: var(--fw-font-serif); font-style: italic; font-size: var(--fw-text-h4); line-height: 1.35; color: var(--fw-on-dark); padding-inline-start: var(--fw-space-4); border-inline-start: 2px solid var(--fw-saffron); } .fw-note { margin-block-start: var(--fw-space-6); padding-block-start: var(--fw-space-5); border-block-start: var(--fw-border) solid var(--fw-line); display: flex; flex-wrap: wrap; gap: var(--fw-space-4); align-items: baseline; justify-content: space-between; } /* -------------------------------------------------------------------------- 11. Outcomes (dark) -------------------------------------------------------------------------- */ .fw-outcomes { display: grid; margin-block-start: var(--fw-space-7); } .fw-outcome { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fw-space-5); align-items: baseline; padding-block: var(--fw-space-5); border-block-start: var(--fw-border) solid var(--fw-line-dark); } .fw-outcome:last-child { border-block-end: var(--fw-border) solid var(--fw-line-dark); } .fw-outcome__n { font-size: var(--fw-text-sm); font-weight: 600; letter-spacing: 0.14em; color: var(--fw-saffron); min-inline-size: 3ch; } .fw-outcome__t { font-family: var(--fw-font-serif); font-size: var(--fw-text-h3); font-weight: 500; line-height: 1.25; color: var(--fw-on-dark); } /* -------------------------------------------------------------------------- 12. ROI estimator -------------------------------------------------------------------------- */ .fw-roi__grid { row-gap: var(--fw-space-8); align-items: start; } .fw-roi__inputs { grid-column: 1 / -1; } .fw-roi__result { grid-column: 1 / -1; } @media (min-width: 1024px) { .fw-roi__inputs { grid-column: span 6; } .fw-roi__result { grid-column: 8 / span 5; position: sticky; inset-block-start: calc(var(--fw-nav-h) + var(--fw-space-6)); } } .fw-field { display: grid; gap: var(--fw-space-2); margin-block-end: var(--fw-space-6); } .fw-label { font-size: var(--fw-text-sm); font-weight: 600; color: var(--fw-ink-900); } .fw-label__opt { font-weight: 400; color: var(--fw-ink-500); } .fw-help { font-size: var(--fw-text-xs); color: var(--fw-ink-500); } .fw-input, .fw-select, .fw-textarea { inline-size: 100%; min-block-size: 52px; padding: 14px var(--fw-space-4); font-size: var(--fw-text-body); background: var(--fw-cream-raised); color: var(--fw-ink-900); border: var(--fw-border) solid var(--fw-line); border-radius: var(--fw-radius-control); transition: border-color var(--fw-dur-fast) var(--fw-ease); } .fw-textarea { min-block-size: 104px; resize: vertical; line-height: 1.5; } .fw-input::placeholder, .fw-textarea::placeholder { color: var(--fw-ink-300); } .fw-input:hover, .fw-select:hover, .fw-textarea:hover { border-color: var(--fw-line-strong); } .fw-input:focus, .fw-select:focus, .fw-textarea:focus { border-color: var(--fw-ink-900); } .fw-input[aria-invalid="true"], .fw-select[aria-invalid="true"], .fw-textarea[aria-invalid="true"] { border-color: var(--fw-danger); } .fw-input:disabled, .fw-select:disabled, .fw-textarea:disabled { background: var(--fw-sand-100); color: var(--fw-ink-300); } .fw-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fw-ink-700) 50%), linear-gradient(135deg, var(--fw-ink-700) 50%, transparent 50%); background-position: right 1.3rem center, right 1rem center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-inline-end: var(--fw-space-8); } [dir="rtl"] .fw-select { background-image: linear-gradient(135deg, transparent 50%, var(--fw-ink-700) 50%), linear-gradient(45deg, var(--fw-ink-700) 50%, transparent 50%); background-position: left 1rem center, left 1.3rem center; } .fw-error { font-size: var(--fw-text-sm); color: var(--fw-danger); } .fw-error:empty { display: none; } .fw-range { inline-size: 100%; accent-color: var(--fw-paprika); block-size: 44px; } .fw-range-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fw-space-3); } .fw-range-val { font-family: var(--fw-font-serif); font-size: var(--fw-text-h4); font-weight: 600; color: var(--fw-paprika); font-variant-numeric: tabular-nums; } .fw-result { background: var(--fw-ink-900); color: var(--fw-on-dark); padding: var(--fw-space-6); border-block-start: var(--fw-accent-bar) solid var(--fw-olive); } @media (max-width: 767px) { .fw-result { padding: var(--fw-space-5); } } .fw-result__label { font-size: var(--fw-text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fw-saffron); } .fw-result__figure { font-family: var(--fw-font-serif); font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: var(--fw-on-dark); font-variant-numeric: tabular-nums; margin-block-start: var(--fw-space-3); overflow-wrap: anywhere; } .fw-result__sub { margin-block-start: var(--fw-space-3); color: var(--fw-on-dark-muted); font-size: var(--fw-text-sm); } .fw-result__split { margin-block-start: var(--fw-space-5); padding-block-start: var(--fw-space-5); border-block-start: var(--fw-border) solid var(--fw-line-dark); display: grid; gap: var(--fw-space-3); } .fw-result__row { display: flex; justify-content: space-between; gap: var(--fw-space-4); font-size: var(--fw-text-sm); } .fw-result__row dt { color: var(--fw-on-dark-muted); } .fw-result__row dd { color: var(--fw-on-dark); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .fw-formula { margin-block-start: var(--fw-space-5); font-family: var(--fw-font-mono); font-size: var(--fw-text-xs); line-height: 1.7; color: var(--fw-on-dark-muted); white-space: pre-wrap; overflow-x: auto; } .fw-disclaimer { margin-block-start: var(--fw-space-6); padding: var(--fw-space-4); background: var(--fw-warning-bg); color: var(--fw-warning-text); font-size: var(--fw-text-sm); line-height: 1.5; border-inline-start: 3px solid var(--fw-saffron); max-inline-size: 68ch; } .fw-roi__ask { margin-block-start: var(--fw-space-6); padding-block-start: var(--fw-space-5); border-block-start: var(--fw-border) solid var(--fw-line); } /* -------------------------------------------------------------------------- 13. Comparison table -------------------------------------------------------------------------- */ .fw-table-wrap { overflow-x: auto; margin-block-start: var(--fw-space-8); } .fw-table { inline-size: 100%; min-inline-size: 34rem; border-collapse: collapse; font-size: var(--fw-text-sm); } .fw-table th, .fw-table td { padding: var(--fw-space-4) var(--fw-space-3); text-align: start; border-block-end: var(--fw-border) solid var(--fw-line); } .fw-table thead th { font-size: var(--fw-text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-ink-500); border-block-end-color: var(--fw-line-strong); vertical-align: bottom; } .fw-table th[scope="row"] { font-weight: 500; color: var(--fw-ink-900); } .fw-table td { text-align: center; color: var(--fw-ink-700); } .fw-table .fw-col-us { background: var(--fw-paprika-tint); color: var(--fw-ink-900); font-weight: 700; } .fw-table thead .fw-col-us { color: var(--fw-paprika); } /* -------------------------------------------------------------------------- 14. Founder / credibility -------------------------------------------------------------------------- */ .fw-founder__grid { row-gap: var(--fw-space-9); align-items: start; } .fw-founder__media { grid-column: 1 / -1; } .fw-founder__body { grid-column: 1 / -1; } @media (min-width: 1024px) { .fw-founder__media { grid-column: span 4; } .fw-founder__body { grid-column: 6 / span 7; } } .fw-portrait { position: relative; max-inline-size: 20rem; margin-inline-start: var(--fw-space-5); } .fw-portrait::before { content: ""; position: absolute; inset-block: var(--fw-space-5) calc(var(--fw-space-5) * -1); inset-inline: calc(var(--fw-space-5) * -1) var(--fw-space-5); background: var(--fw-paprika); } .fw-portrait img { position: relative; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; } .fw-founder__name { margin-block-start: var(--fw-space-6); } .fw-founder__role { font-size: var(--fw-text-sm); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fw-paprika); margin-block-start: var(--fw-space-2); } .fw-founder__bio { margin-block-start: var(--fw-space-4); } .fw-team { margin-block-start: var(--fw-space-6); } .fw-chips { display: flex; flex-wrap: wrap; gap: var(--fw-space-2); margin-block-start: var(--fw-space-4); } .fw-chip { font-size: var(--fw-text-sm); font-weight: 500; padding: var(--fw-space-2) 14px; background: var(--fw-sand-100); border: var(--fw-border) solid var(--fw-line); color: var(--fw-ink-800); } .fw-stat { margin-block-start: var(--fw-space-8); padding-block-start: var(--fw-space-6); border-block-start: var(--fw-border) solid var(--fw-line); } .fw-stat__figure { font-family: var(--fw-font-serif); font-size: var(--fw-text-h1); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--fw-paprika); font-variant-numeric: tabular-nums; } .fw-stat__label { margin-block-start: var(--fw-space-4); max-inline-size: 58ch; } .fw-stat sup { font-size: 0.6em; vertical-align: super; color: var(--fw-ink-500); } .fw-align { margin-block-start: var(--fw-space-6); padding-inline-start: var(--fw-space-5); border-inline-start: 3px solid var(--fw-olive); max-inline-size: 60ch; } /* -------------------------------------------------------------------------- 15. Plans -------------------------------------------------------------------------- */ .fw-plan__features { display: grid; gap: var(--fw-space-3); margin-block: var(--fw-space-2) auto; } .fw-plan__features li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fw-space-3); font-size: var(--fw-text-sm); line-height: 1.5; } .fw-plan__features li::before { content: ""; inline-size: 8px; block-size: 8px; margin-block-start: 0.45em; background: var(--fw-accent, var(--fw-paprika)); } .fw-plan .fw-btn { margin-block-start: var(--fw-space-6); } /* -------------------------------------------------------------------------- 16. FAQ -------------------------------------------------------------------------- */ .fw-faq { max-inline-size: 52rem; } .fw-faq__item { border-block-start: var(--fw-border) solid var(--fw-line); } .fw-faq__item:last-child { border-block-end: var(--fw-border) solid var(--fw-line); } .fw-faq__q { margin: 0; } .fw-faq__btn { inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--fw-space-4); min-block-size: 44px; padding-block: var(--fw-space-5); background: transparent; border: 0; text-align: start; font-family: var(--fw-font-sans); font-size: var(--fw-text-h4); font-weight: 600; color: var(--fw-ink-900); cursor: pointer; transition: color var(--fw-dur-fast) var(--fw-ease); } .fw-faq__btn:hover { color: var(--fw-paprika); } .fw-faq__chev { flex: none; inline-size: 20px; block-size: 20px; color: var(--fw-paprika); transition: transform var(--fw-dur-slow) var(--fw-ease); } .fw-faq__btn[aria-expanded="true"] .fw-faq__chev { transform: rotate(180deg); } .fw-faq__panel { padding-block-end: var(--fw-space-5); } .fw-faq__panel[hidden] { display: none; } .fw-faq__panel p { max-inline-size: 68ch; } .fw-faq__panel p + p { margin-block-start: var(--fw-space-3); } /* -------------------------------------------------------------------------- 17. Final CTA + lead form -------------------------------------------------------------------------- */ .fw-cta__grid { row-gap: var(--fw-space-8); align-items: start; } .fw-cta__copy { grid-column: 1 / -1; } .fw-cta__form { grid-column: 1 / -1; } @media (min-width: 1024px) { .fw-cta__copy { grid-column: span 5; } .fw-cta__form { grid-column: 7 / span 6; } } .fw-contact-card { margin-block-start: var(--fw-space-7); padding-block-start: var(--fw-space-5); border-block-start: var(--fw-border) solid var(--fw-line-dark); } .fw-contact-card dt { font-size: var(--fw-text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fw-saffron); } .fw-contact-card dd { margin-block: var(--fw-space-2) var(--fw-space-5); color: var(--fw-on-dark); } .fw-contact-card dd:last-child { margin-block-end: 0; } .fw-form { background: var(--fw-cream-raised); padding: var(--fw-space-6); border-block-start: var(--fw-accent-bar) solid var(--fw-saffron); } @media (max-width: 767px) { .fw-form { padding: var(--fw-space-5); } } .fw-form__pairs { display: grid; gap: 0 var(--fw-space-5); grid-template-columns: minmax(0, 1fr); } @media (min-width: 560px) { .fw-form__pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .fw-form__full { grid-column: 1 / -1; } /* The lead form and its confirmation are LIGHT panels sitting inside a dark section, so the .fw-on-dark inversions above must not leak into them — cream text on cream-raised measures 1.1:1. These rules match that specificity and win on order. */ .fw-on-dark .fw-form, .fw-on-dark .fw-form p, .fw-on-dark .fw-form li, .fw-on-dark .fw-form .fw-lead, .fw-on-dark .fw-form .fw-consent { color: var(--fw-ink-700); } .fw-on-dark .fw-form .fw-h3, .fw-on-dark .fw-form .fw-h4, .fw-on-dark .fw-form .fw-label { color: var(--fw-ink-900); } .fw-on-dark .fw-form .fw-small, .fw-on-dark .fw-form .fw-help, .fw-on-dark .fw-form .fw-footnote { color: var(--fw-ink-500); } .fw-on-dark .fw-form .fw-error { color: var(--fw-danger); } .fw-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fw-space-3); align-items: start; margin-block-end: var(--fw-space-4); font-size: var(--fw-text-sm); line-height: 1.5; color: var(--fw-ink-700); cursor: pointer; } .fw-consent input[type="checkbox"] { inline-size: 20px; block-size: 20px; margin: 0.2em 0 0; accent-color: var(--fw-paprika); } .fw-hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } .fw-form__submit { inline-size: 100%; margin-block-start: var(--fw-space-3); } .fw-form__status { margin-block-start: var(--fw-space-4); font-size: var(--fw-text-sm); color: var(--fw-danger); } .fw-form__status:empty { display: none; } .fw-turnstile:empty { display: none; } .fw-confirm { display: grid; gap: var(--fw-space-5); border-block-start: var(--fw-accent-bar) solid var(--fw-olive); padding-block-start: var(--fw-space-5); } .fw-confirm[hidden] { display: none; } .fw-confirm ol { display: grid; gap: var(--fw-space-3); counter-reset: c; } .fw-confirm ol li { counter-increment: c; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fw-space-3); font-size: var(--fw-text-sm); } .fw-confirm ol li::before { content: counter(c, decimal-leading-zero); font-weight: 600; color: var(--fw-olive); } /* -------------------------------------------------------------------------- 18. Footer — deliberately minimal, no clickable links -------------------------------------------------------------------------- */ .fw-footer { background: var(--fw-cream); border-block-start: var(--fw-border) solid var(--fw-line); padding-block: var(--fw-space-8); } .fw-footer__mark { font-family: var(--fw-font-serif); font-size: var(--fw-text-h3); font-weight: 600; letter-spacing: -0.03em; color: var(--fw-ink-900); } .fw-footer__tagline { font-family: var(--fw-font-serif); font-style: italic; font-size: var(--fw-text-lead); color: var(--fw-paprika); margin-block-start: var(--fw-space-2); } .fw-footer__meta { margin-block-start: var(--fw-space-7); padding-block-start: var(--fw-space-5); border-block-start: var(--fw-border) solid var(--fw-line-soft); display: grid; gap: var(--fw-space-4); } .fw-footer__notes { display: grid; gap: var(--fw-space-2); max-inline-size: 72ch; } /* -------------------------------------------------------------------------- 19. Scroll reveal + reduced motion -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--fw-dur-slow) var(--fw-ease-out), transform var(--fw-dur-slow) var(--fw-ease-out); } [data-reveal].is-in { opacity: 1; transform: none; } .no-js [data-reveal] { opacity: 1; transform: none; } /* The ROI estimator is interactive-only — hide it rather than ship it broken */ .no-js [data-requires-js] { display: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } }