/* ========================================================= RAIN ENGINE — site.css — static production stylesheet Light premium engineering. No web font for the wordmark (SVG asset is authoritative). IBM Plex Sans/Mono via Google Fonts is loaded from . ========================================================= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: #FFFFFF; color: #0A0B0C; font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } a:hover { color: #1F7A7A; } :root { --teal: #1F7A7A; --ink: #0A0B0C; --ink-2: #3A3D40; --ink-3: #6E7174; --ink-4: #A4A7AA; --bg-soft: #F5F5F4; --bg-fa: #FAFAF9; --rule: rgba(10,11,12,0.10); --rule-strong: rgba(10,11,12,0.16); --dark-bg: #0A0B0C; --dark-ink: #F4F5F6; --dark-rule: rgba(255,255,255,0.10); --container: 1280px; --side: 80px; } .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-feature-settings: "ss01"; } /* ---------- shared chrome ---------- */ .page { display: flex; flex-direction: column; min-height: 100vh; } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--side); } .header { background: #FFFFFF; border-bottom: 1px solid rgba(10,11,12,0.08); position: sticky; top: 0; z-index: 50; } .header-inner { max-width: var(--container); margin: 0 auto; padding: 20px 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .header-logo img { height: 18px; width: auto; } .header-nav { display: flex; gap: 36px; } .header-nav a { font-size: 13px; color: rgba(10,11,12,0.60); padding-bottom: 6px; border-bottom: 1px solid transparent; } .header-nav a.is-active { color: #0A0B0C; font-weight: 500; border-bottom-color: var(--teal); } .header-right { display: flex; gap: 18px; align-items: center; } .lang { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.16em; } .lang .is-active { color: var(--ink); } .lang .sep { margin: 0 6px; color: var(--ink-4); } /* mobile / burger */ .menu-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 0; padding: 0; cursor: pointer; position: relative; z-index: 60; } /* Explicit icon elements — aria-expanded is the single source of truth. */ .menu-icon-open { display: inline-flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; } .menu-icon-open span { display: block; width: 22px; height: 1px; background: var(--ink); } .menu-icon-close { display: none; font-size: 26px; line-height: 1; color: var(--ink); font-weight: 300; } .menu-toggle[aria-expanded="true"] .menu-icon-open { display: none; } .menu-toggle[aria-expanded="true"] .menu-icon-close { display: inline-flex; } /* ---------- mobile menu panel (vanilla JS, no React) ---------- */ .mobile-menu { position: fixed; inset: 0; top: 0; z-index: 55; background: #FFFFFF; display: flex; flex-direction: column; padding: 92px 24px 32px; opacity: 0; pointer-events: none; transition: opacity 200ms ease; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-menu[hidden] { display: none; } .mobile-menu.is-open { opacity: 1; pointer-events: auto; } .mobile-menu ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .mobile-menu li { border-bottom: 1px solid var(--rule); } .mobile-menu li:last-child { border-bottom: 0; } .mobile-menu a { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 18px; color: var(--ink); letter-spacing: -0.005em; } .mobile-menu a.is-active { color: var(--teal); } .mobile-menu a .chev { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-3); } .mobile-menu .legal { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--rule); } .mobile-menu .legal a { font-size: 15px; color: var(--ink-2); padding: 12px 0; } .mobile-menu .mlang { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule); font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-3); letter-spacing: 0.16em; } .mobile-menu .mlang a { color: var(--ink-4); padding: 4px 6px; } .mobile-menu .mlang a.is-active { color: var(--ink); font-weight: 500; } .mobile-menu .mcta { margin-top: 20px; } /* The CTA button must keep its primary white-on-ink contrast — override the generic .mobile-menu a color reset above. */ .mobile-menu .mcta .btn { width: 100%; justify-content: center; padding: 16px 22px; font-size: 14px; } .mobile-menu .mcta .btn--primary, .mobile-menu .mcta .btn--primary:visited, .mobile-menu .mcta .btn--primary:hover { color: #FFFFFF; background: var(--ink); border-color: var(--ink); } .mobile-menu .mcta .btn .arrow { color: #FFFFFF; } @media (min-width: 901px) { .mobile-menu { display: none !important; } } html.is-menu-open, html.is-menu-open body { overflow: hidden; } @media (max-width: 900px) { .header { position: static; } /* non-sticky on mobile so it never covers hero */ .header-inner { padding: 16px 24px; } .header-nav { display: none; } .menu-toggle { display: inline-flex; } .header-right .btn { display: none; } .header-right .lang { display: none; } /* EN | DE only inside the mobile menu */ } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; border: 1px solid transparent; cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .btn--sm { padding: 10px 16px; font-size: 12px; } .btn--primary { background: var(--ink); color: #fff; border-color: var(--ink); } .btn--primary:hover { background: #14171A; color: #fff; } .btn--ghost { background: transparent; color: var(--ink); border-color: rgba(10,11,12,0.25); } .btn--ghost:hover { color: var(--teal); border-color: var(--teal); } .btn--teal { background: var(--teal); color: #fff; border-color: var(--teal); } .btn--teal:hover { background: #14595A; } .btn--dark-ghost { background: transparent; color: var(--dark-ink); border-color: rgba(244,245,246,0.25); } .btn--dark-ghost:hover { color: var(--dark-ink); border-color: var(--dark-ink); } .btn .arrow { font-family: "IBM Plex Mono", monospace; font-size: 12px; } /* ---------- type ---------- */ h1.display, h2.display { font-family: inherit; font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; margin: 0; } .h1 { font-size: 64px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 300; margin: 0; } .h1--xl { font-size: 76px; line-height: 1.04; } .h2 { font-size: 44px; line-height: 1.12; letter-spacing: -0.015em; font-weight: 300; margin: 0; } .h3 { font-size: 24px; font-weight: 400; letter-spacing: -0.005em; margin: 0; } .h4 { font-size: 20px; font-weight: 400; margin: 0; } .body { font-size: 16px; line-height: 1.65; color: var(--ink-2); } .body-l { font-size: 18px; line-height: 1.55; color: var(--ink-2); } .lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 720px; margin: 40px 0 0; } .text { font-size: 15px; line-height: 1.6; color: var(--ink-2); } .meta { font-size: 13px; color: var(--ink-3); } /* ---------- eyebrow + section label ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 14px; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--teal); } .eyebrow span { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--teal); letter-spacing: 0.22em; text-transform: uppercase; } .section-label { display: inline-flex; align-items: center; gap: 14px; } .section-label::before { content: ""; width: 28px; height: 1px; background: var(--teal); } .section-label span { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--teal); letter-spacing: 0.20em; text-transform: uppercase; } /* ---------- hero ---------- */ .hero { background: #FFFFFF; border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; } .hero--home::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(10,11,12,0.04) 1px, transparent 1px); background-size: 213px 100%; background-position: var(--side) 0; opacity: 0.7; } .hero-inner { max-width: var(--container); margin: 0 auto; padding: 110px var(--side) 120px; position: relative; } .hero--inner .hero-inner { padding: 96px var(--side) 88px; } .hero h1 { color: var(--ink); margin: 40px 0 0; max-width: 1100px; } .hero p.lead { margin-top: 32px; } .hero-ctas { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .hero-points { margin-top: 96px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0; border-top: 1px solid var(--rule); } .hero-points > div { padding: 28px 28px 28px 0; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; } .hero-points > div:first-child { padding-left: 0; } .hero-points > div:last-child { padding-left: 28px; border-right: 0; } .hero-points > div:nth-child(2), .hero-points > div:nth-child(3) { padding-left: 28px; } .hero-points .n { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--teal); letter-spacing: 0.18em; text-transform: uppercase; } .hero-points .k { font-size: 18px; color: var(--ink); font-weight: 500; } .hero-points .v { font-size: 13px; color: var(--ink-3); line-height: 1.55; } .hero-trust { margin-top: 28px; padding-top: 18px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-3); font-family: "IBM Plex Mono", monospace; } .hero-trust span { letter-spacing: 0.14em; text-transform: uppercase; } .hero-trust .right { display: inline-flex; align-items: center; gap: 10px; opacity: 0.85; } .hero-trust img { width: 14px; height: 14px; display: inline-block; } .headline-underline { position: relative; white-space: nowrap; } .headline-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--teal); } .t-teal { color: var(--teal); } /* ---------- page sections ---------- */ .section { background: #FFFFFF; border-bottom: 1px solid var(--rule); } .section--soft { background: var(--bg-soft); } .section--dark { background: var(--dark-bg); color: var(--dark-ink); border-bottom-color: rgba(255,255,255,0.08); position: relative; overflow: hidden; } .section-inner { max-width: var(--container); margin: 0 auto; padding: 112px var(--side); position: relative; } .section-grid { display: grid; grid-template-columns: 260px 1fr; gap: 80px; } .section-grid .h2 { max-width: 880px; } .section-grid p { margin-top: 24px; max-width: 760px; font-size: 16px; line-height: 1.65; color: var(--ink-2); } .section--dark .section-grid p { color: rgba(244,245,246,0.72); } .section--dark .h2 { color: var(--dark-ink); } .section-body { margin-top: 0; } .section-body--space { margin-top: 48px; } .section--dark .section-label::before { background: var(--teal); } /* turbine motif in dark sections */ .section--dark .turbine { position: absolute; right: -160px; top: 50%; transform: translateY(-50%); width: 360px; opacity: 0.06; pointer-events: none; } /* ---------- two-col body text ---------- */ .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 40px; } .cols-2 p { margin: 0; } /* ---------- chart / "where the time goes" ---------- */ .chart { margin-top: 72px; } .chart-title { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 16px; } .chart-bar { display: flex; height: 64px; border: 1px solid var(--rule-strong); } .chart-bar > div { display: flex; flex-direction: column; justify-content: space-between; padding: 10px; border-right: 1px solid rgba(10,11,12,0.06); } .chart-bar > div:last-child { border-right: 0; } .chart-bar > div span { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.06em; } .chart-bar .name { color: var(--ink-2); } .chart-bar .pct { color: var(--ink-3); } .chart-bar .is-decision { background: var(--teal); } .chart-bar .is-decision .name, .chart-bar .is-decision .pct { color: #fff; } .chart-legend { display: flex; justify-content: space-between; margin-top: 12px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; } .chart-legend .a { color: var(--ink-3); } .chart-legend .b { color: var(--teal); } /* ---------- three pillars (or four, when standard-aware joins the set) ---------- */ .pillars { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0; border-top: 1px solid var(--rule-strong); } .pillars > div { padding: 32px 24px 32px 0; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 16px; } .pillars > div:first-child { padding-left: 0; } .pillars > div:nth-child(2), .pillars > div:nth-child(3) { padding-left: 24px; } .pillars > div:last-child { padding-left: 24px; border-right: 0; } .pillars .pname { font-size: 26px; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; } .pillars-head { display: flex; align-items: center; justify-content: space-between; } .pillars-head .num { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--teal); letter-spacing: 0.20em; text-transform: uppercase; } .pillars-head .rule { width: 28px; height: 1px; background: var(--teal); } .pillars .pname { font-size: 32px; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; } .pillars .pbody { font-size: 15px; line-height: 1.6; color: var(--ink-2); } .pillars .ops { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; } .pillars .op { display: flex; justify-content: space-between; align-items: center; } .pillars .op .k { font-size: 13px; color: var(--ink); } .pillars .op .tag { font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--ink-3); letter-spacing: 0.14em; text-transform: uppercase; } /* ---------- loop / control ---------- */ .loop-wrap { margin-top: 56px; border: 1px solid var(--rule-strong); padding: 40px; background: var(--bg-fa); } .loop-title { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 28px; } .loop { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr; align-items: center; gap: 0; } .loop .step { padding: 22px 22px 24px; border: 1px solid var(--rule-strong); background: #fff; } .loop .step.is-accent { border-color: var(--teal); background: rgba(31,122,122,0.04); } .loop .step .tag { font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--ink-3); letter-spacing: 0.20em; text-transform: uppercase; margin-bottom: 14px; } .loop .step.is-accent .tag { color: var(--teal); } .loop .step .t { font-size: 22px; color: var(--ink); font-weight: 400; margin-bottom: 10px; } .loop .step .b { font-size: 13px; color: var(--ink-2); line-height: 1.5; } .loop .arrow { display: flex; justify-content: center; color: var(--teal); } .loop-quote { margin-top: 28px; padding: 18px 22px; border-left: 1px solid var(--teal); background: rgba(31,122,122,0.04); font-size: 15px; color: var(--ink); } .loop-quote .slash { color: var(--teal); font-family: "IBM Plex Mono", monospace; } .loop-quote .muted { color: var(--ink-3); } /* ---------- outcome / why-it-matters list ---------- */ .outcomes { margin-top: 48px; border-top: 1px solid var(--rule-strong); } .outcome { display: grid; grid-template-columns: 200px 1fr 80px; padding: 22px 0; align-items: center; border-bottom: 1px solid var(--rule); gap: 32px; } .outcome .k { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--teal); letter-spacing: 0.20em; text-transform: uppercase; } .outcome .v { font-size: 18px; color: var(--ink); } .section--dark .outcome .v { color: var(--dark-ink); } .outcome .t { font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--ink-4); letter-spacing: 0.18em; text-transform: uppercase; text-align: right; } /* ---------- criterion / access cards ---------- */ .criteria { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--rule-strong); gap: 0; } .criteria > div { padding: 28px 32px 0 0; border-right: 1px solid var(--rule); } .section--dark .criteria { border-top-color: rgba(255,255,255,0.16); } .section--dark .criteria > div { border-right-color: rgba(255,255,255,0.10); } .criteria > div:first-child { padding-left: 0; } .criteria > div:nth-child(2) { padding-left: 32px; } .criteria > div:last-child { padding-left: 32px; border-right: 0; } .criteria .tag { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--teal); letter-spacing: 0.20em; text-transform: uppercase; } .criteria .k { font-size: 19px; margin-top: 12px; margin-bottom: 8px; } .section--dark .criteria .k { color: var(--dark-ink); } .criteria .v { font-size: 13px; line-height: 1.55; color: var(--ink-3); } .section--dark .criteria .v { color: rgba(244,245,246,0.60); } /* ---------- generic card grids ---------- */ .cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule-strong); } .cards-2 > div { padding: 32px; } .cards-2 > div:nth-child(odd) { border-right: 1px solid var(--rule-strong); } .cards-2 > div:nth-child(1), .cards-2 > div:nth-child(2) { border-bottom: 1px solid var(--rule-strong); } .cards-2 .tag { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--teal); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 18px; } .cards-2 .k { font-size: 22px; color: var(--ink); font-weight: 400; letter-spacing: -0.005em; margin: 0 0 12px; } .cards-2 .b { font-size: 14px; line-height: 1.6; color: var(--ink-2); } .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule-strong); background: #fff; } .cards-3 > div { padding: 32px; border-right: 1px solid var(--rule-strong); } .cards-3 > div:last-child { border-right: 0; } .cards-3 .tag { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--teal); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 14px; } .cards-3 .k { font-size: 22px; color: var(--ink); font-weight: 400; margin: 0 0 10px; } .cards-3 .b { font-size: 13px; line-height: 1.55; color: var(--ink-2); } .cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule-strong); background: #fff; } .cards-4 > div { padding: 28px; border-right: 1px solid var(--rule-strong); } .cards-4 > div:last-child { border-right: 0; } .cards-4 .tag { font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--ink-3); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 16px; } .cards-4 .tag.is-accent { color: var(--teal); } .cards-4 .k { font-size: 20px; color: var(--ink); font-weight: 400; margin: 0 0 10px; } .cards-4 .b { font-size: 13px; line-height: 1.55; color: var(--ink-2); } /* ---------- form (Access page) ---------- */ .form { background: #FFFFFF; border: 1px solid var(--rule-strong); padding: 40px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .field { display: flex; flex-direction: column; gap: 8px; } .field.full { grid-column: span 2; } .field-label { display: flex; justify-content: space-between; } .field-label label { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink); letter-spacing: 0.18em; text-transform: uppercase; } .field-label .req { color: var(--teal); } .field-label .hint { font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--ink-4); letter-spacing: 0.14em; text-transform: uppercase; } .field input, .field textarea, .field select { width: 100%; border: 1px solid rgba(10,11,12,0.20); padding: 14px 16px; background: #fff; font-family: inherit; font-size: 14px; color: var(--ink); border-radius: 0; -webkit-appearance: none; appearance: none; } .field textarea { min-height: 120px; resize: vertical; line-height: 1.55; } .field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--teal); outline-offset: 2px; border-color: var(--teal); } .form-footer { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .consent { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2); } .consent input { width: 16px; height: 16px; accent-color: var(--teal); } /* ---------- note block (subtle teal-rule callout) ---------- */ .note-block { margin-top: 28px; padding: 18px 22px; border-left: 1px solid var(--teal); background: rgba(31,122,122,0.04); font-size: 14px; color: var(--ink); line-height: 1.55; max-width: 820px; } .note-block .slash { color: var(--teal); font-family: "IBM Plex Mono", monospace; } /* ---------- contact cards (v0.4 — differentiated channels) ---------- */ .contact-cards { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule-strong); } .contact-cards .channel { padding: 40px; display: flex; flex-direction: column; gap: 14px; } .contact-cards .channel:first-child { border-right: 1px solid var(--rule-strong); background: rgba(31,122,122,0.04); } .contact-cards .tag { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); } .contact-cards .tag.is-accent { color: var(--teal); } .contact-cards .k { font-size: 24px; color: var(--ink); font-weight: 400; letter-spacing: -0.005em; margin: 0; } .contact-cards .b { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin: 0; } .contact-cards .instr { font-size: 13px; color: var(--ink-3); line-height: 1.55; margin: 0; } .contact-cards .instr em { font-style: italic; } .contact-cards .actions { margin-top: 4px; } .contact-cards .email { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink); letter-spacing: 0.04em; border-bottom: 1px dotted rgba(10,11,12,0.30); align-self: flex-start; } .contact-cards .subject { font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--ink-4); letter-spacing: 0.14em; text-transform: uppercase; margin: 0; } .contact-cards .subject-label { color: var(--ink-3); } /* simple 2-col "What to send" list */ .include-list--simple .include-row { grid-template-columns: 300px 1fr; } /* ---------- footer address (multi-line) ---------- */ .footer-address { margin-top: 20px; font-size: 13px; color: var(--ink-2); line-height: 1.7; font-style: normal; } .footer-email { margin-top: 14px; font-size: 13px; } .footer-email a { color: var(--ink); border-bottom: 1px dotted rgba(10,11,12,0.25); } .footer-legal { display: none; } /* ---------- about · body + credibility ---------- */ /* 2x2 what-it-does grid (replaces 4 narrow columns) */ .pillars--2x2 { grid-template-columns: 1fr 1fr; } .pillars--2x2 > div { padding: 32px 40px 32px 0; } .pillars--2x2 > div:nth-child(odd) { padding-left: 0; } .pillars--2x2 > div:nth-child(even) { padding-left: 40px; border-right: 0; } .pillars--2x2 > div:nth-child(1), .pillars--2x2 > div:nth-child(2) { border-bottom: 1px solid var(--rule); } @media (max-width: 900px) { .pillars--2x2 { grid-template-columns: 1fr; } .pillars--2x2 > div { padding: 24px 0 !important; border-right: 0 !important; } } /* hero category sentence — plain mono, teal-tinted, no // */ .hero-category { margin-top: 20px; max-width: 720px; font-size: 14px; line-height: 1.55; color: var(--ink-3); } /* AI statement band — quiet single line */ .ai-band .section-inner { padding: 64px 80px; } .ai-statement { max-width: 880px; margin: 0; font-size: 22px; line-height: 1.5; font-weight: 300; letter-spacing: -0.01em; color: var(--ink); } @media (max-width: 900px) { .ai-band .section-inner { padding: 40px 24px; } .ai-statement { font-size: 18px; } } /* engine mark next to the side line — slightly larger, aligned */ .enginemark { width: 18px !important; height: 18px !important; opacity: 0.9; } .clar-list { border-top: 1px solid var(--rule-strong); } /* founder block — quiet, restrained, no cards/photos */ .founders-block { max-width: 760px; } .founders-block p { font-size: 18px; line-height: 1.6; color: var(--ink); margin: 0 0 16px; font-weight: 300; } .founders-block p:last-child { margin-bottom: 0; color: var(--ink-2); font-size: 16px; } @media (max-width: 700px) { .founders-block p { font-size: 16px; } } /* access form — privacy note + inline success */ .form-note { margin-top: 22px; max-width: 620px; font-size: 13px; line-height: 1.6; color: var(--ink-3); } .form-footer { align-items: flex-end; } .form-footer .form-note { margin: 0; flex: 1 1 320px; } .form-note a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; } .form-success { border: 1px solid var(--teal); background: rgba(31,122,122,0.05); padding: 32px 36px; max-width: 620px; } .form-success .ok { display: block; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; } .form-success p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink); font-weight: 300; } button.is-loading { opacity: 0.6; pointer-events: none; } .clar-row { display: grid; grid-template-columns: 300px 1fr; gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .clar-row .q { font-size: 17px; color: var(--ink); font-weight: 400; } .clar-row .a { font-size: 15px; color: var(--ink-2); line-height: 1.6; } @media (max-width: 900px) { .clar-row { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; } } .about-body { display: flex; flex-direction: column; gap: 24px; max-width: 760px; } .about-body p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink-2); } .about-body p:first-child { font-size: 19px; color: var(--ink); } .cards-3-soft { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .cards-3-soft > div { background: #fff; border: 1px solid var(--rule-strong); padding: 28px; display: flex; flex-direction: column; gap: 12px; } .cards-3-soft .tag { font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--teal); letter-spacing: 0.22em; text-transform: uppercase; } .cards-3-soft .k { font-size: 20px; color: var(--ink); font-weight: 400; margin: 0; letter-spacing: -0.005em; } .cards-3-soft .b { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; } /* ---------- include list ---------- */ .include-list { border-top: 1px solid var(--rule-strong); } .include-row { display: grid; grid-template-columns: 180px 220px 1fr 80px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: baseline; gap: 32px; } .include-row .k { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--teal); letter-spacing: 0.18em; text-transform: uppercase; } .include-row .s { font-size: 16px; color: var(--ink); } .include-row .b { font-size: 14px; color: var(--ink-2); line-height: 1.55; } .include-row .t { font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--ink-4); letter-spacing: 0.18em; text-transform: uppercase; text-align: right; } /* ---------- legal pages ---------- */ .legal-rows { border-top: 1px solid var(--rule-strong); } .legal-row { display: grid; grid-template-columns: 280px 1fr; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: baseline; gap: 32px; } .legal-row .k { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--teal); letter-spacing: 0.18em; text-transform: uppercase; } .legal-row .v { display: flex; flex-direction: column; gap: 6px; } .legal-row .v p { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.55; } .legal-row .v p.placeholder { color: var(--ink-4); font-style: italic; } /* ---------- footer ---------- */ .footer { background: #FFFFFF; } .footer-inner { max-width: var(--container); margin: 0 auto; padding: 72px var(--side) 48px; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 64px; padding-bottom: 56px; border-bottom: 1px solid var(--rule); } .footer-brand img { height: 20px; } .footer-tag { margin-top: 20px; font-size: 14px; color: var(--ink-2); line-height: 1.6; max-width: 360px; } .footer-principles { margin-top: 16px; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.20em; text-transform: uppercase; } .footer-legal { margin-top: 20px; font-size: 12px; color: var(--ink-3); line-height: 1.6; } .footer-col h6 { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.20em; text-transform: uppercase; margin: 0 0 18px; font-weight: 500; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col a { font-size: 14px; color: var(--ink); } .footer-bottom { display: flex; justify-content: space-between; padding-top: 24px; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.16em; text-transform: uppercase; } .footer-bottom .right { display: inline-flex; align-items: center; gap: 10px; } .footer-bottom img { width: 12px; height: 12px; } /* ---------- mobile ---------- */ @media (max-width: 900px) { :root { --side: 24px; } .header-inner { padding: 16px 24px; } .hero-inner { padding: 48px 24px 56px; } .hero h1 { margin-top: 28px; font-size: 34px; line-height: 1.1; } .hero p.lead { margin-top: 22px; font-size: 16px; } .hero-ctas { margin-top: 28px; flex-direction: column; align-items: stretch; } .hero-ctas .btn { width: 100%; justify-content: center; } .hero-points { grid-template-columns: 1fr; margin-top: 40px; } .hero-points > div { padding: 18px 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--rule); } .hero-points > div:last-child { border-bottom: 0; } .hero-trust { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 18px; } .section-inner { padding: 56px 24px; } .section-grid { grid-template-columns: 1fr; gap: 24px; } .section-grid .h2 { font-size: 26px; line-height: 1.18; } .cols-2 { grid-template-columns: 1fr; gap: 16px; } .chart-bar { flex-direction: column; height: auto; } .chart-bar > div { width: 100% !important; border-right: 0; border-bottom: 1px solid rgba(10,11,12,0.06); } .chart-bar > div:last-child { border-bottom: 0; } .chart-legend { flex-direction: column; gap: 4px; } .pillars { grid-template-columns: 1fr; } .pillars > div { padding: 24px 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--rule); } .pillars > div:last-child { border-bottom: 0; } .pillars .pname { font-size: 24px; } .loop { grid-template-columns: 1fr; } .loop .arrow { display: none; } .loop .step { margin-bottom: 10px; } .loop-wrap { padding: 22px; } .outcome { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; } .outcome .t { text-align: left; } .criteria { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; } .criteria > div { padding: 18px 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--rule); } .criteria > div:last-child { border-bottom: 0; } .cards-2, .cards-3, .cards-4, .contact-cards { grid-template-columns: 1fr; } .cards-2 > div, .cards-3 > div, .cards-4 > div, .contact-cards > div { border-right: 0 !important; border-bottom: 1px solid var(--rule-strong); } .cards-2 > div:last-child, .cards-3 > div:last-child, .cards-4 > div:last-child, .contact-cards > div:last-child { border-bottom: 0; } .form { padding: 24px; } .form-grid { grid-template-columns: 1fr; } .field.full { grid-column: span 1; } .include-row, .legal-row { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; } .include-row .t { text-align: left; } .footer-top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; } .footer-bottom { flex-direction: column; gap: 12px; padding-top: 18px; align-items: flex-start; letter-spacing: 0.12em; font-size: 10px; } .section--dark .turbine { width: 220px; right: -80px; opacity: 0.05; } .h2 { font-size: 26px; line-height: 1.18; } } /* founder inline links — restrained */ .flink { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule-strong, #C9C9C5); transition: border-color 140ms ease, color 140ms ease; } .flink:hover { color: var(--teal, #1F7A7A); border-bottom-color: var(--teal, #1F7A7A); } /* Mobile menu close-icon stability fix (v1.4): keep the toggle above the opened panel and bind the visible icon to the document menu-open state as a fallback for iOS Safari. */ @media (max-width: 900px) { html.is-menu-open .menu-toggle { position: fixed; top: 14px; right: 24px; z-index: 1000; background: #FFFFFF; border-radius: 999px; } html.is-menu-open .menu-toggle .menu-icon-open { display: none !important; } html.is-menu-open .menu-toggle .menu-icon-close { display: inline-flex !important; } } /* Mobile menu close-button stability fix (v1.5): The close X is rendered inside the opened mobile panel, independent of the header hamburger. This avoids iOS/Safari tap-state issues where the transformed header icon can disappear. */ .mobile-menu-close { display: none; } @media (max-width: 900px) { html.is-menu-open .menu-toggle { opacity: 0; pointer-events: none; } .mobile-menu-close { position: fixed; top: 14px; right: 24px; z-index: 1200; width: 44px; height: 44px; display: none; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink); font-size: 32px; line-height: 1; font-weight: 300; cursor: pointer; -webkit-tap-highlight-color: transparent; } html.is-menu-open .mobile-menu-close { display: flex; } } @media (min-width: 901px) { .mobile-menu-close { display: none !important; } } /* Founder list */ .founder-list{display:grid;gap:28px;border-top:1px solid rgba(20,32,38,.14);padding-top:24px} .founder-list h3{font-size:18px;line-height:1.3;margin:0 0 8px} .founder-list h3 a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(20,32,38,.25)} .founder-list h3 a:hover{border-bottom-color:currentColor} .founder-list p{margin:0;color:var(--muted);max-width:760px} /* founder detail block — v2.0 polished */ .founder-list { border: 1px solid var(--rule-strong); background: #fff; } .founder-entry { padding: 30px 32px; border-bottom: 1px solid var(--rule-strong); } .founder-entry:last-child { border-bottom: 0; } .founder-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 12px; } .founder-name { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 400; color: var(--ink); letter-spacing: -0.005em; } .founder-link { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; } .founder-link:hover { color: var(--teal); border-bottom-color: var(--teal); } .founder-copy { margin: 0; max-width: 760px; font-size: 15px; line-height: 1.65; color: var(--ink-2); } @media (max-width: 700px) { .founder-entry { padding: 24px; } .founder-head { align-items: flex-start; flex-direction: column; gap: 8px; } .founder-name { font-size: 20px; } .founder-copy { font-size: 14px; } } /* German problem chart note / legend */ .chart-note { margin-top: 10px; max-width: 780px; font-size: 11px; line-height: 1.55; color: var(--ink-3); } .chart-legend .b::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--teal); vertical-align: -1px; } .chart-legend .a::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: #D6D6D3; vertical-align: -1px; } /* --- RAIN v2.2 chart polish: consistent legend + subtle source note --- */ .chart-title { letter-spacing: 0.12em; } .chart-bar { min-width: 0; overflow: hidden; } .chart-bar > div { min-width: 0; overflow: hidden; padding: 9px 8px; } .chart-bar > div span { font-size: 9.5px; line-height: 1.25; letter-spacing: 0.035em; } .chart-bar .name { overflow-wrap: normal; word-break: normal; hyphens: auto; } .chart-legend { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 9.5px; line-height: 1.4; letter-spacing: 0.12em; } .chart-legend .a, .chart-legend .b { display: inline-flex; align-items: center; color: var(--ink-3); } .chart-legend .b { color: var(--teal); } .chart-legend .b::before, .chart-legend .a::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; vertical-align: -1px; } .chart-legend .b::before { background: var(--teal); } .chart-legend .a::before { background: #D6D6D3; } .chart-note { margin-top: 16px; max-width: 760px; font-size: 11px; line-height: 1.45; color: #7d817f; font-style: italic; font-family: inherit; letter-spacing: 0; } @media (max-width: 860px) { .chart-bar { height: auto; min-height: 64px; } .chart-bar > div { padding: 8px 6px; } .chart-bar > div span { font-size: 8.5px; } .chart-legend { flex-direction: column; align-items: flex-start; gap: 8px; } } /* v2.4 chart typography polish */ .chart-title { font-size: 13px; } .chart-bar > div span { font-size: 12px; line-height: 1.28; } .chart-legend { font-size: 11.5px; line-height: 1.45; } .chart-note { margin-top: 24px; max-width: 820px; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; line-height: 1.5; letter-spacing: 0.035em; color: #7d817f; font-style: normal; } @media (max-width: 780px) { .chart-title { font-size: 12px; } .chart-bar > div span { font-size: 11.5px; } .chart-legend, .chart-note { font-size: 11px; } } /* v2.4.1 final chart legend removal + statement/source note polish */ .chart-legend { display: none !important; } .chart-statement { margin-top: 24px; max-width: 820px; font-size: 16px; line-height: 1.65; color: var(--ink-2); } .chart-note { margin-top: 24px !important; max-width: 760px !important; font-family: inherit !important; font-size: 11px !important; line-height: 1.45 !important; letter-spacing: 0 !important; color: #8A8F92 !important; font-style: italic !important; } @media (max-width: 780px) { .chart-statement { font-size: 14px; line-height: 1.55; } .chart-note { font-size: 10px !important; line-height: 1.4 !important; } } /* v2.4.4 chart label clipping fix */ @media (min-width: 901px) { .chart-bar { height: 88px; overflow: visible; } .chart-bar > div { min-height: 88px; box-sizing: border-box; padding: 12px 10px 10px; overflow: visible; } .chart-bar > div span { line-height: 1.22; } .chart-bar .pct { margin-top: 8px; } } /* Anchor offset for sticky header on access forms. */ #form{scroll-margin-top:104px;}