@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: url("/assets/caveat-edcb7abc.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: 'DM Sans';
font-style: italic;
font-weight: 300 700;
font-display: swap;
src: url("/assets/dm-sans-italic-d1563540.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: 'DM Sans';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/assets/dm-sans-17f2dd45.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: 'JetBrains Mono';
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url("/assets/jetbrains-mono-italic-6fab9a48.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: 'JetBrains Mono';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/assets/jetbrains-mono-6e3b5ce4.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Newsreader';
font-style: italic;
font-weight: 300 700;
font-display: swap;
src: url("/assets/newsreader-italic-538d03e0.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Newsreader';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/assets/newsreader-ddf810a9.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: 'Heebo';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/assets/heebo-4ff5ebdc.woff2") format('woff2');
unicode-range: U+0590-05FF, U+200E-200F, U+2066-2069, U+FB1D-FB4F;
}
@font-face {
font-family: 'Frank Ruhl Libre';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/assets/frank-ruhl-libre-894cb209.woff2") format('woff2');
unicode-range: U+0590-05FF, U+200E-200F, U+2066-2069, U+FB1D-FB4F;
}
@font-face {
font-family: 'Noto Sans Arabic';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/assets/noto-sans-arabic-48392729.woff2") format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+200E-200F, U+2066-2069, U+FD3E-FD3F, U+FDF0-FDFD, U+FE70-FEFF;
}
@font-face {
font-family: 'Noto Naskh Arabic';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/assets/noto-naskh-arabic-209534df.woff2") format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+200E-200F, U+2066-2069, U+FD3E-FD3F, U+FDF0-FDFD, U+FE70-FEFF;
}
@font-face {
font-family: 'DM Sans Fallback';
src: local('Arial');
size-adjust: 106.25%;
ascent-override: 93.36%;
descent-override: 29.18%;
line-gap-override: 0.00%;
}
@font-face {
font-family: 'Newsreader Fallback';
src: local('Times New Roman');
size-adjust: 99.72%;
ascent-override: 73.70%;
descent-override: 26.57%;
line-gap-override: 0.00%;
}
@layer reset, tokens, base, layout, components, features, utilities;
@layer tokens {
:root {
--font-sans: 'DM Sans', 'Heebo', 'Noto Sans Arabic', 'DM Sans Fallback', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-serif: 'Newsreader', 'Frank Ruhl Libre', 'Noto Naskh Arabic', 'Newsreader Fallback', 'Source Serif 4', Georgia, serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--font-handwritten: 'Caveat', 'Comic Sans MS', cursive;
--text-micro: 0.55rem;
--text-tiny: 0.62rem;
--text-extra-small: 0.68rem;
--text-small: 0.75rem;
--text-medium: 0.875rem;
--text-base: 1rem;
--text-large: 1.15rem;
--text-extra-large: 1.5rem;
--text-jumbo: 1.85rem;
--text-display-small: 1.75rem;
--text-display: 2.5rem;
--text-hero: 5.5rem;
--text-page-title-min: 1.75rem;
--text-page-title-max: 2.4rem;
--text-stat: 1.6rem;
--text-content-word-min: 1.2rem;
--text-content-word-max: 1.65rem;
--text-funnel: 1.28rem;
--text-week: 2rem;
--line-cramped: 0.92;
--line-tight: 1;
--line-compact: 1.1;
--line-snug: 1.2;
--line-short: 1.3;
--line-dense: 1.35;
--line-ui: 1.4;
--line-readable: 1.45;
--line-normal: 1.5;
--line-comfortable: 1.55;
--line-loose: 1.65;
--line-relaxed: 1.7;
--letter-brand: -0.06em;
--letter-tight: -0.04em;
--letter-title: -0.03em;
--letter-page-title: -0.025ch;
--letter-snug: -0.02em;
--letter-topbar: -0.02ch;
--letter-body: -0.005ch;
--letter-code: 0.5em;
--letter-normal: 0;
--letter-expanded: 0.06em;
--letter-wide: 0.04em;
--letter-wider: 0.08em;
--letter-widest: 0.1em;
--letter-hero: 0.18em;
--color-canvas:        #f4f0e6;
--color-surface:       #ffffff;
--surface-subtle:      #faf6e9;
--color-ink:           #1a1f1c;
--color-ink-muted:     #3e4540;
--color-ink-subtle:    #5f655e;
--color-border:        #d8d1bd;
--color-border-strong: #b8ad94;
--color-link:          #3e4540;
--color-link-hover:    #1a1f1c;
--color-accent:        #c66a3b;
--color-accent-ink:    #a85a2e;
--color-accent-soft:   #f6e0d2;
--color-positive: oklch(45% 0.13 155);
--color-positive-soft: oklch(96% 0.045 155);
--color-wa:       #25d366;
--color-wa-hover: #1eb558;
--color-wa-deep:  #128c7e;
--color-warning: oklch(61% 0.14 78);
--color-warning-soft: oklch(96% 0.065 85);
--color-danger: oklch(48% 0.18 29);
--color-danger-soft: oklch(96% 0.04 29);
--color-info: oklch(49% 0.16 250);
--color-info-soft: oklch(96% 0.035 250);
--color-info-bg-subtle: oklch(98% 0.01 250);
--color-shadow-ink: oklch(0% 0 0);
--color-purple: oklch(50% 0.18 300);
--color-danger-alpha: oklch(48% 0.18 29 / 20%);
--color-line-subtle: oklch(92% 0.003 254);
--color-line-muted: oklch(84% 0.005 256);
--color-generating: oklch(55% 0.2 290);
--color-generating-ink: oklch(45% 0.18 290);
--color-generating-soft: oklch(95% 0.04 290);
--color-nee-tdah: oklch(42% 0.14 250);
--color-nee-tdah-soft: oklch(96% 0.035 250);
--color-nee-autismo: oklch(38% 0.11 155);
--color-nee-autismo-soft: oklch(95% 0.04 155);
--color-nee-dislexia: oklch(48% 0.13 78);
--color-nee-dislexia-soft: oklch(96% 0.065 85);
--color-print-ink: oklch(0% 0 0);
--color-print-surface: oklch(96% 0 0);
--color-golden: oklch(89.1% 0.178 95.7);
--color-golden-soft: oklch(96% 0.065 95);
--color-golden-ink: oklch(45% 0.12 90);
--postit-bg: oklch(96.5% 0.09 95);
--postit-bg-deep: oklch(92% 0.14 90);
--postit-ink: oklch(35% 0.08 75);
--postit-muted: oklch(50% 0.09 80);
--postit-tape: oklch(94% 0.10 92 / 55%);
--postit-divider: oklch(35% 0.08 75 / 18%);
--postit-divider-soft: oklch(35% 0.08 75 / 15%);
--postit-tape-highlight: oklch(100% 0 0 / 40%);
--postit-tape-shadow: oklch(92% 0.14 90 / 50%);
--overlay-backdrop: oklch(0% 0 0);
--stamp-approved-border: oklch(45% 0.13 155 / 65%);
--stamp-approved-border-strong: oklch(45% 0.13 155 / 70%);
--stamp-rejected-border: oklch(48% 0.18 29 / 60%);
--stamp-rejected-border-strong: oklch(48% 0.18 29 / 65%);
--space-0: 0;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-3-5: 0.875rem;
--space-4: 1rem;
--space-4-5: 1.125rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-28: 7rem;
--flow-space: 0.75lh;
--viewport-block-size: 100vh;
--container-width: 64rem;
--container-page: 1180px;
--container-copy: 56ch;
--container-copy-prose: 64ch;
--container-copy-report: 58ch;
--container-copy-council: 62ch;
--container-copy-wide: 72ch;
--container-auth-card: 26rem;
--container-auth-copy: 32rem;
--container-auth-proof: 34rem;
--container-feature-card: 18rem;
--container-grid-min: 12rem;
--container-sidebar: 15rem;
--container-chat-bubble: 34rem;
--container-doc-rail: 18.75rem;
--container-record-offset: 11rem;
--container-rail-narrow: 35rem;
--container-feedback-trail: 20rem;
--container-feedback-min: 26rem;
--container-council-side-min: 15rem;
--container-op-summary-min: 9rem;
--container-auth-left-min: 28rem;
--container-auth-right-min: 24rem;
--attachment-gallery-item-width: 33%;
--dialog-classroom-width: 35rem;
--dialog-editor-width: 61.25rem;
--dialog-inline-gutter: 2rem;
--dialog-block-gutter: 4rem;
--sticky-topbar-offset: 72px;
--staff-shell-height: 100vh;
--staff-pip-min-width: 1.25rem;
--staff-search-width: 22rem;
--attn-tile-min: 14rem;
--finder-max-height: 22rem;
--docrow-title-basis: 40%;
--docrow-title-min: 12ch;
--radius-card: 1em;
--radius-pill: 99rem;
--radius-extra-small: 0.125rem;
--radius-small: 0.25rem;
--radius-medium: 0.4rem;
--radius-large: 0.5rem;
--radius-extra-large: 0.75rem;
--radius-jumbo: 1rem;
--radius-em-extra-small: 0.3em;
--radius-em-small: 0.4em;
--radius-em-medium: 0.5em;
--radius-em-large: 0.625em;
--radius-em-extra-large: 0.75em;
--radius-em-jumbo: 0.85em;
--radius-round: 50%;
--hairline: 1px;
--rule-width: 2px;
--rail-width: 3px;
--accent-rail-width: 4px;
--icon-extra-small: 0.5rem;
--icon-small: 0.75rem;
--icon-medium: 1rem;
--icon-large: 1.75rem;
--avatar-small: 1.4rem;
--avatar-medium: 2rem;
--avatar-large: 2.35rem;
--thumb-plan-width: 1.875rem;
--thumb-mini-width: 1.375rem;
--thumb-plan-height-ratio: 6 / 9;
--toc-number-width: 2.2ch;
--usage-bar-width: 3.5rem;
--kill-status-icon: 3.25rem;
--history-dot-size: 0.5625rem;
--history-line-offset: 0.375rem;
--stamp-postit-width: 10rem;
--stamp-tape-width: 3.5rem;
--stamp-tape-height: 1rem;
--stamp-tape-small-width: 2.75rem;
--stamp-tape-small-height: 0.8125rem;
--stamp-overlay-bottom: 5.5rem;
--stamp-static-top: 4.5rem;
--stamp-fixed-top: 22rem;
--progress-thin: 0.25rem;
--progress-small: 0.375rem;
--progress-medium: 0.5rem;
--control-small: 1.75rem;
--spark-width: 2.7rem;
--spark-height: 1rem;
--spark-bar-width: 0.22rem;
--spark-bar-min-height: 0.1rem;
--pct-10: 10%;
--pct-20: 20%;
--pct-30: 30%;
--pct-40: 40%;
--pct-50: 50%;
--pct-54: 54%;
--pct-55: 55%;
--pct-58: 58%;
--pct-60: 60%;
--pct-65: 65%;
--pct-70: 70%;
--pct-75: 75%;
--pct-80: 80%;
--pct-82: 82%;
--pct-90: 90%;
--pct-100: 100%;
--blur-soft: 4rem;
--brand-orb-size: 18rem;
--filter-brand-orb: blur(var(--blur-soft));
--focus-ring: 0 0 0 3px color-mix(in oklch, var(--color-ink) 18%, transparent);
--focus-ring-accent: 0 0 0 var(--hover-ring-size) color-mix(in oklch, var(--color-accent) 20%, transparent);
--hover-ring-color: oklch(26% 0.05 264 / 12%);
--hover-ring-primary: oklch(26% 0.05 264 / 25%);
--hover-ring-positive: oklch(45% 0.13 155 / 30%);
--hover-ring-danger: oklch(48% 0.18 29 / 20%);
--hover-ring-danger-strong: oklch(48% 0.18 29 / 30%);
--hover-ring-size: 0.2rem;
--link-action-font-size: 0.78rem;
--input-readable-font-size: max(16px, var(--text-medium));
--shadow-stack:
0 0 0 1px color-mix(in oklch, var(--color-shadow-ink) 5%, transparent),
0 0.2em 0.2em color-mix(in oklch, var(--color-shadow-ink) 5%, transparent),
0 0.4em 0.4em color-mix(in oklch, var(--color-shadow-ink) 5%, transparent),
0 0.8em 0.8em color-mix(in oklch, var(--color-shadow-ink) 5%, transparent);
--shadow-soft: 0 0 0 1px color-mix(in oklch, var(--color-shadow-ink) 5%, transparent), 0 0.1em 0.2em color-mix(in oklch, var(--color-shadow-ink) 4%, transparent);
--shadow-hairline: 0 0 0 1px color-mix(in oklch, var(--color-shadow-ink) 5%, transparent);
--shadow-hairline-strong: 0 0 0 1px color-mix(in oklch, var(--color-shadow-ink) 6%, transparent);
--shadow-topbar-edge: 0 1px 0 color-mix(in oklch, var(--color-shadow-ink) 5%, transparent);
--shadow-topbar-icon: 0 0 0 1px oklch(26% 0.05 264 / 15%), 0 0.2em 0.4em color-mix(in oklch, var(--color-shadow-ink) 8%, transparent);
--shadow-golden-glow: 0 0 0.15em 0.05em color-mix(in oklch, var(--color-golden) 20%, transparent);
--shadow-golden-plan: 0 0 0 1px var(--color-golden), 0 0 0.3em 0.15em color-mix(in oklch, var(--color-golden) 30%, transparent);
--shadow-school-plan: 0 0 0 1px color-mix(in oklch, var(--color-info) 55%, var(--color-surface)), var(--shadow-soft);
--shadow-quiet-plan: 0 0 0 1px color-mix(in oklch, var(--color-border-strong) 62%, var(--color-surface)), var(--shadow-soft);
--shadow-positive-dot: 0 0 0 2px color-mix(in oklch, var(--color-positive) 25%, transparent);
--shadow-danger-pulse-start: 0 0 0 0 color-mix(in oklch, var(--color-danger) 40%, transparent);
--shadow-danger-pulse-end: 0 0 0 5px color-mix(in oklch, var(--color-danger) 0%, transparent);
--shadow-inset-subtle: inset 0 0 0 1px var(--surface-subtle);
--surface-priority-row: linear-gradient(90deg, color-mix(in oklch, var(--color-golden-soft) 76%, var(--color-surface)), var(--color-surface));
--shadow-dialog:
0 0 0 1px color-mix(in oklch, var(--color-shadow-ink) 5%, transparent),
0 0.4em 0.8em color-mix(in oklch, var(--color-shadow-ink) 8%, transparent),
0 1em 2em color-mix(in oklch, var(--color-shadow-ink) 12%, transparent),
0 2em 4em color-mix(in oklch, var(--color-shadow-ink) 12%, transparent);
--shadow-postit:
0 1px 1px color-mix(in oklch, var(--color-shadow-ink) 6%, transparent),
0 6px 12px -4px color-mix(in oklch, var(--color-shadow-ink) 18%, transparent),
0 18px 28px -10px color-mix(in oklch, var(--color-shadow-ink) 22%, transparent);
--shadow-tape: 0 1px 2px color-mix(in oklch, var(--color-shadow-ink) 8%, transparent);
--ease-out-overshoot: cubic-bezier(0.25, 1.75, 0.5, 1);
--ease-out-overshoot-subtle: cubic-bezier(0.25, 1.25, 0.5, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--duration-instant: 75ms;
--duration-fast: 150ms;
--duration-normal: 200ms;
--duration-slow: 300ms;
--z-base: 0;
--z-dropdown: 100;
--z-sticky: 200;
--z-nav: 300;
--z-overlay: 400;
--z-dialog: 500;
--z-flash: 600;
--z-tooltip: 700;
}
}
@layer base {
.brand-symbols-defs {
position: absolute;
}
}
@layer reset {
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html,
body {
min-block-size: 100%;
}
img,
svg {
display: block;
max-inline-size: 100%;
}
button,
input,
select,
textarea {
font: inherit;
}
}
@layer base {
.app {
min-block-size: 100%;
background: var(--color-canvas);
}
.app-body,
body {
min-block-size: 100%;
background: var(--color-canvas);
color: var(--color-ink);
font-family: var(--font-sans);
line-height: var(--line-normal);
}
a {
color: var(--color-link);
text-decoration: none;
}
a:hover {
color: var(--color-link-hover);
}
strong {
font-weight: 650;
}
button,
input,
select,
textarea {
color: var(--color-ink);
}
turbo-frame {
display: contents;
}
.turbo-progress-bar {
visibility: hidden;
}
}
@layer layout {
.app-shell {
display: flex;
flex-direction: column;
min-block-size: var(--viewport-block-size);
}
.app-main {
flex: 1;
}
.page {
inline-size: 100%;
max-inline-size: var(--container-width);
margin-inline: auto;
padding: var(--space-8) var(--space-4);
}
.stack > * + * {
margin-block-start: var(--stack-space, var(--space-6));
}
.stack--large {
--stack-space: var(--space-8);
}
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cluster-space, var(--space-3));
}
.actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
}
.section-actions {
margin-block-start: var(--space-2);
}
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(var(--container-grid-min), 100%), 1fr));
gap: var(--space-3);
}
}
@layer components {
.topbar {
border-block-end: var(--hairline) solid var(--color-border);
background: var(--color-surface);
}
.topbar__inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
inline-size: 100%;
max-inline-size: var(--container-width);
min-block-size: var(--space-12);
margin-inline: auto;
padding-inline: var(--space-4);
}
.topbar__brand {
color: var(--color-ink);
font-size: var(--text-medium);
font-weight: 750;
letter-spacing: var(--letter-snug);
}
.topbar__nav {
position: absolute;
inset-inline: 0;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
pointer-events: none;
}
.topbar__nav > * {
pointer-events: auto;
}
.topbar__account {
display: flex;
align-items: center;
gap: var(--space-4);
}
.topbar__link {
position: relative;
color: var(--color-ink-muted);
font-size: var(--text-medium);
font-weight: 500;
padding: var(--space-1-5) var(--space-3);
border-radius: var(--radius-medium);
transition:
color var(--duration-fast),
background-color var(--duration-fast);
}
@media (any-hover: hover) {
.topbar__link:hover {
color: var(--color-ink);
background: var(--color-canvas);
}
}
.topbar__link.topbar__link--current {
color: var(--color-ink);
font-weight: 650;
}
.topbar__link.topbar__link--current::after {
content: "";
position: absolute;
inset-inline: var(--space-3);
inset-block-end: calc(var(--space-1-5) * -1 - var(--hairline));
block-size: var(--rule-width);
background: var(--color-ink);
border-radius: var(--radius-pill);
}
.topbar__link.topbar__link--admin {
color: var(--color-accent);
font-weight: 600;
}
@media (any-hover: hover) {
.topbar__link.topbar__link--admin:hover {
background: var(--color-accent-soft);
}
}
.topbar__user {
color: var(--color-ink-muted);
font-size: var(--text-medium);
}
.topbar__button {
appearance: none;
border: 0;
background: transparent;
color: var(--color-ink-muted);
font-size: var(--text-medium);
cursor: pointer;
padding: 0;
transition: color var(--duration-fast);
}
@media (any-hover: hover) {
.topbar__button:hover {
color: var(--color-ink);
}
}
}
@layer components {
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
font-family: inherit;
font-size: var(--text-medium);
font-weight: 600;
letter-spacing: var(--letter-body);
line-height: var(--line-tight);
text-decoration: none;
cursor: pointer;
white-space: nowrap;
border: 1px solid var(--btn-border, transparent);
border-radius: var(--radius-pill);
background-color: var(--btn-bg, transparent);
color: var(--btn-fg, var(--color-ink));
transition:
background-color var(--duration-fast) ease,
border-color     var(--duration-fast) ease,
box-shadow       var(--duration-fast) ease;
@media (any-hover: hover) {
&:hover {
background-color: var(--btn-bg-hover, var(--btn-bg));
border-color: var(--btn-border-hover, var(--btn-border));
}
}
&:active {
scale: 0.97;
}
&:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
&[disabled],
&[aria-disabled="true"] {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
}
.btn--primary {
--btn-bg:       var(--color-ink);
--btn-fg:       var(--color-surface);
--btn-bg-hover: color-mix(in srgb, var(--color-ink) 88%, var(--color-surface));
}
.btn--ghost {
--btn-bg:           transparent;
--btn-fg:           var(--color-ink);
--btn-border:       var(--color-ink);
--btn-bg-hover:     color-mix(in srgb, var(--color-ink) 8%, transparent);
--btn-border-hover: var(--color-ink);
}
.btn--wa {
--btn-bg:       var(--color-wa);
--btn-fg:       var(--color-ink);
--btn-bg-hover: var(--color-wa-hover);
font-weight: 700;
}
.btn--positive {
--btn-bg:       var(--color-positive);
--btn-fg:       var(--color-surface);
--btn-bg-hover: color-mix(in srgb, var(--color-positive) 88%, black);
}
.btn--danger {
--btn-bg:       var(--color-danger-soft);
--btn-fg:       var(--color-danger);
--btn-bg-hover: color-mix(in srgb, var(--color-danger-soft) 86%, var(--color-danger));
}
.btn--danger-fill {
--btn-bg:       var(--color-danger);
--btn-fg:       var(--color-surface);
--btn-bg-hover: color-mix(in srgb, var(--color-danger) 88%, black);
}
.btn--small {
font-size: var(--text-small);
padding: var(--space-1-5) var(--space-3);
}
.text-button {
font-size: var(--link-action-font-size);
font-weight: 600;
color: var(--color-accent);
background: none;
border: 0;
cursor: pointer;
@media (any-hover: hover) {
&:hover {
text-decoration: underline;
}
}
}
}
@layer components {
.flash {
border-block-end: var(--hairline) solid var(--flash-border-color);
background: var(--flash-background);
color: var(--flash-color);
font-size: var(--text-medium);
padding: var(--space-2) var(--space-4);
&.flash--notice {
--flash-background: var(--color-positive-soft);
--flash-border-color: color-mix(in oklch, var(--color-positive) 25%, var(--color-border));
--flash-color: var(--color-positive);
}
&.flash--alert {
--flash-background: var(--color-danger-soft);
--flash-border-color: color-mix(in oklch, var(--color-danger) 25%, var(--color-border));
--flash-color: var(--color-danger);
}
}
}
@layer components {
.email-confirmation-banner {
--banner-bg: var(--color-warning-soft);
--banner-border: color-mix(in oklch, var(--color-warning) 30%, var(--color-border));
--banner-color: var(--color-warning);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
background: var(--banner-bg);
border-block-end: var(--hairline) solid var(--banner-border);
color: var(--banner-color);
padding: var(--space-2) var(--space-4);
font-size: var(--text-medium);
&.email-confirmation-banner--overdue {
--banner-bg: var(--color-danger-soft);
--banner-border: color-mix(in oklch, var(--color-danger) 30%, var(--color-border));
--banner-color: var(--color-danger);
}
}
.email-confirmation-banner__text {
margin: 0;
flex: 1 1 16rem;
}
.email-confirmation-banner__action {
flex-shrink: 0;
& .btn,
&.btn,
& button {
background: transparent;
border: var(--hairline) solid currentColor;
color: currentColor;
padding-inline: var(--space-3);
padding-block: var(--space-1);
border-radius: var(--radius-small);
font-weight: 600;
}
}
}
@layer components {
.list {
border: var(--hairline) solid var(--color-border);
background: var(--color-surface);
border-radius: var(--radius-card);
}
.list__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) var(--space-4);
& + .list__item {
border-block-start: var(--hairline) solid color-mix(in oklch, var(--color-border) 72%, transparent);
}
}
.list__title {
color: var(--color-ink);
font-size: var(--text-medium);
font-weight: 650;
}
.list__meta {
color: var(--color-ink-subtle);
font-size: var(--text-small);
margin-block-start: var(--space-0-5);
}
}
@layer components {
.prose {
font-size: var(--text-base);
line-height: var(--line-relaxed);
color: var(--color-ink);
max-width: var(--container-copy-prose);
}
.prose h2 {
font-size: var(--text-extra-small);
font-weight: 700;
letter-spacing: var(--letter-widest);
text-transform: uppercase;
color: var(--color-ink-muted);
margin: var(--space-9) 0 var(--space-2-5);
padding-bottom: var(--space-2);
display: flex;
align-items: center;
gap: var(--space-3-5);
}
.prose h2::after {
content: '';
flex: 1;
border-bottom: var(--hairline) dotted var(--color-line-subtle);
}
.prose h2:first-child {
margin-top: 0;
}
.prose p {
margin-bottom: var(--flow-space);
text-wrap: pretty;
}
.prose ul {
padding-inline-start: var(--space-6);
margin-bottom: var(--flow-space);
}
.prose li {
margin-bottom: var(--space-1);
}
.prose strong {
color: var(--color-ink);
font-weight: 700;
}
.bncc-tag {
background: var(--color-surface);
color: var(--color-accent);
font-family: var(--font-mono);
font-size: var(--text-small);
font-weight: 700;
padding: var(--space-1) var(--space-2-5);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-hairline);
}
}
@layer components {
@keyframes pulse-dot {
0%, 100% {
box-shadow: var(--shadow-danger-pulse-start);
}
50% {
box-shadow: var(--shadow-danger-pulse-end);
}
}
@keyframes overlay-in {
0% {
opacity: 0;
}
15% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes stamp-hit {
0% {
opacity: 0;
scale: 2.6;
}
40% {
opacity: 1;
scale: 0.93;
}
65% {
scale: 1.05;
}
100% {
scale: 1;
}
}
@keyframes stamp-settle {
0% {
opacity: 0;
scale: 1.3;
}
100% {
opacity: 1;
scale: 1;
}
}
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.35;
}
}
.toast {
position: fixed;
top: var(--space-5);
left: 50%;
transform: translateX(-50%) translateY(calc(var(--space-1) * -1));
background: var(--color-ink);
color: var(--color-surface);
padding: var(--space-2-5) var(--space-6);
border-radius: var(--radius-pill);
font-size: var(--text-medium);
font-weight: 600;
box-shadow: var(--shadow-stack);
opacity: 0;
transition: opacity var(--duration-normal), transform var(--duration-slow) var(--ease-out-overshoot);
pointer-events: none;
z-index: var(--z-flash);
}
}
@layer utilities {
.danger-text {
color: var(--color-danger);
}
.text-quiet {
color: var(--color-ink-muted);
}
.mono {
font-family: var(--font-mono);
}
.full-width {
inline-size: 100%;
}
.lp-nowrap {
white-space: nowrap;
}
.visually-hidden {
clip: rect(0 0 0 0);
block-size: var(--hairline);
border: 0;
clip-path: inset(50%);
inline-size: var(--hairline);
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
}
@media print {
nav,
.topbar,
.flash {
display: none !important;
}
}
}
@layer tokens {
.landing-page {
--lp-paper:       #f4f0e6;
--lp-paper-warm:  #ede6d4;
--lp-ink:         #1a1f1c;
--lp-ink-soft:    #3e4540;
--lp-ink-mute:    #5f655e;
--lp-ink-faint:   #656a61;
--lp-rule:        #d8d1bd;
--lp-terracotta:   #c66a3b;
--lp-terracotta-d: #9c4c26;
--lp-terra:        #c66a3b;
--lp-mustard:      #d9a83a;
--lp-blue:         #3e7fc9;
--color-canvas:   var(--lp-paper);
--color-ink:      var(--lp-ink);
--color-surface:  var(--lp-white);
--color-border:   var(--lp-rule);
--color-positive: var(--lp-wa);
--lp-yellow-soft:      color-mix(in srgb, var(--lp-mustard) 14%,   var(--lp-paper));
--lp-terracotta-light: color-mix(in srgb, var(--lp-terracotta) 22%, var(--lp-paper));
--lp-peach:            color-mix(in srgb, var(--lp-terracotta) 12%, var(--lp-paper));
--lp-paper-cream:      #faf6e9;
--lp-marker-yellow:    oklch(92% 0.13 95);
--lp-highlight-yellow: oklch(92% 0.08 90);
--lp-highlight-blue:   oklch(92% 0.06 240);
--lp-ribbon-terra: var(--lp-terracotta);
--lp-ribbon-sky:   var(--lp-blue);
--lp-yellow-mid:   color-mix(in srgb, var(--lp-mustard) 82%, var(--lp-ink));
--lp-yellow-pop:   var(--lp-mustard);
--lp-decl-sky-border:   var(--lp-blue);
--lp-decl-sky-num:      color-mix(in srgb, var(--lp-blue) 55%,       var(--lp-paper));
--lp-decl-sun-border:   var(--lp-mustard);
--lp-decl-sun-num:      color-mix(in srgb, var(--lp-mustard) 60%,   var(--lp-paper));
--lp-decl-terra-border: var(--lp-terracotta);
--lp-decl-terra-num:    color-mix(in srgb, var(--lp-terracotta) 60%, var(--lp-paper));
--lp-terra-accent: color-mix(in srgb, var(--lp-terracotta) 65%, var(--lp-paper));
--lp-terra-italic: var(--lp-terracotta);
--lp-wa:    #25d366;
--lp-wa-d:  #128c7e;
--lp-wa-bg: #dcf8c6;
--lp-white:        #ffffff;
--lp-shadow-ink:   #000000;
--lp-shadow-color: var(--lp-ink);
--lp-on-dark-mute:  color-mix(in srgb, var(--lp-paper) 64%, var(--lp-ink));
--lp-on-dark-soft:  color-mix(in srgb, var(--lp-paper) 82%, var(--lp-ink));
--lp-on-dark-warm:  color-mix(in srgb, var(--lp-paper) 78%, var(--lp-ink));
--lp-on-dark-or:    color-mix(in srgb, var(--lp-paper) 56%, var(--lp-ink));
--lp-on-dark-proof: color-mix(in srgb, var(--lp-paper) 86%, var(--lp-ink));
--lp-divider-dark:  color-mix(in srgb, var(--lp-paper) 22%, var(--lp-ink));
--lp-fs-xs: 12px;
--lp-fs-sm: 14px;
--lp-fs-base: 17px;
--lp-fs-md: 19px;
--lp-fs-lg: 22px;
--lp-fs-xl: 28px;
--lp-fs-2xl: 38px;
--lp-fs-4xl: 72px;
--lp-lh-tight: 1.05;
--lp-lh-snug: 1.2;
--lp-lh-text: 1.55;
--lp-measure: 62ch;
--lp-radius-sm: 4px;
--lp-radius: 8px;
--lp-radius-lg: 14px;
--lp-shadow-soft:
0 1px 0 color-mix(in oklch, var(--lp-shadow-color) 4%, transparent),
0 8px 24px -12px color-mix(in oklch, var(--lp-shadow-color) 10%, transparent);
--lp-shadow-card:
0 1px 0 color-mix(in oklch, var(--lp-shadow-color) 5%, transparent),
0 18px 40px -20px color-mix(in oklch, var(--lp-shadow-color) 18%, transparent);
--lp-section-y: clamp(72px, 9vw, 120px);
--lp-block-gap: clamp(40px, 5vw, 64px);
--font-display: var(--font-serif);
--font-body: var(--font-sans);
--font-mono: var(--font-sans);
}
}
@layer base {
html:has(> body.landing-page),
body.landing-page {
overflow-x: clip;
}
}
@layer utilities {
.landing-page :where(h1, h2, h3, h4, h5, h6),
.landing-page :where(h1, h2, h3, h4, h5, h6) :where(em, span, strong) {
font-style: normal;
}
.landing-page.lp-home .lp-hero h1 .lp-terra {
font-style: italic;
}
}
@layer features {
@media screen {
.lp-home main > section ~ section:not(.lp-creed),
.lp-home .lp-site-footer {
content-visibility: auto;
contain-intrinsic-block-size: auto 800px;
}
}
.landing-page a:focus-visible,
.landing-page button:focus-visible,
.landing-page summary:focus-visible,
.landing-page input:focus-visible,
.landing-page select:focus-visible,
.landing-page textarea:focus-visible {
outline: 2px solid var(--lp-ink);
outline-offset: 3px;
}
.landing-page .lp-creed :is(a, button, summary, input, select, textarea):focus-visible,
.landing-page .lp-final-cta :is(a, button, summary, input, select, textarea):focus-visible,
.landing-page .lp-trades :is(a, button, summary, input, select, textarea):focus-visible,
.landing-page .lp-signoff :is(a, button, summary, input, select, textarea):focus-visible {
outline-color: var(--lp-paper);
}
.landing-page ::selection {
background: var(--lp-marker-yellow);
color: var(--lp-ink);
}
.landing-page .lp-skip-link {
position: absolute;
top: -100%;
inset-inline-start: 16px;
z-index: var(--z-dropdown);
padding: 8px 16px;
background: var(--lp-ink);
color: var(--lp-paper);
font-size: 14px;
font-weight: 600;
border-radius: 0 0 8px 8px;
text-decoration: none;
transition: top 0.15s ease;
}
.landing-page .lp-skip-link:focus {
top: 0;
}
.landing-page {
font-family: var(--font-sans);
font-size: var(--lp-fs-base);
line-height: var(--lp-lh-text);
color: var(--lp-ink);
background: var(--lp-paper);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-feature-settings: "ss01", "cv11";
}
.landing-page *,
.landing-page *::before,
.landing-page *::after {
box-sizing: border-box;
}
.landing-page img,
.landing-page svg {
display: block;
max-width: 100%;
}
.landing-page a:not(.btn) {
color: inherit;
text-decoration: none;
}
.landing-page a.link {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--lp-ink-faint);
}
.landing-page a.link:hover {
text-decoration-color: var(--lp-terracotta);
color: var(--lp-terracotta);
}
.landing-page button:where(:not(.btn)) {
font: inherit;
cursor: pointer;
}
.landing-page .lp-text-center {
text-align: center;
margin-inline-start: auto;
margin-inline-end: auto;
}
.landing-page .lp-text-mute {
color: var(--lp-ink-mute);
}
.landing-page .lp-mt-4 {
margin-top: 16px;
}
.landing-page .lp-mt-6 {
margin-top: 24px;
}
.landing-page .lp-mt-8 {
margin-top: 32px;
}
.landing-page .lp-mt-12 {
margin-top: 48px;
}
.landing-page .lp-kbd {
display: inline-block;
padding: 2px 8px;
background: var(--lp-paper-warm);
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius-sm);
font-family: var(--font-mono);
font-size: 13px;
color: var(--lp-terracotta-d);
font-weight: 600;
}
.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page h4,
.landing-page h5,
.landing-page h6 {
font-family: var(--font-serif);
font-weight: 480;
letter-spacing: -0.015em;
line-height: var(--lp-lh-snug);
margin: 0;
text-wrap: balance;
}
.landing-page h1 {
font-size: var(--lp-fs-4xl);
line-height: var(--lp-lh-tight);
letter-spacing: -0.025em;
font-weight: 420;
}
.landing-page h2 {
font-size: var(--lp-fs-2xl);
}
.landing-page h3 {
font-size: var(--lp-fs-xl);
}
.landing-page h4 {
font-size: var(--lp-fs-lg);
}
.landing-page p {
margin: 0 0 1em 0;
max-width: var(--lp-measure);
text-wrap: pretty;
}
.landing-page .lp-eyebrow {
font-family: var(--font-mono);
font-size: var(--lp-fs-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--lp-ink-mute);
font-weight: 500;
display: block;
margin-bottom: 18px;
}
.landing-page .lp-eyebrow-accent {
color: var(--lp-terracotta-d);
}
.landing-page .lp-lede {
font-family: var(--font-sans);
font-size: var(--lp-fs-lg);
line-height: 1.45;
color: var(--lp-ink-soft);
font-weight: 400;
max-width: 56ch;
}
.landing-page .lp-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
}
.landing-page .lp-wrap-narrow {
max-width: 880px;
margin: 0 auto;
padding: 0 32px;
}
.landing-page .lp-wrap-wide {
max-width: 1360px;
margin: 0 auto;
padding: 0 32px;
}
.landing-page section {
padding: var(--lp-section-y) 0;
}
.landing-page section + section {
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-confirm {
max-inline-size: 640px;
margin-inline: auto;
padding-block: 4rem 6rem;
text-align: center;
}
.landing-page .lp-confirm__body {
margin-block-start: 1rem;
font-size: 1.125rem;
}
.landing-page .lp-confirm__actions {
margin-block-start: 2.5rem;
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.landing-page .lp-bg-warm {
background: var(--lp-paper-warm);
}
.landing-page hr {
border: 0;
border-top: 1px solid var(--lp-rule);
margin: 48px 0;
}
.landing-page .lp-w-full       { width: 100%; }
.landing-page .lp-justify-center { justify-content: center; }
.landing-page .lp-flex-center  { display: flex; justify-content: center; }
.landing-page .lp-mb-28        { margin-bottom: 28px; }
.landing-page .lp-c-mute       { color: var(--lp-ink-mute); }
.landing-page .lp-c-gray       { color: var(--lp-on-dark-mute); }
.landing-page .lp-c-light      { color: var(--lp-on-dark-warm); }
.landing-page .lp-fs-11        { font-size: 11px; }
.landing-page .lp-fs-13        { font-size: 13px; }
.landing-page .lp-fs-14        { font-size: 14px; }
.landing-page .lp-lede-center  { margin: 0 auto 32px; }
.landing-page .lp-link-mute {
color: var(--lp-ink-mute);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--lp-rule);
transition: color 0.15s ease;
}
.landing-page .lp-link-mute:hover {
color: var(--lp-ink-soft);
}
.landing-page .lp-doodle-sparkle {
position: absolute;
top: -20px;
inset-inline-end: -20px;
width: 48px;
height: 48px;
color: var(--lp-mustard);
opacity: 0.8;
pointer-events: none;
}
.landing-page .lp-final-cta .lp-alt-btns {
position: relative;
}
[hidden] {
display: none !important;
}
.landing-page .lp-modes-grid {
display: grid;
grid-template-columns: 1fr minmax(0, 390px);
gap: 64px;
align-items: center;
}
.landing-page .lp-modes-grid .lp-sect-head-block {
margin-bottom: 0;
max-width: 52ch;
}
.landing-page .lp-modes-stage {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.landing-page .lp-mode {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
position: relative;
}
.landing-page .lp-mode .lp-phone-sample {
padding: 4px 12px 10px;
}
.landing-page .lp-mode-note {
font-family: var(--font-handwritten);
font-size: 22px;
font-weight: 500;
line-height: 1.1;
color: var(--lp-terracotta-d);
transform: rotate(-1.5deg);
margin-block: 0 2px;
margin-inline: 12px 0;
align-self: flex-start;
}
.landing-page .lp-mode-note::after {
content: "";
display: inline-block;
width: 18px;
height: 15px;
margin-inline-start: 8px;
vertical-align: -3px;
transform: rotate(62deg);
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" fill="none" stroke="%23a8542a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 16 C8 17 16 12 20 5"/><path d="M14 5 L20 5 L19 11"/></svg>');
background-size: contain;
background-repeat: no-repeat;
}
.landing-page .lp-mode-chat {
min-width: 0;
}
.landing-page .lp-mode-chat .lp-phone__msg {
max-width: min(420px, 92%);
}
.landing-page .lp-mode-chat .lp-phone__msg--media {
max-width: min(185px, 92%);
}
.landing-page .lp-modes-foot {
font-family: var(--font-sans);
font-size: 12.5px;
line-height: 1.4;
color: var(--lp-ink-mute);
font-style: italic;
margin: 10px 6px 0;
}
@media (min-width: 1180px) {
.landing-page .lp-modes-grid {
grid-template-columns: 1fr minmax(0, 390px) 150px;
gap: 40px;
}
.landing-page .lp-mode .lp-mode-note {
position: absolute;
top: 8px;
margin: 0;
width: 170px;
font-size: 20px;
z-index: 1;
}
.landing-page .lp-mode:nth-child(odd) .lp-mode-note {
left: calc(100% + 16px);
text-align: left;
transform: rotate(2deg);
}
.landing-page .lp-mode:nth-child(even) .lp-mode-note {
right: calc(100% + 16px);
text-align: right;
transform: rotate(-2deg);
}
.landing-page .lp-mode:nth-child(odd) .lp-mode-note::after {
display: none;
}
.landing-page .lp-mode:nth-child(odd) .lp-mode-note::before {
content: "";
display: inline-block;
width: 18px;
height: 15px;
margin-right: 8px;
vertical-align: -3px;
transform: scaleX(-1) rotate(62deg);
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" fill="none" stroke="%23a8542a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 16 C8 17 16 12 20 5"/><path d="M14 5 L20 5 L19 11"/></svg>');
background-size: contain;
background-repeat: no-repeat;
}
}
@media (max-width: 980px) {
.landing-page .lp-modes-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.landing-page .lp-modes-grid > div:last-child {
width: min(390px, 100%);
margin-inline: auto;
}
}
.landing-page .lp-photo-caption {
font-family: var(--font-sans);
font-size: 13px;
color: var(--lp-ink);
padding: 0 4px 2px;
}
.landing-page .lp-moment-item {
border-bottom: 1px solid var(--lp-rule);
}
.landing-page .lp-moment-item:first-child {
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-moment-item summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 15px 4px;
}
.landing-page .lp-moment-item summary::-webkit-details-marker {
display: none;
}
.landing-page .lp-moment-item h3 {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 460;
line-height: 1.25;
margin: 0;
}
.landing-page .lp-moment-item h3 .lp-hl-yellow {
background: linear-gradient(180deg, transparent 60%, var(--lp-highlight-yellow) 60%);
padding: 0 2px;
}
.landing-page .lp-moment-item h3 .lp-hl-blue {
background: linear-gradient(180deg, transparent 60%, var(--lp-highlight-blue) 60%);
padding: 0 2px;
}
.landing-page .lp-moment-item summary::after {
content: "+";
font-family: var(--font-sans);
font-size: 24px;
font-weight: 300;
line-height: 1;
color: var(--lp-terracotta);
flex-shrink: 0;
transition: rotate 0.2s ease;
}
.landing-page .lp-moment-item summary:hover::after {
color: var(--lp-terracotta-d);
}
.landing-page .lp-moment-item[open] summary::after {
rotate: 45deg;
}
.landing-page .lp-moment-body {
padding: 4px 4px 20px;
}
.landing-page .lp-moment-item[open] .lp-moment-body {
animation: lp-moment-in 0.25s ease;
}
@keyframes lp-moment-in {
from {
opacity: 0;
translate: 0 -4px;
}
}
.landing-page .lp-moment-body p {
font-size: 16px;
line-height: 1.6;
color: var(--lp-ink-soft);
max-width: 60ch;
}
.landing-page .lp-moment-body em {
font-style: italic;
color: var(--lp-terracotta-d);
}
.landing-page .lp-moment-body .lp-moment-foot {
font-size: 13.5px;
color: var(--lp-ink-mute);
margin-top: 8px;
}
.landing-page .lp-moment-media {
padding: 4px 0 24px;
}
.landing-page .lp-moment-media .lp-phone__audio {
min-width: 0;
}
@media (min-width: 1100px) {
.landing-page .lp-moments {
position: relative;
padding-inline-start: 462px;
min-height: 440px;
display: flex;
flex-direction: column;
justify-content: center;
}
.landing-page .lp-moment-media {
position: absolute;
top: 50%;
inset-inline-start: 0;
width: 390px;
margin-top: -200px;
padding: 0;
}
.landing-page .lp-moment-media .lp-phone {
width: 100%;
--phone-overflow: 26px;
}
.landing-page .lp-moment-media .lp-phone__screen {
min-height: 400px;
}
.landing-page .lp-moment-body {
min-height: 132px;
}
.landing-page .lp-moment-item[open] .lp-moment-media {
animation: lp-phone-swap 0.35s ease;
}
}
@keyframes lp-phone-swap {
from {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.landing-page .lp-moment-item[open] .lp-moment-body,
.landing-page .lp-moment-item[open] .lp-moment-media {
animation: none;
}
}
.landing-page .lp-section-slim {
padding: 44px 0;
}
.landing-page .lp-reading-note {
display: flex;
align-items: flex-start;
gap: 16px;
max-width: 720px;
margin-inline: auto;
}
.landing-page .lp-reading-ico {
width: 34px;
height: 34px;
flex-shrink: 0;
margin-top: 2px;
}
.landing-page .lp-reading-note p {
font-size: 15.5px;
line-height: 1.6;
color: var(--lp-ink-soft);
}
.landing-page .lp-reading-authors {
display: block;
margin-top: 4px;
font-size: 13.5px;
font-style: italic;
color: var(--lp-ink-mute);
}
}
@layer features {
.landing-page .lp-topnav {
display: flex;
align-items: center;
gap: 32px;
padding: 14px 31px;
border: 1px solid transparent;
border-bottom-color: var(--lp-rule);
position: sticky;
top: 0;
z-index: var(--z-nav);
background: var(--lp-paper);
width: min(1360px, 100%);
margin-inline: auto;
transition:
top 0.3s ease,
width 0.3s ease,
border-radius 0.3s ease,
border-color 0.3s ease,
background-color 0.3s ease,
box-shadow 0.3s ease;
}
@media (min-width: 981px) {
.landing-page .lp-topnav[data-nav-ready]:not([data-floating]) {
background: transparent;
border-bottom-color: transparent;
}
}
.landing-page .lp-topnav[data-floating] {
top: 14px;
width: min(1360px, calc(100% - 24px));
border-color: var(--lp-rule);
border-radius: 999px;
background: color-mix(in srgb, var(--lp-paper) 90%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: 0 18px 44px -22px color-mix(in srgb, var(--lp-shadow-color) 50%, transparent);
}
.landing-page .lp-brand {
display: inline-flex;
align-items: center;
color: inherit;
text-decoration: none;
flex-shrink: 0;
}
.landing-page .lp-brand-logo {
display: block;
height: auto;
color: var(--lp-ink);
}
.landing-page .lp-topnav-nav {
display: flex;
gap: 28px;
flex: 1;
justify-content: center;
}
.landing-page .lp-topnav-nav a {
font-size: 14px;
font-weight: 500;
color: var(--lp-ink-soft);
position: relative;
padding: 4px 0;
transition: color 0.15s ease;
}
.landing-page .lp-topnav-nav a:hover {
color: var(--lp-terracotta);
}
.landing-page .lp-topnav-nav a.is-active {
color: var(--lp-ink);
}
.landing-page .lp-topnav-nav a.is-active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 2px;
background: var(--lp-terracotta);
border-radius: 1px;
}
.landing-page .lp-topnav .lp-actions {
display: flex;
gap: 14px;
align-items: center;
flex-shrink: 0;
}
.landing-page .lp-topnav .lp-actions .lp-link {
font-size: 14px;
color: var(--lp-ink-soft);
transition: color 0.15s ease;
}
.landing-page .lp-topnav .lp-actions .lp-link:hover {
color: var(--lp-terracotta);
}
.landing-page .lp-nav-toggle {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
padding: 0;
margin: -1px;
}
.landing-page .lp-burger {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
border: 1px solid var(--lp-rule);
border-radius: 8px;
background: var(--lp-paper);
cursor: pointer;
flex-shrink: 0;
transition: border-color 0.15s ease;
}
.landing-page .lp-burger:hover {
border-color: var(--lp-ink);
}
.landing-page .lp-burger-bar {
display: block;
width: 18px;
height: 2px;
background: var(--lp-ink);
border-radius: 1px;
transition:
transform 0.2s ease,
opacity 0.15s ease;
transform-origin: center;
}
.landing-page .lp-nav-toggle:focus-visible ~ .lp-burger {
outline: 2px solid var(--lp-ink);
outline-offset: 3px;
}
.landing-page
.lp-nav-toggle:checked
~ .lp-burger
.lp-burger-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.landing-page
.lp-nav-toggle:checked
~ .lp-burger
.lp-burger-bar:nth-child(2) {
opacity: 0;
}
.landing-page
.lp-nav-toggle:checked
~ .lp-burger
.lp-burger-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.landing-page .lp-nav-mobile-only {
display: none;
}
.landing-page .lp-nav-group {
position: relative;
}
.landing-page .lp-topnav-nav .lp-nav-group-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
border: 0;
background: none;
font: inherit;
font-size: 14px;
font-weight: 500;
color: var(--lp-ink-soft);
padding: 4px 0;
cursor: pointer;
transition: color 0.15s ease;
}
.landing-page .lp-nav-group-btn:hover {
color: var(--lp-terracotta);
}
.landing-page .lp-nav-group-btn.is-active {
color: var(--lp-ink);
}
.landing-page .lp-nav-group-btn.is-active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 2px;
background: var(--lp-terracotta);
border-radius: 1px;
}
.landing-page .lp-nav-chevron {
transition: transform 0.15s ease;
}
.landing-page .lp-nav-group-btn[aria-expanded="true"] .lp-nav-chevron {
transform: rotate(180deg);
}
.landing-page .lp-nav-panel {
display: none;
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%);
width: 324px;
padding: 10px;
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 14px;
box-shadow: 0 18px 40px -18px color-mix(in oklch, var(--lp-shadow-color) 28%, transparent);
}
.landing-page .lp-nav-group-btn[aria-expanded="true"] + .lp-nav-panel {
display: block;
animation: lp-nav-panel-in 0.16s ease-out;
}
@keyframes lp-nav-panel-in {
from {
opacity: 0;
transform: translateX(-50%) translateY(-4px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
.landing-page .lp-nav-panel::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
width: 10px;
height: 10px;
background: var(--lp-paper);
border-left: 1px solid var(--lp-rule);
border-top: 1px solid var(--lp-rule);
transform: translateX(-50%) rotate(45deg);
}
.landing-page .lp-nav-group-label {
display: none;
}
@media (min-width: 981px) and (max-width: 1100px) {
.landing-page .lp-topnav {
padding-inline: 20px;
}
.landing-page .lp-topnav-nav {
gap: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.landing-page .lp-topnav {
transition: none;
}
.landing-page .lp-nav-group-btn[aria-expanded="true"] + .lp-nav-panel {
animation: none;
}
}
.landing-page .lp-topnav-nav .lp-nav-card {
display: flex;
flex-direction: column;
gap: 3px;
padding: 13px 16px;
border-radius: 10px;
transition: background 0.12s ease;
}
.landing-page .lp-topnav-nav .lp-nav-card + .lp-nav-card {
margin-top: 2px;
}
.landing-page .lp-topnav-nav .lp-nav-card:hover {
background: var(--lp-paper-warm);
color: inherit;
}
.landing-page .lp-nav-card strong {
font-size: 14px;
font-weight: 600;
color: var(--lp-ink);
}
.landing-page .lp-topnav-nav .lp-nav-card.is-active {
background: var(--lp-paper-warm);
}
.landing-page .lp-topnav-nav .lp-nav-card.is-active::after {
content: none;
}
.landing-page .lp-nav-card.is-active strong {
color: var(--lp-terracotta);
}
.landing-page .lp-nav-card span {
font-size: 12.5px;
color: var(--lp-ink-mute);
}
.landing-page .lp-topnav .lp-lang-btn {
display: inline-flex;
align-items: center;
gap: 5px;
border: 0;
background: none;
font: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--lp-ink-soft);
padding: 4px 0;
cursor: pointer;
transition: color 0.15s ease;
}
.landing-page .lp-topnav .lp-lang-btn:hover,
.landing-page .lp-topnav .lp-lang-btn[aria-expanded="true"] {
color: var(--lp-terracotta);
}
.landing-page .lp-lang .lp-nav-panel {
width: 176px;
padding: 6px;
margin: 0;
list-style: none;
}
.landing-page .lp-lang-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 12px;
border-radius: 9px;
font-size: 14px;
font-weight: 500;
color: var(--lp-ink-soft);
transition: background 0.12s ease, color 0.12s ease;
}
.landing-page .lp-lang-option:hover {
background: var(--lp-paper-warm);
color: var(--lp-ink);
}
.landing-page .lp-lang-option[aria-current] {
color: var(--lp-ink);
font-weight: 600;
}
.landing-page .lp-lang-option[aria-current]::after {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--lp-terracotta);
}
.landing-page .lp-lang-list {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
font-size: 13px;
}
.landing-page .lp-lang-list.lp-nav-mobile-only {
display: none;
}
.landing-page .lp-lang-list > * {
color: var(--lp-ink-soft);
transition: color 0.15s ease;
}
.landing-page .lp-lang-list a:hover {
color: var(--lp-terracotta);
}
.landing-page .lp-lang-list [aria-current] {
color: var(--lp-ink);
font-weight: 600;
}
.landing-page .lp-lang-hint {
position: fixed;
inset-inline: 16px;
inset-block-end: max(16px, env(safe-area-inset-bottom));
z-index: 60;
width: fit-content;
max-width: calc(100% - 32px);
margin-inline: auto;
display: flex;
justify-content: center;
padding: 10px 20px;
background: var(--lp-yellow-soft);
border: 1px solid var(--lp-rule);
border-radius: 12px;
box-shadow: 0 4px 16px color-mix(in oklch, var(--lp-ink) 12%, transparent);
font-size: 14px;
color: var(--lp-ink-soft);
}
.landing-page .lp-lang-hint-item {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 12px;
margin: 0;
max-width: none;
}
.landing-page .lp-lang-hint[hidden],
.landing-page .lp-lang-hint-item[hidden] {
display: none;
}
.landing-page .lp-lang-hint-item a {
color: var(--lp-terracotta-d);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.landing-page .lp-lang-hint-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 0;
border-radius: 50%;
background: none;
color: var(--lp-ink-mute);
cursor: pointer;
}
.landing-page .lp-lang-hint-close:hover {
background: color-mix(in oklch, var(--lp-ink) 8%, transparent);
color: var(--lp-ink);
}
}
@layer features {
.landing-page .lp-hero {
padding: 32px 0 48px 0;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
min-height: calc(100vh - 84px);
min-height: calc(100svh - 84px);
}
.landing-page .lp-hero > .lp-wrap-wide {
width: 100%;
}
.landing-page .lp-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 72px;
align-items: center;
}
.landing-page .lp-hero-grid > * {
min-width: 0;
}
.landing-page .lp-hero--pricing,
.landing-page .lp-hero--teachers,
.landing-page .lp-hero--schools {
min-height: auto;
align-items: flex-start;
}
.landing-page .lp-hero--pricing {
padding-block: clamp(20px, 4vw, 40px) clamp(16px, 3vw, 28px);
}
.landing-page .lp-hero--teachers > .lp-wrap-wide,
.landing-page .lp-hero--schools > .lp-wrap-wide {
max-width: 1120px;
}
.landing-page .lp-hero--teachers .lp-hero-copy,
.landing-page .lp-hero--schools .lp-hero-copy {
width: 100%;
max-width: 1000px;
}
.landing-page .lp-hero--teachers .lp-teacher-workflow {
margin-block-start: 40px;
}
.landing-page .lp-hero h1 {
font-size: clamp(40px, 5.4vw, 74px);
line-height: 0.98;
letter-spacing: -0.03em;
font-weight: 380;
margin: 0 0 22px 0;
}
.landing-page .lp-hero h1 .lp-marker {
background: linear-gradient(
180deg,
transparent 60%,
var(--lp-marker-yellow) 60%
);
padding: 0 4px;
}
.landing-page .lp-hero h1 .lp-terra {
font-family: var(--font-serif);
color: var(--lp-terracotta);
font-style: normal;
font-weight: 420;
}
.landing-page .lp-teacher-workflow {
width: 100%;
margin: 0;
padding: 0;
}
.landing-page .lp-teacher-workflow__steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin: 0;
padding: 0;
list-style: none;
counter-reset: teacher-workflow;
border-block: 1px solid var(--lp-rule);
}
.landing-page .lp-teacher-workflow__step {
counter-increment: teacher-workflow;
position: relative;
min-width: 0;
padding: 24px;
border-inline-end: 1px solid var(--lp-rule);
}
.landing-page .lp-teacher-workflow__step::before {
content: counter(teacher-workflow, decimal-leading-zero);
display: block;
margin-bottom: 14px;
color: var(--lp-terracotta);
font-family: var(--font-serif);
font-size: var(--lp-fs-2xl);
line-height: 1;
}
.landing-page .lp-teacher-workflow__step:last-child {
border-inline-end: 0;
}
.landing-page .lp-teacher-workflow__caption {
display: block;
margin-bottom: 16px;
color: var(--lp-ink-mute);
font-size: var(--lp-fs-sm);
}
.landing-page .lp-teacher-workflow :where(h2, h3, h4) {
margin: 0 0 8px;
color: var(--lp-ink);
}
.landing-page .lp-teacher-workflow :where(p, .lp-teacher-workflow__request, .lp-teacher-workflow__result) {
margin: 0;
color: var(--lp-ink-soft);
font-size: var(--lp-fs-sm);
}
.landing-page .lp-teacher-workflow__result {
margin-top: 8px;
color: var(--lp-ink);
font-weight: 560;
}
.landing-page .lp-teacher-workflow .lp-phone__doc {
min-width: 0;
max-width: 100%;
}
@media (max-width: 760px) {
.landing-page .lp-teacher-workflow__steps {
grid-template-columns: minmax(0, 1fr);
}
.landing-page .lp-teacher-workflow__step {
border-inline-end: 0;
border-bottom: 1px solid var(--lp-rule);
}
.landing-page .lp-teacher-workflow__step:last-child {
border-bottom: 0;
}
}
.landing-page .lp-hero .lp-lede {
font-size: 22px;
line-height: 1.45;
color: var(--lp-ink-soft);
max-width: 48ch;
margin: 0 0 26px 0;
}
.landing-page .lp-hero-cta {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.landing-page .lp-hero-cta .lp-small-note {
flex-basis: 100%;
margin-inline-start: 0;
font-size: 13px;
color: var(--lp-ink-mute);
}
.landing-page .lp-hero-qr {
display: inline-flex;
align-items: center;
gap: 16px;
margin-top: 22px;
padding-block: 14px;
padding-inline: 14px 20px;
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 8px;
max-width: fit-content;
box-shadow: 0 1px 0 color-mix(in oklch, var(--lp-shadow-ink) 2%, transparent);
}
.landing-page .lp-hero-qr .lp-qr-target {
width: 96px;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
}
.landing-page .lp-hero-qr .lp-qr-target svg,
.landing-page .lp-hero-qr .lp-qr-target img {
width: 100%;
height: 100%;
display: block;
}
.landing-page .lp-qr-stage .lp-qr-target {
width: 280px;
height: 280px;
display: flex;
align-items: center;
justify-content: center;
}
.landing-page .lp-qr-stage .lp-qr-target svg,
.landing-page .lp-qr-stage .lp-qr-target img {
width: 100%;
height: 100%;
display: block;
}
.landing-page .lp-hero-qr .lp-qr-copy {
display: flex;
flex-direction: column;
gap: 2px;
}
.landing-page .lp-hero-qr .lp-qr-label {
font-size: 16px;
font-weight: 500;
line-height: 1.2;
}
.landing-page .lp-hero-qr .lp-qr-sub {
font-size: 13px;
color: var(--lp-ink-mute);
line-height: 1.4;
max-width: 22ch;
}
.landing-page .lp-trust-strip.lp-hero-trust {
margin-top: 36px;
padding-top: 22px;
border-top: 1px solid var(--lp-rule);
justify-content: flex-start;
}
.landing-page .lp-launch-note {
display: inline-block;
position: relative;
max-width: 25rem;
margin-bottom: 34px;
padding: 16px 20px 14px;
background: var(--lp-white);
color: var(--lp-ink);
text-decoration: none;
rotate: -1.4deg;
box-shadow:
0 1px 2px color-mix(in oklch, var(--lp-shadow-ink) 8%, transparent),
0 10px 22px -12px color-mix(in oklch, var(--lp-shadow-ink) 40%, transparent);
transition: rotate 0.18s ease, box-shadow 0.18s ease;
}
.landing-page .lp-launch-note::before {
content: "";
position: absolute;
top: -11px;
left: -18px;
width: 84px;
height: 26px;
rotate: -28deg;
background: var(--postit-tape);
border-left: 1px solid var(--postit-tape-highlight);
border-right: 1px solid var(--postit-tape-shadow);
}
.landing-page .lp-launch-note:hover,
.landing-page .lp-launch-note:focus-visible {
rotate: -0.4deg;
box-shadow:
0 1px 2px color-mix(in oklch, var(--lp-shadow-ink) 8%, transparent),
0 16px 30px -14px color-mix(in oklch, var(--lp-shadow-ink) 45%, transparent);
}
.landing-page .lp-launch-note__kicker {
display: block;
margin-bottom: 2px;
font-family: var(--font-handwritten);
font-size: 25px;
line-height: 1;
color: var(--lp-terracotta-d);
}
.landing-page .lp-launch-note__text {
display: block;
font-size: 16px;
line-height: 1.35;
font-weight: 600;
}
.landing-page .lp-launch-note__cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 13px;
color: var(--lp-terracotta-d);
text-decoration: underline;
text-underline-offset: 3px;
}
.landing-page .lp-launch-note__cta svg {
flex-shrink: 0;
transition: transform 0.18s ease;
}
.landing-page .lp-launch-note:hover .lp-launch-note__cta svg {
transform: translateX(3px);
}
[dir="rtl"] .landing-page .lp-launch-note__cta svg {
transform: scaleX(-1);
}
[dir="rtl"] .landing-page .lp-launch-note:hover .lp-launch-note__cta svg {
transform: scaleX(-1) translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
.landing-page .lp-launch-note,
.landing-page .lp-launch-note__cta svg {
transition: none;
}
.landing-page .lp-launch-note:hover {
rotate: -1.4deg;
}
.landing-page .lp-launch-note:hover .lp-launch-note__cta svg {
transform: none;
}
}
@media (min-width: 981px) and (max-height: 800px) {
.landing-page .lp-hero {
padding: 20px 0 32px 0;
}
.landing-page .lp-hero h1 {
font-size: clamp(38px, 4.8vw, 62px);
margin-bottom: 18px;
}
.landing-page .lp-hero .lp-lede {
font-size: 20px;
margin-bottom: 20px;
}
.landing-page .lp-hero-qr {
margin-top: 18px;
}
.landing-page .lp-trust-strip.lp-hero-trust {
margin-top: 26px;
padding-top: 18px;
}
}
@media (min-width: 981px) {
.landing-page .lp-hero--pricing h1 {
font-size: clamp(40px, 5vw, 64px);
}
}
@media (min-width: 981px) and (max-height: 920px) {
.landing-page .lp-hero:has(.lp-launch-note) {
padding: 14px 0 14px 0;
}
.landing-page .lp-hero:has(.lp-launch-note) h1 {
font-size: clamp(38px, 4.8vw, 62px);
margin-bottom: 18px;
}
.landing-page .lp-hero:has(.lp-launch-note) .lp-lede {
font-size: 20px;
margin-bottom: 20px;
}
.landing-page .lp-hero:has(.lp-launch-note) .lp-trust-strip.lp-hero-trust {
margin-top: 26px;
padding-top: 18px;
}
.landing-page .lp-launch-note {
margin-bottom: 20px;
padding: 11px 16px 10px;
}
.landing-page .lp-launch-note__kicker {
font-size: 21px;
}
.landing-page .lp-launch-note__text {
font-size: 15px;
}
.landing-page .lp-launch-note__cta {
margin-top: 5px;
font-size: 12.5px;
}
.landing-page .lp-hero:has(.lp-launch-note) .lp-hero-qr {
margin-top: 8px;
padding-block: 8px;
padding-inline: 8px 16px;
gap: 12px;
}
.landing-page .lp-hero:has(.lp-launch-note) .lp-qr-target {
width: 76px;
height: 76px;
}
}
@media (max-width: 980px) {
.landing-page .lp-launch-note {
margin-bottom: 22px;
padding: 12px 16px 11px;
}
.landing-page .lp-launch-note__kicker {
font-size: 22px;
}
.landing-page .lp-launch-note__text {
font-size: 15px;
}
.landing-page .lp-launch-note__cta {
margin-top: 6px;
}
}
}
@layer features {
.landing-page {
--phone-ink: #111b21;
}
.landing-page .lp-phone,
.landing-page .lp-phone-sample {
--phone-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--phone-chrome: #f7f2ea;
--phone-wallpaper: #ede6da;
--phone-icon: #54656f;
--phone-tick: #53bdeb;
--phone-bubble-me: var(--lp-wa-bg);
--phone-bubble-them: var(--lp-white);
--phone-overflow: 40px;
font-family: var(--phone-font);
}
.landing-page .lp-phone {
width: min(375px, 100%);
margin-inline: auto;
position: relative;
}
.landing-page .lp-phone-sample {
--phone-overflow: 0px;
display: flex;
flex-direction: column;
padding: 8px 14px 14px;
border-radius: 12px;
background-color: var(--phone-wallpaper);
background-image: url("/assets/wa-doodles-e0095578.svg");
background-size: 240px 240px;
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--lp-shadow-ink) 5%, transparent);
}
.landing-page .lp-phone__screen {
border-radius: 44px;
background: var(--phone-chrome);
display: flex;
flex-direction: column;
}
.landing-page .lp-phone__head {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px 10px;
box-shadow: 0 1px 0 color-mix(in oklch, var(--lp-shadow-ink) 7%, transparent);
position: relative;
z-index: 2;
}
.landing-page .lp-phone__back {
color: var(--phone-icon);
display: flex;
}
.landing-page .lp-phone__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
background: var(--lp-paper);
display: grid;
place-items: center;
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--lp-shadow-ink) 8%, transparent);
}
.landing-page .lp-phone__avatar svg {
display: block;
}
.landing-page .lp-phone__avatar--person {
background: #d6dbd9;
color: var(--lp-white);
overflow: hidden;
}
.landing-page .lp-phone__who {
flex: 1;
min-width: 0;
line-height: 1.2;
}
.landing-page .lp-phone__name {
font-size: 16px;
font-weight: 600;
color: var(--phone-ink);
letter-spacing: -0.01em;
}
.landing-page .lp-phone__status {
font-size: 12px;
color: var(--phone-icon);
position: relative;
display: inline-block;
}
.landing-page .lp-phone__status-typing {
display: none;
position: absolute;
inset: 0;
min-width: max-content;
background: var(--phone-chrome);
opacity: 0;
}
.landing-page .lp-phone__headicons {
display: flex;
align-items: center;
gap: 17px;
color: var(--phone-icon);
}
.landing-page .lp-phone__headicons svg {
display: block;
}
.landing-page .lp-phone__body {
flex: 1;
display: flex;
flex-direction: column;
border-radius: 0 0 44px 44px;
background-color: var(--phone-wallpaper);
background-image: url("/assets/wa-doodles-e0095578.svg");
background-size: 240px 240px;
}
.landing-page .lp-phone__msgs {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
padding: 10px 14px 6px;
}
.landing-page .lp-phone__chip {
align-self: center;
background: color-mix(in srgb, var(--lp-white) 88%, var(--phone-wallpaper));
color: var(--phone-icon);
font-size: 11px;
font-weight: 500;
padding: 4px 10px;
border-radius: 8px;
box-shadow: 0 1px 0.5px color-mix(in oklch, var(--lp-shadow-ink) 8%, transparent);
margin-bottom: 5px;
}
.landing-page .lp-phone__chip--e2e {
background: #fff4d7;
color: #5c4a0a;
text-align: center;
max-width: 88%;
line-height: 1.35;
font-weight: 400;
}
.landing-page .lp-phone__msg {
max-width: 88%;
padding: 6px 9px 7px;
border-radius: 9px;
font-size: 14.2px;
line-height: 1.38;
color: var(--phone-ink);
box-shadow:
0 1px 1.5px color-mix(in oklch, var(--lp-shadow-ink) 12%, transparent),
0 8px 20px -12px color-mix(in oklch, var(--lp-shadow-ink) 16%, transparent);
position: relative;
margin-top: 2px;
}
.landing-page .lp-phone__msg--them {
align-self: flex-start;
background: var(--phone-bubble-them);
margin-inline-start: calc(-1 * var(--phone-overflow));
}
.landing-page .lp-phone__msg--me {
align-self: flex-end;
background: var(--phone-bubble-me);
margin-inline-end: calc(-1 * var(--phone-overflow));
}
.landing-page .lp-phone__msg--tail {
margin-top: 10px;
}
.landing-page .lp-phone__msg--tail::before {
content: "";
position: absolute;
top: 0;
width: 8px;
height: 13px;
background-repeat: no-repeat;
background-size: 8px 13px;
}
.landing-page .lp-phone__msg--them.lp-phone__msg--tail {
border-top-left-radius: 0;
}
.landing-page .lp-phone__msg--them.lp-phone__msg--tail::before {
left: -8px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M8 0 H2 C0.6 0 -0.2 1.6 0.8 2.7 L8 10 Z" fill="white"/></svg>');
}
.landing-page .lp-phone__msg--me.lp-phone__msg--tail {
border-top-right-radius: 0;
}
.landing-page .lp-phone__msg--me.lp-phone__msg--tail::before {
right: -8px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M0 0 H6 C7.4 0 8.2 1.6 7.2 2.7 L0 10 Z" fill="%23dcf8c6"/></svg>');
}
[dir="rtl"] .landing-page .lp-phone__msg--them.lp-phone__msg--tail {
border-top-left-radius: 9px;
border-top-right-radius: 0;
}
[dir="rtl"] .landing-page .lp-phone__msg--them.lp-phone__msg--tail::before {
left: auto;
right: -8px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M0 0 H6 C7.4 0 8.2 1.6 7.2 2.7 L0 10 Z" fill="white"/></svg>');
}
[dir="rtl"] .landing-page .lp-phone__msg--me.lp-phone__msg--tail {
border-top-right-radius: 9px;
border-top-left-radius: 0;
}
[dir="rtl"] .landing-page .lp-phone__msg--me.lp-phone__msg--tail::before {
right: auto;
left: -8px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M8 0 H2 C0.6 0 -0.2 1.6 0.8 2.7 L8 10 Z" fill="%23dcf8c6"/></svg>');
}
.landing-page .lp-phone__msg b {
font-weight: 600;
}
.landing-page .lp-phone__fwd {
display: flex;
align-items: center;
gap: 4px;
font-size: 12.5px;
font-style: italic;
color: color-mix(in oklch, var(--lp-shadow-ink) 42%, transparent);
margin-bottom: 4px;
}
.landing-page .lp-phone__fwd svg {
display: block;
flex-shrink: 0;
}
.landing-page .lp-phone__sender {
display: block;
font-size: 12.5px;
font-weight: 650;
color: color-mix(in srgb, var(--lp-blue) 85%, var(--lp-ink));
margin-bottom: 2px;
}
.landing-page .lp-phone__msg--media {
padding: 5px 5px 7px;
max-width: 200px;
width: 100%;
}
.landing-page .lp-phone__msg--media .lp-phone__photo-img {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
}
.landing-page .lp-phone__msg--media .lp-photo-caption {
display: block;
padding: 4px 4px 0;
}
.landing-page .lp-phone__msg--media .lp-phone__time {
margin-inline-end: 2px;
}
.landing-page .lp-phone__time {
float: right;
margin: 8px -2px -4px 10px;
font-size: 10.5px;
color: color-mix(in oklch, var(--lp-shadow-ink) 44%, transparent);
display: inline-flex;
align-items: center;
gap: 3px;
line-height: 1;
}
[dir="rtl"] .landing-page .lp-phone__back svg {
transform: scaleX(-1);
}
[dir="rtl"] .landing-page .lp-phone__time {
float: left;
margin: 8px 10px -4px -2px;
}
.landing-page .lp-phone__ticks {
color: var(--phone-tick);
display: inline-flex;
}
.landing-page .lp-phone__audio {
display: flex;
align-items: center;
gap: 8px;
min-width: 198px;
padding: 6px 2px 4px;
color: var(--phone-icon);
}
.landing-page .lp-phone__audio svg {
display: block;
flex-shrink: 0;
}
.landing-page .lp-phone__audio-dur {
font-size: 11px;
color: color-mix(in oklch, var(--lp-shadow-ink) 45%, transparent);
}
.landing-page .lp-phone__msg--reacted {
margin-bottom: 18px;
}
.landing-page .lp-phone__react {
position: absolute;
inset-inline-start: 12px;
bottom: -14px;
background: var(--lp-white);
border-radius: 12px;
padding: 2px 8px 3px;
font-size: 13px;
line-height: 1.3;
box-shadow:
0 0 0 1px color-mix(in oklch, var(--lp-shadow-ink) 5%, transparent),
0 1px 2px color-mix(in oklch, var(--lp-shadow-ink) 14%, transparent);
}
.landing-page .lp-phone__doc {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
margin: 0 0 5px;
border-radius: 7px;
background: color-mix(in oklch, var(--lp-shadow-ink) 4%, transparent);
min-width: 218px;
}
.landing-page .lp-phone__doc-ico {
width: 34px;
height: 40px;
border-radius: 4px;
background: var(--lp-white);
flex-shrink: 0;
display: grid;
place-items: center;
color: var(--lp-terracotta);
box-shadow: 0 1px 2px color-mix(in oklch, var(--lp-shadow-ink) 12%, transparent);
position: relative;
}
.landing-page .lp-phone__doc-ext {
position: absolute;
bottom: 4px;
left: 0;
right: 0;
text-align: center;
font-size: 7px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--lp-terracotta);
}
.landing-page .lp-phone__doc-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.landing-page .lp-phone__doc-name {
font-size: 13px;
font-weight: 500;
color: var(--phone-ink);
line-height: 1.25;
overflow-wrap: anywhere;
}
.landing-page .lp-phone__doc-meta {
font-size: 11px;
color: var(--phone-icon);
margin-top: 2px;
}
.landing-page .lp-phone__inputbar {
display: flex;
align-items: center;
gap: 7px;
padding: 6px 12px 8px;
}
.landing-page .lp-phone__field {
flex: 1;
display: flex;
align-items: center;
gap: 9px;
background: var(--lp-white);
border-radius: 24px;
padding: 10px 13px;
color: var(--phone-icon);
font-size: 14.5px;
box-shadow: 0 1px 2px color-mix(in oklch, var(--lp-shadow-ink) 8%, transparent);
}
.landing-page .lp-phone__field .lp-phone__ph {
flex: 1;
}
.landing-page .lp-phone__field svg {
display: block;
color: var(--phone-icon);
flex-shrink: 0;
}
.landing-page .lp-phone__mic {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--lp-wa);
display: grid;
place-items: center;
color: var(--lp-white);
flex-shrink: 0;
box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--lp-wa) 55%, transparent);
}
.landing-page .lp-phone--animated .lp-phone__msg {
visibility: hidden;
animation: lp-phone-msg-in 0.35s ease forwards;
animation-delay: var(--delay, 0s);
}
.landing-page .lp-phone--animated .lp-phone__react {
visibility: hidden;
animation: lp-phone-react-in 0.3s ease forwards;
animation-delay: var(--delay, 0s);
}
.landing-page .lp-phone--animated .lp-phone__status-typing {
display: block;
animation: lp-phone-typing 10.2s linear forwards;
}
@keyframes lp-phone-typing {
0%, 8.8% { opacity: 0; }
9.3%, 21.3% { opacity: 1; }
21.8%, 33.3% { opacity: 0; }
33.8%, 46.8% { opacity: 1; }
47.3%, 86.2% { opacity: 0; }
86.7%, 99.5% { opacity: 1; }
100% { opacity: 0; }
}
.landing-page .lp-phone--long .lp-phone__status-typing {
animation-name: lp-phone-typing-long;
animation-duration: 12.4s;
}
@keyframes lp-phone-typing-long {
0%, 7.5% { opacity: 0; }
7.7%, 17.5% { opacity: 1; }
17.9%, 27.4% { opacity: 0; }
27.8%, 38.4% { opacity: 1; }
38.9%, 70.9% { opacity: 0; }
71.3%, 81.8% { opacity: 1; }
82.7%, 91.5% { opacity: 0; }
91.9%, 99.6% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes lp-phone-react-in {
from {
visibility: visible;
opacity: 0;
transform: scale(0.4);
}
to {
visibility: visible;
opacity: 1;
transform: scale(1);
}
}
@keyframes lp-phone-msg-in {
from {
visibility: visible;
opacity: 0;
transform: translateY(8px);
}
to {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.landing-page .lp-phone--animated .lp-phone__msg,
.landing-page .lp-phone--animated .lp-phone__react {
visibility: visible;
opacity: 1;
animation: none;
}
.landing-page .lp-phone--animated .lp-phone__status-typing {
display: none;
}
}
.landing-page .lp-phone--panel {
width: min(390px, 100%);
}
.landing-page .lp-phone--panel .lp-phone__screen {
aspect-ratio: auto;
border-radius: 24px;
box-shadow:
0 0 0 1px color-mix(in oklch, var(--lp-shadow-ink) 5%, transparent),
0 2px 6px color-mix(in oklch, var(--lp-shadow-ink) 6%, transparent),
0 28px 56px -26px color-mix(in oklch, var(--lp-shadow-ink) 22%, transparent);
}
.landing-page .lp-phone--panel .lp-phone__head {
border-radius: 24px 24px 0 0;
background: var(--phone-chrome);
padding-top: 12px;
}
.landing-page .lp-phone--panel .lp-phone__body {
border-radius: 0 0 24px 24px;
}
.landing-page .lp-phone--panel .lp-phone__msgs {
padding: 14px 18px 10px;
gap: 4px;
}
.landing-page .lp-phone--panel .lp-phone__inputbar {
padding-bottom: 14px;
}
@media (min-width: 981px) and (max-height: 920px) {
.landing-page .lp-phone__msg {
font-size: 13.4px;
}
.landing-page .lp-phone--panel .lp-phone__msgs {
padding: 10px 16px 8px;
}
.landing-page .lp-phone__head {
padding-block: 8px;
}
.landing-page .lp-phone--panel .lp-phone__inputbar {
padding-bottom: 10px;
}
}
@media (min-width: 981px) and (max-height: 850px) {
.landing-page .lp-phone--long .lp-phone__chip--e2e {
display: none;
}
.landing-page .lp-phone--long .lp-phone__msg {
font-size: 12.8px;
}
.landing-page .lp-phone--long .lp-phone__doc {
padding-block: 6px;
}
.landing-page .lp-phone--long.lp-phone--panel .lp-phone__msgs {
gap: 2px;
padding: 8px 16px 6px;
}
}
@media (max-width: 480px) {
.landing-page .lp-phone {
--phone-overflow: 8px;
}
.landing-page .lp-phone__screen {
border-radius: 38px;
}
.landing-page .lp-phone__body {
border-radius: 0 0 38px 38px;
}
}
}
@layer features {
.landing-page .lp-creed {
background: var(--lp-ink);
color: var(--lp-paper);
position: relative;
--lp-rule:      var(--lp-divider-dark);
--lp-ink-soft:  var(--lp-on-dark-soft);
--lp-ink-mute:  var(--lp-on-dark-mute);
--lp-ink-faint: var(--lp-on-dark-mute);
}
.landing-page .lp-creed-belief {
padding: 96px 0 80px;
text-align: center;
}
.landing-page .lp-creed-belief .lp-eyebrow {
margin-bottom: 28px;
}
.landing-page .lp-creed-belief h2 {
font-size: clamp(32px, 4vw, 56px);
color: var(--lp-paper);
line-height: 1.14;
font-weight: 400;
max-width: 30ch;
margin: 0 auto 56px auto;
text-align: center;
}
.landing-page .lp-creed-belief h2 .lp-line {
display: block;
text-wrap: balance;
}
.landing-page .lp-creed-belief h2 em {
color: var(--lp-yellow-pop);
font-style: italic;
font-weight: 380;
}
.landing-page .lp-declarations {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 860px;
margin: 0 auto;
}
.landing-page .lp-declaration {
border-top: 1px solid var(--lp-divider-dark);
padding-top: 16px;
text-align: center;
}
.landing-page .lp-declaration--sky   { border-top-color: var(--lp-decl-sky-border); }
.landing-page .lp-declaration--sun   { border-top-color: var(--lp-decl-sun-border); }
.landing-page .lp-declaration--terra { border-top-color: var(--lp-decl-terra-border); }
.landing-page .lp-declaration .lp-num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
color: var(--lp-on-dark-mute);
margin-bottom: 12px;
}
.landing-page .lp-declaration--sky   .lp-num { color: var(--lp-decl-sky-num); }
.landing-page .lp-declaration--sun   .lp-num { color: var(--lp-decl-sun-num); }
.landing-page .lp-declaration--terra .lp-num { color: var(--lp-decl-terra-num); }
.landing-page .lp-declaration h3 {
font-size: 21px;
color: var(--lp-paper);
line-height: 1.3;
font-weight: 440;
margin-bottom: 0;
}
.landing-page .lp-declaration p {
font-size: 15px;
line-height: 1.55;
color: var(--lp-on-dark-warm);
max-width: none;
}
.landing-page .lp-creed-honesty {
padding: 88px 0 96px;
}
.landing-page .lp-creed-honesty .lp-h-section {
color: var(--lp-paper);
}
.landing-page .lp-creed-honesty .lp-audience-col.lp-yes h3,
.landing-page .lp-creed-honesty .lp-audience-col.lp-yes li::before,
.landing-page .lp-creed-honesty .lp-audience-foot a {
color: var(--lp-terra-accent);
}
.landing-page .lp-creed-honesty .lp-audience-col li {
color: var(--lp-paper);
}
.landing-page .lp-creed-honesty .lp-audience-close {
color: var(--lp-paper);
}
.landing-page .lp-scratch-out {
display: inline;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
background-image: repeating-linear-gradient(
-8deg,
transparent 0 3px,
color-mix(in srgb, var(--lp-terracotta) 70%, transparent) 3px 4px,
transparent 4px 7px
);
background-size: 100% 8px;
background-position: 0 52%;
background-repeat: no-repeat;
padding-inline: 0.1em;
margin-inline: -0.1em;
}
.landing-page .lp-bracket-frame {
position: relative;
padding: 0 22px;
display: inline-block;
color: var(--lp-yellow-pop);
}
.landing-page .lp-bracket-frame::before,
.landing-page .lp-bracket-frame::after {
content: "";
position: absolute;
top: -6px;
bottom: -6px;
width: 14px;
border: 2px solid var(--lp-yellow-pop);
pointer-events: none;
}
.landing-page .lp-bracket-frame::before {
left: 0;
border-right: 0;
border-radius: 4px 0 0 4px;
}
.landing-page .lp-bracket-frame::after {
right: 0;
border-left: 0;
border-radius: 0 4px 4px 0;
}
.landing-page .lp-prose-feats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px 80px;
margin-top: 56px;
max-width: 880px;
}
.landing-page .lp-prose-feats > div {
display: grid;
grid-template-columns: 44px 1fr;
gap: 0 20px;
align-items: start;
}
.landing-page .lp-prose-feats .lp-feat-icon {
width: 36px;
height: 36px;
margin-top: 2px;
}
.landing-page .lp-prose-feats h3 {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 460;
margin-bottom: 10px;
line-height: 1.2;
}
.landing-page .lp-prose-feats h3 .lp-hl {
background: linear-gradient(
180deg,
transparent 60%,
var(--lp-highlight-yellow) 60%
);
padding: 0 2px;
}
.landing-page .lp-prose-feats h3 .lp-hl-blue {
background: linear-gradient(
180deg,
transparent 60%,
var(--lp-highlight-blue) 60%
);
padding: 0 2px;
}
.landing-page .lp-prose-feats h3 .lp-hl-yellow {
background: linear-gradient(
180deg,
transparent 60%,
var(--lp-highlight-yellow) 60%
);
padding: 0 2px;
}
.landing-page .lp-prose-feats p {
font-size: 16px;
line-height: 1.6;
color: var(--lp-ink-soft);
}
.landing-page .lp-prose-feats em {
font-style: italic;
color: var(--lp-terracotta-d);
}
.landing-page .lp-prose-feats > div:nth-child(odd):last-child {
grid-column: 1 / -1;
max-width: calc((100% - 80px) / 2);
margin-inline: auto;
}
.landing-page .lp-prose-feats:has(> div:nth-child(3):last-child) {
grid-template-columns: repeat(3, 1fr);
gap: 56px 64px;
max-width: 1080px;
}
.landing-page .lp-prose-feats:has(> div:nth-child(3):last-child) > div:nth-child(3) {
grid-column: auto;
max-width: none;
margin-inline: 0;
}
}
@layer features {
.landing-page .lp-ribbon-wrap {
position: relative;
width: 100%;
height: 140px;
margin: calc(var(--lp-section-y) * -0.5) 0 calc(var(--lp-section-y) * -0.5);
pointer-events: none;
overflow: visible;
z-index: 2;
}
.landing-page .lp-ribbon-wrap svg {
display: block;
width: 100%;
height: 100%;
}
.landing-page .lp-ribbon-wrap .lp-ribbon {
fill: none;
stroke-width: 6;
stroke-linecap: round;
}
.landing-page .lp-ribbon-wrap .lp-r1 { stroke: var(--lp-ribbon-terra); }
.landing-page .lp-ribbon-wrap .lp-r2 { stroke: var(--lp-mustard); }
.landing-page .lp-ribbon-wrap .lp-r3 { stroke: var(--lp-ribbon-sky); }
.landing-page .lp-bg-warm + .lp-ribbon-wrap,
.landing-page .lp-creed + .lp-ribbon-wrap {
background: linear-gradient(
to bottom,
var(--lp-rib-top) 0 50%,
var(--lp-rib-bot) 50% 100%
);
}
.landing-page .lp-ribbon-wrap:has(+ .lp-bg-warm),
.landing-page .lp-ribbon-wrap:has(+ .lp-final-cta) {
background: linear-gradient(
to bottom,
var(--lp-rib-top) 0 50%,
var(--lp-rib-bot) 50% 100%
);
}
.landing-page .lp-ribbon-wrap:has(+ .lp-bg-warm) {
--lp-rib-top: var(--lp-paper);
--lp-rib-bot: var(--lp-paper-warm);
}
.landing-page .lp-bg-warm + .lp-ribbon-wrap {
--lp-rib-top: var(--lp-paper-warm);
--lp-rib-bot: var(--lp-paper);
}
.landing-page .lp-bg-warm + .lp-ribbon-wrap:has(+ .lp-creed) {
--lp-rib-top: var(--lp-paper-warm);
--lp-rib-bot: var(--lp-ink);
}
.landing-page .lp-creed + .lp-ribbon-wrap {
--lp-rib-top: var(--lp-ink);
--lp-rib-bot: var(--lp-paper);
}
.landing-page .lp-ribbon-wrap + .lp-seals {
padding-top: 104px;
border-top: 0;
}
.landing-page .lp-ribbon-wrap:has(+ .lp-final-cta) {
--lp-rib-top: var(--lp-paper);
--lp-rib-bot: var(--lp-ink);
}
.landing-page .lp-bg-warm + .lp-ribbon-wrap:has(+ .lp-referral),
.landing-page .lp-bg-warm + .lp-ribbon-wrap:has(+ .lp-bg-warm) {
background: var(--lp-paper-warm);
}
}
@layer features {
.landing-page .lp-diff-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 64px;
align-items: start;
}
.landing-page .lp-diff-grid--reverse {
grid-template-columns: 1fr 1.05fr;
}
.landing-page .lp-diff-grid--reverse > :first-child {
order: 2;
}
.landing-page .lp-diff-grid--reverse > :last-child {
order: 1;
}
.landing-page .lp-diff-side .lp-diff-quote {
font-family: var(--font-serif);
font-size: 22px;
line-height: 1.4;
font-weight: 400;
color: var(--lp-ink);
margin: 0 0 32px 0;
padding-inline-start: 18px;
border-inline-start: 2px solid var(--lp-terracotta);
max-width: 36ch;
}
.landing-page .lp-diff-side .lp-diff-quote em {
font-style: italic;
color: var(--lp-terracotta-d);
font-weight: 500;
}
.landing-page .lp-diff-side .lp-diff-cases {
list-style: none;
padding: 0;
margin: 0 0 28px 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.landing-page .lp-diff-side .lp-diff-cases li {
font-size: 15px;
line-height: 1.5;
color: var(--lp-ink-soft);
padding-inline-start: 20px;
position: relative;
}
.landing-page .lp-diff-side .lp-diff-cases li::before {
content: "—";
position: absolute;
inset-inline-start: 0;
color: var(--lp-terracotta);
font-weight: 500;
}
.landing-page .lp-diff-foot {
font-size: 14px;
line-height: 1.55;
color: var(--lp-ink-mute);
padding-top: 20px;
border-top: 1px solid var(--lp-rule);
max-width: 44ch;
}
.landing-page .lp-diff-foot b {
color: var(--lp-ink);
font-weight: 500;
}
.landing-page .lp-audience {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--lp-rule);
border-bottom: 1px solid var(--lp-rule);
}
.landing-page .lp-audience-col {
padding: 56px 48px;
}
.landing-page .lp-audience-col.lp-yes {
border-inline-end: 1px solid var(--lp-rule);
}
.landing-page .lp-audience-col h3 {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--lp-ink-mute);
margin: 0 0 24px 0;
}
.landing-page .lp-audience-col.lp-yes h3 {
color: var(--lp-terracotta);
}
.landing-page .lp-audience-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.landing-page .lp-audience-col li {
font-size: 19px;
line-height: 1.35;
color: var(--lp-ink);
font-weight: 400;
padding-inline-start: 30px;
position: relative;
}
.landing-page .lp-audience-col.lp-yes li::before {
content: "→";
position: absolute;
inset-inline-start: 0;
top: 2px;
color: var(--lp-terracotta);
font-weight: 600;
font-family: var(--font-sans);
}
[dir="rtl"] .landing-page .lp-audience-col.lp-yes li::before {
content: "\2190";
}
.landing-page .lp-audience-col.lp-no li::before {
content: "—";
position: absolute;
inset-inline-start: 0;
top: 0;
color: var(--lp-ink-faint);
font-weight: 500;
}
.landing-page .lp-audience-col.lp-no li {
color: var(--lp-ink-mute);
}
.landing-page .lp-audience-close {
text-align: center;
margin: 36px auto -8px;
font-family: var(--font-serif);
font-size: 20px;
color: var(--lp-ink);
}
.landing-page .lp-audience-foot {
text-align: center;
margin-inline: auto;
padding: 24px;
font-size: 14px;
color: var(--lp-ink-soft);
}
.landing-page .lp-audience-foot a {
color: var(--lp-terracotta-d);
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
.landing-page .lp-vs-note {
margin-top: 24px;
font-size: var(--lp-fs-sm);
color: var(--lp-ink-mute);
max-width: 72ch;
}
.landing-page .lp-vs-note a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--lp-ink-faint);
}
.landing-page .lp-vs-note a:hover {
color: var(--lp-terracotta);
text-decoration-color: var(--lp-terracotta);
}
}
@layer features {
.landing-page .lp-steps-cta {
margin: 0 auto;
max-width: 720px;
padding: 36px 40px;
text-align: center;
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 14px;
box-shadow: var(--lp-shadow-soft);
}
.landing-page .lp-steps-cta p {
font-family: var(--font-serif);
font-size: 26px;
line-height: 1.25;
color: var(--lp-ink);
margin: 0 0 24px;
letter-spacing: -0.01em;
}
.landing-page .lp-steps-cta p em {
font-style: italic;
color: var(--lp-terracotta);
}
.landing-page .lp-steps-cta-btns {
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
}
@layer features {
.landing-page .lp-price-cents {
font-size: 0.55em;
letter-spacing: 0;
vertical-align: 0.15em;
margin-inline-start: 0.04em;
}
.landing-page .lp-beta-tag {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: var(--letter-expanded);
text-transform: uppercase;
color: var(--lp-terracotta, var(--lp-ink));
border: 1px solid currentColor;
border-radius: 4px;
padding: 1px 5px;
margin-inline-start: 4px;
vertical-align: 1px;
}
.landing-page .lp-price-note {
margin: 10px 0 0;
font-size: 13px;
line-height: 1.45;
color: var(--lp-ink-mute);
max-width: 42ch;
}
.landing-page .lp-billing-toggle {
display: inline-flex;
align-items: center;
border: 1px solid var(--lp-rule);
border-radius: 999px;
padding: 4px;
background: var(--color-surface);
gap: 2px;
}
.landing-page .lp-billing-toggle button {
border: 0;
background: transparent;
cursor: pointer;
font: inherit;
font-size: 13px;
font-weight: 500;
color: var(--lp-ink-mute);
padding: 8px 18px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 8px;
transition:
background 0.15s ease,
color 0.15s ease;
}
.landing-page .lp-billing-toggle button.lp-on {
background: var(--lp-ink);
color: var(--lp-paper);
}
.landing-page .lp-billing-toggle .lp-save-pill {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--lp-terracotta-d);
background: var(--lp-peach);
padding: 2px 7px;
border-radius: 999px;
line-height: 1;
white-space: nowrap;
}
@media (max-width: 430px) {
.landing-page .lp-billing-toggle .lp-save-pill {
display: none;
}
.landing-page .lp-billing-toggle button {
padding-inline: 8px;
white-space: nowrap;
overflow-wrap: normal;
}
}
.landing-page .lp-billing-toggle button.lp-on .lp-save-pill {
background: var(--lp-paper);
color: var(--lp-terracotta-d);
}
.landing-page .lp-credits-explainer {
max-width: 820px;
margin: 0 auto 30px;
padding: 22px 26px;
background: var(--color-surface);
border: 1px solid var(--lp-rule);
border-radius: 12px;
box-shadow: var(--lp-shadow-soft);
}
.landing-page .lp-credits-explainer .lp-ce-actions {
list-style: none;
margin: 0 0 14px;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 28px;
}
.landing-page .lp-credits-explainer .lp-ce-actions li {
display: flex;
align-items: flex-start;
gap: 12px;
}
.landing-page .lp-credits-explainer .lp-ce-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
color: var(--lp-terracotta);
margin-top: 2px;
}
.landing-page .lp-credits-explainer .lp-ce-actions li > div {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.45;
}
.landing-page .lp-credits-explainer .lp-ce-actions li b {
font-size: 14.5px;
font-weight: 600;
color: var(--lp-ink);
}
.landing-page .lp-credits-explainer .lp-ce-actions li span {
font-size: 13.5px;
color: var(--lp-ink-mute);
}
.landing-page .lp-credits-explainer .lp-ce-foot {
font-size: 12.5px;
color: var(--lp-ink-mute);
line-height: 1.5;
padding-top: 12px;
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-credits-explainer .lp-ce-foot b {
color: var(--lp-ink-soft);
font-weight: 600;
}
.landing-page .lp-price-reframe {
margin-top: 14px;
font-family: var(--font-serif);
font-size: 20px;
font-weight: 460;
color: var(--lp-terracotta-d);
letter-spacing: -0.005em;
}
.landing-page .lp-ff-tag {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--lp-terracotta-d);
background: transparent;
border: 1px solid var(--lp-terracotta);
padding: 4px 9px;
border-radius: 999px;
line-height: 1;
white-space: nowrap;
}
.landing-page .lp-trust-strip {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 12px;
margin: 32px auto 0;
padding: 0;
}
.landing-page .lp-trust-strip li {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 500;
color: var(--lp-ink-soft);
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 999px;
padding-block: 7px;
padding-inline: 12px 14px;
}
.landing-page .lp-trust-strip li::before {
content: "✓";
color: var(--lp-wa-d);
font-weight: 700;
font-size: 12px;
}
}
@layer features {
.landing-page .lp-home-offer {
max-width: 880px;
margin: 0 auto;
border: 1px solid var(--lp-rule);
border-radius: 24px;
background: var(--lp-white, #fff);
overflow: hidden;
box-shadow: 0 18px 44px color-mix(in srgb, var(--lp-ink) 7%, transparent);
}
.landing-page .lp-home-offer__ribbon {
max-width: none;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 14px 24px;
background: var(--lp-paper-warm);
border-bottom: 1px solid var(--lp-rule);
text-align: center;
font-size: 14px;
line-height: 1.5;
color: var(--lp-ink-soft);
}
.landing-page .lp-home-offer__ribbon b {
color: var(--lp-ink);
font-weight: 600;
}
.landing-page .lp-home-offer__body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.landing-page .lp-home-offer__buy {
padding: 32px 30px;
text-align: center;
}
.landing-page .lp-home-offer__buy .lp-billing-toggle {
margin: 0 auto 22px;
}
.landing-page .lp-home-offer__price .lp-num {
font-size: clamp(40px, 5vw, 56px);
font-weight: 380;
letter-spacing: -0.03em;
color: var(--lp-ink);
}
.landing-page .lp-home-offer__price .lp-per {
display: inline-block;
font-size: 15px;
color: var(--lp-ink-mute);
margin-inline-start: 4px;
}
.landing-page .lp-home-offer__cycle {
margin: 8px 0 20px;
font-size: 13.5px;
color: var(--lp-ink-mute);
}
.landing-page .lp-home-offer__cycle b { color: var(--lp-ink-soft); }
.landing-page .lp-home-offer__value {
padding: 32px 30px;
background: var(--lp-paper-warm);
border-inline-start: 1px solid var(--lp-rule);
}
.landing-page .lp-home-offer__value-title {
margin: 0 0 14px;
font-size: 13px;
font-weight: 560;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--lp-ink-mute);
}
.landing-page .lp-home-offer .lp-price-note {
margin-block-end: 20px;
}
.landing-page .lp-home-offer__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
text-align: start;
}
.landing-page .lp-home-offer__list li {
position: relative;
padding-inline-start: 24px;
font-size: 14.5px;
line-height: 1.5;
color: var(--lp-ink-soft);
}
.landing-page .lp-home-offer__list li::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 6px;
width: 13px;
height: 8px;
border-left: 2px solid var(--lp-terracotta);
border-bottom: 2px solid var(--lp-terracotta);
transform: rotate(-45deg);
}
.landing-page .lp-home-offer__fine {
margin: 18px 0 0;
font-size: 13px;
line-height: 1.55;
color: var(--lp-ink-mute);
}
.landing-page .lp-home-offer__guarantee {
margin: 14px 0 0;
font-size: 13px;
color: var(--lp-ink-mute);
}
@media (max-width: 860px) {
.landing-page .lp-home-offer__body {
grid-template-columns: 1fr;
}
.landing-page .lp-home-offer__value {
border-inline-start: 0;
border-top: 1px solid var(--lp-rule);
}
}
}
@layer features {
.landing-page .lp-schools-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 16px;
padding: 20px 28px;
background: var(--color-surface);
border: 1px solid var(--lp-rule);
border-radius: 12px;
box-shadow: var(--lp-shadow-soft);
}
.landing-page .lp-schools-banner .lp-sb-text h3 {
font-family: var(--font-serif);
font-size: 19px;
font-weight: 460;
margin-bottom: 4px;
}
.landing-page .lp-schools-banner .lp-sb-text p {
font-size: 13.5px;
color: var(--lp-ink-mute);
line-height: 1.5;
margin: 0;
max-width: 680px;
}
.landing-page .lp-schools-banner .lp-sb-btn {
white-space: nowrap;
flex-shrink: 0;
}
@media (max-width: 680px) {
.landing-page .lp-schools-banner {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.landing-page .lp-schools-banner .lp-sb-btn {
width: 100%;
justify-content: center;
}
}
.landing-page .lp-schools-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 48px;
}
.landing-page .lp-schools-feat {
display: grid;
grid-template-columns: 44px 1fr;
gap: 12px 16px;
align-items: start;
background: var(--color-surface);
border: 1px solid var(--lp-rule);
border-radius: 14px;
padding: 24px 22px;
box-shadow: var(--lp-shadow-soft);
}
.landing-page .lp-schools-feat .lp-feat-icon {
width: 36px;
height: 36px;
}
.landing-page .lp-schools-feat h3 {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 480;
margin: 0 0 6px;
letter-spacing: -0.005em;
}
.landing-page .lp-schools-feat p {
font-size: 14.5px;
line-height: 1.55;
color: var(--lp-ink-soft);
margin: 0;
}
.landing-page .lp-schools-feat p em {
font-style: italic;
color: var(--lp-terracotta-d);
}
@media (max-width: 900px) {
.landing-page .lp-schools-grid {
grid-template-columns: 1fr;
gap: 28px;
margin-bottom: 32px;
}
}
}
@layer features {
.landing-page .lp-sect-head-block {
max-width: 720px;
margin-bottom: var(--lp-block-gap);
}
.landing-page .lp-sect-head-block.lp-centered {
margin: 0 auto var(--lp-block-gap);
text-align: center;
}
.landing-page .lp-sect-head-block.lp-centered .lp-sect-lede {
margin: 0 auto;
}
.landing-page .lp-sect-lede {
font-size: 18px;
line-height: 1.55;
color: var(--lp-ink-soft);
max-width: 56ch;
margin: 0;
}
.landing-page h2.lp-h-section {
font-size: clamp(30px, 3.8vw, 48px);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.01em;
margin: 16px 0 24px 0;
}
.landing-page h2.lp-h-section em {
font-style: italic;
color: var(--lp-terracotta);
}
.landing-page .lp-illus-line {
display: block;
}
.landing-page .lp-illus-line .lp-stroke {
stroke: var(--lp-ink);
stroke-width: 1.4;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.landing-page .lp-illus-line .lp-accent {
stroke: var(--lp-terracotta);
stroke-width: 1.6;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.landing-page .lp-illus-line .lp-accent-blue {
stroke: var(--lp-blue);
stroke-width: 1.6;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.landing-page .lp-illus-line .lp-accent-yellow {
stroke: var(--lp-yellow-mid);
stroke-width: 1.6;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.landing-page .lp-illus-line .lp-fill-accent {
fill: var(--lp-terracotta);
stroke: none;
}
.landing-page .mat-teaser {
padding: var(--lp-section-y) 0;
}
.landing-page .mat-teaser-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: clamp(32px, 5vw, 72px);
align-items: center;
max-width: 1020px;
margin-inline: auto;
}
.landing-page .mat-teaser-copy .lp-sect-lede {
max-width: 48ch;
}
.landing-page .mat-teaser-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 22px 0 30px;
padding: 0;
list-style: none;
}
.landing-page .mat-teaser-chips li {
font-size: 14px;
line-height: 1.4;
color: var(--lp-ink-soft);
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 999px;
padding: 5px 13px;
}
.landing-page .mat-teaser-chips .mat-teaser-chip-more {
background: transparent;
border-style: dashed;
color: var(--lp-ink-mute);
}
.landing-page .mat-teaser-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin: 0;
}
.landing-page .mat-teaser-free {
max-width: 50ch;
margin: 14px 0 0;
color: var(--lp-ink-mute);
font-size: 14px;
line-height: 1.5;
}
.landing-page .mat-teaser-tools {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin: 8px 0 0;
padding: 0;
list-style: none;
}
.landing-page .mat-teaser-free-product {
margin: 12px 0 0;
font-size: 14px;
}
.landing-page a.mat-teaser-free-link {
color: var(--lp-terracotta-d, var(--lp-terracotta));
text-decoration: underline;
text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
text-underline-offset: 3px;
}
.landing-page .mat-teaser-fan {
display: flex;
flex-direction: column;
gap: 14px;
}
.landing-page .mat-teaser-sheet {
background: var(--lp-white);
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow-card);
padding: 12px 16px 8px;
}
.landing-page .mat-teaser-sheet:nth-child(1) { transform: rotate(-1.6deg) translateX(-10px); }
.landing-page .mat-teaser-sheet:nth-child(2) { transform: rotate(1.2deg) translateX(16px); }
.landing-page .mat-teaser-sheet:nth-child(3) { transform: rotate(-0.7deg); }
.landing-page .mat-teaser-cap {
display: block;
font-size: 11.5px;
font-weight: 600;
color: var(--lp-ink-soft);
margin-bottom: 2px;
}
.landing-page .mat-teaser-art {
display: block;
width: 100%;
height: 96px;
}
@media (max-width: 860px) {
.landing-page .mat-teaser-grid {
grid-template-columns: 1fr;
}
.landing-page .mat-teaser-fan {
max-width: none;
}
.landing-page .mat-teaser-sheet:nth-child(1) { transform: rotate(-0.8deg); }
.landing-page .mat-teaser-sheet:nth-child(2) { transform: rotate(0.6deg); }
.landing-page .mat-teaser-sheet:nth-child(3) { transform: rotate(-0.4deg); }
}
}
@layer features {
.landing-page .lp-value-evidence {
padding: clamp(42px, 6vw, 76px) 0;
background: var(--lp-paper-warm);
border-block: 1px solid var(--lp-rule);
}
.landing-page .lp-value-evidence__title {
max-width: 20ch;
margin: 0 0 clamp(24px, 4vw, 42px);
color: var(--lp-ink);
font-size: clamp(30px, 3.8vw, 48px);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.01em;
}
.landing-page .lp-value-evidence__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 4vw, 56px);
}
.landing-page .lp-value-evidence__item {
min-width: 0;
padding-inline-start: clamp(14px, 1.8vw, 24px);
border-inline-start: 2px solid var(--lp-terracotta);
}
.landing-page .lp-value-evidence__item h3 {
margin: 0 0 10px;
color: var(--lp-ink);
font-size: clamp(20px, 2vw, 27px);
line-height: 1.15;
}
.landing-page .lp-value-evidence__item p {
max-width: 34ch;
margin: 0 0 16px;
color: var(--lp-ink-soft);
font-size: 16px;
line-height: 1.5;
}
.landing-page a.lp-value-evidence__link {
color: var(--lp-ink);
font-size: 15px;
font-weight: 600;
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
@media (max-width: 760px) {
.landing-page .lp-value-evidence__grid {
grid-template-columns: 1fr;
gap: 26px;
}
.landing-page .lp-value-evidence__item p {
max-width: 52ch;
}
}
}
@layer features {
.landing-page .lp-final-cta {
background: var(--lp-ink);
color: var(--lp-paper);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.landing-page .lp-final-cta::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(
circle at 1px 1px,
color-mix(in oklch, var(--lp-white) 4%, transparent) 1px,
transparent 0
);
background-size: 24px 24px;
pointer-events: none;
}
.landing-page .lp-final-cta-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: center;
position: relative;
z-index: 1;
}
.landing-page .lp-final-cta h2 {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(36px, 4.4vw, 60px);
line-height: 1.02;
letter-spacing: -0.01em;
margin-bottom: 24px;
color: var(--lp-paper);
}
.landing-page .lp-final-cta h2 em {
font-style: italic;
color: var(--lp-yellow-pop);
}
.landing-page .lp-final-cta p {
color: var(--lp-on-dark-soft);
font-size: 18px;
line-height: 1.55;
max-width: 44ch;
margin-bottom: 32px;
}
.landing-page .lp-final-cta .lp-alt-btns {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.landing-page .lp-final-cta .lp-alt-btns .lp-or {
color: var(--lp-on-dark-or);
font-size: 14px;
margin: 0 4px;
}
.landing-page .lp-final-cta-proof {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 28px 0 0;
padding: 0;
}
.landing-page .lp-final-cta-proof li {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 500;
color: var(--lp-on-dark-proof);
background: color-mix(in oklch, var(--lp-white) 6%, transparent);
border: 1px solid color-mix(in oklch, var(--lp-white) 12%, transparent);
border-radius: 999px;
padding-block: 6px;
padding-inline: 10px 12px;
}
.landing-page .lp-final-cta-proof li::before {
content: "✓";
color: var(--lp-wa);
font-weight: 700;
font-size: 12px;
}
.landing-page .lp-qr-stage {
background: var(--lp-paper);
border-radius: 14px;
padding: 28px;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
box-shadow:
0 30px 60px -20px color-mix(in oklch, var(--lp-shadow-ink) 40%, transparent),
0 4px 0 0 var(--lp-yellow-pop);
transform: rotate(-1.5deg);
position: relative;
isolation: isolate;
}
.landing-page .lp-qr-stage::before {
content: "";
position: absolute;
inset: -18% -16%;
background:
radial-gradient(circle at 28% 28%, rgba(217, 168, 58, 0.30), transparent 60%),
radial-gradient(circle at 72% 72%, rgba(62, 127, 201, 0.22), transparent 60%);
border-radius: 36px;
z-index: -1;
pointer-events: none;
}
.landing-page .lp-qr-stage .lp-qr-cap {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 500;
color: var(--lp-ink);
text-align: center;
line-height: 1.3;
}
.landing-page .lp-qr-stage .lp-qr-cap small {
display: block;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 400;
color: var(--lp-ink-mute);
margin-top: 4px;
}
.landing-page .lp-qr-stage .lp-qr-arrow {
font-family: var(--font-handwritten);
font-size: 20px;
color: var(--lp-terracotta);
align-self: flex-start;
margin-block: -6px -8px;
margin-inline: 4px 0;
}
.landing-page .lp-referral {
background: var(--lp-paper-warm);
color: var(--lp-ink);
padding: var(--lp-section-y) 0;
position: relative;
overflow: hidden;
}
.landing-page .lp-referral-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 80px;
align-items: center;
}
.landing-page .lp-referral-story {
width: min(420px, 100%);
justify-self: center;
display: flex;
flex-direction: column;
gap: 26px;
}
.landing-page .lp-referral-beat {
display: flex;
flex-direction: column;
}
.landing-page .lp-referral-beat:last-child {
max-width: 88%;
align-self: flex-end;
}
.landing-page .lp-referral-beat .lp-phone-sample {
padding: 10px 12px 12px;
}
.landing-page .lp-referral-beat .lp-phone__msg--reacted {
margin-bottom: 12px;
}
.landing-page .lp-referral h2 {
color: var(--lp-ink);
font-size: clamp(36px, 4vw, 52px);
line-height: 1.05;
font-weight: 400;
margin-bottom: 20px;
}
.landing-page .lp-referral h2 em {
color: var(--lp-terracotta);
font-style: italic;
}
.landing-page .lp-referral p {
color: var(--lp-ink-soft);
font-size: 18px;
line-height: 1.55;
margin-bottom: 28px;
max-width: 44ch;
}
.landing-page .lp-referral .lp-reward {
display: flex;
align-items: stretch;
width: fit-content;
gap: 10px;
margin-bottom: 28px;
}
.landing-page .lp-referral .lp-reward-cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 16px 24px;
background: var(--color-surface);
border: 1px solid var(--lp-rule);
border-radius: 12px;
min-width: 120px;
}
.landing-page .lp-referral .lp-reward-big {
font-family: var(--font-serif);
font-size: 30px;
font-weight: 380;
color: var(--lp-terracotta);
line-height: 1;
}
.landing-page .lp-referral .lp-reward-label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
color: var(--lp-ink-mute);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.landing-page .lp-referral .lp-reward-plus {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-serif);
font-size: 28px;
font-weight: 380;
color: var(--lp-ink-faint);
line-height: 1;
padding: 0 4px;
}
.landing-page .lp-seals {
padding: 56px 0;
background: var(--lp-paper);
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-seals.lp-bg-warm {
border-top: 0;
}
.landing-page .lp-seals-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 24px 48px;
color: var(--lp-ink-mute);
}
.landing-page .lp-seal {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
}
.landing-page .lp-seal svg {
flex-shrink: 0;
color: var(--lp-terracotta);
opacity: 0.85;
}
.landing-page .lp-seal strong {
color: var(--lp-ink);
font-weight: 600;
font-size: 13px;
}
@media (max-width: 720px) {
.landing-page .lp-seals {
padding: 40px 0;
}
.landing-page .lp-seals-row {
gap: 20px 32px;
}
}
.landing-page .lp-testimonials {
padding: 72px 0;
background: var(--lp-paper);
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.landing-page .lp-testimonial-card {
margin: 0;
padding: 26px 28px;
background: var(--lp-white);
border: 1px solid var(--lp-rule);
border-top: 3px solid var(--lp-terracotta);
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow-soft);
}
.landing-page .lp-testimonial-card blockquote {
margin: 0 0 18px;
}
.landing-page .lp-testimonial-card blockquote p {
margin: 0;
font-size: var(--lp-fs-base);
color: var(--lp-ink-soft);
line-height: 1.6;
}
.landing-page .lp-testimonial-card figcaption {
font-size: 13px;
color: var(--lp-ink-mute);
}
.landing-page .lp-testimonial-card figcaption strong {
display: block;
color: var(--lp-ink);
font-weight: 600;
}
@media (max-width: 720px) {
.landing-page .lp-testimonials {
padding: 48px 0;
}
}
}
@layer features {
.landing-page .lp-site-footer {
padding: 72px 0 0;
background: var(--lp-paper-warm);
color: var(--lp-ink-soft);
font-size: 14px;
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-site-footer .lp-grid {
display: grid;
grid-template-columns: 1.6fr;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 48px;
padding-bottom: 56px;
}
.landing-page .lp-site-footer .lp-footer-about .lp-brand {
color: var(--lp-ink);
}
.landing-page .lp-site-footer .lp-footer-desc {
margin: 18px 0 0;
font-size: 14px;
line-height: 1.55;
max-width: 38ch;
color: var(--lp-ink-mute);
}
.landing-page .lp-site-footer .lp-footer-social {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
margin-top: 16px;
}
.landing-page .lp-site-footer .lp-footer-social a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--lp-ink-mute);
transition: color 0.15s ease;
}
.landing-page .lp-site-footer .lp-footer-social a:hover {
color: var(--lp-terracotta);
}
.landing-page .lp-site-footer .lp-footer-col h2 {
font-family: var(--font-mono);
font-size: var(--lp-fs-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--lp-ink-mute);
margin: 0 0 18px;
font-weight: 600;
}
.landing-page .lp-site-footer .lp-footer-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.landing-page .lp-site-footer .lp-footer-col ul li a {
color: var(--lp-ink-soft);
font-size: 14px;
transition: color 0.15s ease;
}
.landing-page .lp-site-footer .lp-footer-col ul li a:hover {
color: var(--lp-terracotta);
}
.landing-page .lp-site-footer .lp-footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 24px;
padding: 20px 0 24px;
border-top: 1px solid
color-mix(in oklch, var(--lp-ink-faint) 30%, transparent);
font-size: 12.5px;
color: var(--lp-ink-mute);
}
.landing-page .lp-site-footer .lp-footer-bottom p {
margin: 0;
max-width: none;
}
.landing-page .lp-site-footer .lp-footer-made {
flex-shrink: 0;
}
.landing-page .lp-site-footer .lp-footer-legal b {
color: var(--lp-ink-soft);
font-weight: 600;
}
}
@layer features {
@media (max-width: 980px), (any-pointer: coarse) {
.landing-page .btn,
.landing-page .lp-billing-toggle button {
min-block-size: 44px;
}
.landing-page .lp-nav-group-btn,
.landing-page .lp-topnav .lp-link,
.landing-page .lp-lang-hint-close {
min-block-size: 44px;
min-inline-size: 44px;
align-items: center;
}
.landing-page .lp-billing-toggle button {
min-inline-size: 44px;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-lang-list > a,
.landing-page .lp-site-footer .lp-lang-list > a,
.landing-page .lp-site-footer .lp-footer-social a,
.landing-page .lp-site-footer .lp-footer-col ul li a {
display: inline-flex;
min-block-size: 44px;
min-inline-size: 44px;
align-items: center;
}
.landing-page .lp-site-footer .lp-footer-col ul {
gap: 0;
}
}
@media (min-width: 981px) and (any-pointer: coarse) {
.landing-page .lp-topnav .lp-link {
display: inline-flex;
}
}
@media (max-width: 980px) {
.landing-page .lp-hero-grid,
.landing-page .lp-diff-grid,
.landing-page .lp-referral-grid,
.landing-page .lp-final-cta-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.landing-page .lp-declarations {
grid-template-columns: 1fr;
}
.landing-page .lp-hero-qr {
display: none;
}
.landing-page .lp-qr-stage,
.landing-page .lp-qr-aside {
display: none;
}
.landing-page .lp-topnav {
padding: 12px 20px;
gap: 12px;
}
.landing-page .lp-topnav-nav {
display: none;
}
.landing-page .lp-burger {
display: flex;
}
.landing-page .lp-topnav {
width: 100%;
background: var(--lp-paper);
border-bottom-color: var(--lp-rule);
}
.landing-page .lp-topnav[data-floating] {
top: 0;
width: 100%;
border-radius: 0;
border-color: transparent;
border-bottom-color: var(--lp-rule);
background: var(--lp-paper);
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: 0 10px 26px -18px color-mix(in oklch, var(--lp-shadow-color) 45%, transparent);
}
.landing-page .lp-actions-desktop-only {
display: none;
}
.landing-page .lp-topnav .lp-actions {
margin-inline-start: auto;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--lp-paper);
border-bottom: 1px solid var(--lp-rule);
box-shadow: 0 12px 24px -12px color-mix(in oklch, var(--lp-shadow-color) 12%, transparent);
padding: 4px 0;
max-height: calc(100vh - 96px);
max-height: calc(100dvh - 96px);
overflow-y: auto;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav a {
padding: 14px 24px;
font-size: 16px;
font-weight: 500;
border-bottom: 1px solid
color-mix(in oklch, var(--lp-rule) 50%, transparent);
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav a:last-child {
border-bottom: 0;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav a.is-active::after {
display: none;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav a.is-active {
color: var(--lp-terracotta);
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-nav-mobile-only {
display: block;
margin-top: 4px;
color: var(--lp-ink-mute);
font-size: 14px;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-lang-list {
display: flex;
gap: 6px 18px;
margin: 4px 0 0;
padding: 12px 24px 14px;
border-top: 1px solid color-mix(in oklch, var(--lp-rule) 50%, transparent);
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-lang-list > * {
padding: 4px 0;
font-size: 14px;
font-weight: 500;
border-bottom: 0;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-lang-list [aria-current] {
font-weight: 600;
}
.landing-page .lp-topnav-nav .lp-nav-group-btn {
display: none;
}
.landing-page .lp-nav-panel,
.landing-page .lp-nav-group-btn[aria-expanded="true"] + .lp-nav-panel {
display: block;
position: static;
transform: none;
width: auto;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
}
.landing-page .lp-nav-panel::before {
display: none;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-nav-group-label {
display: block;
padding: 12px 24px 4px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lp-ink-mute);
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-nav-card {
flex-direction: row;
align-items: baseline;
gap: 8px;
border-radius: 0;
background: none;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-nav-card strong {
font-size: 16px;
font-weight: 500;
color: inherit;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-nav-card span {
display: none;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-nav-card.is-active strong {
color: var(--lp-terracotta);
}
.landing-page .lp-site-footer .lp-grid {
grid-template-columns: 1fr 1fr;
grid-auto-flow: row;
gap: 36px;
}
.landing-page .lp-site-footer .lp-footer-about {
grid-column: 1 / -1;
}
.landing-page .lp-site-footer .lp-footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.landing-page .lp-hero h1 {
font-size: 44px;
}
.landing-page.lp-home .lp-hero .lp-lede {
font-size: 20px;
line-height: 1.4;
margin-bottom: 22px;
}
.landing-page .lp-audience {
grid-template-columns: 1fr;
}
.landing-page .lp-audience-col.lp-yes {
border-inline-end: none;
border-bottom: 1px solid var(--lp-rule);
}
.landing-page .lp-audience-col {
padding: 40px 24px;
}
.landing-page .lp-prose-feats {
grid-template-columns: 1fr;
gap: 40px;
max-width: none;
}
.landing-page .lp-prose-feats:has(> div:nth-child(3):last-child) {
grid-template-columns: 1fr;
gap: 40px;
max-width: none;
}
.landing-page .lp-prose-feats > div {
grid-template-columns: 36px 1fr;
gap: 0 16px;
}
.landing-page .lp-prose-feats > div:nth-child(odd):last-child {
max-width: none;
margin-inline: 0;
}
.landing-page .lp-credits-explainer .lp-ce-actions {
grid-template-columns: 1fr;
gap: 14px;
}
.landing-page .lp-price-reframe {
font-size: 17px;
}
}
@media (max-width: 800px) {
.landing-page .lp-hero-grid {
grid-template-columns: 1fr;
}
.landing-page .lp-hero h1 {
font-size: 44px;
}
.landing-page section {
padding: 44px 0;
}
.landing-page .lp-sect-head-block {
margin-bottom: 28px;
}
.landing-page .lp-sect-lede {
margin-top: 10px;
}
.landing-page .lp-audience {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.landing-page .lp-ribbon-wrap {
height: 90px;
}
.landing-page .lp-ribbon-wrap .lp-ribbon {
stroke-width: 4;
}
}
@media (max-width: 430px) {
.landing-page .lp-brand-logo {
width: 108px;
}
.landing-page .lp-topnav .lp-actions {
flex: 1 1 auto;
min-width: 0;
}
.landing-page .lp-topnav .lp-actions .btn {
width: 100%;
min-width: 0;
max-width: 100%;
padding-inline: 10px;
font-size: 14px;
line-height: 1.1;
white-space: nowrap;
overflow-wrap: normal;
}
}
@media (max-width: 24rem) {
.landing-page .lp-topnav {
padding-inline: 8px;
gap: 6px;
}
.landing-page .lp-brand-logo {
width: 88px;
}
.landing-page .lp-hero-grid > * {
min-width: 0;
}
.landing-page .lp-hero h1,
.landing-page .lp-hero .lp-lede,
.landing-page .lp-launch-note {
max-width: 100%;
overflow-wrap: anywhere;
}
html:lang(de) .landing-page.lp-home .lp-hero h1 {
font-size: 34px;
}
.landing-page .lp-hero-cta {
min-width: 0;
}
.landing-page .lp-hero-cta .btn {
min-width: 0;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}
.landing-page .lp-home-offer,
.landing-page .lp-home-offer__buy,
.landing-page .lp-home-offer__value {
min-width: 0;
}
.landing-page .lp-home-offer .lp-billing-toggle {
display: flex;
width: 100%;
min-width: 0;
}
.landing-page .lp-home-offer .lp-billing-toggle button {
flex: 1 1 auto;
min-width: 0;
padding-inline: 8px;
white-space: nowrap;
overflow-wrap: normal;
}
.landing-page .lp-home-offer .lp-nowrap {
white-space: normal;
overflow-wrap: anywhere;
}
.landing-page .lp-home-offer .lp-save-pill {
display: none;
}
.landing-page .lp-offer,
.landing-page .lp-offer__price-side,
.landing-page .lp-offer .lp-billing-toggle {
min-width: 0;
}
.landing-page .lp-offer .lp-billing-toggle {
display: flex;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.landing-page .lp-offer .lp-billing-toggle button {
flex: 1 1 auto;
min-inline-size: 44px;
padding-inline: 6px;
justify-content: center;
text-align: center;
white-space: nowrap;
overflow-wrap: normal;
}
.landing-page .lp-offer .lp-save-pill {
display: none;
}
.landing-page .lp-final-cta-grid > *,
.landing-page .lp-final-cta .lp-alt-btns,
.landing-page .lp-final-cta .lp-final-cta-proof,
.landing-page .lp-final-cta .lp-alt-btns > * {
min-width: 0;
max-width: 100%;
}
.landing-page .lp-final-cta .lp-alt-btns .btn {
white-space: normal;
overflow-wrap: anywhere;
}
.landing-page .lp-creed .lp-nowrap {
white-space: normal !important;
overflow-wrap: anywhere;
}
.landing-page .lp-lang-hint {
width: calc(100% - 32px);
max-width: none;
box-sizing: border-box;
}
.landing-page .lp-topnav .lp-actions {
flex: 1 1 auto;
min-width: 0;
}
.landing-page .lp-topnav .lp-actions .btn {
width: 100%;
min-width: 0;
white-space: nowrap;
overflow-wrap: normal;
text-align: center;
line-height: 1.1;
padding-inline: 6px;
}
.landing-page .lp-steps-cta-btns {
display: grid;
width: 100%;
grid-template-columns: minmax(0, 1fr);
}
.landing-page .lp-steps-cta-btns .btn {
width: 100%;
min-width: 0;
white-space: normal;
}
}
}