@layer reset, tokens, base, layout, components, sections, utilities;
@layer tokens {
:root {
--green-50: #eef7f1;
--green-100: #d6eedf;
--green-500: #089a44;
--green-600: #077a36;
--green-800: #005430;
--green-900: #00492a;
--ink-900: #14231b;
--ink-700: #3d4f45;
--ink-500: #5f6f66;
--white: #ffffff;
--grey-50: #f4f7f5;
--grey-100: #eaefec;
--grey-200: #dde5e0;
--grey-300: #c9d4cd;
--grey-400: #8a9690;
--red-50: #fef3f2;
--red-200: #fecdca;
--red-600: #d92d20;
--red-700: #b42318;
--amber-50: #fffaeb;
--amber-200: #fedf89;
--amber-600: #dc6803;
--amber-700: #b54708;
--blue-50: #eff8ff;
--blue-200: #b2ddff;
--blue-600: #1570ef;
--blue-700: #175cd3;
--emerald-50: #ecfdf3;
--emerald-200: #abefc6;
--emerald-600: #079455;
--emerald-700: #067647;
--white-a06: rgb(255 255 255 / 0.06);
--white-a08: rgb(255 255 255 / 0.08);
--white-a12: rgb(255 255 255 / 0.12);
--white-a18: rgb(255 255 255 / 0.18);
--white-a50: rgb(255 255 255 / 0.5);
--white-a78: rgb(255 255 255 / 0.78);
--white-a88: rgb(255 255 255 / 0.88);
--green-800-a06: rgb(0 84 48 / 0.06);
--green-500-a18: rgb(8 154 68 / 0.18);
--green-500-a35: rgb(8 154 68 / 0.35);
--shadow-ink-a06: rgb(0 40 20 / 0.06);
--shadow-ink-a14: rgb(0 40 20 / 0.14);
--shadow-ink-a22: rgb(0 40 20 / 0.22);
--overlay-ink-a48: rgb(20 35 27 / 0.48);
--size-12: 0.75rem;
--size-13: 0.8125rem;
--size-14: 0.875rem;
--size-16: 1rem;
--size-17: 1.0625rem;
--size-18: 1.125rem;
--size-20: 1.25rem;
--size-24: 1.5rem;
--size-28: 1.75rem;
--size-36: 2.25rem;
--size-40: 2.5rem;
--size-56: 3.5rem;
--weight-400: 400;
--weight-500: 500;
--weight-600: 600;
--weight-700: 700;
--spacing-4: 0.25rem;
--spacing-8: 0.5rem;
--spacing-12: 0.75rem;
--spacing-16: 1rem;
--spacing-24: 1.5rem;
--spacing-32: 2rem;
--spacing-40: 2.5rem;
--spacing-48: 3rem;
--spacing-64: 4rem;
--spacing-80: 5rem;
--spacing-96: 6rem;
--spacing-128: 8rem;
--radius-8: 0.5rem;
--radius-12: 0.75rem;
--radius-14: 0.875rem;
--radius-16: 1rem;
--radius-24: 1.5rem;
--radius-32: 2rem;
--radius-999: 999px;
--ms-150: 150ms;
--ms-200: 200ms;
--ms-250: 250ms;
--ms-400: 400ms;
--ms-600: 600ms;
--ms-800: 800ms;
--ease-out-quint: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
}
}
@layer tokens {
:root {
--color-primary: var(--green-600);
--color-primary-hover: var(--green-800);
--color-primary-active: var(--green-900);
--color-on-primary: var(--white);
--color-secondary: var(--green-800);
--color-secondary-hover: var(--green-900);
--color-accent: var(--green-500);
--color-bg: var(--white);
--color-surface: var(--white);
--color-surface-alt: var(--grey-50);
--color-surface-tint: var(--green-50);
--color-surface-tint-strong: var(--green-100);
--color-surface-raised: var(--white);
--color-surface-inverse: var(--green-800);
--color-surface-inverse-strong: var(--green-900);
--color-surface-on-inverse: var(--white-a12);
--color-overlay: var(--overlay-ink-a48);
--color-header-scrolled: var(--white-a88);
--color-text: var(--ink-900);
--color-text-secondary: var(--ink-700);
--color-text-muted: var(--ink-500);
--color-text-heading: var(--green-800);
--color-text-inverse: var(--white);
--color-text-inverse-muted: var(--white-a78);
--color-link: var(--green-600);
--color-link-hover: var(--green-800);
--color-icon: var(--green-600);
--color-icon-decorative: var(--green-500);
--hero-media-max: 18.75rem;
--hero-circle-size: 78%;
--hero-boy-width: 62%;
--hero-bracelet-img-h: 72%;
--hero-chip-max: 72%;
--hero-bracelet-size: 6.5rem;
--hero-bracelet-start: 2%;
--hero-bracelet-end: 4%;
--hero-chip-1-top: 14%;
--hero-chip-2-top: 58%;
--hero-text-max: 36rem;
--color-hero-circle: var(--white-a06);
--how-boy-width: 13.75rem;
--how-boy-rise: var(--space-9);
--demo-kids-width: 26.25rem;
--demo-success-img: 15rem;
--solutions-body-min-h: 27rem;
--color-border: var(--grey-200);
--color-border-strong: var(--grey-300);
--color-border-input: var(--grey-400);
--color-border-inverse: var(--white-a18);
--color-border-inverse-strong: var(--white-a50);
--color-divider: var(--grey-200);
--color-fixed-surface: var(--white);
--color-fixed-text: var(--ink-900);
--color-fixed-text-muted: var(--ink-500);
--color-fixed-heading: var(--green-800);
--color-fixed-tint: var(--green-50);
--color-fixed-icon: var(--green-600);
--color-fixed-hover: var(--green-800-a06);
--color-success: var(--emerald-700);
--color-success-bg: var(--emerald-50);
--color-success-border: var(--emerald-200);
--color-warning: var(--amber-700);
--color-warning-bg: var(--amber-50);
--color-warning-border: var(--amber-200);
--color-error: var(--red-700);
--color-error-bg: var(--red-50);
--color-error-border: var(--red-200);
--color-info: var(--blue-700);
--color-info-bg: var(--blue-50);
--color-info-border: var(--blue-200);
--color-focus-ring: var(--green-500);
--color-focus-ring-inverse: var(--white);
--color-focus-glow: var(--green-500-a18);
--color-hover-overlay: var(--green-800-a06);
--color-hover-overlay-inverse: var(--white-a08);
--color-disabled-bg: var(--grey-100);
--color-disabled-text: var(--grey-400);
--color-disabled-border: var(--grey-200);
--opacity-disabled: 0.6;
--font-text: 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;
--font-display: 'Montserrat Alternates', 'Montserrat Alternates Fallback', system-ui, sans-serif;
--font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
--weight-regular: var(--weight-400);
--weight-medium: var(--weight-500);
--weight-semibold: var(--weight-600);
--weight-bold: var(--weight-700);
--weight-display: var(--weight-600);
--text-display-size: clamp(var(--size-36), 1.81rem + 1.878vw, var(--size-56));
--text-display-lh: 1.15;
--text-h2-size: clamp(var(--size-28), 1.486rem + 1.127vw, var(--size-40));
--text-h2-lh: 1.2;
--text-h3-size: clamp(var(--size-20), 1.162rem + 0.376vw, var(--size-24));
--text-h3-lh: 1.35;
--text-h4-size: clamp(var(--size-18), 1.081rem + 0.188vw, var(--size-20));
--text-h4-lh: 1.4;
--text-lead-size: clamp(var(--size-18), 1.081rem + 0.188vw, var(--size-20));
--text-lead-lh: 1.6;
--text-body-size: var(--size-16);
--text-body-lh: 1.625;
--text-small-size: var(--size-14);
--text-small-lh: 1.57;
--text-eyebrow-size: var(--size-13);
--text-eyebrow-lh: 1.54;
--text-button-md-size: var(--size-16);
--text-button-lg-size: var(--size-17);
--text-stat-size: var(--text-display-size);
--tracking-display: -0.02em;
--tracking-tight: -0.015em;
--tracking-snug: -0.01em;
--tracking-normal: 0;
--tracking-eyebrow: 0.08em;
--eyebrow-transform: uppercase;
--lh-adjust: 0;
--space-1: var(--spacing-4);
--space-2: var(--spacing-8);
--space-3: var(--spacing-12);
--space-4: var(--spacing-16);
--space-5: var(--spacing-24);
--space-6: var(--spacing-32);
--space-7: var(--spacing-40);
--space-8: var(--spacing-48);
--space-9: var(--spacing-64);
--space-10: var(--spacing-80);
--space-11: var(--spacing-96);
--space-12: var(--spacing-128);
--gap-2xs: var(--space-1);
--gap-xs: var(--space-2);
--gap-sm: var(--space-3);
--gap-md: var(--space-4);
--gap-lg: var(--space-5);
--gap-xl: var(--space-6);
--gap-2xl: var(--space-8);
--gap-3xl: var(--space-9);
--section-pad-block: clamp(var(--space-9), 3.296rem + 3.005vw, var(--space-11));
--section-header-gap: clamp(var(--space-6), 1.648rem + 1.502vw, var(--space-8));
--gutter: var(--space-4);
--page-pad-inline: 1.25rem;
--container-max: 77.5rem;
--container-narrow: 45rem;
--panel-max: 87.5rem;
--panel-inset: var(--space-4);
--measure: 65ch;
--measure-heading: 28ch;
--measure-display: 22ch;
--header-height: var(--space-9);
--header-height-scrolled: var(--space-9);
--tap-target: 2.75rem;
--grid-min-card: 17.5rem;
--hero-min-h: min(calc(100svh - var(--header-height) - var(--space-4)), 47.5rem);
--hero-min-h-floor: 40rem;
--drawer-width: min(24rem, 100%);
--control-h-md: var(--space-8);
--control-h-lg: 3.5rem;
--control-h-input: 3.25rem;
--control-pad-inline-md: var(--space-5);
--control-pad-inline-lg: 1.75rem;
--textarea-min-h: 7rem;
--icon-sm: var(--space-4);
--icon-md: var(--size-20);
--icon-lg: var(--space-5);
--icon-tile-size: var(--space-8);
--step-marker-size: var(--space-8);
--badge-pad-block: 0.375rem;
--badge-dot-size: 0.375rem;
--tab-min-h: 3.5rem;
--logo-sm: 7rem;
--logo-md: 8.25rem;
--logo-lg: 8.75rem;
--spinner-size: 1.125rem;
--chip-icon-size: var(--space-6);
--text-marker-size: var(--size-18);
--text-caption-size: var(--size-13);
--feature-icon-offset: 0.2em;
--select-icon-space: calc(var(--space-4) + var(--icon-md) + var(--space-2));
--scroll-fade: var(--space-5);
--border-width: 1px;
--border-width-strong: 1.5px;
--border-width-indicator: 3px;
--border-width-accent: 2px;
--focus-ring-width: 3px;
--focus-ring-offset: 2px;
--focus-glow-width: 4px;
--radius-sm: var(--radius-8);
--radius-md: var(--radius-12);
--radius-tile: var(--radius-14);
--radius-lg: var(--radius-16);
--radius-xl: var(--radius-24);
--radius-2xl: var(--radius-32);
--radius-full: var(--radius-999);
--radius-panel: var(--radius-2xl);
--shadow-sm: 0 1px 2px var(--shadow-ink-a06);
--shadow-md: 0 0.5rem 1.5rem -0.5rem var(--shadow-ink-a14);
--shadow-lg: 0 1.5rem 3rem -1rem var(--shadow-ink-a22);
--shadow-focus: 0 0 0 var(--focus-glow-width) var(--color-focus-glow);
--shadow-focus-error: 0 0 0 var(--focus-glow-width) var(--red-200);
--drop-shadow-lg: drop-shadow(0 1.25rem 1.25rem var(--shadow-ink-a22));
--panel-glow-x: 85%;
--gradient-panel: radial-gradient(60% 80% at var(--panel-glow-x) 0%, var(--green-500-a35), transparent 70%);
--header-blur: 12px;
--duration-fast: var(--ms-150);
--duration-tab: var(--ms-200);
--duration-base: var(--ms-250);
--duration-slow: var(--ms-400);
--duration-draw: var(--ms-600);
--duration-spin: var(--ms-800);
--ease-out: var(--ease-out-quint);
--ease-in-out: var(--ease-in-out-sine);
--transition-colors:
color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
--transition-transform: transform var(--duration-base) var(--ease-out);
--nudge-distance: 4px;
--reveal-distance: var(--space-4);
--press-scale: 0.98;
--reveal-stagger: 60ms;
--duration-float: 6s;
--duration-ripple: 4s;
--duration-count: 1.2s;
--float-distance: 6px;
--ripple-scale: 1.6;
--ripple-opacity: 0.6;
--origin-inline-start: left;
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-drawer: 400;
--z-modal: 500;
--z-toast: 600;
--z-skip-link: 700;
--dir: 1;
--mask-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
@media (min-width: 768px) {
:root {
--gutter: var(--space-5);
--page-pad-inline: var(--space-6);
--hero-media-max: 26.25rem;
--hero-bracelet-size: 10rem;
--solutions-body-min-h: 20rem;
}
}
@media (min-width: 1024px) {
:root {
--page-pad-inline: var(--space-7);
--header-height: var(--space-10);
--hero-media-max: min(35rem, calc(100svh - var(--header-height) - 9rem));
--solutions-body-min-h: 20rem;
}
}
:where(.on-dark, .l-panel) {
--color-text: var(--color-text-inverse);
--color-text-secondary: var(--color-text-inverse-muted);
--color-text-muted: var(--color-text-inverse-muted);
--color-text-heading: var(--color-text-inverse);
--color-link: var(--color-text-inverse);
--color-link-hover: var(--color-text-inverse-muted);
--color-icon: var(--color-text-inverse);
--color-border: var(--color-border-inverse);
--color-divider: var(--color-border-inverse);
--color-surface-tint: var(--color-surface-on-inverse);
--color-hover-overlay: var(--color-hover-overlay-inverse);
--color-focus-ring: var(--color-focus-ring-inverse);
--gradient-panel: radial-gradient(60% 80% at var(--panel-glow-x) 0%, var(--green-500-a35), transparent 70%);
color: var(--color-text);
}
}
@layer tokens {
:lang(en) {
--font-text: 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;
--font-display: 'Montserrat Alternates', 'Montserrat Alternates Fallback', system-ui, sans-serif;
--weight-display: var(--weight-semibold);
--eyebrow-transform: uppercase;
--tracking-display: -0.02em;
--tracking-tight: -0.015em;
--tracking-snug: -0.01em;
--tracking-eyebrow: 0.08em;
--lh-adjust: 0;
}
:lang(ar) {
--font-text: 'Cairo', 'Cairo Fallback', system-ui, sans-serif;
--font-display: 'Cairo', 'Cairo Fallback', system-ui, sans-serif;
--weight-display: var(--weight-bold);
--eyebrow-transform: none;
--tracking-display: 0;
--tracking-tight: 0;
--tracking-snug: 0;
--tracking-eyebrow: 0;
--lh-adjust: 0.1;
}
[dir='rtl'] {
--dir: -1;
--panel-glow-x: 15%;
--origin-inline-start: right;
}
[dir='ltr'] {
--dir: 1;
--panel-glow-x: 85%;
--origin-inline-start: left;
}
}
@layer reset {
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-block-start: calc(var(--header-height) + var(--space-4));
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
body {
min-block-size: 100svh;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-inline-size: 100%;
}
img,
video {
block-size: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button {
cursor: pointer;
background: none;
border: 0;
padding: 0;
}
ul[role='list'],
ol[role='list'] {
list-style: none;
padding: 0;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
[hidden] {
display: none !important;
}
table {
border-collapse: collapse;
}
}
@layer base {
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/fonts-4adf3a4f7a/montserrat-latin-variable.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Montserrat Alternates';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts-4adf3a4f7a/montserrat-alternates-latin-600.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/fonts-4adf3a4f7a/cairo-arabic-variable.woff2') format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/fonts-4adf3a4f7a/cairo-latin-variable.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Montserrat Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
size-adjust: 111%;
ascent-override: 86%;
descent-override: 22%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Montserrat Alternates Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
size-adjust: 119.5%;
ascent-override: 86%;
descent-override: 22%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Cairo Fallback';
src: local('Tahoma'), local('Segoe UI'), local('Arial');
size-adjust: 104%;
ascent-override: 130%;
descent-override: 57%;
line-gap-override: 0%;
}
}
@layer base {
body {
font-family: var(--font-text);
font-size: var(--text-body-size);
line-height: calc(var(--text-body-lh) + var(--lh-adjust));
font-weight: var(--weight-regular);
color: var(--color-text);
background-color: var(--color-bg);
text-align: start;
}
:where([lang]:not(html)) {
font-family: var(--font-text);
}
h1,
h2,
h3,
h4 {
color: var(--color-text-heading);
text-wrap: balance;
}
h1,
.text-display {
font-family: var(--font-display);
font-size: var(--text-display-size);
line-height: calc(var(--text-display-lh) + var(--lh-adjust));
font-weight: var(--weight-display);
letter-spacing: var(--tracking-display);
max-inline-size: var(--measure-display);
}
h2,
.text-h2 {
font-family: var(--font-display);
font-size: var(--text-h2-size);
line-height: calc(var(--text-h2-lh) + var(--lh-adjust));
font-weight: var(--weight-display);
letter-spacing: var(--tracking-tight);
max-inline-size: var(--measure-heading);
}
h3,
.text-h3 {
font-family: var(--font-text);
font-size: var(--text-h3-size);
line-height: calc(var(--text-h3-lh) + var(--lh-adjust));
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-snug);
}
h4,
.text-h4 {
font-family: var(--font-text);
font-size: var(--text-h4-size);
line-height: calc(var(--text-h4-lh) + var(--lh-adjust));
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-normal);
}
p {
text-wrap: pretty;
}
.text-lead {
font-size: var(--text-lead-size);
line-height: calc(var(--text-lead-lh) + var(--lh-adjust));
color: var(--color-text-secondary);
max-inline-size: var(--measure);
}
.text-body {
font-size: var(--text-body-size);
line-height: calc(var(--text-body-lh) + var(--lh-adjust));
}
.text-small {
font-size: var(--text-small-size);
line-height: calc(var(--text-small-lh) + var(--lh-adjust));
font-weight: var(--weight-medium);
}
.text-eyebrow {
font-size: var(--text-eyebrow-size);
line-height: calc(var(--text-eyebrow-lh) + var(--lh-adjust));
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-eyebrow);
text-transform: var(--eyebrow-transform);
}
.text-muted {
color: var(--color-text-muted);
}
.text-secondary {
color: var(--color-text-secondary);
}
.text-numeric {
font-variant-numeric: lining-nums tabular-nums;
}
a {
color: var(--color-link);
text-decoration-thickness: from-font;
text-underline-offset: 0.2em;
transition: var(--transition-colors);
}
a:hover {
color: var(--color-link-hover);
}
strong,
b {
font-weight: var(--weight-semibold);
}
.prose > * + * {
margin-block-start: var(--gap-md);
}
.prose :where(ul, ol) {
padding-inline-start: var(--gap-lg);
}
}
@layer base {
:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus-ring);
outline-offset: var(--focus-ring-offset);
}
:focus:not(:focus-visible) {
outline: none;
}
::selection {
background-color: var(--color-surface-tint-strong);
color: var(--color-text-heading);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
[data-motion='reduce'] *,
[data-motion='reduce'] *::before,
[data-motion='reduce'] *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
@media (forced-colors: active) {
:focus-visible {
outline-color: Highlight;
}
}
}
@layer layout {
.l-container {
inline-size: 100%;
max-inline-size: calc(var(--container-max) + 2 * var(--page-pad-inline));
margin-inline: auto;
padding-inline: var(--page-pad-inline);
}
.l-container--narrow {
max-inline-size: calc(var(--container-narrow) + 2 * var(--page-pad-inline));
}
}
@layer layout {
.l-section {
padding-block: var(--section-pad-block);
}
.l-section--alt {
background-color: var(--color-surface-alt);
}
.l-section--tint {
background-color: var(--color-surface-tint);
}
.l-section--flush-top {
padding-block-start: 0;
}
.l-section__body {
margin-block-start: var(--section-header-gap);
}
}
@layer layout {
.l-panel {
position: relative;
isolation: isolate;
background-color: var(--color-surface-inverse);
background-image: var(--gradient-panel);
padding-block: var(--section-pad-block);
}
.l-panel--overflow {
overflow: visible;
}
.l-panel--clip {
overflow: clip;
}
@media (min-width: 768px) {
.l-panel {
max-inline-size: var(--panel-max);
margin-inline: var(--panel-inset);
border-radius: var(--radius-panel);
}
}
@media (min-width: 1280px) {
.l-panel {
margin-inline: auto;
inline-size: calc(100% - 2 * var(--panel-inset));
}
}
}
@layer layout {
.l-grid {
--grid-cols: 4;
display: grid;
grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
gap: var(--gutter);
}
.l-grid > * {
grid-column: 1 / -1;
}
@media (min-width: 768px) {
.l-grid {
--grid-cols: 8;
}
}
@media (min-width: 1024px) {
.l-grid {
--grid-cols: 12;
}
.l-grid > .l-span-3 { grid-column: auto / span 3; }
.l-grid > .l-span-4 { grid-column: auto / span 4; }
.l-grid > .l-span-5 { grid-column: auto / span 5; }
.l-grid > .l-span-6 { grid-column: auto / span 6; }
.l-grid > .l-span-7 { grid-column: auto / span 7; }
.l-grid > .l-span-8 { grid-column: auto / span 8; }
.l-grid > .l-span-12 { grid-column: 1 / -1; }
.l-grid > .l-start-5 { grid-column-start: 5; }
.l-grid > .l-start-6 { grid-column-start: 6; }
.l-grid > .l-start-7 { grid-column-start: 7; }
}
.l-grid--cards {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gutter);
}
.l-grid--cards > * {
grid-column: auto;
}
@media (min-width: 768px) {
.l-grid--cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.l-grid--cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.l-grid--cards.l-grid--cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.l-grid--cards.l-grid--cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.l-grid--auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, var(--grid-min-card)), 100%), 1fr));
gap: var(--gutter);
}
.l-grid--auto > * {
grid-column: auto;
}
}
@layer layout {
.l-stack {
display: flex;
flex-direction: column;
gap: var(--stack-gap, var(--gap-md));
}
.l-stack--xs { --stack-gap: var(--gap-xs); }
.l-stack--sm { --stack-gap: var(--gap-sm); }
.l-stack--lg { --stack-gap: var(--gap-lg); }
.l-stack--xl { --stack-gap: var(--gap-xl); }
.l-stack--2xl { --stack-gap: var(--gap-2xl); }
.l-stack--center {
align-items: center;
}
.l-stack--start {
align-items: flex-start;
}
.l-cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cluster-gap, var(--gap-sm));
}
.l-cluster--xs { --cluster-gap: var(--gap-xs); }
.l-cluster--lg { --cluster-gap: var(--gap-lg); }
.l-cluster--2xl { --cluster-gap: var(--gap-2xl); }
.l-cluster--between {
justify-content: space-between;
}
.l-cluster--nowrap {
flex-wrap: nowrap;
}
.l-split {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-2xl);
align-items: center;
}
@media (min-width: 1024px) {
.l-split {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap-3xl);
}
.l-split--reverse > :first-child {
order: 2;
}
}
}
@layer components {
.btn {
--btn-bg: transparent;
--btn-fg: var(--color-text-heading);
--btn-border: transparent;
--btn-bg-hover: var(--color-hover-overlay);
--btn-fg-hover: var(--btn-fg);
--btn-border-hover: var(--btn-border);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--gap-xs);
min-block-size: var(--control-h-md);
padding-inline: var(--control-pad-inline-md);
border: var(--border-width-strong) solid var(--btn-border);
border-radius: var(--radius-full);
background-color: var(--btn-bg);
color: var(--btn-fg);
font-family: var(--font-text);
font-size: var(--text-button-md-size);
font-weight: var(--weight-semibold);
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: var(--transition-colors), var(--transition-transform);
}
.btn:hover {
background-color: var(--btn-bg-hover);
color: var(--btn-fg-hover);
border-color: var(--btn-border-hover);
}
.btn:active {
transform: scale(var(--press-scale));
}
.btn__icon {
flex: none;
inline-size: var(--icon-md);
block-size: var(--icon-md);
transition: translate var(--duration-base) var(--ease-out);
}
.btn:hover .btn__icon--nudge {
translate: calc(var(--nudge-distance) * var(--dir)) 0;
}
.btn--primary {
--btn-bg: var(--color-primary);
--btn-fg: var(--color-on-primary);
--btn-bg-hover: var(--color-primary-hover);
}
.btn--primary:active {
--btn-bg-hover: var(--color-primary-active);
}
.btn--secondary {
--btn-fg: var(--color-fixed-heading);
--btn-border: var(--color-primary);
--btn-bg-hover: var(--color-fixed-tint);
}
.btn--ghost {
--btn-fg: var(--color-text-heading);
}
.btn--text {
--btn-fg: var(--color-link);
--btn-fg-hover: var(--color-link-hover);
--btn-bg-hover: transparent;
min-block-size: auto;
padding-inline: 0;
border-radius: var(--radius-sm);
}
.btn--text:hover {
text-decoration: underline;
text-underline-offset: var(--feature-icon-offset);
}
.btn--primary.btn--on-dark {
--btn-bg: var(--color-fixed-surface);
--btn-fg: var(--color-fixed-heading);
--btn-bg-hover: var(--color-fixed-tint);
}
.btn--secondary.btn--on-dark {
--btn-fg: var(--color-text-inverse);
--btn-border: var(--color-border-inverse-strong);
--btn-bg-hover: var(--color-hover-overlay-inverse);
}
.btn--ghost.btn--on-dark {
--btn-fg: var(--color-text-inverse);
--btn-bg-hover: var(--color-hover-overlay-inverse);
}
.btn--lg {
min-block-size: var(--control-h-lg);
padding-inline: var(--control-pad-inline-lg);
font-size: var(--text-button-lg-size);
}
.btn--block {
inline-size: 100%;
}
.btn--block-mobile {
inline-size: 100%;
}
@media (min-width: 480px) {
.btn--block-mobile {
inline-size: auto;
}
}
.btn:disabled,
.btn[aria-disabled='true'] {
opacity: var(--opacity-disabled);
cursor: not-allowed;
transform: none;
}
.btn[aria-busy='true'] {
cursor: progress;
}
.btn[aria-busy='true'] .btn__icon {
display: none;
}
.btn[aria-busy='true']::after {
content: '';
inline-size: var(--spinner-size);
block-size: var(--spinner-size);
border: var(--border-width-accent) solid currentColor;
border-block-start-color: transparent;
border-radius: 50%;
animation: btn-spin var(--duration-spin) linear infinite;
}
@keyframes btn-spin {
to {
rotate: 1turn;
}
}
}
@layer components {
.badge {
display: inline-flex;
align-items: center;
gap: var(--gap-xs);
padding-block: var(--badge-pad-block);
padding-inline: var(--space-3);
border-radius: var(--radius-full);
background-color: var(--color-surface-tint);
color: var(--color-text-heading);
font-size: var(--text-eyebrow-size);
line-height: calc(var(--text-eyebrow-lh) + var(--lh-adjust));
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-eyebrow);
text-transform: var(--eyebrow-transform);
}
.badge--dot::before {
content: '';
flex: none;
inline-size: var(--badge-dot-size);
block-size: var(--badge-dot-size);
border-radius: 50%;
background-color: var(--color-accent);
}
.badge--plain {
padding-inline: 0;
background-color: transparent;
}
}
@layer components {
.icon {
flex: none;
inline-size: var(--icon-lg);
block-size: var(--icon-lg);
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon--sm {
inline-size: var(--icon-sm);
block-size: var(--icon-sm);
}
.icon--md {
inline-size: var(--icon-md);
block-size: var(--icon-md);
}
.icon--lg {
inline-size: var(--icon-lg);
block-size: var(--icon-lg);
}
[dir='rtl'] .icon--dir {
scale: -1 1;
}
.icon-tile {
display: inline-grid;
place-items: center;
flex: none;
inline-size: var(--icon-tile-size);
block-size: var(--icon-tile-size);
border-radius: var(--radius-tile);
background-color: var(--color-surface-tint);
color: var(--color-icon);
}
}
@layer components {
.card {
display: flex;
flex-direction: column;
gap: var(--gap-md);
padding: var(--space-5);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-xl);
background-color: var(--color-surface);
color: var(--color-text);
}
@media (min-width: 768px) {
.card {
padding: var(--space-6);
}
}
.card__icon {
margin-block-end: var(--space-1);
}
.card__title {
font-size: var(--text-h4-size);
line-height: calc(var(--text-h4-lh) + var(--lh-adjust));
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
}
.card__text {
color: var(--color-text-secondary);
}
.card__footer {
margin-block-start: auto;
padding-block-start: var(--space-2);
}
.card--interactive {
text-decoration: none;
transition: var(--transition-colors), var(--transition-transform);
}
.card--interactive:hover,
.card--interactive:focus-visible {
border-color: var(--color-accent);
box-shadow: var(--shadow-md);
}
.card--elevated {
border-color: transparent;
background-color: var(--color-fixed-surface);
color: var(--color-fixed-text);
box-shadow: var(--shadow-md);
--color-text: var(--color-fixed-text);
--color-text-secondary: var(--color-fixed-text-muted);
--color-text-muted: var(--color-fixed-text-muted);
--color-text-heading: var(--color-fixed-heading);
--color-link: var(--color-primary);
--color-link-hover: var(--color-primary-hover);
--color-icon: var(--color-fixed-icon);
--color-border: var(--color-border-strong);
--color-surface-tint: var(--color-fixed-tint);
--color-hover-overlay: var(--color-fixed-hover);
--color-focus-ring: var(--color-accent);
}
@media (min-width: 768px) {
.card--elevated {
padding: var(--space-7);
}
}
.card--fill {
block-size: 100%;
}
}
@layer components {
.section-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-sm);
max-inline-size: var(--container-narrow);
}
.section-header__lead {
margin-block-start: var(--space-1);
font-size: var(--text-lead-size);
line-height: calc(var(--text-lead-lh) + var(--lh-adjust));
color: var(--color-text-secondary);
max-inline-size: var(--measure);
}
}
@layer components {
.feature-list {
display: flex;
flex-direction: column;
gap: var(--gap-sm);
padding: 0;
list-style: none;
}
.feature-list__item {
display: grid;
grid-template-columns: var(--icon-md) minmax(0, 1fr);
gap: var(--gap-sm);
align-items: start;
color: var(--color-text-secondary);
}
.feature-list__item::before {
content: '';
inline-size: var(--icon-md);
block-size: var(--icon-md);
margin-block-start: var(--feature-icon-offset);
background-color: var(--color-icon);
mask: var(--mask-check) center / contain no-repeat;
}
.link {
display: inline-flex;
align-items: center;
gap: var(--gap-xs);
min-block-size: var(--tap-target);
color: var(--color-link);
font-weight: var(--weight-semibold);
text-decoration: none;
border-radius: var(--radius-sm);
}
.link:hover {
color: var(--color-link-hover);
text-decoration: underline;
text-underline-offset: var(--feature-icon-offset);
}
.link__icon {
inline-size: var(--icon-md);
block-size: var(--icon-md);
transition: translate var(--duration-base) var(--ease-out);
}
.link:hover .link__icon {
translate: calc(var(--nudge-distance) * var(--dir)) 0;
}
}
@layer components {
.logo {
display: inline-block;
inline-size: var(--logo-md);
border-radius: var(--radius-sm);
}
.logo img,
.logo svg {
inline-size: 100%;
block-size: auto;
}
.logo--sm { inline-size: var(--logo-sm); }
.logo--lg { inline-size: var(--logo-lg); }
.nav__list {
display: flex;
align-items: center;
gap: var(--gap-xl);
padding: 0;
list-style: none;
}
.nav__link {
position: relative;
display: inline-flex;
align-items: center;
min-block-size: var(--tap-target);
color: var(--color-text-secondary);
font-weight: var(--weight-medium);
text-decoration: none;
}
.nav__link::after {
content: '';
position: absolute;
inset-inline: 0;
inset-block-end: var(--space-1);
block-size: var(--border-width-accent);
border-radius: var(--radius-full);
background-color: var(--color-accent);
scale: 0 1;
transition: scale var(--duration-base) var(--ease-out);
}
.nav__link:hover,
.nav__link[aria-current='true'] {
color: var(--color-text-heading);
}
.nav__link:hover::after,
.nav__link[aria-current='true']::after {
scale: 1 1;
}
.nav--vertical .nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.nav--vertical .nav__link {
min-block-size: var(--control-h-lg);
font-size: var(--text-h4-size);
}
.nav--vertical .nav__link::after {
display: none;
}
.lang-switch {
display: inline-flex;
align-items: center;
gap: var(--gap-2xs);
padding: var(--space-1);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-full);
}
.lang-switch__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-block-size: var(--control-h-md);
min-inline-size: var(--tap-target);
padding-inline: var(--space-3);
border-radius: var(--radius-full);
color: var(--color-text-secondary);
font-family: var(--font-text);
font-size: var(--text-small-size);
font-weight: var(--weight-semibold);
text-decoration: none;
transition: var(--transition-colors);
}
.lang-switch__link:hover {
background-color: var(--color-hover-overlay);
color: var(--color-text-heading);
}
.lang-switch__link[aria-current='true'] {
background-color: var(--color-surface-tint);
color: var(--color-text-heading);
}
.drawer {
position: fixed;
inset-block: 0;
inset-inline-end: 0;
z-index: var(--z-drawer);
display: flex;
flex-direction: column;
gap: var(--gap-lg);
inline-size: var(--drawer-width);
padding: var(--space-5);
overflow-y: auto;
background-color: var(--color-surface);
box-shadow: var(--shadow-lg);
translate: calc(100% * var(--dir)) 0;
visibility: hidden;
transition:
translate var(--duration-base) var(--ease-out),
visibility 0s linear var(--duration-base);
}
.drawer.is-open {
translate: 0 0;
visibility: visible;
transition: translate var(--duration-base) var(--ease-out);
}
.drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap-md);
}
.drawer__footer {
display: flex;
flex-direction: column;
gap: var(--gap-md);
margin-block-start: auto;
}
.drawer__footer > .lang-switch {
align-self: flex-start;
}
.drawer-overlay {
position: fixed;
inset: 0;
z-index: var(--z-overlay);
background-color: var(--color-overlay);
opacity: 0;
visibility: hidden;
transition:
opacity var(--duration-base) var(--ease-out),
visibility 0s linear var(--duration-base);
}
.drawer-overlay.is-open {
opacity: 1;
visibility: visible;
transition: opacity var(--duration-base) var(--ease-out);
}
.icon-btn {
display: inline-grid;
place-items: center;
inline-size: var(--tap-target);
block-size: var(--tap-target);
border-radius: var(--radius-full);
color: var(--color-text-heading);
transition: var(--transition-colors);
}
.icon-btn:hover {
background-color: var(--color-hover-overlay);
}
}
@layer components {
.form {
display: flex;
flex-direction: column;
gap: var(--gap-md);
}
.form__row {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-md);
}
@media (min-width: 768px) {
.form__row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.form__legal {
font-size: var(--text-small-size);
line-height: calc(var(--text-small-lh) + var(--lh-adjust));
color: var(--color-text-muted);
}
.field {
display: flex;
flex-direction: column;
gap: var(--gap-xs);
min-inline-size: 0;
border: 0;
padding: 0;
}
.field__label {
font-size: var(--text-small-size);
line-height: calc(var(--text-small-lh) + var(--lh-adjust));
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.field__required {
color: var(--color-error);
margin-inline-start: var(--space-1);
}
.field__control {
inline-size: 100%;
min-block-size: var(--control-h-input);
padding-inline: var(--space-4);
border: var(--border-width-strong) solid var(--color-border-input);
border-radius: var(--radius-md);
background-color: var(--color-fixed-surface);
color: var(--color-fixed-text);
font-size: var(--text-body-size);
outline: var(--focus-ring-width) solid transparent;
transition: var(--transition-colors);
}
.field__control::placeholder {
color: var(--color-fixed-text-muted);
opacity: 1;
}
.field__control:hover {
border-color: var(--color-fixed-text-muted);
}
.field__control:focus-visible {
border-color: var(--color-primary);
box-shadow: var(--shadow-focus);
}
.field__control[aria-invalid='true'] {
border-color: var(--color-error);
}
.field__control[aria-invalid='true']:focus-visible {
box-shadow: var(--shadow-focus-error);
}
.field__control:disabled {
background-color: var(--color-disabled-bg);
border-color: var(--color-disabled-border);
color: var(--color-disabled-text);
cursor: not-allowed;
}
textarea.field__control {
min-block-size: var(--textarea-min-h);
padding-block: var(--space-3);
resize: vertical;
}
.field__select {
position: relative;
display: block;
}
.field__select .field__control {
appearance: none;
padding-inline-end: var(--select-icon-space);
cursor: pointer;
}
.field__select::after {
content: '';
position: absolute;
inset-block: 0;
inset-inline-end: var(--space-4);
inline-size: var(--icon-md);
background-color: var(--color-fixed-text-muted);
mask: var(--mask-chevron-down) center / contain no-repeat;
pointer-events: none;
}
.field__help {
font-size: var(--text-small-size);
line-height: calc(var(--text-small-lh) + var(--lh-adjust));
color: var(--color-text-muted);
}
.field__error {
display: flex;
align-items: flex-start;
gap: var(--gap-xs);
font-size: var(--text-small-size);
line-height: calc(var(--text-small-lh) + var(--lh-adjust));
font-weight: var(--weight-medium);
color: var(--color-error);
}
.choice-group {
display: flex;
flex-wrap: wrap;
gap: var(--gap-xs);
}
.choice-chip {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--gap-xs);
min-block-size: var(--tap-target);
padding-inline: var(--space-4);
border: var(--border-width-strong) solid var(--color-border-input);
border-radius: var(--radius-full);
color: var(--color-text-secondary);
font-size: var(--text-small-size);
font-weight: var(--weight-semibold);
cursor: pointer;
transition: var(--transition-colors);
}
.choice-chip__input {
position: absolute;
opacity: 0;
inline-size: 1px;
block-size: 1px;
}
.choice-chip::before {
content: '';
display: none;
inline-size: var(--icon-sm);
block-size: var(--icon-sm);
background-color: currentColor;
mask: var(--mask-check) center / contain no-repeat;
}
.choice-chip:hover {
border-color: var(--color-primary);
}
.choice-chip:has(:checked) {
border-color: var(--color-primary);
background-color: var(--color-surface-tint);
color: var(--color-text-heading);
}
.choice-chip:has(:checked)::before {
display: block;
}
.choice-chip:has(:focus-visible) {
outline: var(--focus-ring-width) solid var(--color-focus-ring);
outline-offset: var(--focus-ring-offset);
}
.choice-chip:has(:disabled) {
opacity: var(--opacity-disabled);
cursor: not-allowed;
}
.alert {
--alert-fg: var(--color-info);
--alert-bg: var(--color-info-bg);
--alert-border: var(--color-info-border);
display: grid;
grid-template-columns: var(--icon-lg) minmax(0, 1fr);
gap: var(--gap-sm);
align-items: start;
padding: var(--space-4);
border: var(--border-width) solid var(--alert-border);
border-radius: var(--radius-md);
background-color: var(--alert-bg);
color: var(--color-fixed-text);
font-size: var(--text-small-size);
line-height: calc(var(--text-small-lh) + var(--lh-adjust));
}
.alert__icon {
color: var(--alert-fg);
}
.alert__title {
font-weight: var(--weight-semibold);
color: var(--alert-fg);
}
.alert--success {
--alert-fg: var(--color-success);
--alert-bg: var(--color-success-bg);
--alert-border: var(--color-success-border);
}
.alert--warning {
--alert-fg: var(--color-warning);
--alert-bg: var(--color-warning-bg);
--alert-border: var(--color-warning-border);
}
.alert--error {
--alert-fg: var(--color-error);
--alert-bg: var(--color-error-bg);
--alert-border: var(--color-error-border);
}
}
@layer components {
.tabs__list {
display: flex;
gap: var(--gap-2xs);
padding: 0;
list-style: none;
}
.tabs__list--vertical {
flex-direction: column;
}
.tabs__list--scroll {
gap: var(--gap-xs);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-block: var(--space-1);
mask-image: linear-gradient(
90deg,
transparent,
black var(--scroll-fade),
black calc(100% - var(--scroll-fade)),
transparent
);
padding-inline: var(--scroll-fade);
}
.tabs__tab {
position: relative;
display: flex;
align-items: center;
gap: var(--gap-sm);
min-block-size: var(--tab-min-h);
padding-block: var(--space-3);
padding-inline: var(--space-4);
border-radius: var(--radius-md);
color: var(--color-text-secondary);
font-weight: var(--weight-semibold);
text-align: start;
transition: var(--transition-colors);
}
.tabs__tab:hover {
background-color: var(--color-surface-alt);
color: var(--color-text-heading);
}
.tabs__tab[aria-selected='true'] {
background-color: var(--color-surface);
color: var(--color-text-heading);
box-shadow: var(--shadow-md);
}
.tabs__tab::before {
content: '';
position: absolute;
border-radius: var(--radius-full);
background-color: var(--color-primary);
opacity: 0;
transition: opacity var(--duration-fast) var(--ease-out);
}
.tabs__tab[aria-selected='true']::before {
opacity: 1;
}
.tabs__list--vertical .tabs__tab::before {
inset-block: var(--space-3);
inset-inline-start: 0;
inline-size: var(--border-width-indicator);
}
.tabs__list--scroll .tabs__tab {
flex: none;
scroll-snap-align: start;
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-full);
min-block-size: var(--tap-target);
}
.tabs__list--scroll .tabs__tab::before {
inset-inline: var(--space-4);
inset-block-end: 0;
block-size: var(--border-width-indicator);
}
.tabs__icon {
inline-size: var(--icon-md);
block-size: var(--icon-md);
color: var(--color-icon);
}
.tabs__panel {
border-radius: var(--radius-xl);
}
.accordion {
border-block-start: var(--border-width) solid var(--color-divider);
}
.accordion__item {
border-block-end: var(--border-width) solid var(--color-divider);
}
.accordion__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap-md);
padding-block: var(--space-5);
font-size: var(--text-h4-size);
line-height: calc(var(--text-h4-lh) + var(--lh-adjust));
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
list-style: none;
cursor: pointer;
border-radius: var(--radius-sm);
}
.accordion__summary::-webkit-details-marker {
display: none;
}
.accordion__icon {
flex: none;
color: var(--color-icon);
transition: rotate var(--duration-base) var(--ease-out);
}
.accordion__item[open] .accordion__icon {
rotate: 180deg;
}
.accordion__content {
padding-block-end: var(--space-5);
max-inline-size: var(--measure);
color: var(--color-text-secondary);
}
}
@layer components {
.steps {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-xl);
padding: 0;
list-style: none;
}
.step {
position: relative;
display: grid;
grid-template-columns: var(--step-marker-size) minmax(0, 1fr);
column-gap: var(--gap-md);
row-gap: var(--gap-xs);
align-items: start;
}
.step__marker {
position: relative;
z-index: var(--z-raised);
display: grid;
place-items: center;
inline-size: var(--step-marker-size);
block-size: var(--step-marker-size);
border-radius: 50%;
background-color: var(--color-fixed-surface);
color: var(--color-fixed-heading);
font-size: var(--text-marker-size);
font-weight: var(--weight-bold);
font-variant-numeric: lining-nums tabular-nums;
grid-row: span 2;
}
.step__title {
font-size: var(--text-h4-size);
line-height: calc(var(--text-h4-lh) + var(--lh-adjust));
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
}
.step__text {
color: var(--color-text-secondary);
}
.step:not(:last-child)::after {
content: '';
position: absolute;
inset-inline-start: calc(var(--step-marker-size) / 2);
inset-block-start: var(--step-marker-size);
inset-block-end: calc(-1 * var(--gap-xl));
inline-size: var(--border-width);
background-color: var(--color-divider);
}
@media (min-width: 768px) {
.steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.step {
grid-template-columns: minmax(0, 1fr);
}
.step__marker {
grid-row: auto;
margin-block-end: var(--space-3);
}
.step:not(:last-child)::after {
display: none;
}
}
@media (min-width: 1024px) {
.steps {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--gutter);
}
.step:not(:last-child)::after {
display: block;
inset-block-start: calc(var(--step-marker-size) / 2);
inset-block-end: auto;
inset-inline-start: calc(var(--step-marker-size) + var(--space-3));
inset-inline-end: calc(var(--space-3) - var(--gutter));
inline-size: auto;
block-size: var(--border-width);
}
}
.stat {
display: flex;
flex-direction: column;
gap: var(--gap-xs);
padding-block-start: var(--space-4);
border-block-start: var(--border-width-accent) solid var(--color-accent);
}
.stat__value {
font-family: var(--font-display);
font-size: var(--text-stat-size);
line-height: calc(var(--text-display-lh) + var(--lh-adjust));
font-weight: var(--weight-display);
color: var(--color-text-heading);
font-variant-numeric: lining-nums tabular-nums;
}
.stat__label {
color: var(--color-text-secondary);
}
.chip {
display: inline-flex;
align-items: center;
gap: var(--gap-sm);
padding-block: var(--space-3);
padding-inline: var(--space-4);
border-radius: var(--radius-md);
background-color: var(--color-fixed-surface);
color: var(--color-fixed-text);
box-shadow: var(--shadow-md);
}
.chip__icon {
display: grid;
place-items: center;
flex: none;
inline-size: var(--chip-icon-size);
block-size: var(--chip-icon-size);
border-radius: 50%;
background-color: var(--color-fixed-tint);
color: var(--color-fixed-icon);
}
.chip__title {
font-size: var(--text-small-size);
line-height: calc(var(--text-small-lh) + var(--lh-adjust));
font-weight: var(--weight-semibold);
}
.chip__meta {
font-size: var(--text-caption-size);
line-height: calc(var(--text-eyebrow-lh) + var(--lh-adjust));
color: var(--color-fixed-text-muted);
}
.media-stage {
display: grid;
place-items: center;
aspect-ratio: 16 / 10;
padding: var(--space-6);
border-radius: var(--radius-2xl);
background-color: var(--color-surface-alt);
overflow: hidden;
}
.media-stage--4x3 {
aspect-ratio: 4 / 3;
}
.media-stage > picture {
display: contents;
}
.media-stage img {
max-inline-size: 100%;
max-block-size: 100%;
inline-size: auto;
block-size: auto;
min-block-size: 0;
object-fit: contain;
}
.media-stage__img {
max-inline-size: 100%;
max-block-size: 100%;
object-fit: contain;
filter: var(--drop-shadow-lg);
}
.media-stage--placeholder {
border: var(--border-width-strong) dashed var(--color-border-strong);
color: var(--color-text-muted);
font-size: var(--text-small-size);
text-align: center;
}
}
@layer sections {
.site-header {
position: sticky;
inset-block-start: 0;
z-index: var(--z-sticky);
background-color: var(--color-surface);
transition:
background-color var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.site-header__inner {
display: flex;
align-items: center;
gap: var(--gap-md);
min-block-size: var(--header-height);
transition: min-block-size var(--duration-base) var(--ease-out);
}
.site-header__logo {
display: inline-flex;
align-items: center;
flex: none;
inline-size: var(--logo-sm);
min-block-size: var(--tap-target);
}
.site-header__actions {
display: flex;
align-items: center;
gap: var(--gap-sm);
margin-inline-start: auto;
}
@media (min-width: 1024px) {
.site-header__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: var(--gap-xl);
}
.site-header__logo {
inline-size: var(--logo-md);
}
.site-header__actions {
justify-self: end;
}
}
.site-header.is-scrolled {
background-color: var(--color-header-scrolled);
backdrop-filter: blur(var(--header-blur));
box-shadow: var(--shadow-sm);
}
.site-header.is-scrolled .site-header__inner {
min-block-size: var(--header-height-scrolled);
}
.is-scroll-locked {
overflow: hidden;
}
}
@layer sections {
.site-footer {
background-color: var(--color-surface-alt);
}
.site-footer__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-xl);
padding-block: var(--space-9);
}
@media (min-width: 768px) {
.site-footer__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.site-footer__brand {
grid-column: 1 / -1;
}
}
@media (min-width: 1024px) {
.site-footer__grid {
display: flex;
gap: var(--gap-2xl);
}
.site-footer__grid > * {
flex: 3 1 0;
}
.site-footer__grid > .site-footer__brand {
flex-grow: 4;
}
}
.site-footer__brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-sm);
}
.site-footer__logo {
inline-size: var(--logo-lg);
block-size: auto;
margin-block-end: var(--space-2);
}
.site-footer__tagline {
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
}
.site-footer__text {
max-inline-size: var(--measure);
color: var(--color-text-secondary);
font-size: var(--text-small-size);
line-height: calc(var(--text-body-lh) + var(--lh-adjust));
}
.site-footer__social {
display: flex;
gap: var(--gap-xs);
padding: 0;
list-style: none;
}
.site-footer__social .icon-btn {
color: var(--color-secondary);
}
.site-footer__title {
margin-block-end: var(--space-2);
font-family: var(--font-text);
font-size: var(--text-small-size);
line-height: calc(var(--text-small-lh) + var(--lh-adjust));
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-normal);
color: var(--color-text);
max-inline-size: none;
}
.site-footer__links {
display: flex;
flex-direction: column;
padding: 0;
list-style: none;
}
.site-footer__links a,
.site-footer__address {
display: inline-flex;
align-items: center;
gap: var(--gap-xs);
min-block-size: var(--tap-target);
color: var(--color-text-secondary);
font-size: var(--text-small-size);
text-decoration: none;
}
.site-footer__links a:hover {
color: var(--color-link);
text-decoration: underline;
}
.site-footer__bar {
background-color: var(--color-surface-inverse-strong);
}
.site-footer__bar-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--gap-md);
padding-block: var(--space-3);
font-size: var(--text-small-size);
color: var(--color-text-secondary);
}
}
@layer sections {
.hero {
margin-block-start: var(--space-2);
padding-block: var(--space-8);
}
.hero__grid {
align-items: center;
row-gap: var(--gap-2xl);
}
@media (min-width: 1024px) {
.hero {
display: grid;
align-items: center;
min-block-size: var(--hero-min-h);
padding-block: var(--space-8);
}
}
.hero__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-lg);
max-inline-size: var(--hero-text-max);
}
.hero__title {
max-inline-size: var(--measure-display);
}
.hero__lead {
font-size: var(--text-lead-size);
line-height: calc(var(--text-lead-lh) + var(--lh-adjust));
color: var(--color-text-secondary);
max-inline-size: var(--measure);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--gap-sm);
inline-size: 100%;
margin-block-start: var(--space-2);
}
.hero__trust {
display: flex;
align-items: center;
gap: var(--gap-xs);
font-size: var(--text-small-size);
color: var(--color-text-secondary);
}
.hero__visual {
display: grid;
justify-items: center;
}
.hero__media {
position: relative;
inline-size: 100%;
max-inline-size: var(--hero-media-max);
aspect-ratio: 1;
}
.hero__media picture,
.hero__bracelet picture {
display: contents;
}
.hero__circle {
position: absolute;
inset: 0;
margin: auto;
inline-size: var(--hero-circle-size);
block-size: var(--hero-circle-size);
border-radius: 50%;
background-color: var(--color-hero-circle);
}
.hero__boy {
position: absolute;
inset-block-end: 0;
inset-inline-end: 0;
inline-size: var(--hero-boy-width);
block-size: auto;
}
.hero__bracelet {
position: absolute;
inset-block-start: var(--hero-bracelet-end);
inset-inline-start: var(--hero-bracelet-start);
z-index: var(--z-raised);
display: grid;
place-items: center;
inline-size: var(--hero-bracelet-size);
aspect-ratio: 1;
border-radius: 50%;
background-color: var(--color-fixed-surface);
box-shadow: var(--shadow-lg);
}
.hero__bracelet-img {
block-size: var(--hero-bracelet-img-h);
inline-size: auto;
}
.hero__chip {
position: absolute;
z-index: var(--z-raised);
max-inline-size: var(--hero-chip-max);
}
.hero__chip-text {
display: flex;
flex-direction: column;
}
.hero__chip--1 {
inset-block-end: var(--hero-bracelet-end);
inset-inline-end: 0;
}
.hero__chip--2 {
display: none;
}
@media (min-width: 768px) {
.hero__bracelet {
inset-block-start: auto;
inset-block-end: var(--hero-bracelet-end);
}
.hero__chip--1 {
inset-block-start: var(--hero-chip-1-top);
inset-block-end: auto;
inset-inline-start: 0;
inset-inline-end: auto;
}
.hero__chip--2 {
display: inline-flex;
inset-block-start: var(--hero-chip-2-top);
inset-inline-end: 0;
}
}
}
@layer sections {
.challenges__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gutter);
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.challenges__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.challenges__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.challenges__grid > * {
grid-column: auto / span 2;
}
.challenges__grid--4 > * {
grid-column: auto / span 3;
}
.challenges__grid--5 > :nth-child(4) {
grid-column: 2 / span 2;
}
.challenges__grid--5 > :nth-child(5) {
grid-column: 4 / span 2;
}
}
}
@layer sections {
.solutions__layout {
display: grid;
gap: var(--gap-xl);
}
@media (min-width: 1024px) {
.solutions__layout.is-enhanced {
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
align-items: start;
gap: var(--gap-2xl);
}
}
.solutions__tabs.tabs__list--scroll {
position: sticky;
inset-block-start: var(--header-height-scrolled);
z-index: var(--z-raised);
margin-inline: calc(-1 * var(--page-pad-inline));
padding-block: var(--space-2);
background-color: var(--color-surface-alt);
}
.solutions__panels {
display: grid;
gap: var(--gap-3xl);
}
.solutions__panel {
display: grid;
gap: var(--gap-xl);
align-content: start;
}
.solutions__panel:focus-visible {
outline-offset: var(--space-2);
}
.solutions__stage {
aspect-ratio: 4 / 3;
background-color: var(--color-surface);
}
@media (min-width: 768px) {
.solutions__stage {
aspect-ratio: 16 / 10;
}
}
.solutions__placeholder {
display: grid;
justify-items: center;
gap: var(--gap-sm);
text-align: center;
}
.solutions__placeholder-icon {
inline-size: var(--step-marker-size);
block-size: var(--step-marker-size);
}
.solutions__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-sm);
}
.is-enhanced .solutions__body {
min-block-size: var(--solutions-body-min-h);
}
.solutions__audience {
color: var(--color-text-heading);
}
.solutions__description {
font-size: var(--text-lead-size);
line-height: calc(var(--text-lead-lh) + var(--lh-adjust));
color: var(--color-text-secondary);
max-inline-size: var(--measure);
}
.solutions__body .feature-list {
margin-block: var(--space-1);
}
}
@layer sections {
.how {
margin-block: var(--space-9);
}
.how__top {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: end;
gap: var(--gap-lg);
}
@media (min-width: 1024px) {
.how__top {
grid-template-columns: minmax(0, 1fr) auto;
}
.how__character {
margin-block-start: calc(-1 * (var(--section-pad-block) + var(--how-boy-rise)));
}
}
.how__character picture {
display: contents;
}
.how__boy {
inline-size: var(--how-boy-width);
block-size: auto;
}
.how__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--gap-md) var(--gap-lg);
margin-block-start: var(--section-header-gap);
}
.how__note {
font-size: var(--text-small-size);
line-height: calc(var(--text-small-lh) + var(--lh-adjust));
color: var(--color-text-secondary);
}
}
@layer sections {
.security__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gutter);
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.security__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.security__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.security__policy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-xs);
margin-block-start: var(--section-header-gap);
}
.security__policy-text {
color: var(--color-text-secondary);
max-inline-size: var(--measure);
}
}
@layer sections {
.demo-cta {
margin-block: var(--space-9);
}
.demo-cta__grid {
row-gap: var(--gap-2xl);
}
@media (min-width: 1024px) {
.demo-cta__grid {
align-items: stretch;
}
}
.demo-cta__intro {
display: flex;
flex-direction: column;
gap: var(--gap-xl);
}
.demo-cta__contact-title {
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
}
.demo-cta__contact-list {
display: flex;
flex-direction: column;
padding: 0;
list-style: none;
}
.demo-cta__contact-list a {
display: inline-flex;
align-items: center;
gap: var(--gap-xs);
min-block-size: var(--tap-target);
color: var(--color-text);
text-decoration: none;
}
.demo-cta__contact-list a:hover {
text-decoration: underline;
}
.demo-cta__kids {
margin-block-start: auto;
}
.demo-cta__kids picture {
display: contents;
}
.demo-cta__kids-img {
inline-size: var(--demo-kids-width);
max-inline-size: 100%;
block-size: auto;
}
.demo-form {
gap: var(--gap-lg);
}
.demo-form__title {
font-size: var(--text-h3-size);
line-height: calc(var(--text-h3-lh) + var(--lh-adjust));
color: var(--color-text-heading);
}
.demo-form__summary-list {
margin-block-start: var(--space-1);
padding-inline-start: var(--gap-lg);
}
.demo-form__summary-list a {
color: var(--color-error);
}
.demo-form__trap {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.demo-form__success {
display: grid;
justify-items: center;
gap: var(--gap-md);
padding-block: var(--space-6);
text-align: center;
}
.demo-form__success picture {
display: contents;
}
.demo-form__success-img {
inline-size: var(--demo-success-img);
block-size: auto;
}
}
@layer sections {
.proof-strip {
padding-block: var(--space-8);
}
.proof-strip__inner {
display: grid;
gap: var(--gap-lg);
justify-items: center;
text-align: center;
}
.proof-strip__caption {
font-size: var(--text-small-size);
color: var(--color-text-muted);
}
.proof-strip__logos {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
inline-size: 100%;
justify-items: center;
align-items: center;
gap: var(--gap-xl) var(--gap-2xl);
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.proof-strip__logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
.proof-strip__logo picture {
display: contents;
}
.proof-strip__img {
max-block-size: var(--space-7);
inline-size: auto;
filter: grayscale(1);
opacity: var(--opacity-disabled);
transition: filter var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
}
.proof-strip__logo:hover .proof-strip__img {
filter: none;
opacity: 1;
}
.results__stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gutter);
}
@media (min-width: 1024px) {
.results__stats {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.results__stats .stat {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
}
.results__stats dd {
margin: 0;
}
.results__quote {
margin-block-start: var(--section-header-gap);
gap: var(--gap-lg);
}
.results__quote-text {
font-size: var(--text-h3-size);
line-height: calc(var(--text-h3-lh) + var(--lh-adjust));
font-weight: var(--weight-medium);
color: var(--color-text-heading);
margin: 0;
}
.results__quote-author {
display: flex;
flex-direction: column;
}
.results__quote-name {
font-weight: var(--weight-semibold);
}
.faq__intro {
display: flex;
flex-direction: column;
gap: var(--gap-xl);
}
.faq__character picture {
display: contents;
}
.faq__boy {
inline-size: var(--how-boy-width);
block-size: auto;
}
}
@layer sections {
.reveal-ready [data-reveal]:not([data-reveal='group']),
.reveal-ready [data-reveal='group'] > * {
transition:
opacity var(--duration-slow) var(--ease-out),
translate var(--duration-slow) var(--ease-out);
}
.reveal-ready [data-reveal]:not([data-reveal='group']):not(.is-visible),
.reveal-ready [data-reveal='group']:not(.is-visible) > * {
opacity: 0;
translate: 0 var(--reveal-distance);
}
.reveal-ready [data-reveal='group'] > :nth-child(2) { transition-delay: calc(var(--reveal-stagger) * 1); }
.reveal-ready [data-reveal='group'] > :nth-child(3) { transition-delay: calc(var(--reveal-stagger) * 2); }
.reveal-ready [data-reveal='group'] > :nth-child(4) { transition-delay: calc(var(--reveal-stagger) * 3); }
.reveal-ready [data-reveal='group'] > :nth-child(5) { transition-delay: calc(var(--reveal-stagger) * 4); }
.reveal-ready [data-reveal='group'] > :nth-child(6) { transition-delay: calc(var(--reveal-stagger) * 5); }
.reveal-ready [data-reveal='group'] > :nth-child(n + 7) { transition-delay: calc(var(--reveal-stagger) * 6); }
@media (min-width: 1024px) {
.reveal-ready .steps[data-reveal] .step::after {
transform-origin: var(--origin-inline-start);
transition: scale var(--duration-draw) var(--ease-out);
}
.reveal-ready .steps[data-reveal]:not(.is-visible) .step::after {
scale: 0 1;
}
.reveal-ready .steps[data-reveal] .step:nth-child(2)::after { transition-delay: calc(var(--reveal-stagger) * 4); }
.reveal-ready .steps[data-reveal] .step:nth-child(3)::after { transition-delay: calc(var(--reveal-stagger) * 8); }
}
.is-enhanced .solutions__panel:not([hidden]) {
animation: panel-in var(--duration-tab) var(--ease-out);
}
@keyframes panel-in {
from {
opacity: 0;
translate: 0 var(--space-2);
}
}
.hero__chip--1 {
animation: hero-float var(--duration-float) var(--ease-in-out) infinite;
}
.hero__chip--2 {
animation: hero-float var(--duration-float) var(--ease-in-out) infinite;
animation-delay: calc(var(--duration-float) / -2);
}
@keyframes hero-float {
0%,
100% {
translate: 0 0;
}
50% {
translate: 0 calc(-1 * var(--float-distance));
}
}
.hero__bracelet::before,
.hero__bracelet::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border: var(--border-width-accent) solid var(--color-border-inverse-strong);
border-radius: 50%;
opacity: 0;
animation: hero-ripple var(--duration-ripple) var(--ease-out) infinite;
}
.hero__bracelet::after {
animation-delay: calc(var(--duration-ripple) / 2);
}
@keyframes hero-ripple {
0% {
scale: 1;
opacity: var(--ripple-opacity);
}
100% {
scale: var(--ripple-scale);
opacity: 0;
}
}
}
@media print {
.reveal-ready [data-reveal],
.reveal-ready [data-reveal] > *,
.reveal-ready .steps[data-reveal] .step::after {
opacity: 1 !important;
translate: none !important;
scale: none !important;
}
}
@layer utilities {
.u-visually-hidden:not(:focus):not(:focus-within) {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.u-skip-link {
position: absolute;
inset-block-start: var(--space-2);
inset-inline-start: var(--space-2);
z-index: var(--z-skip-link);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
background-color: var(--color-surface-inverse);
color: var(--color-text-inverse);
font-weight: var(--weight-semibold);
text-decoration: none;
transform: translateY(calc(-100% - var(--space-4)));
transition: var(--transition-transform);
}
.u-skip-link:focus {
transform: none;
}
.u-text-start { text-align: start; }
.u-text-center { text-align: center; }
.u-text-end { text-align: end; }
.u-balance { text-wrap: balance; }
.u-measure { max-inline-size: var(--measure); }
.u-ltr {
direction: ltr;
unicode-bidi: isolate;
}
@media (min-width: 768px) {
.u-hide-from-md { display: none; }
}
@media (min-width: 1024px) {
.u-hide-from-lg { display: none; }
}
}
.u-hide-below-sm,
.u-hide-below-md,
.u-hide-below-lg {
display: none;
}
@media (min-width: 480px) {
.u-hide-below-sm {
display: revert-layer;
}
}
@media (min-width: 768px) {
.u-hide-below-md {
display: revert-layer;
}
}
@media (min-width: 1024px) {
.u-hide-below-lg {
display: revert-layer;
}
}