/* ========================================================================== C4G — Capital for Growth Design system. Institutional fintech, IQD-native. Managed by INNOVEST Middle East | Iraq Venture Partners Direction handling: this stylesheet uses CSS logical properties (margin-inline, padding-inline, inset-inline, border-inline) everywhere that direction matters. Setting mirrors the entire layout with no second stylesheet and no overrides. Do not reintroduce left/right physical properties. ========================================================================== */ /* --- 1. Tokens ---------------------------------------------------------- */ :root { /* Brand — navy carries authority (regulated lender), teal carries action */ --navy-900: #071829; --navy-800: #0B2540; --navy-700: #123457; --navy-600: #1B4571; --teal-700: #0A5C59; --teal-600: #0E7370; --teal-500: #14908B; --teal-050: #E8F4F3; --green-600: #167A4E; --green-050: #E9F5EF; --amber-700: #8A5A08; --amber-050: #FDF6E7; --red-600: #B3261E; --red-050: #FCEDEB; /* Ink + surface */ --ink-900: #0C1B2A; --ink-800: #1E3243; --ink-700: #33475B; --ink-600: #4C6072; --ink-500: #67798C; --ink-400: #8C9CAC; --ink-300: #B4C0CC; --line: #E1E8EF; --line-strong: #CBD6E1; --surface: #FFFFFF; --surface-soft: #F5F8FB; --surface-softer: #FAFCFD; /* Type */ --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-ar: "IBM Plex Sans Arabic", "Cairo", "Segoe UI", Tahoma, sans-serif; --font-num: "Inter", system-ui, sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.375rem; --fs-4xl: 3rem; /* Space + shape */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 88px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; --shadow-xs: 0 1px 2px rgba(11, 37, 64, 0.06); --shadow-sm: 0 1px 3px rgba(11, 37, 64, 0.08), 0 1px 2px rgba(11, 37, 64, 0.04); --shadow-md: 0 8px 24px -14px rgba(11, 37, 64, 0.22), 0 2px 6px rgba(11, 37, 64, 0.05); --shadow-lg: 0 22px 48px -24px rgba(11, 37, 64, 0.32); --container: 1200px; --header-h: 72px; --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* --- 2. Reset ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.6; color: var(--ink-700); background: var(--surface); -webkit-font-smoothing: antialiased; } html[dir="rtl"] body { font-family: var(--font-ar); } img, svg { max-width: 100%; display: block; } h1, h2, h3, h4 { color: var(--ink-900); font-weight: 650; line-height: 1.22; margin: 0 0 var(--sp-3); letter-spacing: -0.015em; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { letter-spacing: 0; } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-md); } p { margin: 0 0 var(--sp-3); } a { color: var(--teal-600); text-decoration: none; } a:hover { text-decoration: underline; } ul { margin: 0 0 var(--sp-3); padding-inline-start: 1.15rem; } li { margin-bottom: var(--sp-1); } button { font: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; border-radius: 3px; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-block-start: -60px; inset-inline-start: var(--sp-4); z-index: 300; background: var(--navy-800); color: #fff; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); transition: inset-block-start 0.2s var(--ease); } .skip-link:focus { inset-block-start: var(--sp-3); } /* Numerals stay Latin and LTR even inside RTL text — IQD figures must not flip */ .num, .calc-out__value, .stat__value { font-family: var(--font-num); direction: ltr; unicode-bidi: embed; font-variant-numeric: tabular-nums; } /* --- 3. Layout ---------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); } .section { padding-block: var(--sp-9); } .section--tight { padding-block: var(--sp-7); } .section--soft { background: var(--surface-soft); } .section--navy { background: var(--navy-800); color: #C9D8E6; } .section--navy h2, .section--navy h3 { color: #fff; } .section--line { border-block-start: 1px solid var(--line); } .section-head { max-width: 760px; margin-bottom: var(--sp-6); } .section-head--center { margin-inline: auto; text-align: center; } .section-head p { color: var(--ink-600); font-size: var(--fs-md); margin: 0; } .eyebrow { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--teal-600); margin-bottom: var(--sp-2); } html[dir="rtl"] .eyebrow { letter-spacing: 0; } .grid { display: grid; gap: var(--sp-4); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid--sidebar { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-7); align-items: start; } /* --- 4. Buttons -------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 12px 24px; border-radius: var(--r-pill); border: 1px solid transparent; font-size: var(--fs-base); font-weight: 600; text-decoration: none; transition: background 0.16s var(--ease), border-color 0.16s var(--ease), transform 0.16s var(--ease), box-shadow 0.16s var(--ease); white-space: nowrap; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--teal-600); color: #fff; box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--teal-700); box-shadow: var(--shadow-md); } .btn--navy { background: var(--navy-800); color: #fff; } .btn--navy:hover { background: var(--navy-900); } .btn--outline { background: transparent; color: var(--navy-800); border-color: var(--line-strong); } .btn--outline:hover { border-color: var(--navy-700); background: var(--surface-soft); } .btn--ghost-light { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.34); } .btn--ghost-light:hover { background: rgba(255,255,255,0.16); } .btn--white { background: #fff; color: var(--navy-800); } .btn--white:hover { background: #EEF3F8; } .btn--sm { padding: 9px 18px; font-size: var(--fs-sm); } .btn--lg { padding: 16px 34px; font-size: var(--fs-md); } .btn--xl { padding: 19px 44px; font-size: 1.125rem; } .btn--block { width: 100%; } .btn__arrow { transition: transform 0.16s var(--ease); } .btn:hover .btn__arrow { transform: translateX(3px); } html[dir="rtl"] .btn__arrow { transform: scaleX(-1); } html[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(3px); } .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .link-arrow { font-weight: 600; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 6px; } .link-arrow::after { content: "\2192"; transition: transform 0.16s var(--ease); } html[dir="rtl"] .link-arrow::after { content: "\2190"; } .link-arrow:hover { text-decoration: none; } .link-arrow:hover::after { transform: translateX(3px); } html[dir="rtl"] .link-arrow:hover::after { transform: translateX(-3px); } /* --- 5. Header --------------------------------------------------------- */ .header { position: sticky; inset-block-start: 0; z-index: 200; background: rgba(255,255,255,0.94); backdrop-filter: saturate(1.4) blur(10px); border-block-end: 1px solid var(--line); } .header__bar { display: flex; align-items: center; gap: var(--sp-5); height: var(--header-h); } .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .brand:hover { text-decoration: none; } .brand__mark { width: 34px; height: 34px; flex-shrink: 0; } .brand__text { display: flex; flex-direction: column; line-height: 1.1; } .brand__name { font-size: 1.0625rem; font-weight: 750; color: var(--navy-800); letter-spacing: -0.02em; } .brand__sub { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-400); } html[dir="rtl"] .brand__sub { letter-spacing: 0; } .nav { display: flex; align-items: center; gap: 2px; margin-inline-end: auto; } .nav__item { position: relative; } .nav__link { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs-base); font-weight: 550; color: var(--ink-800); background: none; border: 0; } .nav__link:hover { background: var(--surface-soft); color: var(--navy-800); text-decoration: none; } .nav__link[aria-expanded="true"] { background: var(--surface-soft); } .nav__caret { width: 9px; height: 9px; opacity: 0.55; transition: transform 0.16s var(--ease); } .nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); } .nav__panel { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; min-width: 268px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--sp-2); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.14s var(--ease), transform 0.14s var(--ease), visibility 0.14s; } .nav__item--open .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); } .nav__panel a { display: block; padding: 9px 12px; border-radius: var(--r-sm); color: var(--ink-800); font-size: var(--fs-base); font-weight: 550; } .nav__panel a:hover { background: var(--teal-050); color: var(--teal-700); text-decoration: none; } .nav__panel a span { display: block; font-size: var(--fs-xs); font-weight: 450; color: var(--ink-500); margin-top: 1px; } .nav__panel a:hover span { color: var(--teal-600); } .nav__panel-sep { height: 1px; background: var(--line); margin: var(--sp-2) var(--sp-2); } .header__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; } .lang { position: relative; } .lang__btn { display: flex; align-items: center; gap: 6px; padding: 8px 11px; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); } .lang__btn:hover { border-color: var(--line-strong); background: var(--surface-soft); } .lang__panel { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; min-width: 172px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--sp-2); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.14s var(--ease), transform 0.14s var(--ease), visibility 0.14s; } .lang--open .lang__panel { opacity: 1; visibility: visible; transform: translateY(0); } .lang__opt { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 11px; border: 0; background: none; border-radius: var(--r-sm); font-size: var(--fs-base); color: var(--ink-800); text-align: start; } .lang__opt:hover { background: var(--teal-050); } .lang__opt[aria-current="true"] { color: var(--teal-700); font-weight: 650; } .lang__opt[aria-current="true"]::after { content: "\2713"; } .lang__opt small { color: var(--ink-400); font-size: var(--fs-xs); } .burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); } .burger span { display: block; width: 17px; height: 1.5px; background: var(--navy-800); position: relative; } .burger span::before, .burger span::after { content: ""; position: absolute; inset-inline: 0; height: 1.5px; background: var(--navy-800); } .burger span::before { inset-block-start: -5px; } .burger span::after { inset-block-start: 5px; } .mobile-nav { display: none; border-block-start: 1px solid var(--line); background: #fff; max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .mobile-nav.is-open { display: block; } .mobile-nav__group { border-block-end: 1px solid var(--line); padding-block: var(--sp-2); } .mobile-nav__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); padding: var(--sp-2) 0; } .mobile-nav a { display: block; padding: 9px 0; color: var(--ink-800); font-weight: 550; } .mobile-nav__cta { padding-block: var(--sp-4); display: grid; gap: var(--sp-2); } /* --- 6. Hero ----------------------------------------------------------- */ /* Type-led and centred. No illustration — the words carry the page. */ .hero { background: radial-gradient(900px 480px at 50% -8%, rgba(20,144,139,0.26), transparent 64%), radial-gradient(1200px 700px at 50% 40%, rgba(18,53,87,0.55), transparent 70%), linear-gradient(180deg, #050F1B 0%, var(--navy-900) 55%, #04101C 100%); color: #C9D8E6; padding-block: 108px 92px; overflow: hidden; text-align: center; } .hero__inner { max-width: 1000px; margin-inline: auto; } .hero__badge { display: inline-flex; align-items: center; gap: 10px; padding: 11px 24px; border: 1px solid rgba(255,255,255,0.24); background: rgba(255,255,255,0.06); border-radius: var(--r-pill); font-size: 1.0625rem; font-weight: 600; color: #EAF3FA; margin-bottom: var(--sp-6); letter-spacing: -0.01em; } html[dir="rtl"] .hero__badge { letter-spacing: 0; } .hero__badge .dot { width: 9px; height: 9px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 4px rgba(52,211,153,0.20); } .hero h1 { font-size: clamp(2.75rem, 7vw, 5rem); line-height: 1.04; letter-spacing: -0.035em; margin-bottom: var(--sp-5); background: linear-gradient(178deg, #FFFFFF 26%, #93AABF 96%); -webkit-background-clip: text; background-clip: text; color: transparent; } html[dir="rtl"] .hero h1 { letter-spacing: 0; line-height: 1.25; } .hero__sub { font-size: clamp(1.0625rem, 1.7vw, 1.375rem); color: #9FB6C9; font-weight: 450; max-width: 46ch; margin-inline: auto; margin-bottom: var(--sp-7); } .hero .btn-row { justify-content: center; } .hero__proof { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-6); margin-block: var(--sp-8) 0; padding-block-start: var(--sp-6); border-block-start: 1px solid rgba(255,255,255,0.10); list-style: none; padding-inline-start: 0; } .hero__proof li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); color: #B8CCDD; margin: 0; font-weight: 500; } .hero__proof svg { flex-shrink: 0; color: #34D399; } .hero__foot { margin-block-start: var(--sp-7); } .hero__foot-label { font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: #5E7A92; } html[dir="rtl"] .hero__foot-label { letter-spacing: 0; } /* Assessment panel — now used beside the calculator, not in the hero. */ .hero__panel { background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-lg); backdrop-filter: blur(6px); } .hero__panel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); } .hero__panel-title { font-size: var(--fs-sm); font-weight: 650; color: #E4EEF6; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 650; } .chip--green { background: rgba(52,211,153,0.16); color: #6EE7B7; } .chip--teal { background: var(--teal-050); color: var(--teal-700); } .chip--amber { background: var(--amber-050); color: var(--amber-700); } .chip--grey { background: var(--surface-soft); color: var(--ink-600); } .hero__bars { display: flex; align-items: flex-end; gap: 7px; height: 108px; margin-bottom: var(--sp-4); } .hero__bar { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, rgba(20,144,139,0.95), rgba(20,144,139,0.34)); } .hero__bar--hi { background: linear-gradient(180deg, #34D399, rgba(52,211,153,0.34)); } .hero__rows { display: grid; gap: 1px; background: rgba(255,255,255,0.10); border-radius: var(--r-sm); overflow: hidden; } .hero__row { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; background: rgba(7,24,41,0.55); font-size: var(--fs-sm); } .hero__row span:first-child { color: #92AABF; } .hero__row span:last-child { color: #fff; font-weight: 600; } /* --- 7. Cards ---------------------------------------------------------- */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--shadow-xs); transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease), transform 0.16s var(--ease); display: flex; flex-direction: column; } a.card:hover, .card--link:hover { border-color: var(--teal-500); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; } .card--flat { box-shadow: none; } .card--pad-sm { padding: var(--sp-4); } .card h3 { margin-bottom: var(--sp-2); } .card p { color: var(--ink-600); font-size: var(--fs-base); } .card p:last-of-type { margin-bottom: var(--sp-4); } .card__foot { margin-block-start: auto; } .card__icon { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--teal-050); color: var(--teal-700); margin-bottom: var(--sp-4); flex-shrink: 0; } .card__icon--navy { background: #EAF0F6; color: var(--navy-700); } .card__meta { font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-400); margin-bottom: var(--sp-2); } html[dir="rtl"] .card__meta { letter-spacing: 0; } .card__best { font-size: var(--fs-sm); color: var(--ink-500); border-block-start: 1px solid var(--line); padding-block-start: var(--sp-3); margin-block: 0 var(--sp-4); } .card__best strong { color: var(--ink-700); font-weight: 600; } /* Compact step cards — sitemap 10 asks for lower height than previous version */ .steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); } .step { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); position: relative; } .step__n { width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--navy-800); color: #fff; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; margin-bottom: 10px; font-family: var(--font-num); } .step h3 { font-size: var(--fs-base); margin-bottom: 4px; } .step p { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; } .mini { display: flex; gap: var(--sp-3); align-items: flex-start; } .mini__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-500); margin-block-start: 9px; flex-shrink: 0; } .mini h3 { font-size: var(--fs-base); margin-bottom: 2px; } .mini p { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; } /* --- 8. Calculator ----------------------------------------------------- */ .calc { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-md); overflow: hidden; } .calc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); } .calc__inputs { padding: var(--sp-6); } .calc__results { padding: var(--sp-6); background: var(--navy-800); color: #B8CCDD; display: flex; flex-direction: column; } .calc__legend { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); margin-bottom: var(--sp-4); } html[dir="rtl"] .calc__legend { letter-spacing: 0; } .calc__results .calc__legend { color: #7E97AC; } .field { margin-bottom: var(--sp-4); } .field__label { display: block; font-size: var(--fs-sm); font-weight: 650; color: var(--ink-800); margin-bottom: 5px; } .field__hint { font-size: var(--fs-xs); color: var(--ink-500); margin-block: 0 6px; } .field__opt { font-weight: 450; color: var(--ink-400); } .input, .select, .textarea { width: 100%; padding: 11px 13px; font: inherit; font-size: var(--fs-base); color: var(--ink-900); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-sm); transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(20,144,139,0.14); } .input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--red-600); } .textarea { min-height: 110px; resize: vertical; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2367798C' d='M6 8 0 1.4 1.4 0 6 4.6 10.6 0 12 1.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-inline-end: 36px; } html[dir="rtl"] .select { background-position: left 13px center; padding-inline-end: 13px; padding-inline-start: 36px; } .input-affix { position: relative; } .input-affix__unit { position: absolute; inset-inline-end: 13px; inset-block-start: 50%; transform: translateY(-50%); font-size: var(--fs-sm); font-weight: 650; color: var(--ink-400); pointer-events: none; } .input-affix .input { padding-inline-end: 52px; } .field__error { display: none; font-size: var(--fs-xs); color: var(--red-600); margin-block-start: 5px; font-weight: 550; } .field.is-invalid .field__error { display: block; } .calc__out { border-block-end: 1px solid rgba(255,255,255,0.12); padding-block: var(--sp-4); } .calc__out:first-of-type { padding-block-start: 0; } .calc__out--hero { border: 0; padding-block-end: var(--sp-3); } .calc-out__label { font-size: var(--fs-sm); color: #92AABF; margin-bottom: 4px; } .calc-out__value { font-size: var(--fs-2xl); font-weight: 700; color: #fff; letter-spacing: -0.02em; } .calc-out__value--sm { font-size: var(--fs-lg); } .calc-out__unit { font-size: var(--fs-sm); font-weight: 600; color: #7E97AC; margin-inline-start: 5px; } .calc__capped { font-size: var(--fs-xs); color: #F0C674; margin-block-start: 6px; } .calc__cta { margin-block-start: auto; padding-block-start: var(--sp-5); display: grid; gap: var(--sp-2); } .calc__disclaimer { font-size: var(--fs-xs); color: #7E97AC; line-height: 1.5; border-block-start: 1px solid rgba(255,255,255,0.12); padding-block-start: var(--sp-3); margin-block-start: var(--sp-4); } .calc__empty { color: #7E97AC; font-size: var(--fs-sm); } /* --- 9. Comparison table ---------------------------------------------- */ .cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); } .cmp th, .cmp td { padding: var(--sp-4); text-align: start; vertical-align: top; border-block-end: 1px solid var(--line); } .cmp thead th { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-500); border-block-end: 1px solid var(--line-strong); } .cmp tbody th { font-weight: 600; color: var(--ink-800); width: 20%; background: var(--surface-softer); } .cmp td { color: var(--ink-600); } .cmp .is-c4g { background: var(--teal-050); } .cmp thead .is-c4g { color: var(--teal-700); font-size: var(--fs-md); font-weight: 750; border-block-end: 2px solid var(--teal-600); } .cmp tbody .is-c4g { color: var(--ink-800); } .cmp tr:last-child th, .cmp tr:last-child td { border-block-end: 0; } .cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; -webkit-overflow-scrolling: touch; } /* --- 10. Logo grid ---------------------------------------------------- */ .logos { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--sp-3); } .logo-tile { display: grid; place-items: center; height: 76px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-base); font-weight: 700; color: var(--ink-400); letter-spacing: 0.02em; transition: color 0.16s var(--ease), border-color 0.16s var(--ease); } .logo-tile:hover { color: var(--navy-700); border-color: var(--line-strong); } .logo-tile small { display: block; font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-300); text-align: center; margin-top: 3px; } /* --- 11. Notices ------------------------------------------------------ */ .notice { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.55; border: 1px solid; } .notice svg { flex-shrink: 0; margin-block-start: 2px; } .notice--info { background: var(--surface-soft); border-color: var(--line); color: var(--ink-600); } .notice--warn { background: var(--amber-050); border-color: #EFD9A6; color: var(--amber-700); } .notice--legal { background: var(--surface-soft); border-color: var(--line); color: var(--ink-500); font-size: var(--fs-xs); } .notice strong { color: inherit; font-weight: 700; } /* --- 12. Accordion (FAQ) ---------------------------------------------- */ .acc { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; overflow: hidden; } .acc__item { border-block-end: 1px solid var(--line); } .acc__item:last-child { border-block-end: 0; } .acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: none; border: 0; text-align: start; font-size: var(--fs-md); font-weight: 600; color: var(--ink-900); } .acc__btn:hover { background: var(--surface-softer); } .acc__sign { width: 20px; height: 20px; flex-shrink: 0; position: relative; } .acc__sign::before, .acc__sign::after { content: ""; position: absolute; background: var(--teal-600); border-radius: 1px; } .acc__sign::before { inset-inline: 2px; inset-block-start: 9px; height: 2px; } .acc__sign::after { inset-block: 2px; inset-inline-start: 9px; width: 2px; transition: transform 0.18s var(--ease); } .acc__btn[aria-expanded="true"] .acc__sign::after { transform: scaleY(0); } .acc__panel { padding: 0 var(--sp-5) var(--sp-5); color: var(--ink-600); max-width: 78ch; } .acc__panel p:last-child { margin-bottom: 0; } /* --- 13. CTA banner --------------------------------------------------- */ .cta-banner { background: radial-gradient(760px 340px at 88% 10%, rgba(20,144,139,0.30), transparent 60%), linear-gradient(120deg, var(--navy-900), var(--navy-700)); border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-7); color: #C9D8E6; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; } .cta-banner h2 { color: #fff; margin-bottom: var(--sp-2); } .cta-banner p { color: #AFC4D6; margin: 0; max-width: 62ch; } .cta-banner__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; flex-shrink: 0; } /* --- 14. Page header (inner pages) ----------------------------------- */ .page-hero { background: linear-gradient(180deg, var(--surface-soft), #fff); border-block-end: 1px solid var(--line); padding-block: var(--sp-7) var(--sp-8); } .page-hero--navy { background: radial-gradient(900px 420px at 84% -10%, rgba(20,144,139,0.22), transparent 60%), linear-gradient(160deg, var(--navy-900), var(--navy-700)); border: 0; color: #B8CCDD; } .page-hero--navy h1 { color: #fff; } .page-hero--navy .page-hero__lead { color: #AFC4D6; } .page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--sp-7); align-items: center; } .page-hero__lead { font-size: var(--fs-md); color: var(--ink-600); max-width: 62ch; margin-bottom: var(--sp-5); } .crumbs { display: flex; flex-wrap: wrap; gap: 7px; font-size: var(--fs-sm); color: var(--ink-400); margin-bottom: var(--sp-3); } .crumbs a { color: var(--ink-500); } .crumbs span::after { content: "/"; margin-inline-start: 7px; color: var(--ink-300); } .page-hero--navy .crumbs, .page-hero--navy .crumbs a { color: #7E97AC; } /* --- 15. Prose + spec blocks ----------------------------------------- */ .prose { max-width: 74ch; } .prose h2 { font-size: var(--fs-xl); margin-block-start: var(--sp-6); } .prose h3 { margin-block-start: var(--sp-5); } .prose > *:first-child { margin-block-start: 0; } .prose ul li { margin-bottom: 6px; color: var(--ink-600); } .deflist { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .deflist__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); background: #fff; } .deflist__k { padding: var(--sp-4); font-weight: 600; color: var(--ink-800); background: var(--surface-softer); font-size: var(--fs-sm); } .deflist__v { padding: var(--sp-4); color: var(--ink-600); } .deflist__v ul { margin: 0; } .deflist__v p:last-child { margin-bottom: 0; } .tick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .tick-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-base); color: var(--ink-700); margin: 0; } .tick-list svg { flex-shrink: 0; margin-block-start: 3px; color: var(--teal-600); } .stat { text-align: start; } .stat__value { font-size: var(--fs-2xl); font-weight: 750; color: var(--navy-800); letter-spacing: -0.02em; } .stat__label { font-size: var(--fs-sm); color: var(--ink-500); } /* --- 16. Stepper form (Get Funded) ----------------------------------- */ .stepper { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-6); flex-wrap: wrap; } .stepper__item { flex: 1 1 90px; min-width: 0; } .stepper__bar { height: 3px; border-radius: 2px; background: var(--line); margin-bottom: 7px; transition: background 0.2s var(--ease); } .stepper__item.is-done .stepper__bar { background: var(--green-600); } .stepper__item.is-current .stepper__bar { background: var(--teal-600); } .stepper__label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stepper__item.is-current .stepper__label { color: var(--teal-700); } .stepper__item.is-done .stepper__label { color: var(--ink-600); } .form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: var(--sp-6); } .form-step { display: none; } .form-step.is-active { display: block; } .form-step__n { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-600); margin-bottom: 6px; } html[dir="rtl"] .form-step__n { letter-spacing: 0; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-4); } .form-grid--1 { grid-template-columns: 1fr; } .form-actions { display: flex; justify-content: space-between; gap: var(--sp-3); margin-block-start: var(--sp-6); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--line); } .check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-700); padding: 10px 0; } .check input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--teal-600); flex-shrink: 0; } .check-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px var(--sp-4); } .upload { border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); padding: var(--sp-5); text-align: center; background: var(--surface-softer); } .upload:hover { border-color: var(--teal-500); background: var(--teal-050); } .upload__title { font-weight: 650; color: var(--ink-800); font-size: var(--fs-base); } .upload__hint { font-size: var(--fs-xs); color: var(--ink-500); margin-block-start: 4px; } .doc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-block-end: 1px solid var(--line); } .doc-row:last-child { border-block-end: 0; } .doc-row__name { font-size: var(--fs-base); font-weight: 550; color: var(--ink-800); } .doc-row__meta { font-size: var(--fs-xs); color: var(--ink-500); } .review-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 10px 0; border-block-end: 1px dashed var(--line); font-size: var(--fs-base); } .review-row dt { color: var(--ink-500); } .review-row dd { margin: 0; color: var(--ink-900); font-weight: 600; text-align: end; } .success-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--green-050); color: var(--green-600); display: grid; place-items: center; margin-bottom: var(--sp-4); } /* --- 17. Footer ------------------------------------------------------- */ .footer { background: var(--navy-900); color: #90A8BD; padding-block: var(--sp-8) var(--sp-5); font-size: var(--fs-sm); } .footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: var(--sp-6); padding-block-end: var(--sp-6); border-block-end: 1px solid rgba(255,255,255,0.09); } .footer__brand .brand__name { color: #fff; } .footer__brand .brand__sub { color: #6F8AA1; } .footer__blurb { margin-block: var(--sp-4) var(--sp-4); max-width: 40ch; color: #90A8BD; } .footer h4 { color: #fff; font-size: var(--fs-sm); font-weight: 650; margin-bottom: var(--sp-3); } .footer ul { list-style: none; padding: 0; margin: 0; } .footer li { margin-bottom: 9px; } .footer a { color: #90A8BD; } .footer a:hover { color: #fff; text-decoration: none; } .footer__bottom { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding-block-start: var(--sp-5); font-size: var(--fs-xs); color: #6F8AA1; } .footer__legal-links { display: flex; gap: var(--sp-4); flex-wrap: wrap; } .footer__disclaimer { border-block-start: 1px solid rgba(255,255,255,0.09); margin-block-start: var(--sp-5); padding-block-start: var(--sp-4); font-size: var(--fs-xs); color: #6F8AA1; line-height: 1.6; max-width: 100ch; } /* --- 18. Utilities ---------------------------------------------------- */ .mt-0 { margin-block-start: 0; } .mt-3 { margin-block-start: var(--sp-3); } .mt-4 { margin-block-start: var(--sp-4); } .mt-5 { margin-block-start: var(--sp-5); } .mt-6 { margin-block-start: var(--sp-6); } .mb-0 { margin-block-end: 0; } .mb-4 { margin-block-end: var(--sp-4); } .mb-5 { margin-block-end: var(--sp-5); } .mb-6 { margin-block-end: var(--sp-6); } .text-center { text-align: center; } .text-sm { font-size: var(--fs-sm); } .text-muted { color: var(--ink-500); } .flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } /* --- 20. Display headings --------------------------------------------- */ /* Bigger, fewer words. Section titles carry the page instead of paragraphs. */ .section-head h2, .display { font-size: clamp(1.875rem, 3.6vw, 3rem); letter-spacing: -0.03em; line-height: 1.1; } html[dir="rtl"] .section-head h2, html[dir="rtl"] .display { letter-spacing: 0; line-height: 1.3; } .section-head { margin-bottom: var(--sp-7); } .section-head p { font-size: 1.125rem; } .section--navy .section-head p { color: #9FB6C9; } /* --- 21. Visual panel (beside the calculator) ------------------------- */ .visual-panel { background: linear-gradient(165deg, var(--navy-800), #07192B); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,0.09); } .visual-panel .hero__panel { background: none; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; } .visual-stack { display: grid; gap: var(--sp-4); align-content: start; } /* --- 22. Animated flow infographic ------------------------------------ */ .flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); position: relative; align-items: stretch; } .flow__node { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-4); text-align: center; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; } .section--navy .flow__node { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.13); } .flow__ring { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-050); color: var(--teal-700); margin-bottom: var(--sp-3); position: relative; flex-shrink: 0; } .section--navy .flow__ring { background: rgba(20,144,139,0.20); color: #6EE7B7; } .flow__ring::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: flowPulse 3.2s var(--ease) infinite; } .flow__node:nth-child(1) .flow__ring::after { animation-delay: 0s; } .flow__node:nth-child(2) .flow__ring::after { animation-delay: 0.8s; } .flow__node:nth-child(3) .flow__ring::after { animation-delay: 1.6s; } .flow__node:nth-child(4) .flow__ring::after { animation-delay: 2.4s; } @keyframes flowPulse { 0% { transform: scale(0.82); opacity: 0; } 22% { opacity: 0.55; } 55% { transform: scale(1.18); opacity: 0; } 100% { transform: scale(1.18); opacity: 0; } } .flow__step { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 6px; } html[dir="rtl"] .flow__step { letter-spacing: 0; } .section--navy .flow__step { color: #6F8AA1; } .flow__node h3 { font-size: 1.125rem; margin-bottom: 6px; } .flow__node p { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; } .section--navy .flow__node p { color: #92AABF; } /* Connector rail with a travelling pulse. Sits behind the nodes. */ .flow__rail { position: absolute; inset-inline: 12%; inset-block-start: 55px; height: 2px; background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent); z-index: 1; overflow: hidden; } .section--navy .flow__rail { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16) 12%, rgba(255,255,255,0.16) 88%, transparent); } .flow__pulse { position: absolute; inset-block: -3px; width: 74px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--teal-500), transparent); animation: flowTravel 3.2s linear infinite; } .flow__pulse:nth-of-type(2) { animation-delay: 1.6s; } @keyframes flowTravel { from { inset-inline-start: -74px; } to { inset-inline-start: 100%; } } html[dir="rtl"] .flow__pulse { animation-name: flowTravelRtl; } @keyframes flowTravelRtl { from { inset-inline-start: -74px; } to { inset-inline-start: 100%; } } /* --- 23. Logo marquee + brand tiles ----------------------------------- */ .marquee { overflow: hidden; position: relative; padding-block: var(--sp-2); } .marquee::before, .marquee::after { content: ""; position: absolute; inset-block: 0; width: 90px; z-index: 2; pointer-events: none; } .marquee::before { inset-inline-start: 0; background: linear-gradient(90deg, var(--surface-soft), transparent); } .marquee::after { inset-inline-end: 0; background: linear-gradient(270deg, var(--surface-soft), transparent); } .marquee--navy::before { background: linear-gradient(90deg, var(--navy-800), transparent); } .marquee--navy::after { background: linear-gradient(270deg, var(--navy-800), transparent); } .marquee__track { display: flex; gap: var(--sp-3); width: max-content; animation: marquee 34s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } html[dir="rtl"] .marquee__track { animation-name: marqueeRtl; } @keyframes marqueeRtl { from { transform: translateX(0); } to { transform: translateX(50%); } } .brand-tile { display: grid; place-items: center; min-width: 178px; height: 86px; padding: 0 var(--sp-4); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease); flex-shrink: 0; } .brand-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .brand-tile__name { font-size: 1.125rem; font-weight: 750; letter-spacing: -0.02em; white-space: nowrap; direction: ltr; } html[dir="rtl"] .brand-tile__name { letter-spacing: 0; } .brand-tile__cat { font-size: 0.625rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-300); margin-top: 3px; text-align: center; } .brand-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--sp-3); } .brand-grid .brand-tile { min-width: 0; width: 100%; } /* --- 24. Big category strip ------------------------------------------- */ .cats { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .cat { background: #fff; padding: var(--sp-6) var(--sp-4); text-align: center; transition: background 0.16s var(--ease); } .cat:hover { background: var(--teal-050); } .cat__ico { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--teal-050); color: var(--teal-700); margin: 0 auto var(--sp-4); } .cat:hover .cat__ico { background: #fff; } .cat h3 { font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 6px; } html[dir="rtl"] .cat h3 { letter-spacing: 0; } .cat p { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; } /* --- 25. Inner page heroes -------------------------------------------- */ .page-hero--navy { background: radial-gradient(760px 400px at 50% -10%, rgba(20,144,139,0.26), transparent 62%), linear-gradient(180deg, #061423 0%, var(--navy-900) 60%, #04101C 100%); border: 0; color: #9FB6C9; padding-block: 84px 76px; text-align: center; } .page-hero--navy .container > * { margin-inline: auto; } .page-hero--navy .crumbs { justify-content: center; } .page-hero--navy h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.06; letter-spacing: -0.033em; background: linear-gradient(178deg, #FFFFFF 28%, #92A9BE 98%); -webkit-background-clip: text; background-clip: text; color: transparent; max-width: 18ch; } html[dir="rtl"] .page-hero--navy h1 { letter-spacing: 0; line-height: 1.28; } .page-hero--navy .page-hero__lead { font-size: clamp(1rem, 1.5vw, 1.25rem); color: #9FB6C9; max-width: 52ch; margin-bottom: var(--sp-6); } .page-hero--navy .btn-row { justify-content: center; } .page-hero__eyebrow { display: inline-block; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6EE7B7; margin-bottom: var(--sp-4); } html[dir="rtl"] .page-hero__eyebrow { letter-spacing: 0; } /* --- 26. Stat strip ---------------------------------------------------- */ .stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,0.12); border-radius: var(--r-lg); overflow: hidden; margin-block-start: var(--sp-8); } .stat-strip__item { background: rgba(7,24,41,0.72); padding: var(--sp-5) var(--sp-4); text-align: center; } .stat-strip__v { font-size: 1.75rem; font-weight: 750; color: #fff; letter-spacing: -0.025em; font-family: var(--font-num); direction: ltr; } .stat-strip__l { font-size: var(--fs-sm); color: #7E97AC; margin-top: 3px; } .stat-strip--light { background: var(--line); margin-block-start: 0; } .stat-strip--light .stat-strip__item { background: #fff; } .stat-strip--light .stat-strip__v { color: var(--navy-800); } .stat-strip--light .stat-strip__l { color: var(--ink-500); } /* --- 27. Split feature block ------------------------------------------ */ .split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-8); align-items: center; } .split--wide-start { grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); } .split__title { font-size: clamp(1.5rem, 2.8vw, 2.25rem); letter-spacing: -0.028em; line-height: 1.14; } html[dir="rtl"] .split__title { letter-spacing: 0; line-height: 1.32; } .split__lead { font-size: 1.125rem; color: var(--ink-600); } /* --- 28. Statement / pull quote --------------------------------------- */ .statement { font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.24; letter-spacing: -0.028em; color: var(--ink-900); font-weight: 550; max-width: 22ch; } html[dir="rtl"] .statement { letter-spacing: 0; line-height: 1.5; } .statement em { font-style: normal; color: var(--teal-600); } .section--navy .statement { color: #fff; } .section--navy .statement em { color: #6EE7B7; } /* --- 29. Numbered list block ------------------------------------------ */ .numlist { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .numlist__row { background: #fff; padding: var(--sp-5); display: flex; gap: var(--sp-4); align-items: flex-start; } .numlist__n { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--teal-050); color: var(--teal-700); font-weight: 700; font-size: var(--fs-sm); font-family: var(--font-num); } .numlist h3 { font-size: 1.0625rem; margin-bottom: 3px; } .numlist p { font-size: var(--fs-base); color: var(--ink-500); margin: 0; } /* --- 19. Responsive --------------------------------------------------- */ @media (max-width: 1080px) { .nav { display: none; } .burger { display: flex; } .grid--5 { grid-template-columns: repeat(3, minmax(0,1fr)); } .logos { grid-template-columns: repeat(3, minmax(0,1fr)); } .steps { grid-template-columns: repeat(3, minmax(0,1fr)); } .page-hero__grid, .grid--sidebar { grid-template-columns: 1fr; gap: var(--sp-6); } .calc__grid { grid-template-columns: 1fr; } .cats { grid-template-columns: repeat(2, minmax(0,1fr)); } .brand-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } .flow { grid-template-columns: repeat(2, minmax(0,1fr)); } .flow__rail { display: none; } .split, .split--wide-start { grid-template-columns: 1fr; gap: var(--sp-6); } .stat-strip { grid-template-columns: repeat(2, minmax(0,1fr)); } .deflist__row { grid-template-columns: 1fr; } .deflist__k { border-block-end: 1px solid var(--line); } :root { --fs-4xl: 2.375rem; --fs-3xl: 2rem; } } @media (max-width: 760px) { :root { --fs-4xl: 2rem; --fs-3xl: 1.75rem; --fs-2xl: 1.5rem; --sp-9: 56px; --sp-8: 44px; } .grid--2, .grid--3, .grid--4, .grid--5, .steps, .form-grid, .check-grid { grid-template-columns: 1fr; } .logos { grid-template-columns: repeat(2, minmax(0,1fr)); } .cats, .flow { grid-template-columns: 1fr; } .brand-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .hero { padding-block: 68px 60px; } .hero__proof { gap: var(--sp-2) var(--sp-4); } .hero__proof li { font-size: var(--fs-base); } .btn--xl { padding: 16px 32px; font-size: var(--fs-md); } .container { padding-inline: var(--sp-4); } .calc__inputs, .calc__results, .form-card { padding: var(--sp-4); } .cta-banner { padding: var(--sp-6) var(--sp-5); } .footer__top { grid-template-columns: repeat(2, minmax(0,1fr)); } .header__actions .btn--outline { display: none; } .cmp tbody th { width: auto; min-width: 150px; } .cmp th, .cmp td { min-width: 190px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } @media print { .header, .footer, .cta-banner, .calc__results { break-inside: avoid; } .header { position: static; } }