:root { --font-display: "IBMPlexSansCondensed", "Arial Narrow", Arial, sans-serif; --font-body: "IBMPlexSansCondensed", Arial, sans-serif; --bg: #070910; --bg-rgb: 7, 9, 16; --surface: #0d111c; --surface-2: #111725; --surface-3: #151d2d; --text: #f7f3ef; --muted: #a9afbd; --muted-strong: #d2d4db; --line: rgba(255,255,255,.11); --line-strong: rgba(255,255,255,.18); --shadow: 0 24px 70px rgba(0,0,0,.34); --red: #ff5b68; --red-deep: #a52a43; --wine: #62183f; --violet: #bd78ff; --cyan: #55d9ff; --blue: #6c95ff; --gold: #ffbd5b; --cream: #f4e9dc; --shell: 1240px; --radius-xs: 12px; --radius-sm: 18px; --radius-md: 26px; --radius-lg: 38px; --header-height: 82px; } html[data-theme="light"] { --bg: #f5f0e8; --bg-rgb: 245, 240, 232; --surface: #fffdf9; --surface-2: #f9f3eb; --surface-3: #f1e8dd; --text: #171417; --muted: #696267; --muted-strong: #353034; --line: rgba(77,42,54,.12); --line-strong: rgba(77,42,54,.2); --shadow: 0 24px 70px rgba(91,54,64,.12); --red: #b72846; --red-deep: #7a1834; --wine: #62183f; --violet: #7c4bb3; --cyan: #157e9c; --blue: #3456a8; --gold: #9b6411; --cream: #6d2039; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); } body { margin: 0; min-width: 320px; font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: var(--text); background: radial-gradient(circle at 12% 4%, rgba(255,91,104,.08), transparent 25rem), radial-gradient(circle at 90% 12%, rgba(189,120,255,.07), transparent 28rem), var(--bg); transition: background-color .3s ease, color .3s ease; } body.menu-open { overflow: hidden; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; } button { color: inherit; } img, svg { display: block; } .svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .sr-only { position: absolute; width: 1px; height: 1px; clip: rect(0,0,0,0); overflow: hidden; white-space: nowrap; } .skip-link { position: fixed; top: 10px; left: 10px; z-index: 999; transform: translateY(-150%); padding: 10px 14px; border-radius: 8px; color: var(--text); background: var(--surface); } .skip-link:focus { transform: none; } .shell { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; } .section { position: relative; padding: 110px 0; border-top: 1px solid var(--line); } .section--contrast { background: linear-gradient(180deg, rgba(var(--bg-rgb), .4), rgba(var(--bg-rgb), .7)), var(--surface); } .section--soft { background: radial-gradient(circle at 20% 20%, rgba(255,91,104,.07), transparent 26rem), radial-gradient(circle at 80% 70%, rgba(85,217,255,.05), transparent 28rem), var(--surface-2); } .section--effect { overflow: hidden; background: radial-gradient(circle at 10% 30%, rgba(255,91,104,.11), transparent 30rem), radial-gradient(circle at 88% 50%, rgba(85,217,255,.09), transparent 32rem), var(--surface); } .section-heading { max-width: 760px; margin-bottom: 46px; } .section-heading--center { margin-inline: auto; text-align: center; } .section-heading h2, .question-layout h2, .split-intro h2, .author-copy h2, .contact-panel h2 { margin: 0; max-width: 20ch; font-family: var(--font-display); font-size: clamp(36px, 5vw, 67px); font-weight: 400; line-height: .98; letter-spacing: -.035em; } .section-heading--center h2 { margin-inline: auto; } .section-heading > p:last-child { max-width: 720px; margin: 22px 0 0; color: var(--muted); } .section-heading--center > p:last-child { margin-inline: auto; } .eyebrow, .mini-eyebrow, .pricing-kicker { margin: 0 0 15px; color: var(--red); font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; } .prose { color: var(--muted-strong); } .prose p { margin: 0 0 1em; } .prose strong { color: var(--text); } .long-copy { max-width: 900px; margin: 42px auto 0; padding: 28px 32px; border-left: 2px solid var(--red); background: linear-gradient(90deg, rgba(255,91,104,.07), transparent); } .card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: linear-gradient(145deg, rgba(255,255,255,.025), transparent 55%), var(--surface); box-shadow: var(--shadow); } html[data-theme="light"] .card { background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.32)), var(--surface); } .cards { display: grid; gap: 18px; } .cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cards--five { grid-template-columns: repeat(5, minmax(0, 1fr)); } .site-header { position: sticky; top: 0; z-index: 100; height: var(--header-height); border-bottom: 1px solid var(--line); background: rgba(var(--bg-rgb), .82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 32px; } .brand { display: flex; flex-direction: column; line-height: 1; } .brand-name { font-family: var(--font-display); font-size: 19px; letter-spacing: .06em; text-transform: uppercase; } .brand-role { margin-top: 8px; color: var(--muted); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; } .main-nav { display: flex; gap: 32px; margin-left: auto; } .main-nav a { position: relative; color: var(--muted-strong); font-size: 14px; } .main-nav a::after { content: ""; position: absolute; right: 0; bottom: -8px; left: 0; height: 1px; transform: scaleX(0); transform-origin: left; background: var(--red); transition: transform .2s ease; } .main-nav a:hover::after { transform: scaleX(1); } .header-actions { display: flex; align-items: center; gap: 10px; } .theme-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; } .theme-toggle span { padding: 5px 8px; border-radius: 999px; color: var(--muted); font-size: 11px; } html[data-theme="light"] .theme-toggle__sun, html[data-theme="dark"] .theme-toggle__moon { color: #fff; background: var(--wine); } .menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; } .menu-toggle span:not(.sr-only) { display: block; width: 100%; height: 1px; margin: 5px 0; background: var(--text); } .mobile-nav { display: none; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 14px 22px; border: 1px solid transparent; border-radius: 12px; font-weight: 650; line-height: 1.2; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; } .button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; } .button:hover { transform: translateY(-2px); } .button--primary { color: #fff; border-color: rgba(255,255,255,.18); background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 45%), linear-gradient(135deg, var(--wine), var(--red-deep)); box-shadow: 0 15px 38px rgba(120,20,55,.28), inset 0 0 24px rgba(255,255,255,.06); } .button--primary:hover { box-shadow: 0 20px 48px rgba(120,20,55,.4), inset 0 0 24px rgba(255,255,255,.08); } .button--ghost { border-color: var(--line-strong); background: transparent; } .button--small { min-height: 38px; padding: 8px 14px; font-size: 13px; } .text-link { color: var(--muted-strong); border-bottom: 1px solid var(--line-strong); } .hero { min-height: calc(100vh - var(--header-height)); display: flex; align-items: center; overflow: hidden; padding-top: 88px; border-top: 0; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); align-items: center; gap: 70px; } .hero h1 { margin: 0; max-width: 12ch; font-family: var(--font-display); font-size: clamp(62px, 8vw, 122px); font-weight: 400; line-height: .82; letter-spacing: -.018em; text-transform: uppercase; } .hero h1 span { position: relative; display: inline-block; color: transparent; -webkit-text-stroke: 1px var(--text); } .hero h1 span::after { content: ""; display: block; width: 46%; height: 3px; margin-top: 20px; background: linear-gradient(90deg, var(--red), transparent); box-shadow: 0 0 20px rgba(255,91,104,.45); } .hero-lead { max-width: 650px; margin: 32px 0 0; color: var(--muted-strong); font-size: clamp(22px, 2.5vw, 34px); line-height: 1.08; } .hero-text { max-width: 680px; margin: 22px 0 0; color: var(--muted); } .hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 34px; } .hero-cta { min-width: 355px; justify-content: space-between; } .hero-cta__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; } .hero-cta__text > span { display: block; white-space: nowrap; } .fact-row { display: flex; flex-wrap: nowrap; gap: 9px; margin-top: 34px; } .fact-row span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted-strong); background: rgba(var(--bg-rgb), .25); font-size: 16px; white-space: nowrap; } .fact-row svg { width: 21px; height: 21px; fill: none; stroke: var(--red); stroke-width: 1.8; } .hero-art { position: relative; min-height: 640px; } .hero-stage { position: absolute; inset: -58px 0 148px 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50% 50% 42% 58% / 45% 51% 49% 55%; background: radial-gradient(circle at 50% 45%, rgba(189,120,255,.12), transparent 30%), radial-gradient(circle at 50% 80%, rgba(255,91,104,.15), transparent 38%), linear-gradient(180deg, rgba(255,255,255,.03), transparent); } .hero-stage::before, .hero-stage::after { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(255,91,104,.18); border-radius: inherit; transform: rotate(8deg); } .hero-stage::after { inset: 16%; border-color: rgba(85,217,255,.12); transform: rotate(-9deg); } .stage-glow { position: absolute; inset: 25%; border-radius: 50%; background: rgba(189,120,255,.14); filter: blur(50px); } .hero-icon { position: relative; z-index: 2; width: min(58%, 310px); height: auto; fill: none; stroke: url(#none); stroke: var(--red); stroke-width: 1.15; filter: drop-shadow(0 0 14px rgba(255,91,104,.55)); } .speech-line { position: absolute; z-index: 3; width: 58%; height: 1px; background: linear-gradient(90deg, transparent, var(--violet), transparent); box-shadow: 0 0 15px rgba(189,120,255,.5); } .speech-line--one { top: 32%; left: 15%; transform: rotate(14deg); } .speech-line--two { top: 55%; left: 27%; width: 54%; transform: rotate(-11deg); background: linear-gradient(90deg, transparent, var(--cyan), transparent); } .speech-line--three { top: 72%; left: 18%; width: 68%; transform: rotate(5deg); background: linear-gradient(90deg, transparent, var(--gold), transparent); } .hero-question-card { position: absolute; right: -10px; bottom: 12px; z-index: 5; width: 88%; padding: 30px 32px 34px; backdrop-filter: blur(16px); } .hero-question-card h2 { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 2.25vw, 34px); font-weight: 400; line-height: 1.08; letter-spacing: -.02em; } .hero-questions span { display: block; white-space: nowrap; } .hero-questions span + span { margin-top: 4px; } .mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 22px; } .mini-grid div { display: flex; gap: 10px; min-height: 72px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--bg-rgb), .18); } .mini-grid svg { flex: 0 0 26px; width: 26px; height: 26px; fill: none; stroke: var(--red); stroke-width: 1.7; } .mini-grid span { font-size: 12px; line-height: 1.25; } .hero-orbit { position: absolute; border: 1px solid rgba(255,91,104,.08); border-radius: 50%; pointer-events: none; } .hero-orbit--one { width: 600px; height: 600px; top: 5%; right: -310px; } .hero-orbit--two { width: 420px; height: 420px; bottom: -210px; left: -160px; } .question-layout, .split-intro { display: grid; grid-template-columns: .92fr 1.08fr; gap: 80px; align-items: start; margin-bottom: 54px; } .question-layout .section-heading, .split-intro .section-heading { margin-bottom: 0; } .compact-cards .insight-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 18px; align-content: start; min-height: 260px; padding: 26px; } .compact-cards .insight-card svg { grid-column: 1; grid-row: 1; align-self: start; margin: 0; } .compact-cards .insight-card h3 { grid-column: 2; grid-row: 1; align-self: center; } .compact-cards .insight-card p { grid-column: 1 / -1; grid-row: 2; margin-top: 24px; } .insight-card svg, .feature-card svg, .module-card svg, .result-card svg, .pricing-card svg { width: 42px; height: 42px; margin-bottom: 25px; fill: none; stroke: var(--red); stroke-width: 1.55; } .insight-card h3, .scene-card h3, .feature-card h3, .module-card h3, .result-card h3, .life-card h3, .pricing-card h3, .tag-card h3, .effect-card h3 { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.05; } .insight-card p, .scene-card p, .feature-card p, .module-card p, .result-card p, .life-card p, .pricing-card p, .tag-card p, .effect-card p { margin: 14px 0 0; color: var(--muted); font-size: 17.5px; line-height: 1.5; } .steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow); } .step { position: relative; min-height: 290px; padding: 27px 24px; border-right: 1px solid var(--line); } .step:last-child { border-right: 0; } .step::after { content: "→"; position: absolute; top: 52px; right: -12px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; color: var(--red); background: var(--surface); } .step:last-child::after { display: none; } .step-number { display: block; color: var(--red); font-size: 12px; letter-spacing: .15em; } .step svg { width: 50px; height: 50px; margin: 32px 0 22px; fill: none; stroke: var(--red); stroke-width: 1.5; } .step h3 { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 400; } .step p { margin: 12px 0 0; color: var(--muted); font-size: 16px; } .scene-cards { gap: 14px; } .scene-card { display: flex; gap: 20px; min-height: 155px; padding: 24px; box-shadow: none; } .scene-card svg { flex: 0 0 38px; width: 38px; height: 38px; fill: none; stroke: var(--red); stroke-width: 1.5; } .feature-cards { gap: 14px; } .feature-card { min-height: 340px; padding: 27px 23px; box-shadow: 0 18px 42px rgba(0,0,0,.2); } .feature-card::after { content: ""; position: absolute; inset: auto 10% -30% 10%; height: 120px; border-radius: 50%; background: currentColor; opacity: .13; filter: blur(40px); } .feature-card h3 { font-size: 25px; } .feature-card.accent-red { color: var(--red); border-color: color-mix(in srgb, var(--red) 38%, transparent); } .feature-card.accent-violet { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 38%, transparent); } .feature-card.accent-cyan { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 38%, transparent); } .feature-card.accent-gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 38%, transparent); } .feature-card.accent-blue { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 38%, transparent); } .feature-card svg { stroke: currentColor; } .feature-card p { position: relative; z-index: 2; color: var(--muted); } .feature-card h3 { position: relative; z-index: 2; color: var(--text); } .tag-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .tag-card { min-height: 230px; padding: 22px 18px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: rgba(var(--bg-rgb), .28); } .tag-card--wide { grid-column: span 6; display: grid; grid-template-columns: auto 1fr 1.4fr; align-items: center; min-height: 110px; gap: 20px; } .tag-card > span, .life-card > span { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 24px; border: 1px solid var(--red); border-radius: 50%; color: var(--red); font-size: 11px; } .tag-card--wide > span { margin: 0; } .tag-card h3 { font-size: 20px; } .tag-card--wide p { margin: 0; } .module-card, .result-card { min-height: 260px; padding: 26px; box-shadow: none; } .result-card { min-height: 235px; } .module-card:nth-child(3n + 2) svg, .result-card:nth-child(3n + 2) svg { stroke: var(--violet); } .module-card:nth-child(3n + 3) svg, .result-card:nth-child(3n + 3) svg { stroke: var(--cyan); } .life-card { min-height: 230px; padding: 27px; box-shadow: none; } .life-card:nth-child(even) { transform: translateY(18px); } .event-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .event-item { min-height: 145px; display: grid; place-items: center; align-content: center; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-xs); text-align: center; background: rgba(var(--bg-rgb), .22); } .event-item svg { width: 40px; height: 40px; fill: none; stroke: var(--red); stroke-width: 1.5; } .event-item span { font-size: 14px; } .pricing-card { min-height: 340px; padding: 34px; } .pricing-card svg { width: 52px; height: 52px; } .pricing-card h3 { font-size: 40px; } .pricing-card--featured { transform: translateY(-18px); border-color: rgba(189,120,255,.5); background: radial-gradient(circle at 50% 110%, rgba(189,120,255,.2), transparent 40%), var(--surface); } .pricing-card--featured svg { stroke: var(--violet); } .effect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 50px; } .effect-card { display: flex; gap: 20px; min-height: 180px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(var(--bg-rgb), .22); } .effect-card svg { flex: 0 0 46px; width: 46px; height: 46px; fill: none; stroke: var(--red); stroke-width: 1.5; } .effect-card:nth-child(2) svg { stroke: var(--violet); } .effect-card:nth-child(3) svg { stroke: var(--cyan); } .closing-quote { position: relative; max-width: 1000px; margin: 62px auto 0; padding: 38px 60px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 43px); font-weight: 400; line-height: 1.15; text-align: center; } .closing-quote::before, .closing-quote::after { position: absolute; color: var(--red); font-size: 72px; line-height: 1; } .closing-quote::before { content: "«"; left: 8px; top: 22px; } .closing-quote::after { content: "»"; right: 8px; bottom: 14px; } .author-section { padding-block: 80px; } .author-grid { display: grid; grid-template-columns: 220px 1fr; gap: 50px; align-items: center; } .author-mark { display: grid; place-items: center; width: 200px; aspect-ratio: 1; border: 1px solid var(--line-strong); border-radius: 50%; background: radial-gradient(circle, rgba(255,91,104,.12), transparent 60%), var(--surface); } .author-mark span { font-family: var(--font-display); font-size: 62px; color: var(--red); } .author-copy h2 { margin-bottom: 20px; } .author-role { color: var(--muted-strong); font-size: 21px; } .author-copy > p:last-child { max-width: 740px; color: var(--muted); } .contact-section { padding-top: 0; border-top: 0; } .contact-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; padding: 58px; border: 1px solid rgba(255,91,104,.3); border-radius: var(--radius-lg); color: #fff; background: radial-gradient(circle at 10% 15%, rgba(255,255,255,.07), transparent 26rem), linear-gradient(135deg, #651634, #2a0d21 68%, #07101b); box-shadow: 0 32px 90px rgba(74,10,38,.35); } .contact-panel h2 { color: #fff; } .contact-panel > div > p:last-child { color: rgba(255,255,255,.68); } .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .contact-form label { display: grid; gap: 7px; } .contact-form label > span { color: rgba(255,255,255,.72); font-size: 12px; } .contact-form input, .contact-form textarea { width: 100%; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; outline: none; color: #fff; background: rgba(5,7,13,.35); transition: border-color .2s ease, background .2s ease; } .contact-form input { height: 50px; padding: 0 14px; } .contact-form textarea { resize: vertical; padding: 14px; } .contact-form input:focus, .contact-form textarea:focus { border-color: rgba(255,255,255,.5); background: rgba(5,7,13,.5); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.38); } .contact-form__wide { grid-column: 1 / -1; } .form-note { margin: 0; color: rgba(255,255,255,.45); font-size: 11px; } .site-footer { padding: 30px 0; border-top: 1px solid var(--line); } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .footer-inner > div { display: flex; flex-direction: column; } .footer-inner strong { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; } .footer-inner span { color: var(--muted); font-size: 12px; } .footer-inner a { color: var(--red); font-size: 13px; } .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .button { transition: none; } } .eyebrow::after, .mini-eyebrow::after, .pricing-kicker::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; } .hero h1 .hero-kto { display: inline-flex; color: var(--text); -webkit-text-stroke: 0; } .hero h1 .hero-kto::after { content: none; display: none; } .hero h1 .hero-kto > span { position: static; display: inline-block; color: inherit; -webkit-text-stroke: 0; } .hero h1 .hero-kto > span::after { content: none; display: none; } .hero h1 .hero-letter-t { margin-left: .065em; } .hero h1 .hero-outline { color: transparent; -webkit-text-stroke: 1px var(--text); } .hero-cta { width: max-content; min-width: 0; padding: 14px 18px 14px 20px; justify-content: flex-start; gap: 18px; } .fact-row { flex-wrap: wrap; width: max-content; max-width: 100%; } .fact-row-break { flex: 0 0 100%; width: 0; height: 0; margin: -9px 0 0; padding: 0; } .hero-question-card { width: min(74%, 390px); right: 0; } .compact-cards .insight-card h3 > span { display: block; } .step { min-height: 224px; padding: 24px 22px; } .step-head { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; column-gap: 16px; } .step-mark { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; } .step-number { font-size: 17px; font-weight: 700; letter-spacing: .1em; line-height: 1; } .step .step-mark svg { width: 42px; height: 42px; margin: 0; } .step h3 { font-size: 27px; line-height: 1; } .step > p { margin: 20px 0 0; } .step::after { top: 42px; right: -23px; width: 46px; height: 46px; font-size: 31px; font-weight: 400; } .title-line { display: block; } .tag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .tag-card { display: grid; grid-template-columns: 54px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 20px; min-height: 180px; padding: 25px; border-radius: var(--radius-sm); background: var(--surface); } .tag-card > span { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 0; } .tag-card h3 { grid-column: 2; grid-row: 1; font-size: 24px; } .tag-card p { grid-column: 2; grid-row: 2; margin-top: 14px; } .tag-card--wide { grid-column: 1 / -1; grid-template-columns: 54px minmax(220px, .65fr) minmax(0, 1.35fr); grid-template-rows: auto; align-items: center; min-height: 122px; } .tag-card--wide > span, .tag-card--wide h3, .tag-card--wide p { grid-row: 1; } .tag-card--wide h3 { grid-column: 2; } .tag-card--wide p { grid-column: 3; margin-top: 0; } .pricing-head { display: flex; align-items: center; gap: 24px; margin-bottom: 28px; } .pricing-head svg { flex: 0 0 54px; width: 54px; height: 54px; margin: 0; } .pricing-head h3 { margin: 0; } .pricing-card > p { margin-top: 0; } @media (max-width: 1160px) { .main-nav { display: none; } .menu-toggle { display: block; } .mobile-nav { position: fixed; top: var(--header-height); right: 20px; left: 20px; z-index: 99; display: grid; transform: translateY(-10px); visibility: hidden; opacity: 0; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; } .mobile-nav.is-open { transform: none; visibility: visible; opacity: 1; } .mobile-nav a { padding: 14px; border-bottom: 1px solid var(--line); } .mobile-nav a:last-child { border-bottom: 0; color: var(--red); } .hero-grid { grid-template-columns: 1fr 420px; gap: 35px; } .hero h1 { font-size: clamp(60px, 7.7vw, 96px); } .cards--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } .feature-card { min-height: 300px; } .tag-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tag-card--wide { grid-column: span 4; } .event-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { :root { --header-height: 72px; } body { font-size: 16px; } .section { padding: 80px 0; } .button--small { display: none; } .theme-toggle span { display: none; } .theme-toggle { width: 42px; min-height: 42px; padding: 0; } .theme-toggle::before { content: "◐"; display: block; width: 100%; color: var(--red); text-align: center; } .hero { min-height: auto; padding-top: 70px; } .hero-grid { grid-template-columns: 1fr; } .hero-art { min-height: 600px; } .question-layout, .split-intro, .contact-panel { grid-template-columns: 1fr; gap: 35px; } .cards--four, .cards--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps { grid-template-columns: 1fr 1fr; } .step:nth-child(2) { border-right: 0; } .step:nth-child(-n+4) { border-bottom: 1px solid var(--line); } .step::after { display: none; } .step:last-child { grid-column: 1 / -1; } .cards--five { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tag-card--wide { grid-column: span 2; } .effect-grid { grid-template-columns: 1fr; } .author-grid { grid-template-columns: 160px 1fr; } .author-mark { width: 150px; } .contact-panel { padding: 38px; } } @media (max-width: 620px) { .shell { width: min(calc(100% - 26px), var(--shell)); } .section { padding: 66px 0; } .brand-role { display: none; } .brand-name { font-size: 15px; } .header-actions { gap: 7px; } .hero { padding-top: 54px; } .hero h1 { font-size: clamp(54px, 17vw, 80px); line-height: .86; } .hero-lead { font-size: 23px; } .hero-actions { align-items: stretch; flex-direction: column; } .text-link { align-self: flex-start; } .fact-row { display: grid; grid-template-columns: 1fr 1fr; } .fact-row span { border-radius: 10px; } .hero-art { min-height: 520px; } .hero-stage { inset: 0 0 120px; } .hero-question-card { right: 0; width: 92%; padding: 20px; } .mini-grid { gap: 7px; } .mini-grid div { min-height: 64px; padding: 9px; } .mini-grid span { font-size: 10px; } .section-heading h2, .question-layout h2, .split-intro h2, .author-copy h2, .contact-panel h2 { font-size: 39px; } .cards--four, .cards--three, .cards--five { grid-template-columns: 1fr; } .compact-cards, .scene-cards, .module-cards, .result-cards, .life-cards { grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 3px 2px 15px; } .compact-cards > *, .scene-cards > *, .module-cards > *, .result-cards > *, .life-cards > * { scroll-snap-align: start; } .feature-cards { grid-template-columns: 1fr; } .feature-card { min-height: 265px; } .steps { grid-template-columns: 1fr; } .step { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); } .step:last-child { grid-column: auto; border-bottom: 0; } .tag-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 15px; } .tag-card, .tag-card--wide { display: block; flex: 0 0 82%; min-height: 230px; scroll-snap-align: start; } .tag-card--wide > span { margin-bottom: 24px; } .tag-card--wide p { margin-top: 14px; } .life-card:nth-child(even), .pricing-card--featured { transform: none; } .event-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pricing-card { min-height: 280px; } .closing-quote { padding: 32px 28px; } .author-grid { grid-template-columns: 1fr; } .author-mark { width: 118px; } .author-mark span { font-size: 43px; } .contact-panel { padding: 26px 20px; border-radius: 24px; } .contact-form { grid-template-columns: 1fr; } .contact-form__wide { grid-column: auto; } .footer-inner { align-items: flex-start; flex-direction: column; } } @media (min-width: 901px) { .hero-lead > span { display: block; } .hero-stage { inset: -86px 0 178px 40px; } .hero-question-card { bottom: 52px; } .step { min-height: 188px; padding: 24px 20px 22px; } .step-head { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; column-gap: 14px; } .step-head > svg { width: 43px; height: 43px; margin: 0; fill: none; stroke: var(--red); stroke-width: 1.5; } .step-head h3 { margin: 0; font-size: 26px; line-height: 1.04; } .step > p { margin: 20px 0 0; } .step::after { top: 28px; right: -25px; width: 50px; height: 50px; font-size: 36px; } #inside .section-heading, #inside .section-heading h2, .section--contrast .section-heading--center, .section--contrast .section-heading--center h2 { max-width: none; } #inside .section-heading h2 { width: max-content; max-width: 100%; } .feature-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .feature-card { display: flex; gap: 20px; min-height: 170px; padding: 24px; box-shadow: none; } .feature-card::after { display: none; } .feature-card > svg { flex: 0 0 38px; width: 38px; height: 38px; margin: 0; } .feature-card h3 { font-size: 24px; } .feature-card p { margin-top: 14px; } .tag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .tag-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 20px; min-height: 170px; padding: 24px; border-radius: var(--radius-sm); background: var(--surface); } .tag-card > span { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 38px; height: 38px; margin: 0; } .tag-card h3 { grid-column: 2; grid-row: 1; font-size: 24px; } .tag-card p { grid-column: 2; grid-row: 2; margin-top: 14px; } } @media (min-width: 901px) { .step { min-height: 172px; padding: 22px 20px 20px; } .step-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 13px; min-height: 46px; } .step-head > svg { width: 42px; height: 42px; margin: 0; fill: none; stroke: var(--red); stroke-width: 1.5; } .step-head h3 { margin: 0; font-size: 25px; line-height: 1; white-space: nowrap; } .step > p { margin: 17px 0 0; } .step::after { top: 17px; right: -29px; width: 58px; height: 58px; font-size: 43px; line-height: 1; } #inside .section-heading { max-width: 980px; } .feature-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .feature-card { display: flex; gap: 20px; min-height: 155px; padding: 24px; box-shadow: none; } .feature-card::after { display: none; } .feature-card > svg { flex: 0 0 38px; width: 38px; height: 38px; margin: 0; } .feature-card > div { min-width: 0; } .feature-card h3 { margin: 0; font-size: 24px; line-height: 1.05; color: var(--text); } .feature-card p { margin: 14px 0 0; color: var(--muted); } .tag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .contact-form label > span { font-size: 14px; font-weight: 600; letter-spacing: .01em; color: rgba(255,255,255,.82); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.72); opacity: 1; } @media (min-width: 901px) { .step::after { top: 24px; right: -17px; width: 34px; height: 40px; font-size: 31px; line-height: 1; background: var(--surface); } .life-heading { max-width: none; margin-bottom: 24px; } .life-heading h2 { max-width: none; width: 100%; } .life-intro { max-width: 900px; margin-bottom: 46px; } .plain-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .plain-card { display: block; min-height: 190px; padding: 28px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: none; transform: none !important; } .plain-card h3 { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 400; line-height: 1.05; } .plain-card p { margin: 18px 0 0; color: var(--muted); font-size: 17px; line-height: 1.5; } .pricing-cards { margin-top: 50px; } .pricing-card { min-height: 180px; padding: 28px; transform: none !important; border-color: var(--line); background: rgba(var(--bg-rgb), .22); } .pricing-card svg { flex: 0 0 46px; width: 46px; height: 46px; margin: 0; } .pricing-card h3 { margin: 0; font-size: 24px; } .pricing-card p { margin: 14px 0 0; } } .anchor-target { position: absolute; top: calc(-1 * var(--header-height)); width: 1px; height: 1px; pointer-events: none; } .feature-card.accent-red, .feature-card.accent-violet, .feature-card.accent-cyan, .feature-card.accent-gold, .feature-card.accent-blue { border-color: var(--line); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.56); opacity: 1; } .dev-guide { background: linear-gradient(180deg, rgba(var(--bg-rgb), .25), rgba(var(--bg-rgb), .55)), var(--surface-2); } .dev-guide .section-heading { max-width: 930px; } .dev-subsection { margin-top: 52px; } .dev-subsection > h3 { margin: 0 0 22px; font-family: var(--font-display); font-size: 31px; font-weight: 400; line-height: 1.05; } .icon-inventory { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .icon-spec, .proposal-icon { display: grid; align-content: start; gap: 7px; min-height: 148px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface); } .icon-spec svg, .proposal-icon svg { width: 38px; height: 38px; margin-bottom: 7px; fill: none; stroke: var(--red); stroke-width: 1.55; } .icon-spec strong { font-size: 15px; } .icon-spec code, .proposal-icon code, .type-table code, .dev-note code { color: var(--red); font-family: Consolas, "Courier New", monospace; font-size: 12px; } .icon-spec small { color: var(--muted); font-size: 12px; line-height: 1.35; } .type-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } .type-table { width: 100%; min-width: 1020px; border-collapse: collapse; } .type-table th, .type-table td { padding: 20px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; } .type-table th:last-child, .type-table td:last-child { border-right: 0; } .type-table tr:last-child td { border-bottom: 0; } .type-table th { color: var(--red); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .type-table td:first-child { width: 24%; } .type-table td:nth-child(2) { width: 34%; } .type-table td:last-child { color: var(--muted); font-size: 14px; line-height: 1.5; } .type-table td:first-child strong, .type-table td:first-child code { display: block; } .type-table td:first-child code { margin-top: 8px; } .type-demo { display: block; color: var(--text); } .type-demo--1 { font-family: var(--font-display); font-size: 44px; line-height: .9; text-transform: uppercase; } .type-demo--2 { font-family: var(--font-display); font-size: 38px; line-height: .98; } .type-demo--3 { color: var(--red); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .type-demo--4 { color: var(--muted-strong); font-size: 27px; line-height: 1.08; } .type-demo--5, .type-demo--7 { font-size: 17px; line-height: 1.5; } .type-demo--6 { font-family: var(--font-display); font-size: 26px; line-height: 1.05; } .type-demo--8 { display: inline-flex; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted-strong); font-size: 16px; } .type-demo--9 { display: inline-flex; padding: 12px 18px; border-radius: 12px; color: #fff; font-weight: 650; background: linear-gradient(135deg, var(--wine), var(--red-deep)); } .type-demo--10 { font-family: var(--font-display); font-size: 32px; line-height: 1.15; } .dev-note { margin: 20px 0 0; color: var(--muted); } .proposal-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .proposal-icon { min-height: 132px; } .proposal-icon span { font-size: 14px; line-height: 1.25; } .proposal-icon:nth-child(2n) svg { stroke: var(--violet); } .proposal-icon:nth-child(3n) svg { stroke: var(--cyan); } @media (min-width: 901px) { .hero { min-height: calc(100vh - var(--header-height)); align-items: flex-start; padding-top: 34px; padding-bottom: 34px; } .hero-grid { align-items: start; } .hero-copy { padding-top: 0; } .hero-lead { margin-top: 23px; } .hero-text { margin-top: 16px; } .hero-actions { margin-top: 24px; } .hero-cta { min-height: 50px; padding: 12px 18px 12px 20px; white-space: nowrap; } .hero-cta__text { display: inline; white-space: nowrap; } .fact-row { flex-wrap: nowrap; width: max-content; margin-top: 22px; } .fact-row-break { display: none; } .hero-art { min-height: 578px; transform: translateY(-16px); } .hero-stage { inset: -116px 0 158px 40px; } .hero-question-card { bottom: 70px; } .formats-intro { margin-bottom: 42px; } .formats-intro .section-heading h2 { max-width: 15ch; } .formats-intro + .pricing-cards { margin-top: 0; } } @media (max-width: 1160px) { .icon-inventory, .proposal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 700px) { .icon-inventory, .proposal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 901px) { .hero-lead { max-width: 660px; font-size: clamp(22px, 1.7vw, 29px); line-height: 1.12; } .hero-bottom { position: relative; z-index: 12; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); align-items: center; gap: 70px; margin-top: -62px; } .hero-bottom .hero-actions, .hero-bottom .fact-row { margin-top: 0; } .hero-bottom .hero-actions { justify-content: flex-start; } .hero-bottom .fact-row { justify-content: flex-end; width: auto; max-width: none; } .hero-bottom .fact-row span { padding-inline: 13px; } } @media (min-width: 901px) and (max-width: 1160px) { .hero-bottom { grid-template-columns: minmax(0, 1fr) minmax(470px, 1fr); gap: 28px; } .hero-bottom .fact-row { gap: 6px; } .hero-bottom .fact-row span { padding-inline: 10px; font-size: 14px; } } @media (min-width: 901px) { .hero-question-card { padding: 25px 30px 27px; } .module-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .module-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 20px; min-height: 190px; padding: 24px; } .module-card > svg { width: 42px; height: 42px; margin: 0; } .module-card > div { min-width: 0; } .module-card h3 { margin: 0; font-size: 24px; line-height: 1.05; } .module-card p { margin: 13px 0 0; font-size: 17.5px; line-height: 1.5; } .result-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; align-content: start; min-height: 225px; padding: 25px; } .result-card > svg { grid-column: 1; grid-row: 1; align-self: center; width: 40px; height: 40px; margin: 0; } .result-card > h3 { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; margin: 0; font-size: 23px; } .result-card > p { grid-column: 1 / -1; grid-row: 2; margin: 22px 0 0; } } .proposal-grid--variants { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1160px) { .proposal-grid--variants { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .proposal-grid--variants { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 901px) { .formats-heading { max-width: 980px; margin-bottom: 42px; } .formats-heading h2 { max-width: none; } .formats-heading > p:last-child { max-width: 850px; margin-top: 24px; } .formats-heading + .pricing-cards { margin-top: 0; } .manipulation-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .manipulation-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 20px; min-height: 190px; padding: 24px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: none; } .manipulation-card > svg { width: 42px; height: 42px; margin: 0; fill: none; stroke: var(--red); stroke-width: 1.55; } .manipulation-card h3 { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.05; } .manipulation-card p { margin: 13px 0 0; color: var(--muted); font-size: 17px; line-height: 1.5; } } .proposal-icon--tilt svg { transform: rotate(-18deg); transform-origin: center; } .dev-intro { max-width: 820px; margin: -8px 0 24px; color: var(--muted); } .icon-spec { position: relative; } .icon-spec em { position: absolute; top: 14px; right: 14px; color: var(--muted); font-size: 11px; font-style: normal; } .strategy-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .strategy-option { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 17px; min-height: 176px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } .strategy-option svg { width: 48px; height: 48px; fill: none; stroke: var(--red); stroke-width: 1.55; } .strategy-option strong, .strategy-option span, .strategy-option code { display: block; } .strategy-option strong { font-family: var(--font-display); font-size: 22px; font-weight: 400; line-height: 1.05; } .strategy-option span { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.4; } .strategy-option code { margin-top: 12px; color: var(--red); font-size: 11px; } .color-tokens { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .color-token { min-height: 230px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface); } .color-token__swatches { display: grid; grid-template-columns: 1fr 1fr; height: 74px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; } .color-token__swatches span { background: var(--swatch); } .color-token strong, .color-token code, .color-token small { display: block; } .color-token code { margin-top: 5px; color: var(--red); font-size: 12px; } .color-token small { margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.45; } .color-token p { margin: 12px 0 0; color: var(--muted-strong); font-size: 13px; line-height: 1.35; } .color-systems { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; } .color-system { position: relative; min-height: 340px; padding: 27px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } .color-system--recommended { border-color: color-mix(in srgb, var(--cyan) 45%, var(--line)); background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 38%), var(--surface); } .color-system__label { display: inline-block; margin-bottom: 19px; color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .color-system h4, .color-map h4 { margin: 0; font-family: var(--font-display); font-size: 27px; font-weight: 400; line-height: 1.05; } .color-system p, .color-system li { color: var(--muted); font-size: 14px; line-height: 1.48; } .color-system ul { display: grid; gap: 12px; margin: 21px 0 0; padding: 0; list-style: none; } .color-system li { display: grid; grid-template-columns: 13px 1fr; gap: 10px; } .color-system li i { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 12px color-mix(in srgb, var(--dot) 60%, transparent); } .color-system li strong { color: var(--text); } .color-system__note { padding-top: 16px; border-top: 1px solid var(--line); } .color-map { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); } .color-map h4 { grid-column: 1 / -1; margin-bottom: 8px; font-size: 24px; } .color-map > div { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-content: start; } .color-map > div span { width: 11px; height: 38px; border-radius: 999px; background: var(--map); } .color-map b, .color-map em { grid-column: 2; } .color-map b { font-size: 13px; } .color-map em { color: var(--muted); font-size: 11px; font-style: normal; line-height: 1.35; } @media (max-width: 1160px) { .strategy-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .color-tokens { grid-template-columns: repeat(3, minmax(0, 1fr)); } .color-systems { grid-template-columns: 1fr; } .color-system { min-height: 0; } .color-map { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .strategy-options, .color-tokens, .color-map { grid-template-columns: 1fr; } } .cards, .effect-grid, .steps-grid { align-items: stretch; grid-auto-rows: 1fr; } .cards > *, .effect-grid > *, .steps-grid > * { min-width: 0; height: 100%; } .feature-card, .scene-card, .insight-card, .manipulation-card, .module-card, .result-card, .effect-card, .pricing-card, .step { height: 100%; } @media (min-width: 901px) { .feature-cards { grid-auto-rows: 1fr; } .feature-card { min-height: 190px; } .module-card, .manipulation-card { min-height: 194px; } .result-card { min-height: 225px; } } .eyebrow, .mini-eyebrow, .pricing-kicker, .dev-guide .eyebrow { color: var(--red) !important; } .fact-row svg { stroke: var(--red) !important; } .steps .step svg, .steps .step-head > svg { stroke: var(--red) !important; } .feature-card { color: inherit !important; border-color: var(--line) !important; } .feature-card::after { display: none; } .compact-cards .insight-card:nth-child(4n + 1) svg, .result-cards .result-card:nth-child(4n + 1) svg { stroke: var(--red) !important; } .compact-cards .insight-card:nth-child(4n + 2) svg, .result-cards .result-card:nth-child(4n + 2) svg { stroke: var(--violet) !important; } .compact-cards .insight-card:nth-child(4n + 3) svg, .result-cards .result-card:nth-child(4n + 3) svg { stroke: var(--cyan) !important; } .compact-cards .insight-card:nth-child(4n + 4) svg, .result-cards .result-card:nth-child(4n + 4) svg { stroke: var(--gold) !important; } .scene-cards .scene-card:nth-child(3n + 1) svg, .feature-cards .feature-card:nth-child(3n + 1) svg, .manipulation-cards .manipulation-card:nth-child(3n + 1) > svg, .module-cards .module-card:nth-child(3n + 1) > svg, .pricing-cards .pricing-card:nth-child(3n + 1) svg, .section--effect .effect-card:nth-child(3n + 1) svg { stroke: var(--red) !important; } .scene-cards .scene-card:nth-child(3n + 2) svg, .feature-cards .feature-card:nth-child(3n + 2) svg, .manipulation-cards .manipulation-card:nth-child(3n + 2) > svg, .module-cards .module-card:nth-child(3n + 2) > svg, .pricing-cards .pricing-card:nth-child(3n + 2) svg, .section--effect .effect-card:nth-child(3n + 2) svg { stroke: var(--violet) !important; } .scene-cards .scene-card:nth-child(3n + 3) svg, .feature-cards .feature-card:nth-child(3n + 3) svg, .manipulation-cards .manipulation-card:nth-child(3n + 3) > svg, .module-cards .module-card:nth-child(3n + 3) > svg, .pricing-cards .pricing-card:nth-child(3n + 3) svg, .section--effect .effect-card:nth-child(3n + 3) svg { stroke: var(--cyan) !important; } .color-tokens--five { grid-template-columns: repeat(5, minmax(0, 1fr)); } .color-system--accepted { max-width: 940px; min-height: 0; } .color-system--accepted li { grid-template-columns: 13px 1fr; } .site-footer { padding: 38px 0 42px; } .footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr); align-items: end; gap: 50px; } .footer-brand, .footer-promise { display: flex; flex-direction: column; } .footer-brand strong, .footer-promise > strong { font-family: var(--font-display); font-weight: 400; } .footer-brand strong { font-size: clamp(22px, 2.3vw, 34px); line-height: 1; text-transform: uppercase; } .footer-brand span { margin-top: 8px; color: var(--muted); font-size: 13px; } .footer-promise { align-items: flex-end; text-align: right; } .footer-promise > strong { max-width: 520px; font-size: clamp(23px, 2.5vw, 36px); line-height: 1.02; } .footer-contacts { display: flex; align-items: center; justify-content: flex-end; gap: 11px; margin-top: 12px; color: var(--muted); font-size: 13px; } .footer-contacts a { color: var(--red); font-size: inherit; } .footer-contacts a:hover { color: var(--text); } @media (max-width: 1160px) { .color-tokens--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; align-items: start; gap: 28px; } .footer-promise { align-items: flex-start; text-align: left; } .footer-contacts { justify-content: flex-start; flex-wrap: wrap; } .color-tokens--five { grid-template-columns: 1fr; } } .brand-name { font-size: 22px; letter-spacing: .055em; } .brand-role { margin-top: 7px; color: var(--muted-strong); font-size: 12px; font-weight: 600; letter-spacing: .14em; } .header-cta { color: var(--text); border-color: var(--red); background: linear-gradient( 135deg, color-mix(in srgb, var(--red) 10%, transparent), transparent 65% ); box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--red) 12%, transparent); } .header-cta:hover { color: #fff; border-color: var(--red); background: linear-gradient( 135deg, color-mix(in srgb, var(--red) 68%, var(--wine)), var(--wine) ); } .theme-toggle { display: none !important; } .footer-brand strong { font-size: clamp(19px, 1.75vw, 27px); } .footer-brand span { margin-top: 9px; color: var(--muted-strong); font-size: 14px; line-height: 1.35; } .footer-promise > strong { max-width: none; font-size: clamp(17px, 1.45vw, 23px); line-height: 1.1; white-space: nowrap; } .style-guide-page .dev-guide { min-height: calc(100vh - var(--header-height)); } .style-guide-links { display: flex; align-items: center; gap: 18px; margin-left: auto; } .style-guide-links a { color: var(--muted-strong); font-size: 13px; } .style-guide-links a:hover { color: var(--red); } @media (max-width: 1160px) { .main-nav { gap: 22px; } } @media (max-width: 900px) { .style-guide-links { gap: 10px; } .style-guide-links a { font-size: 12px; } } @media (max-width: 620px) { .brand-name { font-size: 16px; } .brand-role { display: block; max-width: 170px; overflow: hidden; font-size: 9px; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; } .footer-promise > strong { font-size: clamp(14px, 4.25vw, 18px); white-space: nowrap; } .style-guide-links { display: none; } } .hero h1 span::after, .hero h1 .hero-outline::after { content: none !important; display: none !important; } .hero-question-card .hero-questions { margin: 0; font-family: var(--font-display); font-size: clamp(25px, 2.6vw, 37px); font-weight: 400; line-height: 1.08; } .main-nav { gap: 20px; } .main-nav a { font-size: 15.5px; font-weight: 550; white-space: nowrap; } #mechanics, #inside, #results, #formats, #effect, #contact { scroll-margin-top: 0; } .header-cta { border-color: var(--red); box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 38%, transparent), 0 8px 25px color-mix(in srgb, var(--red) 28%, transparent); } .main-nav a::after { height: 2px; background: var(--red); } @media (max-width: 1230px) and (min-width: 901px) { .brand-name { font-size: 19px; } .brand-role { font-size: 10px; } .main-nav { gap: 14px; } .main-nav a { font-size: 14px; } .header-cta { padding-inline: 14px; font-size: 13px; } } #author { scroll-margin-top: 0; } .contact-panel { position: relative; overflow: hidden; color: var(--text); border: 1px solid color-mix(in srgb, var(--red) 42%, var(--line)); background: linear-gradient( 135deg, color-mix(in srgb, var(--red) 5%, transparent), transparent 42% ), transparent; box-shadow: none; } .contact-panel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--red); } .contact-panel h2 { color: var(--text); } .contact-panel > div > p:last-child { color: var(--muted); } .contact-form label > span { color: var(--muted-strong); } .contact-form input, .contact-form textarea { color: var(--text); border-color: var(--line-strong); background: color-mix(in srgb, var(--surface) 70%, transparent); } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--red); background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 11%, transparent); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent); opacity: 1; } .contact-panel .button--primary { color: #fff; background: linear-gradient( 135deg, color-mix(in srgb, var(--red) 82%, var(--wine)), var(--wine) ); border-color: var(--red); } .form-note { color: var(--muted); } .eyebrow, .mini-eyebrow, .pricing-kicker, .fact-row svg, .steps .step svg, .steps .step-head > svg, .main-nav a::after, .footer-contacts a { color: var(--red) !important; stroke: var(--red) !important; } .header-cta { color: var(--text); border: 1.5px solid var(--red); background: transparent; box-shadow: none; } .header-cta:hover { color: #fff; border-color: var(--red); background: var(--red); box-shadow: none; } .contact-panel { border: 1.5px solid var(--red); background: transparent; box-shadow: none; } .contact-panel::before { content: none !important; display: none !important; } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--red); box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 12%, transparent); } .contact-panel .button--primary { color: #fff; border-color: var(--red); background: var(--red); } .contact-panel .button--primary:hover { border-color: var(--red-deep); background: var(--red-deep); } .contact-panel { border: 1px solid color-mix(in srgb, var(--red) 46%, var(--line)); background: transparent; box-shadow: none; } .contact-panel::before { content: none !important; display: none !important; } .contact-form .contact-submit { display: inline-flex; width: auto; min-width: 0; min-height: 50px; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 18px 12px 20px; color: #fff; border: 1px solid transparent; border-radius: 12px; background: linear-gradient(135deg, var(--wine), var(--red-deep)); box-shadow: var(--shadow-button); } .contact-form .contact-submit:hover { border-color: transparent; background: linear-gradient( 135deg, color-mix(in srgb, var(--wine) 84%, #fff), color-mix(in srgb, var(--red-deep) 88%, #fff) ); transform: translateY(-1px); } .contact-form .contact-submit svg { width: 20px; height: 20px; stroke: currentColor; } .contact-panel { border: 0; background: transparent; box-shadow: none; } .contact-panel::before { content: none !important; display: none !important; } .contact-form .contact-submit { grid-column: 1 / -1; justify-self: start; width: max-content; max-width: 100%; min-width: 0; min-height: 50px; padding: 12px 18px 12px 20px; gap: 18px; white-space: nowrap; } @media (max-width: 700px) { html, body { width: 100%; max-width: 100%; overflow-x: hidden; } body { min-width: 0; font-size: 16px; } .shell { width: min(calc(100% - 28px), var(--shell)); } .section { overflow: hidden; padding: 58px 0; } .section-heading, .question-layout .section-heading, .split-intro .section-heading, .author-copy, .contact-panel > div { width: 100%; max-width: 100%; min-width: 0; margin-bottom: 30px; } .section-heading h2, .question-layout h2, .split-intro h2, .author-copy h2, .contact-panel h2 { width: auto !important; max-width: 100%; font-size: clamp(32px, 9.2vw, 40px); line-height: 1.01; letter-spacing: -.025em; overflow-wrap: break-word; } .section-heading--center { text-align: left; } .section-heading--center h2, .section-heading--center > p:last-child { margin-inline: 0; } .eyebrow, .mini-eyebrow, .pricing-kicker { max-width: 100%; margin-bottom: 13px; font-size: 12px; line-height: 1.25; letter-spacing: .135em; overflow-wrap: break-word; } .question-layout, .split-intro { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 34px; } .question-layout > *, .split-intro > *, .hero-grid > *, .author-grid > *, .contact-panel > * { min-width: 0; } .prose, .section-heading > p:last-child { max-width: none; font-size: 16.5px; line-height: 1.55; } .site-header { height: var(--header-height); } .header-inner { gap: 14px; } .brand { min-width: 0; } .brand-name { max-width: 260px; overflow: hidden; font-size: clamp(15px, 4.2vw, 18px); letter-spacing: .045em; text-overflow: ellipsis; white-space: nowrap; } .brand-role { display: block; max-width: 220px; margin-top: 7px; overflow: hidden; font-size: 9.5px; letter-spacing: .14em; text-overflow: ellipsis; white-space: nowrap; } .menu-toggle { flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; } .mobile-nav { right: 14px; left: 14px; max-height: calc(100dvh - var(--header-height) - 18px); overflow-y: auto; } .hero { min-height: 0; align-items: stretch; padding-top: 42px; padding-bottom: 58px; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; } .hero-copy { width: 100%; min-width: 0; } .hero h1 { width: 100%; max-width: 100%; font-size: clamp(45px, 13vw, 57px); line-height: .88; letter-spacing: -.025em; overflow: visible; } .hero h1 > span, .hero h1 .hero-kto, .hero h1 .hero-outline { max-width: 100%; } .hero-lead { width: 100%; max-width: 100%; margin-top: 24px; font-size: clamp(20px, 5.4vw, 23px); line-height: 1.14; } .hero-lead > span { display: block; } .hero-text { width: 100%; max-width: 100%; margin-top: 18px; font-size: 16.5px; line-height: 1.55; } .hero-art { display: grid; width: 100%; min-height: 0; margin-top: 28px; } .hero-stage { position: relative; inset: auto; width: min(76vw, 290px); height: auto; aspect-ratio: 1 / 1; margin-inline: auto; } .hero-icon { width: 58%; max-width: 170px; } .hero-question-card { position: relative; right: auto; bottom: auto; width: 100%; max-width: none; margin: -22px 0 0; padding: 20px 20px 22px; backdrop-filter: blur(12px); } .hero-question-card .hero-questions { font-size: clamp(27px, 7.6vw, 32px); line-height: 1.1; } .hero-questions span { white-space: normal; } .hero-bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; margin-top: 24px; } .hero-bottom .hero-actions { width: 100%; margin: 0; } .hero-bottom .hero-cta { width: 100%; max-width: 100%; min-width: 0; min-height: 52px; justify-content: space-between; padding: 13px 18px; gap: 14px; font-size: clamp(14px, 3.9vw, 16px); } .hero-cta__text { display: block; min-width: 0; white-space: normal; } .fact-row, .hero-bottom .fact-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; max-width: none; margin: 0; } .fact-row span, .hero-bottom .fact-row span { width: 100%; min-height: 46px; padding: 10px 13px; border-radius: 12px; font-size: 15px; white-space: normal; } .cards, .compact-cards, .scene-cards, .feature-cards, .manipulation-cards, .result-cards, .module-cards, .pricing-cards, .effect-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; grid-auto-rows: auto !important; gap: 14px; width: 100%; max-width: 100%; overflow: visible !important; padding: 0 !important; scroll-snap-type: none !important; } .cards > *, .compact-cards > *, .scene-cards > *, .feature-cards > *, .manipulation-cards > *, .result-cards > *, .module-cards > *, .pricing-cards > *, .effect-grid > * { width: 100%; min-width: 0; height: auto !important; min-height: 0 !important; transform: none !important; scroll-snap-align: none !important; } .card { border-radius: 18px; box-shadow: none; } .card svg, .step svg, .fact-row svg, .effect-card svg, .button svg, .author-mark svg, .hero-icon { flex: 0 0 auto; fill: none !important; stroke-linecap: round; stroke-linejoin: round; } .card svg, .step svg, .effect-card svg { width: 40px; height: 40px; margin: 0; stroke-width: 1.55; } .card h3, .step h3, .effect-card h3 { font-size: clamp(23px, 6.6vw, 28px); line-height: 1.06; } .card p, .step p, .effect-card p { font-size: 16.5px; line-height: 1.52; } .compact-cards .insight-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 15px; row-gap: 0; padding: 21px; } .compact-cards .insight-card svg { grid-column: 1; grid-row: 1; align-self: center; } .compact-cards .insight-card h3 { grid-column: 2; grid-row: 1; align-self: center; } .compact-cards .insight-card p { grid-column: 1 / -1; grid-row: 2; margin-top: 18px; } .scene-card, .feature-card, .manipulation-card, .module-card, .pricing-card, .effect-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 16px; padding: 21px; } .scene-card > svg, .feature-card > svg, .manipulation-card > svg, .module-card > svg, .pricing-card > svg, .effect-card > svg { grid-column: 1; align-self: start; } .scene-card > div, .feature-card > div, .manipulation-card > div, .module-card > div, .pricing-card > div, .effect-card > div { grid-column: 2; min-width: 0; } .scene-card h3, .feature-card h3, .manipulation-card h3, .module-card h3, .pricing-card h3, .effect-card h3 { margin: 0; } .scene-card p, .feature-card p, .manipulation-card p, .module-card p, .pricing-card p, .effect-card p { margin-top: 11px; } .feature-card::after { display: none !important; } .result-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 15px; padding: 21px; } .result-card > svg { grid-column: 1; grid-row: 1; align-self: center; } .result-card > h3 { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; margin: 0; } .result-card > p { grid-column: 1 / -1; grid-row: 2; margin-top: 17px; } .steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border-radius: 20px; box-shadow: none; } .step { display: block; min-height: 0; padding: 22px 20px; border-right: 0; border-bottom: 1px solid var(--line); } .step:last-child { border-bottom: 0; } .step::after { display: none; } .step-head { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 15px; min-height: 0; } .step-head > svg { width: 40px; height: 40px; margin: 0; fill: none !important; } .step-head h3 { min-width: 0; margin: 0; font-size: clamp(25px, 7vw, 29px); line-height: 1; white-space: normal; } .step > p { margin: 17px 0 0; } .author-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .author-mark { width: 104px; } .contact-section { padding-bottom: calc(58px + env(safe-area-inset-bottom)); } .contact-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; width: 100%; max-width: 100%; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; } .contact-panel > div { margin-bottom: 0; } .contact-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; width: 100%; min-width: 0; } .contact-form label, .contact-form__wide { grid-column: auto; width: 100%; min-width: 0; } .contact-form label > span { font-size: 14px; } .contact-form input, .contact-form textarea { display: block; width: 100%; max-width: 100%; min-width: 0; padding-inline: 15px; font-size: 16px; } .contact-form textarea { min-height: 150px; } .contact-form .contact-submit { grid-column: auto; justify-self: start; width: max-content; max-width: 100%; min-width: 0; padding: 12px 16px 12px 18px; gap: 13px; font-size: clamp(13px, 3.65vw, 15px); white-space: nowrap; } .contact-form .contact-submit svg { width: 19px; height: 19px; } .footer-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; } .footer-promise { align-items: flex-start; text-align: left; } .footer-promise > strong { white-space: normal; } .footer-contacts { justify-content: flex-start; } } @media (max-width: 360px) { .hero h1 { font-size: 43px; } .contact-form .contact-submit { font-size: 12.5px; gap: 9px; padding-inline: 14px; } } @media (max-width: 700px) { .compact-cards, .scene-cards, .feature-cards, .manipulation-cards, .result-cards, .module-cards, .pricing-cards, .effect-grid { --mobile-card-peek: 18%; --mobile-card-gap: 10px; display: grid !important; grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: calc(100% - var(--mobile-card-peek) - var(--mobile-card-gap)) !important; grid-auto-rows: 1fr !important; align-items: stretch !important; gap: var(--mobile-card-gap) !important; width: calc(100% + 14px) !important; max-width: none !important; margin-right: -14px; overflow-x: auto !important; overflow-y: hidden !important; padding: 0 0 8px !important; scroll-snap-type: x mandatory !important; scroll-padding-inline: 0; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; scrollbar-width: none; } .compact-cards::-webkit-scrollbar, .scene-cards::-webkit-scrollbar, .feature-cards::-webkit-scrollbar, .manipulation-cards::-webkit-scrollbar, .result-cards::-webkit-scrollbar, .module-cards::-webkit-scrollbar, .pricing-cards::-webkit-scrollbar, .effect-grid::-webkit-scrollbar { display: none; } .compact-cards > *, .scene-cards > *, .feature-cards > *, .manipulation-cards > *, .result-cards > *, .module-cards > *, .pricing-cards > *, .effect-grid > * { width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; align-self: stretch !important; scroll-snap-align: start; scroll-snap-stop: normal; } .compact-cards > *:last-child, .scene-cards > *:last-child, .feature-cards > *:last-child, .manipulation-cards > *:last-child, .result-cards > *:last-child, .module-cards > *:last-child, .pricing-cards > *:last-child, .effect-grid > *:last-child { scroll-snap-align: end; } .compact-cards svg, .scene-cards svg, .feature-cards svg, .manipulation-cards svg, .result-cards svg, .module-cards svg, .pricing-cards svg, .effect-grid svg { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; max-width: 40px !important; max-height: 40px !important; fill: none !important; stroke-linecap: round; stroke-linejoin: round; } .steps { grid-auto-flow: row !important; overflow: hidden !important; } } @media (max-width: 370px) { .compact-cards, .scene-cards, .feature-cards, .manipulation-cards, .result-cards, .module-cards, .pricing-cards, .effect-grid { --mobile-card-peek: 14%; } } @media (max-width: 700px) { .menu-toggle span:not(.sr-only) { background: var(--red) !important; } .brand-name { max-width: 290px; font-size: clamp(18px, 5vw, 21px); letter-spacing: .04em; } .brand-role { max-width: 250px; margin-top: 7px; font-size: clamp(10px, 2.9vw, 12px); font-weight: 650; letter-spacing: .135em; } .fact-row, .hero-bottom .fact-row { display: flex !important; flex-flow: row wrap !important; align-items: center; justify-content: flex-start !important; gap: 8px !important; width: 100% !important; } .fact-row span, .hero-bottom .fact-row span { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; min-height: 44px; padding: 9px 13px !important; white-space: nowrap !important; } .fact-row svg, .hero-bottom .fact-row svg { flex: 0 0 19px !important; width: 19px !important; height: 19px !important; } .scene-card, .feature-card, .manipulation-card, .module-card, .pricing-card, .effect-card { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; column-gap: 15px !important; row-gap: 0 !important; align-content: start !important; align-items: start !important; padding: 21px !important; } .scene-card > div, .feature-card > div, .manipulation-card > div, .module-card > div, .pricing-card > div, .effect-card > div { display: contents !important; } .scene-card > svg, .feature-card > svg, .manipulation-card > svg, .module-card > svg, .pricing-card > svg, .effect-card > svg { grid-column: 1 !important; grid-row: 1 !important; align-self: center !important; } .scene-card h3, .feature-card h3, .manipulation-card h3, .module-card h3, .pricing-card h3, .effect-card h3 { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; min-width: 0 !important; margin: 0 !important; } .scene-card p, .feature-card p, .manipulation-card p, .module-card p, .pricing-card p, .effect-card p { grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important; margin: 18px 0 0 !important; } } @media (max-width: 360px) { .brand-name { font-size: 17px; } .brand-role { font-size: 9.5px; } .fact-row span, .hero-bottom .fact-row span { padding-inline: 11px !important; font-size: 14px; } } .mobile-scroll-indicator { display: none; } @media (max-width: 700px) { .mobile-scroll-indicator { display: flex; width: 96px; height: 15px; align-items: center; justify-content: center; margin: 8px auto 0; } .mobile-scroll-indicator[hidden] { display: none; } .mobile-scroll-indicator__track { position: relative; width: 100%; height: 3px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--muted) 30%, transparent); } .mobile-scroll-indicator__thumb { position: absolute; inset: 0 auto 0 0; min-width: 18px; height: 100%; border-radius: inherit; background: var(--red); transform: translate3d(0, 0, 0); will-change: width, transform; } } @media (max-width: 700px) { .mobile-scroll-indicator { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; width: 100%; height: auto; margin: 8px 0 0; } .mobile-scroll-indicator__hint { justify-self: end; color: var(--muted); font-size: 11px; line-height: 1; letter-spacing: .04em; opacity: .78; transition: opacity .24s ease, transform .24s ease; animation: mobile-swipe-hint 1.5s ease-in-out 2; } .mobile-scroll-indicator.is-used .mobile-scroll-indicator__hint { opacity: 0; transform: translateX(5px); pointer-events: none; } .mobile-scroll-indicator__track { width: 100%; height: 3px; } .compact-cards, .scene-cards, .feature-cards, .manipulation-cards, .result-cards, .module-cards, .pricing-cards, .effect-grid { -webkit-mask-image: linear-gradient( to right, #000 0, #000 calc(100% - 30px), transparent 100% ); mask-image: linear-gradient( to right, #000 0, #000 calc(100% - 30px), transparent 100% ); } .compact-cards.has-scrolled:not(.is-at-end), .scene-cards.has-scrolled:not(.is-at-end), .feature-cards.has-scrolled:not(.is-at-end), .manipulation-cards.has-scrolled:not(.is-at-end), .result-cards.has-scrolled:not(.is-at-end), .module-cards.has-scrolled:not(.is-at-end), .pricing-cards.has-scrolled:not(.is-at-end), .effect-grid.has-scrolled:not(.is-at-end) { -webkit-mask-image: linear-gradient( to right, transparent 0, #000 20px, #000 calc(100% - 30px), transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 20px, #000 calc(100% - 30px), transparent 100% ); } .compact-cards.is-at-end, .scene-cards.is-at-end, .feature-cards.is-at-end, .manipulation-cards.is-at-end, .result-cards.is-at-end, .module-cards.is-at-end, .pricing-cards.is-at-end, .effect-grid.is-at-end { -webkit-mask-image: linear-gradient( to right, transparent 0, #000 20px, #000 100% ); mask-image: linear-gradient( to right, transparent 0, #000 20px, #000 100% ); } .compact-cards > *, .scene-cards > *, .feature-cards > *, .manipulation-cards > *, .result-cards > *, .module-cards > *, .pricing-cards > *, .effect-grid > * { cursor: pointer; -webkit-tap-highlight-color: color-mix(in srgb, var(--red) 12%, transparent); } } @keyframes mobile-swipe-hint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } } @media (prefers-reduced-motion: reduce) { .mobile-scroll-indicator__hint { animation: none; } } body.salty-program-who-controls-the-conversation, body.salty-program-who-controls-the-conversation button, body.salty-program-who-controls-the-conversation input, body.salty-program-who-controls-the-conversation textarea, body.salty-program-who-controls-the-conversation select, body.salty-program-who-controls-the-conversation .elementor, body.salty-program-who-controls-the-conversation .elementor-widget-container { font-family: var(--font-body) !important; } body.salty-program-who-controls-the-conversation :is( h1, h2, h3, h4, h5, h6, strong, .brand-name, .hero-questions, .closing-quote ) { font-family: var(--font-display) !important; } body.salty-program-who-controls-the-conversation :is( h1, h2, h3, h4, h5, h6, .brand-name, .brand-role, .main-nav a, .mobile-nav a, .footer-brand strong, .footer-promise > strong ) { color: var(--text) !important; } body.salty-program-who-controls-the-conversation :is( .eyebrow, .mini-eyebrow, .pricing-kicker ) { color: var(--red) !important; } body.salty-program-who-controls-the-conversation .footer-brand strong, body.salty-program-who-controls-the-conversation .footer-brand span { text-decoration: none !important; border: 0 !important; background: none !important; box-shadow: none !important; } body.salty-program-who-controls-the-conversation .footer-brand span { color: var(--muted) !important; } body.salty-program-who-controls-the-conversation .footer-brand strong::before, body.salty-program-who-controls-the-conversation .footer-brand strong::after, body.salty-program-who-controls-the-conversation .footer-brand span::before, body.salty-program-who-controls-the-conversation .footer-brand span::after { content: none !important; display: none !important; } body.salty-program-who-controls-the-conversation .hero .reveal { opacity: 1 !important; transform: none !important; } body.salty-program-who-controls-the-conversation .closing-quote { color: var(--text) !important; } body.salty-program-who-controls-the-conversation .author-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 30px; max-width: 900px; margin-inline: auto; text-align: center; } body.salty-program-who-controls-the-conversation .author-mark { margin-inline: auto; } body.salty-program-who-controls-the-conversation .author-copy { width: 100%; max-width: 820px; text-align: center; } body.salty-program-who-controls-the-conversation .author-copy .eyebrow, body.salty-program-who-controls-the-conversation .author-copy h2, body.salty-program-who-controls-the-conversation .author-copy p { margin-inline: auto; } body.salty-program-who-controls-the-conversation .author-copy > p:last-child { max-width: 760px; } body.salty-program-who-controls-the-conversation .contact-section { padding-bottom: 34px; } @media (max-width: 700px) { body.salty-program-who-controls-the-conversation .author-grid { gap: 22px; } body.salty-program-who-controls-the-conversation .author-copy { max-width: 100%; } body.salty-program-who-controls-the-conversation .contact-section { padding-bottom: calc(28px + env(safe-area-inset-bottom)); } } @media (min-width: 701px) { body.salty-program-who-controls-the-conversation .author-grid { grid-template-columns: 200px minmax(0, 1fr); justify-items: stretch; align-items: center; gap: 50px; width: min(100%, 930px); max-width: 930px; margin-inline: auto; text-align: left; } body.salty-program-who-controls-the-conversation .author-mark { width: 200px; margin: 0; justify-self: start; } body.salty-program-who-controls-the-conversation .author-copy { width: 100%; max-width: 680px; text-align: left; } body.salty-program-who-controls-the-conversation .author-copy .eyebrow, body.salty-program-who-controls-the-conversation .author-copy h2, body.salty-program-who-controls-the-conversation .author-copy p { margin-left: 0; margin-right: 0; } body.salty-program-who-controls-the-conversation .author-copy > p:last-child { max-width: 680px; } } @media (max-width: 700px) { body.salty-program-who-controls-the-conversation .author-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } body.salty-program-who-controls-the-conversation .author-mark { margin-inline: auto; } body.salty-program-who-controls-the-conversation .author-copy { text-align: center; } body.salty-program-who-controls-the-conversation .author-copy .eyebrow, body.salty-program-who-controls-the-conversation .author-copy h2, body.salty-program-who-controls-the-conversation .author-copy p { margin-inline: auto; } } body.salty-program-who-controls-the-conversation { --header-height: 106px; } body.salty-program-who-controls-the-conversation .site-header { height: auto; min-height: var(--header-height); } body.salty-program-who-controls-the-conversation .header-inner { min-height: var(--header-height); height: auto; align-items: flex-start; } body.salty-program-who-controls-the-conversation .site-logo-link { display: block; flex: 0 0 403px; width: 403px; max-width: 403px; margin: 23px 0 5px; line-height: 0; text-decoration: none !important; } body.salty-program-who-controls-the-conversation .site-logo-image { display: block; width: 403px; max-width: 100%; height: auto; margin: 0; object-fit: contain; filter: none; user-select: none; } html[data-theme="light"] body.salty-program-who-controls-the-conversation .site-logo-image { filter: invert(1); } body.salty-program-who-controls-the-conversation .main-nav, body.salty-program-who-controls-the-conversation .header-actions { align-self: center; } body.salty-program-who-controls-the-conversation .site-logo-link, body.salty-program-who-controls-the-conversation .site-logo-link:hover, body.salty-program-who-controls-the-conversation .site-logo-link:focus, body.salty-program-who-controls-the-conversation .site-logo-link:active { color: inherit !important; border: 0 !important; outline-offset: 5px; background: transparent !important; box-shadow: none !important; } body.salty-program-who-controls-the-conversation .site-logo-link::before, body.salty-program-who-controls-the-conversation .site-logo-link::after, body.salty-program-who-controls-the-conversation .site-logo-image::before, body.salty-program-who-controls-the-conversation .site-logo-image::after { content: none !important; display: none !important; } @media (max-width: 1160px) { body.salty-program-who-controls-the-conversation .header-inner { position: relative; } } @media (max-width: 900px) { body.salty-program-who-controls-the-conversation { --header-height: 90px; } body.salty-program-who-controls-the-conversation .site-logo-link { flex-basis: auto; width: clamp(265px, 71.3vw, 328px); max-width: calc(100% - 62px); margin-top: 18px; margin-bottom: 5px; } body.salty-program-who-controls-the-conversation .site-logo-image { width: 100%; max-width: 100%; } body.salty-program-who-controls-the-conversation .header-actions { align-self: center; margin-left: auto; } } @media (max-width: 370px) { body.salty-program-who-controls-the-conversation .site-logo-link { width: 250px; max-width: calc(100% - 58px); } } body.salty-program-who-controls-the-conversation .brand { display: block !important; flex: 0 0 403px !important; width: 403px !important; max-width: 403px !important; aspect-ratio: 1920 / 371; min-width: 0 !important; min-height: 0 !important; margin: 23px 0 5px !important; padding: 0 !important; overflow: visible !important; line-height: 0 !important; font-size: 0 !important; text-decoration: none !important; background: url("/assets/wp-content/uploads/2026/04/logo-w.png") left center / contain no-repeat !important; border: 0 !important; box-shadow: none !important; } body.salty-program-who-controls-the-conversation .brand-name, body.salty-program-who-controls-the-conversation .brand-role { display: none !important; visibility: hidden !important; } html[data-theme="light"] body.salty-program-who-controls-the-conversation .brand { filter: invert(1); } @media (max-width: 900px) { body.salty-program-who-controls-the-conversation .brand { flex-basis: auto !important; width: clamp(265px, 71.3vw, 328px) !important; max-width: calc(100% - 62px) !important; margin-top: 18px !important; margin-bottom: 5px !important; } } @media (max-width: 370px) { body.salty-program-who-controls-the-conversation .brand { width: 250px !important; max-width: calc(100% - 58px) !important; } } @media (min-width: 901px) { body.salty-program-who-controls-the-conversation { --header-height: 72px; } body.salty-program-who-controls-the-conversation .site-header, body.salty-program-who-controls-the-conversation .header-inner { min-height: var(--header-height); } body.salty-program-who-controls-the-conversation .site-logo-link, body.salty-program-who-controls-the-conversation .brand { flex: 0 0 220px !important; width: 220px !important; max-width: 220px !important; margin-top: 23px !important; margin-bottom: 5px !important; } body.salty-program-who-controls-the-conversation .site-logo-image { width: 100% !important; max-width: 100% !important; height: auto !important; } } html[data-theme="dark"] body.salty-program-who-controls-the-conversation .hero-question-card .hero-questions, html[data-theme="dark"] body.salty-program-who-controls-the-conversation .hero-question-card .hero-questions span { color: #ffffff !important; opacity: 1 !important; -webkit-text-fill-color: #ffffff !important; } html[data-theme="light"] body.salty-program-who-controls-the-conversation .hero-question-card .hero-questions, html[data-theme="light"] body.salty-program-who-controls-the-conversation .hero-question-card .hero-questions span { color: var(--text) !important; opacity: 1 !important; -webkit-text-fill-color: var(--text) !important; } .contact-form--wpforms { display: block; width: 100%; min-width: 0; } .contact-form--wpforms .wpforms-container, .contact-form--wpforms .wpforms-form, .contact-form--wpforms .wpforms-field-container { width: 100% !important; max-width: none !important; margin: 0 !important; } .contact-form--wpforms .wpforms-field-container { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: clamp(22px, 3vw, 44px) !important; row-gap: 24px !important; } .contact-form--wpforms .wpforms-field { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .contact-form--wpforms .wpforms-field-medium, .contact-form--wpforms .wpforms-field-large, .contact-form--wpforms .wpforms-field-row, .contact-form--wpforms .wpforms-field-row-block, .contact-form--wpforms .wpforms-field-row-block input, .contact-form--wpforms .wpforms-field-row-block select { width: 100% !important; max-width: none !important; } .contact-form--wpforms .wpforms-field:nth-child(1) { grid-column: 1; grid-row: 1; } .contact-form--wpforms .wpforms-field:nth-child(2) { grid-column: 2; grid-row: 1; } .contact-form--wpforms .wpforms-field:nth-child(3) { grid-column: 1; grid-row: 2; } .contact-form--wpforms .wpforms-field:nth-child(4) { grid-column: 2; grid-row: 2; } .contact-form--wpforms .wpforms-field:nth-child(n + 5), .contact-form--wpforms .wpforms-field.wpforms-field-textarea, .contact-form--wpforms .wpforms-field.wpforms-field-checkbox, .contact-form--wpforms .wpforms-field.wpforms-field-gdpr-checkbox, .contact-form--wpforms .wpforms-field.wpforms-field-content { grid-column: 1 / -1 !important; grid-row: auto !important; } .contact-form--wpforms .wpforms-field-label, .contact-form--wpforms .wpforms-field-label-inline { display: block; margin: 0 0 9px !important; color: var(--muted-strong) !important; font-family: inherit !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: .01em; } .contact-form--wpforms .wpforms-required-label { color: var(--red) !important; } .contact-form--wpforms input[type="text"], .contact-form--wpforms input[type="email"], .contact-form--wpforms input[type="tel"], .contact-form--wpforms input[type="number"], .contact-form--wpforms input[type="url"], .contact-form--wpforms input[type="date"], .contact-form--wpforms select, .contact-form--wpforms textarea { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; border: 1px solid var(--line-strong) !important; border-radius: 12px !important; outline: none !important; color: var(--text) !important; background: color-mix(in srgb, var(--surface) 70%, transparent) !important; box-shadow: none !important; font-family: inherit !important; font-size: 16px !important; line-height: 1.4 !important; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; } .contact-form--wpforms input[type="text"], .contact-form--wpforms input[type="email"], .contact-form--wpforms input[type="tel"], .contact-form--wpforms input[type="number"], .contact-form--wpforms input[type="url"], .contact-form--wpforms input[type="date"], .contact-form--wpforms select { height: 54px !important; padding: 0 17px !important; } .contact-form--wpforms textarea { min-height: 142px !important; padding: 16px 17px !important; resize: vertical; } .contact-form--wpforms input:focus, .contact-form--wpforms select:focus, .contact-form--wpforms textarea:focus { border-color: var(--red) !important; background: color-mix(in srgb, var(--surface) 88%, transparent) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 12%, transparent) !important; } .contact-form--wpforms input::placeholder, .contact-form--wpforms textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent) !important; opacity: 1 !important; } .contact-form--wpforms .wpforms-field:not(.wpforms-field-checkbox):not(.wpforms-field-gdpr-checkbox) > .wpforms-field-description, .contact-form--wpforms .wpforms-field:not(.wpforms-field-checkbox):not(.wpforms-field-gdpr-checkbox) .wpforms-field-sublabel { display: none !important; } .contact-form--wpforms .wpforms-field-checkbox, .contact-form--wpforms .wpforms-field-gdpr-checkbox { margin-top: -2px !important; } .contact-form--wpforms .wpforms-field-checkbox ul, .contact-form--wpforms .wpforms-field-gdpr-checkbox ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } .contact-form--wpforms .wpforms-field-checkbox li, .contact-form--wpforms .wpforms-field-gdpr-checkbox li { display: flex !important; align-items: flex-start !important; gap: 11px !important; margin: 0 !important; } .contact-form--wpforms input[type="checkbox"] { flex: 0 0 auto; width: 20px !important; height: 20px !important; margin: 1px 0 0 !important; accent-color: var(--red); } .contact-form--wpforms .wpforms-field-checkbox label, .contact-form--wpforms .wpforms-field-gdpr-checkbox label, .contact-form--wpforms .wpforms-field-description { color: var(--muted) !important; font-family: inherit !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.45 !important; } .contact-form--wpforms .wpforms-field-checkbox label a, .contact-form--wpforms .wpforms-field-gdpr-checkbox label a { color: var(--muted-strong) !important; text-decoration-color: color-mix(in srgb, var(--red) 70%, transparent) !important; text-underline-offset: 3px; } .contact-form--wpforms .wpforms-submit-container { margin: 26px 0 0 !important; padding: 0 !important; } .contact-form--wpforms button[type="submit"].wpforms-submit { display: inline-flex !important; width: 100% !important; max-width: none !important; min-height: 54px !important; align-items: center; justify-content: center; padding: 14px 22px !important; border: 1px solid transparent !important; border-radius: 12px !important; color: #fff !important; background: linear-gradient(135deg, var(--wine), var(--red-deep)) !important; box-shadow: var(--shadow-button) !important; font-family: inherit !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.25 !important; cursor: pointer; transition: transform .2s ease, background .2s ease, opacity .2s ease; } .contact-form--wpforms button[type="submit"].wpforms-submit:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--wine) 84%, #fff), color-mix(in srgb, var(--red-deep) 88%, #fff)) !important; transform: translateY(-1px); } .contact-form--wpforms button[type="submit"].wpforms-submit:disabled { cursor: wait; opacity: .68; transform: none; } .contact-form--wpforms .wpforms-error, .contact-form--wpforms label.wpforms-error { color: #ffb1b1 !important; font-size: 12px !important; } .contact-form--wpforms input.wpforms-error, .contact-form--wpforms textarea.wpforms-error, .contact-form--wpforms select.wpforms-error { border-color: #ff7070 !important; } .contact-form--wpforms .wpforms-confirmation-container-full, .contact-form--wpforms .wpforms-confirmation-container { margin: 0 !important; padding: 18px 20px !important; border: 1px solid color-mix(in srgb, var(--red) 44%, var(--line)) !important; border-radius: 14px !important; color: var(--text) !important; background: color-mix(in srgb, var(--surface) 88%, transparent) !important; } .contact-form-status { margin: 0; color: var(--text); } .contact-form-status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 700px) { .contact-form--wpforms .wpforms-field-container { grid-template-columns: minmax(0, 1fr) !important; row-gap: 20px !important; } .contact-form--wpforms .wpforms-field, .contact-form--wpforms .wpforms-field:nth-child(1), .contact-form--wpforms .wpforms-field:nth-child(2), .contact-form--wpforms .wpforms-field:nth-child(3), .contact-form--wpforms .wpforms-field:nth-child(4), .contact-form--wpforms .wpforms-field:nth-child(n + 5) { grid-column: 1 !important; grid-row: auto !important; } } .contact-form--wpforms .wpforms-field-checkbox > .wpforms-field-label, .contact-form--wpforms .wpforms-field-gdpr-checkbox > .wpforms-field-label { display: none !important; } .contact-form--wpforms .wpforms-field-checkbox, .contact-form--wpforms .wpforms-field-gdpr-checkbox { margin-top: 0 !important; padding-top: 0 !important; } .contact-form--wpforms .wpforms-field-checkbox li, .contact-form--wpforms .wpforms-field-gdpr-checkbox li { align-items: flex-start !important; } @media (min-width: 701px) { .contact-form--wpforms .wpforms-submit-container { display: flex !important; justify-content: flex-start !important; align-items: center !important; } .contact-form--wpforms button[type="submit"].wpforms-submit { width: auto !important; max-width: none !important; min-width: 220px !important; padding-left: 30px !important; padding-right: 30px !important; } } .contact-form--wpforms .salty-consent-field > .wpforms-field-label, .contact-form--wpforms .salty-consent-field > legend, .contact-form--wpforms .salty-star-only-label, .contact-form--wpforms .wpforms-field-checkbox > label.wpforms-field-label, .contact-form--wpforms .wpforms-field-gdpr-checkbox > label.wpforms-field-label, .contact-form--wpforms .wpforms-field-checkbox > legend.wpforms-field-label, .contact-form--wpforms .wpforms-field-gdpr-checkbox > legend.wpforms-field-label { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .contact-form--wpforms .salty-consent-field { row-gap: 0 !important; margin-top: 0 !important; padding-top: 0 !important; } .contact-form--wpforms .salty-consent-field ul, .contact-form--wpforms .salty-consent-field li { margin-top: 0 !important; padding-top: 0 !important; } .manipulation-swipe-hint { display: none; } .manipulation-card p, .manipulation-card p * { color: var(--muted) !important; opacity: 1 !important; -webkit-text-fill-color: var(--muted) !important; } @media (max-width: 700px) { .manipulation-swipe-hint { display: flex; align-items: center; justify-content: flex-end; gap: 7px; width: 100%; margin: 13px 0 12px; color: rgba(255, 255, 255, .82) !important; font-size: 13px; line-height: 1.2; letter-spacing: .025em; opacity: 1 !important; -webkit-text-fill-color: rgba(255, 255, 255, .82) !important; } .manipulation-swipe-hint span { color: var(--red) !important; font-size: 19px; line-height: 1; -webkit-text-fill-color: var(--red) !important; } .manipulation-cards + .mobile-scroll-indicator .mobile-scroll-indicator__hint { display: none !important; } .manipulation-cards + .mobile-scroll-indicator { margin-top: 10px; } } .contact-form--wpforms .salty-consent-field > .wpforms-field-label, .contact-form--wpforms .salty-consent-field > legend, .contact-form--wpforms .salty-consent-field > .wpforms-field-description, .contact-form--wpforms .salty-consent-heading { display: none !important; width: 0 !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .contact-form--wpforms .salty-consent-field .wpforms-required-label { display: none !important; } .contact-form--wpforms textarea { height: 106px !important; min-height: 106px !important; } .contact-form--wpforms .salty-form-actions-row { width: 100%; margin-top: 22px; } .contact-form--wpforms .salty-form-actions-row .salty-consent-field, .contact-form--wpforms .salty-form-actions-row .wpforms-submit-container { margin: 0 !important; padding: 0 !important; } .contact-form--wpforms .salty-consent-field ul, .contact-form--wpforms .salty-consent-field li { margin: 0 !important; padding: 0 !important; } @media (min-width: 701px) { .contact-form--wpforms .salty-form-actions-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; column-gap: clamp(28px, 4vw, 64px) !important; align-items: center !important; } .contact-form--wpforms .salty-form-actions-row .salty-consent-field { min-width: 0 !important; justify-self: stretch !important; text-align: left !important; } .contact-form--wpforms .salty-form-actions-row .wpforms-submit-container { justify-self: end !important; align-self: center !important; display: block !important; } .contact-form--wpforms .salty-form-actions-row button[type="submit"].wpforms-submit { width: auto !important; min-width: 220px !important; max-width: none !important; margin: 0 !important; padding-left: 30px !important; padding-right: 30px !important; } } @media (max-width: 700px) { .contact-form--wpforms .salty-form-actions-row { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; row-gap: 20px !important; } .contact-form--wpforms .salty-form-actions-row button[type="submit"].wpforms-submit { width: 100% !important; min-width: 0 !important; } } body.salty-program-who-controls-the-conversation .author-mark { overflow: hidden; padding: 0; } body.salty-program-who-controls-the-conversation .author-mark .author-portrait { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; border-radius: inherit; } @media (max-width: 700px) { body.salty-program-who-controls-the-conversation .author-mark { width: min(75vw, 360px) !important; max-width: 75vw !important; aspect-ratio: 1 / 1; margin-inline: auto !important; } body.salty-program-who-controls-the-conversation #effect .effect-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; gap: 16px !important; width: 100% !important; overflow: visible !important; scroll-snap-type: none !important; -webkit-mask-image: none !important; mask-image: none !important; } body.salty-program-who-controls-the-conversation #effect .effect-grid > .effect-card { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; scroll-snap-align: none !important; cursor: default !important; } body.salty-program-who-controls-the-conversation #effect .mobile-scroll-indicator { display: none !important; } }
/* Static replacement for the former WPForms widget. No submission endpoint. */
body.salty-program-who-controls-the-conversation{font-size:19px}
.demo-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;width:100%;font-family:Arial,sans-serif}
.demo-notice,.demo-consent,.demo-submit,.demo-result{grid-column:1/-1}
.demo-notice{font-size:13px;line-height:1.5;padding:10px 14px;background:#221622;color:#e7cddd;border-left:2px solid #b47b9b;margin:0}
.demo-field{display:grid;gap:8px;font-size:15px;line-height:1.4;min-width:0}
.demo-field:has(textarea){grid-column:1/-1}
.demo-field input,.demo-field select,.demo-field textarea{width:100%;border:1px solid #8d818d;border-radius:2px;background:rgba(255,255,255,.05);color:#f7f3ef;padding:12px;min-height:45px;font:inherit}
.demo-field textarea{min-height:125px;resize:vertical}
.demo-field input:focus,.demo-field select:focus,.demo-field textarea:focus{outline:2px solid #ad7092;outline-offset:3px}
.demo-consent{display:flex;align-items:flex-start;gap:13px;font-size:13px;line-height:1.5;color:#ddd;margin:4px 0}
.demo-consent input{flex:0 0 17px;width:17px;height:17px;margin-top:3px;accent-color:#8c3b65}
.demo-consent a{text-decoration:underline}
.demo-submit{justify-self:start;border:1px solid #9a5877;background:linear-gradient(120deg,#62183f,#9f354c);color:white;padding:14px 22px;border-radius:8px;font:600 16px Arial;cursor:pointer}
.demo-result:empty{display:none}.demo-result{padding:14px;background:#221525;font-size:15px;line-height:1.5;margin:0}
.program-form-placeholder{width:100%}
@media(max-width:700px){.demo-form{grid-template-columns:1fr;gap:16px}.demo-notice,.demo-consent,.demo-submit,.demo-result,.demo-field{grid-column:1}.demo-submit{width:100%}.demo-consent{font-size:12px}}
@media(scripting:none){.reveal{opacity:1!important;transform:none!important}.mobile-nav{display:flex!important;position:static!important}}